@govbr-ds/webcomponents 2.4.0 → 2.6.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/README.md +2 -2
- package/cem/custom-elements.json +4438 -1034
- package/cem/webcomponents.html-custom-data.json +491 -160
- package/dist/cjs/br-avatar.cjs.entry.js +4 -4
- package/dist/cjs/br-breadcrumb-item.cjs.entry.js +2 -2
- package/dist/cjs/br-breadcrumb.cjs.entry.js +11 -11
- package/dist/cjs/br-button_2.cjs.entry.js +6 -6
- package/dist/cjs/br-card.cjs.entry.js +4 -4
- package/dist/cjs/br-carousel-page.cjs.entry.js +3 -3
- package/dist/cjs/br-carousel.cjs.entry.js +5 -5
- package/dist/cjs/br-checkbox-group.cjs.entry.js +4 -4
- package/dist/cjs/br-checkbox.cjs.entry.js +5 -5
- package/dist/cjs/br-checkgroup.cjs.entry.js +2 -2
- package/dist/cjs/br-collapse_2.cjs.entry.js +10 -10
- package/dist/cjs/br-cookiebar-cookie.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-group.cjs.entry.js +4 -4
- package/dist/cjs/br-cookiebar-header.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-link.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-note-group.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-note.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar.cjs.entry.js +5 -5
- package/dist/cjs/br-crumb.cjs.entry.js +2 -2
- package/dist/cjs/br-date-picker_3.cjs.entry.js +165 -78
- package/dist/cjs/br-datetime-picker.cjs.entry.js +11 -28
- package/dist/cjs/br-divider.cjs.entry.js +4 -4
- package/dist/cjs/br-dropdown.cjs.entry.js +677 -0
- package/dist/cjs/br-footer-category.cjs.entry.js +4 -4
- package/dist/cjs/br-footer-item.cjs.entry.js +3 -3
- package/dist/cjs/br-footer-legal.cjs.entry.js +3 -3
- package/dist/cjs/br-footer-logo.cjs.entry.js +3 -3
- package/dist/cjs/br-footer-social.cjs.entry.js +3 -3
- package/dist/cjs/br-footer.cjs.entry.js +5 -5
- package/dist/cjs/br-header-function.cjs.entry.js +3 -3
- package/dist/cjs/br-header-link.cjs.entry.js +3 -3
- package/dist/cjs/br-header-list.cjs.entry.js +4 -4
- package/dist/cjs/br-header-logo.cjs.entry.js +3 -3
- package/dist/cjs/br-header.cjs.entry.js +6 -6
- package/dist/cjs/br-icon.cjs.entry.js +173 -159
- package/dist/cjs/br-input_2.cjs.entry.js +1427 -0
- package/dist/cjs/br-item.cjs.entry.js +4 -4
- package/dist/cjs/br-link.cjs.entry.js +9 -9
- package/dist/cjs/br-magic-button.cjs.entry.js +11 -12
- package/dist/cjs/br-menu-group.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-header.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-info.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-item.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-link.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-list.cjs.entry.js +2 -2
- package/dist/cjs/br-menu-logo.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-social.cjs.entry.js +2 -2
- package/dist/cjs/br-menu.cjs.entry.js +5 -5
- package/dist/cjs/br-modal.cjs.entry.js +2 -2
- package/dist/cjs/br-notification-body.cjs.entry.js +3 -3
- package/dist/cjs/br-notification-header.cjs.entry.js +3 -3
- package/dist/cjs/br-notification-item.cjs.entry.js +3 -3
- package/dist/cjs/br-notification.cjs.entry.js +4 -4
- package/dist/cjs/br-pagination_2.cjs.entry.js +2578 -0
- package/dist/cjs/br-radio-group.cjs.entry.js +5 -5
- package/dist/cjs/br-radio.cjs.entry.js +5 -5
- package/dist/cjs/br-scrim.cjs.entry.js +4 -4
- package/dist/cjs/br-select-input_3.cjs.entry.js +49 -103
- package/dist/cjs/br-sign-in.cjs.entry.js +4 -4
- package/dist/cjs/br-skip-link-item.cjs.entry.js +2 -2
- package/dist/cjs/br-skip-link.cjs.entry.js +3 -3
- package/dist/cjs/br-skiplink-item.cjs.entry.js +3 -3
- package/dist/cjs/br-slider.cjs.entry.js +4 -4
- package/dist/cjs/br-step_2.cjs.entry.js +7 -7
- package/dist/cjs/br-switch.cjs.entry.js +5 -5
- package/dist/cjs/br-tab-item.cjs.entry.js +3 -3
- package/dist/cjs/br-tab.cjs.entry.js +8 -8
- package/dist/cjs/br-table-action_6.cjs.entry.js +1500 -0
- package/dist/cjs/br-table-body.cjs.entry.js +4 -16
- package/dist/cjs/br-table-header.cjs.entry.js +4 -16
- package/dist/cjs/br-table.cjs.entry.js +2616 -433
- package/dist/cjs/br-tag.cjs.entry.js +5 -5
- package/dist/cjs/br-textarea.cjs.entry.js +4 -4
- package/dist/cjs/br-tooltip.cjs.entry.js +5 -29
- package/dist/cjs/br-upload.cjs.entry.js +5 -5
- package/dist/cjs/br-wizard-panel.cjs.entry.js +3 -3
- package/dist/cjs/br-wizard.cjs.entry.js +3 -3
- package/dist/cjs/{datetime-picker-constants-CCeI5iW7.js → datetime-picker-constants-CTf1kVJ1.js} +1 -0
- package/dist/cjs/helpers-DkkDubv1.js +28 -0
- package/dist/cjs/{icon.utils-DF6kMskA.js → icon.utils-CMs0ukvR.js} +1 -1
- package/dist/cjs/{iconify-icon-DfODV9bf.js → iconify-icon-LjavbM-D.js} +103 -57
- package/dist/cjs/{index-Bc30P_6z.js → index-BP8UIQro.js} +34 -34
- package/dist/cjs/{index-C-IpVFDH.js → index-Caoez3xb.js} +64 -16
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/{isValid-CduHZTFc.js → isValid-DgJ-noPS.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{slot-DAllytTj.js → slot-CjaqqX7y.js} +1 -1
- package/dist/cjs/table.utils-De-9_NgJ.js +749 -0
- package/dist/cjs/webcomponents.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/avatar/avatar.css +1 -1
- package/dist/collection/components/avatar/avatar.js +21 -21
- package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js +4 -12
- package/dist/collection/components/breadcrumb/breadcrumb.css +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +39 -34
- package/dist/collection/components/breadcrumb/crumb/crumb.js +2 -13
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/button/button.js +22 -22
- package/dist/collection/components/card/card.css +1 -1
- package/dist/collection/components/card/card.js +20 -22
- package/dist/collection/components/carousel/carousel-page/carousel-page.css +1 -1
- package/dist/collection/components/carousel/carousel-page/carousel-page.js +3 -13
- package/dist/collection/components/carousel/carousel.css +1 -1
- package/dist/collection/components/carousel/carousel.js +25 -32
- package/dist/collection/components/checkbox/checkbox.css +1 -1
- package/dist/collection/components/checkbox/checkbox.js +18 -24
- package/dist/collection/components/checkbox-group/checkbox-group.css +1 -1
- package/dist/collection/components/checkbox-group/checkbox-group.js +19 -20
- package/dist/collection/components/checkgroup/checkgroup.js +2 -14
- package/dist/collection/components/collapse/collapse.css +1 -1
- package/dist/collection/components/collapse/collapse.js +33 -29
- package/dist/collection/components/cookiebar/cookiebar-cookie/cookiebar-cookie.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-cookie/cookiebar-cookie.js +3 -16
- package/dist/collection/components/cookiebar/cookiebar-group/cookiebar-group.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-group/cookiebar-group.js +4 -17
- package/dist/collection/components/cookiebar/cookiebar-header/cookiebar-header.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-header/cookiebar-header.js +3 -16
- package/dist/collection/components/cookiebar/cookiebar-link/cookiebar-link.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-link/cookiebar-link.js +3 -15
- package/dist/collection/components/cookiebar/cookiebar-note/cookiebar-note.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-note/cookiebar-note.js +3 -14
- package/dist/collection/components/cookiebar/cookiebar-note-group/cookiebar-note-group.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-note-group/cookiebar-note-group.js +3 -14
- package/dist/collection/components/cookiebar/cookiebar.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar.js +33 -28
- package/dist/collection/components/datetime-picker/date-picker/date-picker-locale.js +62 -15
- package/dist/collection/components/datetime-picker/date-picker/date-picker.css +1 -1
- package/dist/collection/components/datetime-picker/date-picker/date-picker.js +123 -74
- package/dist/collection/components/datetime-picker/datetime-input/datetime-input.css +1 -1
- package/dist/collection/components/datetime-picker/datetime-input/datetime-input.js +5 -15
- package/dist/collection/components/datetime-picker/datetime-picker.css +1 -1
- package/dist/collection/components/datetime-picker/datetime-picker.js +23 -27
- package/dist/collection/components/datetime-picker/datetime-picker.utils.js +6 -6
- package/dist/collection/components/datetime-picker/time-picker/time-picker.css +1 -1
- package/dist/collection/components/datetime-picker/time-picker/time-picker.js +7 -17
- package/dist/collection/components/divider/divider.css +1 -1
- package/dist/collection/components/divider/divider.js +15 -19
- package/dist/collection/components/dropdown/dropdown.css +1 -1
- package/dist/collection/components/dropdown/dropdown.js +27 -28
- package/dist/collection/components/footer/footer-category/footer-category.css +1 -1
- package/dist/collection/components/footer/footer-category/footer-category.js +4 -17
- package/dist/collection/components/footer/footer-item/footer-item.css +1 -1
- package/dist/collection/components/footer/footer-item/footer-item.js +3 -16
- package/dist/collection/components/footer/footer-legal/footer-legal.css +1 -1
- package/dist/collection/components/footer/footer-legal/footer-legal.js +2 -16
- package/dist/collection/components/footer/footer-logo/footer-logo.css +1 -1
- package/dist/collection/components/footer/footer-logo/footer-logo.js +3 -16
- package/dist/collection/components/footer/footer-social/footer-social.css +1 -1
- package/dist/collection/components/footer/footer-social/footer-social.js +4 -16
- package/dist/collection/components/footer/footer.css +1 -1
- package/dist/collection/components/footer/footer.js +25 -29
- package/dist/collection/components/header/header-function/header-function.css +1 -1
- package/dist/collection/components/header/header-function/header-function.js +10 -14
- package/dist/collection/components/header/header-link/header-link.css +1 -1
- package/dist/collection/components/header/header-link/header-link.js +3 -16
- package/dist/collection/components/header/header-list/header-list.css +1 -1
- package/dist/collection/components/header/header-list/header-list.js +4 -17
- package/dist/collection/components/header/header-logo/header-logo.css +1 -1
- package/dist/collection/components/header/header-logo/header-logo.js +3 -16
- package/dist/collection/components/header/header.css +1 -1
- package/dist/collection/components/header/header.js +33 -30
- package/dist/collection/components/icon/default-icons-cache.js +159 -146
- package/dist/collection/components/icon/icon.css +1 -1
- package/dist/collection/components/icon/icon.js +38 -29
- package/dist/collection/components/icon/icon.utils.js +1 -1
- package/dist/collection/components/input/input.css +1 -1
- package/dist/collection/components/input/input.js +216 -30
- package/dist/collection/components/item/item.css +1 -1
- package/dist/collection/components/item/item.js +18 -22
- package/dist/collection/components/link/link.css +1 -1
- package/dist/collection/components/link/link.js +25 -29
- package/dist/collection/components/list/list.css +1 -1
- package/dist/collection/components/list/list.js +17 -21
- package/dist/collection/components/loading/loading.css +1 -1
- package/dist/collection/components/loading/loading.js +17 -24
- package/dist/collection/components/magic-button/magic-button.css +1 -1
- package/dist/collection/components/magic-button/magic-button.js +21 -29
- package/dist/collection/components/menu/menu-group/menu-group.css +1 -1
- package/dist/collection/components/menu/menu-group/menu-group.js +3 -16
- package/dist/collection/components/menu/menu-header/menu-header.css +1 -1
- package/dist/collection/components/menu/menu-header/menu-header.js +3 -16
- package/dist/collection/components/menu/menu-info/menu-info.css +1 -1
- package/dist/collection/components/menu/menu-info/menu-info.js +2 -15
- package/dist/collection/components/menu/menu-item/menu-item.css +1 -1
- package/dist/collection/components/menu/menu-item/menu-item.js +3 -16
- package/dist/collection/components/menu/menu-link/menu-link.css +1 -1
- package/dist/collection/components/menu/menu-link/menu-link.js +5 -17
- package/dist/collection/components/menu/menu-list/menu-list.css +1 -1
- package/dist/collection/components/menu/menu-list/menu-list.js +2 -15
- package/dist/collection/components/menu/menu-logo/menu-logo.css +1 -1
- package/dist/collection/components/menu/menu-logo/menu-logo.js +2 -15
- package/dist/collection/components/menu/menu-social/menu-social.css +1 -1
- package/dist/collection/components/menu/menu-social/menu-social.js +3 -16
- package/dist/collection/components/menu/menu.css +1 -1
- package/dist/collection/components/menu/menu.js +28 -35
- package/dist/collection/components/message/message.css +1 -1
- package/dist/collection/components/message/message.js +22 -25
- package/dist/collection/components/modal/modal.css +1 -1
- package/dist/collection/components/modal/modal.js +18 -21
- package/dist/collection/components/notification/notification-body/notification-body.css +1 -1
- package/dist/collection/components/notification/notification-body/notification-body.js +3 -13
- package/dist/collection/components/notification/notification-header/notification-header.css +1 -1
- package/dist/collection/components/notification/notification-header/notification-header.js +3 -14
- package/dist/collection/components/notification/notification-item/notification-item.css +1 -1
- package/dist/collection/components/notification/notification-item/notification-item.js +3 -16
- package/dist/collection/components/notification/notification.css +1 -1
- package/dist/collection/components/notification/notification.js +20 -29
- package/dist/collection/components/pagination/pagination.css +1 -1
- package/dist/collection/components/pagination/pagination.js +19 -27
- package/dist/collection/components/radio/radio.css +1 -1
- package/dist/collection/components/radio/radio.js +17 -20
- package/dist/collection/components/radio-group/radio-group.css +1 -1
- package/dist/collection/components/radio-group/radio-group.js +20 -20
- package/dist/collection/components/scrim/scrim.css +1 -1
- package/dist/collection/components/scrim/scrim.js +14 -17
- package/dist/collection/components/select/select-input/select-input.css +1 -1
- package/dist/collection/components/select/select-input/select-input.js +48 -102
- package/dist/collection/components/select/select-list/select-list.css +1 -1
- package/dist/collection/components/select/select-list/select-list.js +52 -15
- package/dist/collection/components/select/select-option/select-option.css +1 -1
- package/dist/collection/components/select/select-option/select-option.js +13 -17
- package/dist/collection/components/select/select.css +1 -1
- package/dist/collection/components/select/select.js +104 -110
- package/dist/collection/components/sign-in/sign-in.css +1 -1
- package/dist/collection/components/sign-in/sign-in.js +12 -16
- package/dist/collection/components/skip-link/skip-link-item/skip-link-item-alias.js +8 -4
- package/dist/collection/components/skip-link/skip-link-item/skip-link-item.css +1 -1
- package/dist/collection/components/skip-link/skip-link-item/skip-link-item.js +5 -15
- package/dist/collection/components/skip-link/skip-link.css +1 -1
- package/dist/collection/components/skip-link/skip-link.js +18 -24
- package/dist/collection/components/slider/slider.css +1 -1
- package/dist/collection/components/slider/slider.js +18 -28
- package/dist/collection/components/step/step-item/step-item.css +1 -1
- package/dist/collection/components/step/step-item/step-item.js +5 -15
- package/dist/collection/components/step/step.css +1 -1
- package/dist/collection/components/step/step.js +16 -25
- package/dist/collection/components/switch/switch.css +1 -1
- package/dist/collection/components/switch/switch.js +16 -20
- package/dist/collection/components/tab/tab-item/tab-item.css +1 -1
- package/dist/collection/components/tab/tab-item/tab-item.js +6 -16
- package/dist/collection/components/tab/tab.css +1 -1
- package/dist/collection/components/tab/tab.js +24 -31
- package/dist/collection/components/table/table-action/table-action.css +1 -0
- package/dist/collection/components/table/table-action/table-action.js +349 -0
- package/dist/collection/components/table/table-bar/table-bar.css +1 -0
- package/dist/collection/components/table/table-bar/table-bar.js +652 -0
- package/dist/collection/components/table/table-body/table-body.css +1 -1
- package/dist/collection/components/table/table-body/table-body.js +11 -26
- package/dist/collection/components/table/table-cell/table-cell.css +1 -1
- package/dist/collection/components/table/table-cell/table-cell.js +555 -91
- package/dist/collection/components/table/table-footer/table-footer.css +1 -0
- package/dist/collection/components/table/table-footer/table-footer.js +233 -0
- package/dist/collection/components/table/table-header/table-header.css +1 -1
- package/dist/collection/components/table/table-header/table-header.js +10 -26
- package/dist/collection/components/table/table-header-cell/table-header-cell.css +1 -1
- package/dist/collection/components/table/table-header-cell/table-header-cell.js +286 -95
- package/dist/collection/components/table/table-row/table-row.css +1 -1
- package/dist/collection/components/table/table-row/table-row.js +311 -66
- package/dist/collection/components/table/table.actions-tooltip.js +33 -0
- package/dist/collection/components/table/{table-constants.js → table.constants.js} +54 -77
- package/dist/collection/components/table/table.css +1 -1
- package/dist/collection/components/table/table.data.js +461 -0
- package/dist/collection/components/table/table.expansion.elements.js +70 -0
- package/dist/collection/components/table/table.expansion.js +179 -0
- package/dist/collection/components/table/table.grouping.js +97 -0
- package/dist/collection/components/table/table.header-height.js +47 -0
- package/dist/collection/components/table/table.js +2499 -625
- package/dist/collection/components/table/table.keyboard.js +340 -0
- package/dist/collection/components/table/table.scroll-shadows.js +36 -0
- package/dist/collection/components/table/table.selection.elements.js +63 -0
- package/dist/collection/components/table/table.selection.js +239 -0
- package/dist/collection/components/table/table.tokens.js +28 -0
- package/dist/collection/components/table/table.types.js +1 -0
- package/dist/collection/components/table/table.utils.js +75 -0
- package/dist/collection/components/table/table.virtual-list.js +342 -0
- package/dist/collection/components/tag/tag.css +1 -1
- package/dist/collection/components/tag/tag.js +17 -26
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/textarea/textarea.js +14 -22
- package/dist/collection/components/tooltip/tooltip.css +1 -1
- package/dist/collection/components/tooltip/tooltip.js +15 -45
- package/dist/collection/components/upload/upload.css +1 -1
- package/dist/collection/components/upload/upload.js +36 -29
- package/dist/collection/components/wizard/wizard-panel/wizard-panel.css +1 -1
- package/dist/collection/components/wizard/wizard-panel/wizard-panel.js +3 -13
- package/dist/collection/components/wizard/wizard.css +1 -1
- package/dist/collection/components/wizard/wizard.js +22 -26
- package/dist/collection/pages/components/select/remote-options.js +87 -0
- package/dist/collection/pages/scripts/code-editor.js +28 -3
- package/dist/collection/pages/scripts/pageLoader.js +286 -20
- package/dist/collection/pages/scripts/pageloader-preview.js +3 -1
- package/dist/collection/shared/utils/slot.js +1 -1
- package/dist/components/br-avatar.js +1 -1
- package/dist/components/br-breadcrumb-item.js +1 -1
- package/dist/components/br-breadcrumb.js +1 -1
- package/dist/components/br-button.js +1 -1
- package/dist/components/br-card.js +1 -1
- package/dist/components/br-carousel-page.js +1 -1
- package/dist/components/br-carousel.js +1 -1
- package/dist/components/br-checkbox-group.js +1 -1
- package/dist/components/br-checkbox.js +1 -1
- package/dist/components/br-checkgroup.js +1 -1
- package/dist/components/br-collapse.js +1 -1
- package/dist/components/br-cookiebar-cookie.js +1 -1
- package/dist/components/br-cookiebar-group.js +1 -1
- package/dist/components/br-cookiebar-header.js +1 -1
- package/dist/components/br-cookiebar-link.js +1 -1
- package/dist/components/br-cookiebar-note-group.js +1 -1
- package/dist/components/br-cookiebar-note.js +1 -1
- package/dist/components/br-cookiebar.js +1 -1
- package/dist/components/br-crumb.js +1 -1
- package/dist/components/br-date-picker.js +1 -1
- package/dist/components/br-datetime-input.js +1 -1
- package/dist/components/br-datetime-picker.js +1 -1
- package/dist/components/br-divider.js +1 -1
- package/dist/components/br-dropdown.js +1 -1
- package/dist/components/br-footer-category.js +1 -1
- package/dist/components/br-footer-item.js +1 -1
- package/dist/components/br-footer-legal.js +1 -1
- package/dist/components/br-footer-logo.js +1 -1
- package/dist/components/br-footer-social.js +1 -1
- package/dist/components/br-footer.js +1 -1
- package/dist/components/br-header-function.js +1 -1
- package/dist/components/br-header-link.js +1 -1
- package/dist/components/br-header-list.js +1 -1
- package/dist/components/br-header-logo.js +1 -1
- package/dist/components/br-header.js +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +1 -1
- package/dist/components/br-item.js +1 -1
- package/dist/components/br-link.js +1 -1
- package/dist/components/br-list.js +1 -1
- package/dist/components/br-loading.js +1 -1
- package/dist/components/br-magic-button.js +1 -1
- package/dist/components/br-menu-group.js +1 -1
- package/dist/components/br-menu-header.js +1 -1
- package/dist/components/br-menu-info.js +1 -1
- package/dist/components/br-menu-item.js +1 -1
- package/dist/components/br-menu-link.js +1 -1
- package/dist/components/br-menu-list.js +1 -1
- package/dist/components/br-menu-logo.js +1 -1
- package/dist/components/br-menu-social.js +1 -1
- package/dist/components/br-menu.js +1 -1
- package/dist/components/br-message.js +1 -1
- package/dist/components/br-modal.js +1 -1
- package/dist/components/br-notification-body.js +1 -1
- package/dist/components/br-notification-header.js +1 -1
- package/dist/components/br-notification-item.js +1 -1
- package/dist/components/br-notification.js +1 -1
- package/dist/components/br-pagination.js +1 -1
- package/dist/components/br-radio-group.js +1 -1
- package/dist/components/br-radio.js +1 -1
- package/dist/components/br-scrim.js +1 -1
- package/dist/components/br-select-input.js +1 -1
- package/dist/components/br-select-list.js +1 -1
- package/dist/components/br-select-option.js +1 -1
- package/dist/components/br-select.js +1 -1
- package/dist/components/br-sign-in.js +1 -1
- package/dist/components/br-skip-link-item.js +1 -1
- package/dist/components/br-skip-link.js +1 -1
- package/dist/components/br-skiplink-item.js +1 -1
- package/dist/components/br-slider.js +1 -1
- package/dist/components/br-step-item.js +1 -1
- package/dist/components/br-step.js +1 -1
- package/dist/components/br-switch.js +1 -1
- package/dist/components/br-tab-item.js +1 -1
- package/dist/components/br-tab.js +1 -1
- package/dist/components/br-table-action.d.ts +11 -0
- package/dist/components/br-table-action.js +5 -0
- package/dist/components/br-table-bar.d.ts +11 -0
- package/dist/components/br-table-bar.js +5 -0
- package/dist/components/br-table-body.js +1 -1
- package/dist/components/br-table-cell.js +1 -1
- package/dist/components/br-table-footer.d.ts +11 -0
- package/dist/components/br-table-footer.js +5 -0
- package/dist/components/br-table-header-cell.js +1 -1
- package/dist/components/br-table-header.js +1 -1
- package/dist/components/br-table-row.js +1 -1
- package/dist/components/br-table.js +1 -1
- package/dist/components/br-tag.js +1 -1
- package/dist/components/br-textarea.js +1 -1
- package/dist/components/br-time-picker.js +1 -1
- package/dist/components/br-tooltip.js +1 -1
- package/dist/components/br-upload.js +1 -1
- package/dist/components/br-wizard-panel.js +1 -1
- package/dist/components/br-wizard.js +1 -1
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.js +1 -1
- package/dist/components/p-082jxuTj.js +5 -0
- package/dist/components/p-381n6AwK.js +5 -0
- package/dist/components/p-B5_zbRAr.js +5 -0
- package/dist/components/p-BE1gDPwC.js +5 -0
- package/dist/components/p-BV-c2pxt.js +5 -0
- package/dist/components/p-BfFbYAuJ.js +5 -0
- package/dist/components/{p-ta-24T1Z.js → p-Bi2E_w9Q.js} +1 -1
- package/dist/components/p-Bk8YcMql.js +5 -0
- package/dist/components/p-C3ISxUGw.js +5 -0
- package/dist/components/p-C3J0TVQO.js +5 -0
- package/dist/components/p-C6m13lCc.js +5 -0
- package/dist/components/{p-DBmwzG9E.js → p-CCWJ-H33.js} +1 -1
- package/dist/components/p-CJuHirYK.js +5 -0
- package/dist/components/{p-PV731d8s.js → p-CKS7ggLM.js} +1 -1
- package/dist/components/p-COSFBwu9.js +5 -0
- package/dist/components/{p-DsO4F0Cz.js → p-CVz_akHx.js} +1 -1
- package/dist/components/p-CWPrXYam.js +5 -0
- package/dist/components/p-C_DC6oQW.js +16 -0
- package/dist/components/p-Ca89D_0s.js +5 -0
- package/dist/components/p-CbN58CFi.js +5 -0
- package/dist/components/p-CjjxTkKb.js +5 -0
- package/dist/components/p-Ck9t4WSb.js +5 -0
- package/dist/components/p-CvfVwD6_.js +5 -0
- package/dist/components/p-D-1sfjhG.js +5 -0
- package/dist/components/p-D-p4vLlP.js +5 -0
- package/dist/components/p-D6DArHGH.js +5 -0
- package/dist/components/p-DD3BItoS.js +5 -0
- package/dist/components/{p-jOb1hCPi.js → p-DEIKwFIf.js} +1 -1
- package/dist/components/p-DHHAIESt.js +5 -0
- package/dist/components/{p-Jk_KQE5V.js → p-DMj5iO7_.js} +1 -1
- package/dist/components/p-DUI-S07G.js +5 -0
- package/dist/components/p-D_K9JH6J.js +5 -0
- package/dist/components/p-DiQp2Lap.js +5 -0
- package/dist/components/{p-rMnkh3Cy.js → p-Dn36Mj2E.js} +1 -1
- package/dist/components/{p-D-3G3Ioq.js → p-Dvbqhybt.js} +1 -1
- package/dist/components/p-Dy7MSvt-.js +5 -0
- package/dist/components/p-DywTXNHQ.js +5 -0
- package/dist/components/p-Ft_P7Roz.js +5 -0
- package/dist/components/{p-CbgKdASU.js → p-JkJjzmGm.js} +1 -1
- package/dist/components/p-KuiFoKDl.js +5 -0
- package/dist/components/p-MiiczSWA.js +5 -0
- package/dist/components/p-Um3K2SHu.js +5 -0
- package/dist/components/p-YxddSP6q.js +5 -0
- package/dist/components/p-Zk91ebVT.js +5 -0
- package/dist/components/p-jv2oG0vH.js +5 -0
- package/dist/components/p-nrG_Gd0c.js +5 -0
- package/dist/components/p-syLEZrcg.js +5 -0
- package/dist/components/p-ydfWTgrA.js +5 -0
- package/dist/esm/br-avatar.entry.js +5 -5
- package/dist/esm/br-breadcrumb-item.entry.js +2 -2
- package/dist/esm/br-breadcrumb.entry.js +12 -12
- package/dist/esm/br-button_2.entry.js +7 -7
- package/dist/esm/br-card.entry.js +4 -4
- package/dist/esm/br-carousel-page.entry.js +3 -3
- package/dist/esm/br-carousel.entry.js +6 -6
- package/dist/esm/br-checkbox-group.entry.js +5 -5
- package/dist/esm/br-checkbox.entry.js +6 -6
- package/dist/esm/br-checkgroup.entry.js +2 -2
- package/dist/esm/br-collapse_2.entry.js +11 -11
- package/dist/esm/br-cookiebar-cookie.entry.js +3 -3
- package/dist/esm/br-cookiebar-group.entry.js +4 -4
- package/dist/esm/br-cookiebar-header.entry.js +3 -3
- package/dist/esm/br-cookiebar-link.entry.js +4 -4
- package/dist/esm/br-cookiebar-note-group.entry.js +3 -3
- package/dist/esm/br-cookiebar-note.entry.js +3 -3
- package/dist/esm/br-cookiebar.entry.js +6 -6
- package/dist/esm/br-crumb.entry.js +2 -2
- package/dist/esm/br-date-picker_3.entry.js +165 -78
- package/dist/esm/br-datetime-picker.entry.js +10 -27
- package/dist/esm/br-divider.entry.js +5 -5
- package/dist/esm/br-dropdown.entry.js +675 -0
- package/dist/esm/br-footer-category.entry.js +4 -4
- package/dist/esm/br-footer-item.entry.js +4 -4
- package/dist/esm/br-footer-legal.entry.js +3 -3
- package/dist/esm/br-footer-logo.entry.js +4 -4
- package/dist/esm/br-footer-social.entry.js +4 -4
- package/dist/esm/br-footer.entry.js +6 -6
- package/dist/esm/br-header-function.entry.js +4 -4
- package/dist/esm/br-header-link.entry.js +4 -4
- package/dist/esm/br-header-list.entry.js +4 -4
- package/dist/esm/br-header-logo.entry.js +4 -4
- package/dist/esm/br-header.entry.js +7 -7
- package/dist/esm/br-icon.entry.js +174 -160
- package/dist/esm/br-input_2.entry.js +1424 -0
- package/dist/esm/br-item.entry.js +5 -5
- package/dist/esm/br-link.entry.js +10 -10
- package/dist/esm/br-magic-button.entry.js +12 -13
- package/dist/esm/br-menu-group.entry.js +3 -3
- package/dist/esm/br-menu-header.entry.js +3 -3
- package/dist/esm/br-menu-info.entry.js +3 -3
- package/dist/esm/br-menu-item.entry.js +4 -4
- package/dist/esm/br-menu-link.entry.js +4 -4
- package/dist/esm/br-menu-list.entry.js +2 -2
- package/dist/esm/br-menu-logo.entry.js +3 -3
- package/dist/esm/br-menu-social.entry.js +3 -3
- package/dist/esm/br-menu.entry.js +6 -6
- package/dist/esm/br-modal.entry.js +3 -3
- package/dist/esm/br-notification-body.entry.js +3 -3
- package/dist/esm/br-notification-header.entry.js +3 -3
- package/dist/esm/br-notification-item.entry.js +4 -4
- package/dist/esm/br-notification.entry.js +5 -5
- package/dist/esm/br-pagination_2.entry.js +2575 -0
- package/dist/esm/br-radio-group.entry.js +6 -6
- package/dist/esm/br-radio.entry.js +6 -6
- package/dist/esm/br-scrim.entry.js +5 -5
- package/dist/esm/br-select-input_3.entry.js +50 -104
- package/dist/esm/br-sign-in.entry.js +5 -5
- package/dist/esm/br-skip-link-item.entry.js +2 -2
- package/dist/esm/br-skip-link.entry.js +4 -4
- package/dist/esm/br-skiplink-item.entry.js +4 -4
- package/dist/esm/br-slider.entry.js +5 -5
- package/dist/esm/br-step_2.entry.js +8 -8
- package/dist/esm/br-switch.entry.js +6 -6
- package/dist/esm/br-tab-item.entry.js +4 -4
- package/dist/esm/br-tab.entry.js +9 -9
- package/dist/esm/br-table-action_6.entry.js +1493 -0
- package/dist/esm/br-table-body.entry.js +4 -16
- package/dist/esm/br-table-header.entry.js +4 -16
- package/dist/esm/br-table.entry.js +2591 -408
- package/dist/esm/br-tag.entry.js +6 -6
- package/dist/esm/br-textarea.entry.js +5 -5
- package/dist/esm/br-tooltip.entry.js +6 -30
- package/dist/esm/br-upload.entry.js +6 -6
- package/dist/esm/br-wizard-panel.entry.js +3 -3
- package/dist/esm/br-wizard.entry.js +4 -4
- package/dist/esm/{datetime-picker-constants-DDc4sADe.js → datetime-picker-constants-1l4_-FEJ.js} +1 -1
- package/dist/esm/helpers-BNW9pAhl.js +26 -0
- package/dist/esm/{icon.utils-zlORkiHQ.js → icon.utils-CXDYKUBz.js} +1 -1
- package/dist/esm/{iconify-icon-D3usVJE2.js → iconify-icon-C_DC6oQW.js} +103 -57
- package/dist/esm/{index-CytVKoHT.js → index-BQRBKuY0.js} +64 -17
- package/dist/esm/{index-ConyRdJe.js → index-CwL52661.js} +34 -35
- package/dist/esm/index.js +2 -2
- package/dist/esm/{isValid-Bee0Uvqc.js → isValid-wU7S6MI2.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{props-D07GjR4_.js → props-BbxNgEcJ.js} +1 -1
- package/dist/esm/{slot-BIG-yees.js → slot-Bt01zQ7-.js} +1 -1
- package/dist/esm/table.utils-CtVdlcgI.js +706 -0
- package/dist/esm/webcomponents.js +3 -3
- package/dist/hydrate/index.js +6573 -3030
- package/dist/hydrate/index.mjs +6573 -3030
- package/dist/types/components/avatar/avatar.d.ts +20 -20
- package/dist/types/components/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +3 -11
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +30 -25
- package/dist/types/components/breadcrumb/crumb/crumb.d.ts +1 -12
- package/dist/types/components/button/button.d.ts +20 -20
- package/dist/types/components/card/card.d.ts +19 -21
- package/dist/types/components/carousel/carousel-page/carousel-page.d.ts +2 -12
- package/dist/types/components/carousel/carousel.d.ts +22 -29
- package/dist/types/components/checkbox/checkbox.d.ts +16 -22
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +17 -18
- package/dist/types/components/checkgroup/checkgroup.d.ts +1 -13
- package/dist/types/components/collapse/collapse.d.ts +26 -22
- package/dist/types/components/cookiebar/cookiebar-cookie/cookiebar-cookie.d.ts +2 -15
- package/dist/types/components/cookiebar/cookiebar-group/cookiebar-group.d.ts +2 -15
- package/dist/types/components/cookiebar/cookiebar-header/cookiebar-header.d.ts +2 -15
- package/dist/types/components/cookiebar/cookiebar-link/cookiebar-link.d.ts +2 -14
- package/dist/types/components/cookiebar/cookiebar-note/cookiebar-note.d.ts +2 -13
- package/dist/types/components/cookiebar/cookiebar-note-group/cookiebar-note-group.d.ts +2 -13
- package/dist/types/components/cookiebar/cookiebar.d.ts +30 -25
- package/dist/types/components/datetime-picker/date-picker/date-picker-locale.d.ts +12 -4
- package/dist/types/components/datetime-picker/date-picker/date-picker.d.ts +57 -11
- package/dist/types/components/datetime-picker/datetime-input/datetime-input.d.ts +2 -12
- package/dist/types/components/datetime-picker/datetime-picker.d.ts +22 -26
- package/dist/types/components/datetime-picker/time-picker/time-picker.d.ts +3 -13
- package/dist/types/components/divider/divider.d.ts +14 -18
- package/dist/types/components/dropdown/dropdown.d.ts +21 -20
- package/dist/types/components/footer/footer-category/footer-category.d.ts +2 -15
- package/dist/types/components/footer/footer-item/footer-item.d.ts +2 -15
- package/dist/types/components/footer/footer-legal/footer-legal.d.ts +1 -15
- package/dist/types/components/footer/footer-logo/footer-logo.d.ts +2 -15
- package/dist/types/components/footer/footer-social/footer-social.d.ts +4 -17
- package/dist/types/components/footer/footer.d.ts +23 -27
- package/dist/types/components/header/header-function/header-function.d.ts +9 -13
- package/dist/types/components/header/header-link/header-link.d.ts +2 -15
- package/dist/types/components/header/header-list/header-list.d.ts +2 -15
- package/dist/types/components/header/header-logo/header-logo.d.ts +2 -15
- package/dist/types/components/header/header.d.ts +29 -26
- package/dist/types/components/icon/icon.d.ts +27 -22
- package/dist/types/components/icon/icon.utils.d.ts +1 -1
- package/dist/types/components/input/input.d.ts +46 -23
- package/dist/types/components/input/input.types.d.ts +18 -0
- package/dist/types/components/item/item.d.ts +17 -21
- package/dist/types/components/link/link.d.ts +18 -22
- package/dist/types/components/list/list.d.ts +16 -20
- package/dist/types/components/loading/loading.d.ts +16 -23
- package/dist/types/components/magic-button/magic-button.d.ts +17 -25
- package/dist/types/components/menu/menu-group/menu-group.d.ts +2 -15
- package/dist/types/components/menu/menu-header/menu-header.d.ts +2 -15
- package/dist/types/components/menu/menu-info/menu-info.d.ts +1 -14
- package/dist/types/components/menu/menu-item/menu-item.d.ts +2 -15
- package/dist/types/components/menu/menu-link/menu-link.d.ts +4 -16
- package/dist/types/components/menu/menu-list/menu-list.d.ts +2 -15
- package/dist/types/components/menu/menu-logo/menu-logo.d.ts +1 -14
- package/dist/types/components/menu/menu-social/menu-social.d.ts +4 -18
- package/dist/types/components/menu/menu.d.ts +25 -32
- package/dist/types/components/message/message.d.ts +21 -24
- package/dist/types/components/modal/modal.d.ts +18 -21
- package/dist/types/components/notification/notification-body/notification-body.d.ts +2 -12
- package/dist/types/components/notification/notification-header/notification-header.d.ts +2 -13
- package/dist/types/components/notification/notification-item/notification-item.d.ts +2 -15
- package/dist/types/components/notification/notification.d.ts +18 -27
- package/dist/types/components/pagination/pagination.d.ts +13 -21
- package/dist/types/components/radio/radio.d.ts +15 -18
- package/dist/types/components/radio-group/radio-group.d.ts +18 -18
- package/dist/types/components/scrim/scrim.d.ts +12 -15
- package/dist/types/components/select/select-input/select-input.d.ts +12 -14
- package/dist/types/components/select/select-list/select-list.d.ts +13 -12
- package/dist/types/components/select/select-option/select-option.d.ts +8 -11
- package/dist/types/components/select/select.d.ts +42 -94
- package/dist/types/components/sign-in/sign-in.d.ts +11 -15
- package/dist/types/components/skip-link/skip-link-item/skip-link-item-alias.d.ts +7 -3
- package/dist/types/components/skip-link/skip-link-item/skip-link-item.d.ts +4 -14
- package/dist/types/components/skip-link/skip-link.d.ts +17 -23
- package/dist/types/components/slider/slider.d.ts +18 -28
- package/dist/types/components/step/step-item/step-item.d.ts +2 -12
- package/dist/types/components/step/step.d.ts +15 -24
- package/dist/types/components/switch/switch.d.ts +14 -18
- package/dist/types/components/tab/tab-item/tab-item.d.ts +6 -16
- package/dist/types/components/tab/tab.d.ts +20 -27
- package/dist/types/components/table/table-action/table-action.d.ts +107 -0
- package/dist/types/components/table/table-bar/table-bar.d.ts +193 -0
- package/dist/types/components/table/table-body/table-body.d.ts +10 -25
- package/dist/types/components/table/table-cell/table-cell.d.ts +177 -46
- package/dist/types/components/table/table-footer/table-footer.d.ts +40 -0
- package/dist/types/components/table/table-footer/table-footer.types.d.ts +12 -0
- package/dist/types/components/table/table-header/table-header.d.ts +9 -25
- package/dist/types/components/table/table-header-cell/table-header-cell.d.ts +101 -62
- package/dist/types/components/table/table-row/table-row.d.ts +87 -38
- package/dist/types/components/table/table.actions-tooltip.d.ts +11 -0
- package/dist/types/components/table/{table-constants.d.ts → table.constants.d.ts} +50 -77
- package/dist/types/components/table/table.d.ts +601 -229
- package/dist/types/components/table/table.data.d.ts +78 -0
- package/dist/types/components/table/table.expansion.d.ts +65 -0
- package/dist/types/components/table/table.expansion.elements.d.ts +30 -0
- package/dist/types/components/table/table.grouping.d.ts +25 -0
- package/dist/types/components/table/table.header-height.d.ts +17 -0
- package/dist/types/components/table/table.keyboard.d.ts +53 -0
- package/dist/types/components/table/table.scroll-shadows.d.ts +11 -0
- package/dist/types/components/table/table.selection.d.ts +84 -0
- package/dist/types/components/table/table.selection.elements.d.ts +42 -0
- package/dist/types/components/table/table.tokens.d.ts +24 -0
- package/dist/types/components/table/table.types.d.ts +199 -0
- package/dist/types/components/table/table.utils.d.ts +52 -0
- package/dist/types/components/table/table.virtual-list.d.ts +96 -0
- package/dist/types/components/tag/tag.d.ts +15 -24
- package/dist/types/components/textarea/textarea.d.ts +13 -21
- package/dist/types/components/tooltip/tooltip.d.ts +12 -18
- package/dist/types/components/upload/upload.d.ts +20 -27
- package/dist/types/components/wizard/wizard-panel/wizard-panel.d.ts +2 -12
- package/dist/types/components/wizard/wizard.d.ts +21 -25
- package/dist/types/components.d.ts +4646 -5087
- package/dist/webcomponents/index.esm.js +1 -1
- package/dist/webcomponents/{p-6f1a4fbe.entry.js → p-07e80bf8.entry.js} +1 -1
- package/dist/webcomponents/p-10d81622.entry.js +5 -0
- package/dist/webcomponents/p-12d5f533.entry.js +5 -0
- package/dist/webcomponents/p-15699e8a.entry.js +5 -0
- package/dist/webcomponents/{p-7fda8b89.entry.js → p-15e2f5cc.entry.js} +1 -1
- package/dist/webcomponents/{p-198aa844.entry.js → p-16d27d5c.entry.js} +1 -1
- package/dist/webcomponents/p-18d3fab8.entry.js +5 -0
- package/dist/webcomponents/{p-DDc4sADe.js → p-1l4_-FEJ.js} +1 -1
- package/dist/webcomponents/p-23c916d9.entry.js +5 -0
- package/dist/webcomponents/p-2aee69fd.entry.js +5 -0
- package/dist/webcomponents/p-2d3db296.entry.js +5 -0
- package/dist/webcomponents/p-2ed6afdd.entry.js +5 -0
- package/dist/webcomponents/{p-42b60169.entry.js → p-30c865e6.entry.js} +1 -1
- package/dist/webcomponents/p-32afb78c.entry.js +5 -0
- package/dist/webcomponents/p-33d24cbd.entry.js +5 -0
- package/dist/webcomponents/p-35d63edd.entry.js +5 -0
- package/dist/webcomponents/p-3b1ff55e.entry.js +5 -0
- package/dist/webcomponents/p-3c7246cf.entry.js +5 -0
- package/dist/webcomponents/{p-6a293be8.entry.js → p-407e7b69.entry.js} +1 -1
- package/dist/webcomponents/p-41b12e3c.entry.js +5 -0
- package/dist/webcomponents/p-47adc17f.entry.js +5 -0
- package/dist/webcomponents/{p-18cf093a.entry.js → p-48fc8e56.entry.js} +1 -1
- package/dist/webcomponents/p-4a44c8b8.entry.js +5 -0
- package/dist/webcomponents/{p-ac68355e.entry.js → p-4b0f3701.entry.js} +1 -1
- package/dist/webcomponents/p-4b66200c.entry.js +5 -0
- package/dist/webcomponents/{p-5a7c2031.entry.js → p-4c0a1c05.entry.js} +1 -1
- package/dist/webcomponents/p-4c72d706.entry.js +5 -0
- package/dist/webcomponents/p-505173e0.entry.js +5 -0
- package/dist/webcomponents/p-50caea68.entry.js +5 -0
- package/dist/webcomponents/p-5419fd2c.entry.js +5 -0
- package/dist/webcomponents/{p-20477061.entry.js → p-5693e0e7.entry.js} +1 -1
- package/dist/webcomponents/p-58247764.entry.js +5 -0
- package/dist/webcomponents/p-5d0f4851.entry.js +5 -0
- package/dist/webcomponents/p-60c949c8.entry.js +5 -0
- package/dist/webcomponents/p-61b84035.entry.js +5 -0
- package/dist/webcomponents/p-62a74e0a.entry.js +5 -0
- package/dist/webcomponents/p-6450913e.entry.js +5 -0
- package/dist/webcomponents/p-66c8b8d9.entry.js +5 -0
- package/dist/webcomponents/{p-b55425b7.entry.js → p-67281ef1.entry.js} +1 -1
- package/dist/webcomponents/{p-0fc112fc.entry.js → p-6e128c7a.entry.js} +1 -1
- package/dist/webcomponents/p-725e92ab.entry.js +5 -0
- package/dist/webcomponents/{p-09c79c1d.entry.js → p-74726f20.entry.js} +1 -1
- package/dist/webcomponents/p-75bd655b.entry.js +5 -0
- package/dist/webcomponents/p-7bf78e48.entry.js +5 -0
- package/dist/webcomponents/p-7cc28ecf.entry.js +5 -0
- package/dist/webcomponents/p-7ec01a99.entry.js +5 -0
- package/dist/webcomponents/{p-2c8595d3.entry.js → p-7f17dbca.entry.js} +1 -1
- package/dist/webcomponents/p-8120f3ce.entry.js +5 -0
- package/dist/webcomponents/p-8ded7870.entry.js +5 -0
- package/dist/webcomponents/p-9ab989d1.entry.js +5 -0
- package/dist/webcomponents/p-9be642ff.entry.js +5 -0
- package/dist/webcomponents/p-9d41995a.entry.js +5 -0
- package/dist/webcomponents/p-C_DC6oQW.js +16 -0
- package/dist/webcomponents/{p-EbtQZm5s.js → p-CjVabz-h.js} +1 -1
- package/dist/webcomponents/{p-fOJu6uZR.js → p-CpE_G6IZ.js} +1 -1
- package/dist/webcomponents/{p-ConyRdJe.js → p-CwL52661.js} +2 -2
- package/dist/webcomponents/p-DnwERaeQ.js +5 -0
- package/dist/webcomponents/p-Zk91ebVT.js +5 -0
- package/dist/webcomponents/p-_BMaB_68.js +5 -0
- package/dist/webcomponents/p-a150b61d.entry.js +5 -0
- package/dist/webcomponents/p-a264acf6.entry.js +5 -0
- package/dist/webcomponents/p-a5616523.entry.js +5 -0
- package/dist/webcomponents/p-ae3dfb9c.entry.js +5 -0
- package/dist/webcomponents/p-b1aeb805.entry.js +5 -0
- package/dist/webcomponents/p-b8eea3ef.entry.js +5 -0
- package/dist/webcomponents/p-c6952f8d.entry.js +5 -0
- package/dist/webcomponents/p-c743e5c5.entry.js +5 -0
- package/dist/webcomponents/p-d0c659c3.entry.js +5 -0
- package/dist/webcomponents/p-d3dec923.entry.js +5 -0
- package/dist/webcomponents/{p-31a4694a.entry.js → p-d5405bbe.entry.js} +1 -1
- package/dist/webcomponents/{p-794b701b.entry.js → p-d6d3a552.entry.js} +1 -1
- package/dist/webcomponents/p-dab66328.entry.js +5 -0
- package/dist/webcomponents/{p-8116ee93.entry.js → p-db02533d.entry.js} +1 -1
- package/dist/webcomponents/p-dda22999.entry.js +5 -0
- package/dist/webcomponents/p-e2a46f44.entry.js +5 -0
- package/dist/webcomponents/{p-67774920.entry.js → p-e3680ff8.entry.js} +1 -1
- package/dist/webcomponents/p-e5b9652d.entry.js +5 -0
- package/dist/webcomponents/{p-fb76b1e0.entry.js → p-e7f02302.entry.js} +1 -1
- package/dist/webcomponents/p-f0720e23.entry.js +5 -0
- package/dist/webcomponents/p-f244009d.entry.js +5 -0
- package/dist/webcomponents/p-f32c40ee.entry.js +5 -0
- package/dist/webcomponents/p-f697abbd.entry.js +5 -0
- package/dist/webcomponents/p-f7ed35ef.entry.js +5 -0
- package/dist/webcomponents/p-f8576e0a.entry.js +5 -0
- package/dist/webcomponents/p-fcc62731.entry.js +5 -0
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/br-dropdown_2.cjs.entry.js +0 -2299
- package/dist/cjs/br-input.cjs.entry.js +0 -715
- package/dist/cjs/br-loading.cjs.entry.js +0 -567
- package/dist/cjs/br-pagination.cjs.entry.js +0 -916
- package/dist/cjs/br-table-cell.cjs.entry.js +0 -201
- package/dist/cjs/br-table-header-cell.cjs.entry.js +0 -189
- package/dist/cjs/br-table-row.cjs.entry.js +0 -95
- package/dist/cjs/table-constants-BOPSay0B.js +0 -183
- package/dist/collection/components/table/table-tokens.js +0 -50
- package/dist/collection/components/table/table-utils.js +0 -44
- package/dist/collection/pages/components/select/remote.js +0 -33
- package/dist/collection/pages/components/select/virtualized.js +0 -13
- package/dist/components/p-5h-W9_JR.js +0 -5
- package/dist/components/p-848QkYoM.js +0 -5
- package/dist/components/p-BFHvuEnN.js +0 -5
- package/dist/components/p-BH6QYnAr.js +0 -5
- package/dist/components/p-BcW8O6h2.js +0 -5
- package/dist/components/p-BicHMcSS.js +0 -5
- package/dist/components/p-Bs7iRQTG.js +0 -5
- package/dist/components/p-Bvrw9yWR.js +0 -5
- package/dist/components/p-BzQFMh9j.js +0 -5
- package/dist/components/p-CBHd0-fF.js +0 -5
- package/dist/components/p-CCPHCJjw.js +0 -5
- package/dist/components/p-CXMwM9m4.js +0 -5
- package/dist/components/p-CeNELttN.js +0 -5
- package/dist/components/p-CjtmJTLO.js +0 -5
- package/dist/components/p-D3usVJE2.js +0 -16
- package/dist/components/p-DDu3JV_r.js +0 -5
- package/dist/components/p-DFWqyfUe.js +0 -5
- package/dist/components/p-DL6xuxGG.js +0 -5
- package/dist/components/p-DOX9Uwk1.js +0 -5
- package/dist/components/p-DUq7uT2-.js +0 -5
- package/dist/components/p-Devw08cc.js +0 -5
- package/dist/components/p-Di96UxvH.js +0 -5
- package/dist/components/p-DiLI514I.js +0 -5
- package/dist/components/p-Dp3MsSXu.js +0 -5
- package/dist/components/p-DuLHFTpa.js +0 -5
- package/dist/components/p-DusornQ0.js +0 -5
- package/dist/components/p-OQpiDEK9.js +0 -5
- package/dist/components/p-XW6Hp_Jk.js +0 -5
- package/dist/esm/br-dropdown_2.entry.js +0 -2296
- package/dist/esm/br-input.entry.js +0 -713
- package/dist/esm/br-loading.entry.js +0 -565
- package/dist/esm/br-pagination.entry.js +0 -914
- package/dist/esm/br-table-cell.entry.js +0 -199
- package/dist/esm/br-table-header-cell.entry.js +0 -187
- package/dist/esm/br-table-row.entry.js +0 -93
- package/dist/esm/table-constants-CXMwM9m4.js +0 -170
- package/dist/types/components/table/table-tokens.d.ts +0 -46
- package/dist/types/components/table/table-types.d.ts +0 -107
- package/dist/types/components/table/table-utils.d.ts +0 -47
- package/dist/webcomponents/p-01801ac1.entry.js +0 -5
- package/dist/webcomponents/p-05b459f2.entry.js +0 -5
- package/dist/webcomponents/p-08ac6f09.entry.js +0 -5
- package/dist/webcomponents/p-09817344.entry.js +0 -5
- package/dist/webcomponents/p-13babfc4.entry.js +0 -5
- package/dist/webcomponents/p-15022ab7.entry.js +0 -5
- package/dist/webcomponents/p-172d42c2.entry.js +0 -5
- package/dist/webcomponents/p-1ba60d13.entry.js +0 -5
- package/dist/webcomponents/p-1bb96641.entry.js +0 -5
- package/dist/webcomponents/p-21feda62.entry.js +0 -5
- package/dist/webcomponents/p-23a5cfd7.entry.js +0 -5
- package/dist/webcomponents/p-32ea6342.entry.js +0 -5
- package/dist/webcomponents/p-3658adcf.entry.js +0 -5
- package/dist/webcomponents/p-37914e63.entry.js +0 -5
- package/dist/webcomponents/p-3b0dd0ff.entry.js +0 -5
- package/dist/webcomponents/p-42c9c6c5.entry.js +0 -5
- package/dist/webcomponents/p-473561f2.entry.js +0 -5
- package/dist/webcomponents/p-47c490ef.entry.js +0 -5
- package/dist/webcomponents/p-4b01c60f.entry.js +0 -5
- package/dist/webcomponents/p-5a5ed7d8.entry.js +0 -5
- package/dist/webcomponents/p-609cf652.entry.js +0 -5
- package/dist/webcomponents/p-614683d9.entry.js +0 -5
- package/dist/webcomponents/p-67605757.entry.js +0 -5
- package/dist/webcomponents/p-67d62559.entry.js +0 -5
- package/dist/webcomponents/p-695dbeb0.entry.js +0 -5
- package/dist/webcomponents/p-7352d459.entry.js +0 -5
- package/dist/webcomponents/p-745213f7.entry.js +0 -5
- package/dist/webcomponents/p-7ee564a1.entry.js +0 -5
- package/dist/webcomponents/p-821341dc.entry.js +0 -5
- package/dist/webcomponents/p-8aa6f07c.entry.js +0 -5
- package/dist/webcomponents/p-8ddf3ce3.entry.js +0 -5
- package/dist/webcomponents/p-95f3c44a.entry.js +0 -5
- package/dist/webcomponents/p-96dbb585.entry.js +0 -5
- package/dist/webcomponents/p-9815ab95.entry.js +0 -5
- package/dist/webcomponents/p-9e0324a7.entry.js +0 -5
- package/dist/webcomponents/p-CJipT0in.js +0 -5
- package/dist/webcomponents/p-CXMwM9m4.js +0 -5
- package/dist/webcomponents/p-D3usVJE2.js +0 -16
- package/dist/webcomponents/p-a038be16.entry.js +0 -5
- package/dist/webcomponents/p-a32d17cb.entry.js +0 -5
- package/dist/webcomponents/p-a46f068e.entry.js +0 -5
- package/dist/webcomponents/p-a89b684d.entry.js +0 -5
- package/dist/webcomponents/p-af888d13.entry.js +0 -5
- package/dist/webcomponents/p-b0124459.entry.js +0 -5
- package/dist/webcomponents/p-b063c12f.entry.js +0 -5
- package/dist/webcomponents/p-b07bfdc5.entry.js +0 -5
- package/dist/webcomponents/p-b5d25332.entry.js +0 -5
- package/dist/webcomponents/p-b609b464.entry.js +0 -5
- package/dist/webcomponents/p-b66ab52d.entry.js +0 -5
- package/dist/webcomponents/p-b8d4ace3.entry.js +0 -5
- package/dist/webcomponents/p-c717c745.entry.js +0 -5
- package/dist/webcomponents/p-ce3d689c.entry.js +0 -5
- package/dist/webcomponents/p-d08b6266.entry.js +0 -5
- package/dist/webcomponents/p-d6165aa0.entry.js +0 -5
- package/dist/webcomponents/p-dacb7e2c.entry.js +0 -5
- package/dist/webcomponents/p-db309a11.entry.js +0 -5
- package/dist/webcomponents/p-dc23cb2e.entry.js +0 -5
- package/dist/webcomponents/p-e241caf3.entry.js +0 -5
- package/dist/webcomponents/p-e661c024.entry.js +0 -5
- package/dist/webcomponents/p-e7107869.entry.js +0 -5
- package/dist/webcomponents/p-eb94199d.entry.js +0 -5
- package/dist/webcomponents/p-f8993ae4.entry.js +0 -5
- package/dist/webcomponents/p-f99d8c9c.entry.js +0 -5
- package/dist/webcomponents/p-fdcb54a3.entry.js +0 -5
- package/dist/webcomponents/p-fed02286.entry.js +0 -5
- /package/dist/collection/components/table/{table-types.js → table-footer/table-footer.types.js} +0 -0
- /package/dist/components/{p-5z6jgH1D.js → p-BNckUhK6.js} +0 -0
- /package/dist/webcomponents/{p-BIG-yees.js → p-Bt01zQ7-.js} +0 -0
- /package/dist/webcomponents/{p-zlORkiHQ.js → p-CXDYKUBz.js} +0 -0
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"tags": [
|
|
5
5
|
{
|
|
6
6
|
"name": "br-avatar",
|
|
7
|
-
"description": "O
|
|
7
|
+
"description": "O `br-avatar` representa uma pessoa ou entidade de forma compacta: mostra uma foto, a primeira letra de um nome ou um ícone de usuário.\n\n### Como o conteúdo é escolhido\n\n1. Com `iconic`, mostra sempre o ícone de usuário.\n2. Com `text`, mostra a primeira letra do texto em maiúscula.\n3. Com `src`, mostra a imagem. Se ela não carregar, mostra o ícone.\n4. Sem nenhum deles, mostra o ícone.\n\n```html\n<br-avatar src=\"/fotos/maria.jpg\" alt=\"Foto de Maria Souza\"></br-avatar>\n<br-avatar text=\"Maria\"></br-avatar>\n<br-avatar iconic></br-avatar>\n```\n\nPara indicar disponibilidade, ative `status`. A cor fica em `status-bg-color` e o texto lido pelo leitor de tela, em `status-label`. Para outro indicador, use o slot `status`.\n\n### Quando usar\n\n- Identificar a pessoa autenticada no cabeçalho ou no menu.\n- Mostrar autores, contatos ou participantes em listas.\n\n### Quando evitar\n\n- Imagens grandes ou ilustrativas: use `<img>`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/avatar?tab=designer).\n---\n\n\n### **Methods:**\n - **handleDensityChange(newValue: _AvatarDensity_)** - Observa mudanças na propriedade density para validação e sincronização com atributo DOM.\nGarante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.\n- **setFocus()** - Move o foco programaticamente para o avatar.\n\n### **Slots:**\n - **status** - Conteúdo customizado para o indicador de status. Quando usado, substitui a tag padrão.\n\n### **CSS Parts:**\n - **container** - Elemento externo do avatar.\n- **content** - Conteúdo interno do avatar (imagem, ícone ou texto).\n- **status** - Indicador de status posicionado sobre o avatar.",
|
|
8
8
|
"attributes": [
|
|
9
9
|
{
|
|
10
10
|
"name": "density",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
83
|
"name": "br-breadcrumb",
|
|
84
|
-
"description": "O
|
|
84
|
+
"description": "O `br-breadcrumb` mostra o caminho até a página atual e permite voltar aos níveis anteriores.\n\n### Como montar\n\n1. Declare um `br-breadcrumb-item` para cada nível, do início até a página atual.\n2. Use `home` no primeiro item para exibir o ícone de página inicial.\n3. Marque a página atual com `active`: ela aparece sem link e com `aria-current=\"page\"`.\n\n```html\n<br-breadcrumb>\n <br-breadcrumb-item home label=\"Início\" href=\"/\"></br-breadcrumb-item>\n <br-breadcrumb-item label=\"Serviços\" href=\"/servicos\"></br-breadcrumb-item>\n <br-breadcrumb-item label=\"Emitir documento\" active></br-breadcrumb-item>\n</br-breadcrumb>\n```\n\nOs mesmos itens podem ser passados em `crumbs`, como array ou texto JSON. Quando falta espaço, os níveis intermediários são agrupados; `truncate-after` define a partir de quantos itens isso acontece.\n\n### Navegação em SPA\n\nCom `navigation-mode=\"event\"`, o clique em um item emite `brNavigate`. Cancele o evento e passe o endereço para o roteador:\n\n```js\nbreadcrumb.addEventListener('brNavigate', (event) => {\n event.preventDefault();\n router.push(event.detail.href);\n});\n```\n\n### Quando usar\n\n- Páginas com dois ou mais níveis de hierarquia.\n\n### Quando evitar\n\n- Navegação sem hierarquia.\n- Etapas de um processo: use `br-wizard` ou `br-step`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/breadcrumb?tab=designer).\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Slots:**\n - **default** - Itens de breadcrumb declarados via elementos br-breadcrumb-item. O elemento br-crumb é aceito apenas por compatibilidade.\n\n### **CSS Parts:**\n - **nav** - Elemento nav do breadcrumb.\n- **list** - Lista ordenada de itens do breadcrumb.",
|
|
85
85
|
"attributes": [
|
|
86
86
|
{
|
|
87
87
|
"name": "custom-id",
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
},
|
|
96
96
|
{
|
|
97
97
|
"name": "home-href",
|
|
98
|
-
"description": "URL
|
|
98
|
+
"description": "URL padrão da página inicial. Quando informada, tem precedência sobre `homeUrl`.",
|
|
99
99
|
"values": []
|
|
100
100
|
},
|
|
101
101
|
{
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
"name": "br-breadcrumb-item",
|
|
121
|
-
"description": "
|
|
121
|
+
"description": "Representa um nível do `br-breadcrumb`. Use somente dentro dele.\n\nInforme `label` e `href`. Use `home` no primeiro item e `active` na página atual. O conteúdo do item, quando houver, substitui o texto de `label`.\n\nVeja como montar a trilha na documentação do `br-breadcrumb`.\n---\n\n\n### **Events:**\n - **brCrumbPropsChange** - Protocolo compatível com o listener atual do breadcrumb.\n\n### **Slots:**\n - **default** - Conteúdo alternativo do rótulo. Quando usado, substitui o texto fornecido em `label`.",
|
|
122
122
|
"attributes": [
|
|
123
123
|
{ "name": "label", "description": "Rótulo do item.", "values": [] },
|
|
124
124
|
{ "name": "href", "description": "URL do item.", "values": [] },
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
"name": "br-crumb",
|
|
145
|
-
"description": "@deprecated Use `br-breadcrumb-item`.\n\
|
|
145
|
+
"description": "@deprecated Use `br-breadcrumb-item`.\n\nNome antigo do `br-breadcrumb-item`, mantido para compatibilidade. Funciona da mesma forma; em código novo, use `br-breadcrumb-item`.\n---\n\n\n### **Events:**\n - **brCrumbPropsChange** - Evento disparado quando as propriedades do crumb mudam.\nO componente pai (br-breadcrumb) escuta este evento para se atualizar.\n\n### **Slots:**\n - **default** - Conteúdo alternativo do rótulo do item de navegação.",
|
|
146
146
|
"attributes": [
|
|
147
147
|
{
|
|
148
148
|
"name": "label",
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
},
|
|
175
175
|
{
|
|
176
176
|
"name": "br-button",
|
|
177
|
-
"description": "O
|
|
177
|
+
"description": "O `br-button` executa uma ação: salvar, enviar um formulário, abrir um modal, aplicar um filtro.\n\nO texto e o ícone vão dentro do botão. A aparência é definida por `emphasis` (`primary`, `secondary` ou `tertiary`) e `shape` (`circle`, `block` ou `pill`).\n\n```html\n<br-button emphasis=\"primary\" type=\"submit\">Enviar</br-button>\n\n<br-button shape=\"circle\" aria-label=\"Fechar\">\n <br-icon src=\"/icones/fechar.svg\"></br-icon>\n</br-button>\n```\n\nO tipo padrão é `button`. Use `type=\"submit\"` ou `type=\"reset\"` para agir sobre o formulário em que o botão está. Durante uma operação demorada, ative `loading`.\n\n### Quando usar\n\n- Executar uma ação na página atual.\n- Abrir modal, menu ou painel.\n\n### Quando evitar\n\n- Para ir a outra página: use `br-link` ou `<a>`.\n- Para escolher entre opções: use `br-radio` ou `br-checkbox`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/button?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Slot para o rótulo ou conteúdo do botão.\n\n### **CSS Parts:**\n - **button** - Parte para o elemento button interno, usada para estilos customizados via ::part(button).",
|
|
178
178
|
"attributes": [
|
|
179
179
|
{
|
|
180
180
|
"name": "color-mode",
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "active",
|
|
211
|
-
"description": "Estado ativo
|
|
211
|
+
"description": "Estado ativo atual. Quando informado, tem precedência sobre `isActive`.",
|
|
212
212
|
"values": []
|
|
213
213
|
},
|
|
214
214
|
{
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
},
|
|
219
219
|
{
|
|
220
220
|
"name": "loading",
|
|
221
|
-
"description": "Estado de carregamento
|
|
221
|
+
"description": "Estado de carregamento atual. Quando informado, tem precedência sobre `isLoading`.",
|
|
222
222
|
"values": []
|
|
223
223
|
},
|
|
224
224
|
{
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
},
|
|
272
272
|
{
|
|
273
273
|
"name": "br-card",
|
|
274
|
-
"description": "O
|
|
274
|
+
"description": "O `br-card` agrupa conteúdos sobre um mesmo assunto em um bloco destacado, como um serviço, uma notícia ou um resultado de busca.\n\nOrganize o conteúdo nos slots `media`, `header`, `content` e `footer`, ou coloque tudo no slot padrão.\n\n```html\n<br-card>\n <img slot=\"media\" src=\"/imagens/servico.jpg\" alt=\"\" />\n <h3 slot=\"header\">Carteira de Trabalho Digital</h3>\n <p slot=\"content\">Consulte seus vínculos de emprego.</p>\n <br-button slot=\"footer\" emphasis=\"secondary\">Acessar</br-button>\n</br-card>\n```\n\nUse `interactive` quando o card inteiro for clicável, para dar o retorno visual ao passar o mouse.\n\n### Quando usar\n\n- Blocos independentes exibidos em grade ou lista.\n- Conteúdo que combina imagem, título, texto e ações.\n\n### Quando evitar\n\n- Dados para comparar em linhas e colunas: use `br-table`.\n- Uma lista simples de textos ou links: use `br-list`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/card?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.\n- **media** - Slot para conteúdo de mídia exibido antes do cabeçalho.\n- **header** - Slot para o conteúdo do cabeçalho do card.\n- **content** - Slot para o corpo principal do card ao usar a estrutura de slots.\n- **footer** - Slot para o conteúdo do rodapé do card.\n\n### **CSS Parts:**\n - **wrapper** - Área principal do card.\n- **media** - Área de mídia do card.\n- **header** - Área do cabeçalho.\n- **content** - Área do conteúdo principal.\n- **footer** - Área do rodapé.",
|
|
275
275
|
"attributes": [
|
|
276
276
|
{
|
|
277
277
|
"name": "custom-id",
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
},
|
|
299
299
|
{
|
|
300
300
|
"name": "br-carousel",
|
|
301
|
-
"description": "O
|
|
301
|
+
"description": "O `br-carousel` mostra uma sequência de slides, um por vez, com botões de anterior e próximo e indicadores de posição.\n\nColoque cada slide em um `br-carousel-page` e dê um nome ao carrossel com `aria-label`.\n\n```html\n<br-carousel aria-label=\"Destaques\">\n <br-carousel-page>\n <img src=\"/imagens/campanha.jpg\" alt=\"Campanha de vacinação\" />\n </br-carousel-page>\n <br-carousel-page>\n <p>Atualize seu cadastro até 30 de junho.</p>\n </br-carousel-page>\n</br-carousel>\n```\n\nPara ouvir a troca de slide, use `brCarouselPageChange`; `detail.activePage` começa em 1.\n\n### Quando usar\n\n- Imagens ou avisos com a mesma importância, em espaço limitado.\n\n### Quando evitar\n\n- Informação essencial para a tarefa: mostre tudo de uma vez, por exemplo em uma grade de `br-card`.\n- Etapas de um formulário: use `br-wizard` ou `br-step`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/carousel?tab=designer).\n---\n\n\n### **Events:**\n - **brDidPageChange** - Emitido quando o slide ativo muda.\nDisparado por clique nos botões de navegação, clique no indicador de step,\ngesto swipe (apenas em mobile, breakpoint < 576px) ou avanço automático.\n`activePage` é 1-based: o primeiro slide emite `1`, o segundo `2`, e assim por diante.\n- **brCarouselPageChange** - Evento emitido quando o slide ativo muda.\n- **brDidAutoPlayStart** - Emitido quando a reprodução automática é iniciada ou retomada.\n- **brCarouselAutoplayStart** - Evento emitido quando a reprodução automática começa.\n- **brDidAutoPlayPause** - Emitido quando a reprodução automática é pausada.\n- **brCarouselAutoplayPause** - Evento emitido quando a reprodução automática é pausada.\n\n### **Methods:**\n - **onTablistKeydown(e: _KeyboardEvent_)** - Navegação por teclado para o modo tablist (`indicatorType=\"simple\"`).\n\nO W3C APG Carousel Pattern especifica que, quando os controles de seleção de slide\nsão implementados como tabs, a interação de teclado segue o\nhttps://www.w3.org/WAI/ARIA/apg/patterns/tabs/ Tabs Pattern (W3C APG).\nEsse padrão define o comportamento de roving tabindex com as teclas:\n- `ArrowLeft` / `ArrowRight` (ou `ArrowUp` / `ArrowDown`): move o foco entre as tabs.\n- `Home`: move o foco para a primeira tab.\n- `End`: move o foco para a última tab.\n\nO handler está no `br-carousel` (e não no `br-step`) porque a lógica de\n`effectiveCircular` é uma responsabilidade do carrossel, mantendo uma única\nfonte de verdade para a navegação circular.\n\nO evento `keydown` é composto (`composed: true`), portanto borbulha através do\nshadow DOM do `br-step-item` até o host do `br-carousel`.\n- **nextPage(): _Promise<void>_** - Avança para o próximo slide. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`).\n- **previousPage(): _Promise<void>_** - Retorna ao slide anterior. Respeita a prop `isCircular` (ou ativo automaticamente com `autoPlay`).\n- **goToPage(index: _number_): _Promise<void>_** - Navega para o slide de número `index` (1 = primeiro slide, 2 = segundo, …).\nValores fora do intervalo válido são ignorados.\n- **getActivePage(): _Promise<number>_** - Retorna o número do slide atualmente ativo (1 = primeiro slide, 2 = segundo, …).\n- **play(): _Promise<void>_** - Inicia ou retoma a reprodução automática programaticamente.\n- **pause(): _Promise<void>_** - Pausa a reprodução automática programaticamente.\n- **getIsPlaying(): _Promise<boolean>_** - Retorna `true` se a reprodução automática está ativa no momento.\n\n### **Slots:**\n - **default** - Slot para os slides do carrossel. Aceita exclusivamente elementos `br-carousel-page`.\n\n### **CSS Parts:**\n - **container** - Elemento raiz do carrossel. Recebe `role=\"region\"` e `aria-roledescription=\"carousel\"`.\n- **stage** - Área do palco que contém os slides. Recebe `aria-live` e `aria-atomic`.\n- **nav-prev** - Wrapper do botão de navegação para o slide anterior.\n- **nav-next** - Wrapper do botão de navegação para o próximo slide.\n- **indicator** - Wrapper do indicador de páginas. - Quando `indicatorType=\"simple\"`: renderiza `br-step` em `mode=\"tablist\"`. - Quando `indicatorType=\"textual\"`: renderiza um `span[aria-live]` com \"X/N\".\n- **play-button** - Wrapper do botão de play/pause. Presente apenas quando `autoPlay=true`.",
|
|
302
302
|
"attributes": [
|
|
303
303
|
{
|
|
304
304
|
"name": "custom-id",
|
|
@@ -390,7 +390,7 @@
|
|
|
390
390
|
},
|
|
391
391
|
{
|
|
392
392
|
"name": "br-carousel-page",
|
|
393
|
-
"description": "
|
|
393
|
+
"description": "Representa um slide do `br-carousel`. Use somente dentro dele.\n\nColoque no slide a imagem, o texto e as ações. Para começar em um slide que não seja o primeiro, marque-o com `active`; depois disso, o `br-carousel` controla o slide ativo.\n---\n\n\n### **Methods:**\n - **setLabel(defaultLabel: _string_): _Promise<void>_** - Define o label acessível (`aria-label`) do slide.\n\nChamado pelo `br-carousel` pai para aplicar o label gerado automaticamente\ncom base na posição do slide (ex: `\"Slide 1 de 3\"`).\n\nO `aria-label` declarado diretamente no elemento tem prioridade:\nse o consumidor definir `aria-label` no HTML ou via `setAttribute`,\nesse valor será mantido e o parâmetro `defaultLabel` será ignorado.\n- **setActive(active: _boolean_): _Promise<void>_** - Ativa ou desativa o slide.\n\n### **Slots:**\n - **default** - Qualquer conteúdo: imagens, textos, cards, vídeos, outros componentes do Design System.\n\n### **CSS Parts:**\n - **content** - Wrapper interno do conteúdo do slide.",
|
|
394
394
|
"attributes": [
|
|
395
395
|
{
|
|
396
396
|
"name": "custom-id",
|
|
@@ -407,7 +407,7 @@
|
|
|
407
407
|
},
|
|
408
408
|
{
|
|
409
409
|
"name": "br-checkbox",
|
|
410
|
-
"description": "O
|
|
410
|
+
"description": "O `br-checkbox` marca ou desmarca uma opção independente. Funciona em formulários como um `<input type=\"checkbox\">`: é enviado com `name` e `value` quando está marcado.\n\n```html\n<br-checkbox name=\"termos\" value=\"aceito\" label=\"Li e aceito os termos\" required></br-checkbox>\n```\n\nUse `indeterminate` para indicar seleção parcial, por exemplo em um \"selecionar todos\" quando só parte dos itens está marcada.\n\n### Quando usar\n\n- Opções em que escolher uma não impede escolher outra.\n- Confirmar uma condição, como aceitar termos.\n\n### Quando evitar\n\n- Só uma opção pode ser escolhida: use `br-radio-group`.\n- A mudança vale na hora, sem enviar formulário: use `br-switch`.\n- Muitas opções em pouco espaço: use `br-select` com `multiple`.\n\nPara várias opções da mesma pergunta, agrupe-as em um `br-checkbox-group`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/checkbox?tab=designer).\n---\n\n\n### **Events:**\n - **checkedChange** - Disparado depois que o valor do `checked` foi alterado.\n- **indeterminateChange** - Disparado depois que o valor do `indeterminate` foi alterado.\n- **brCheckboxValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Retorna `true` se o valor do checkbox for válido, caso contrário `false`.\nSe o checkbox for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise<boolean>_** - Retorna `true` se o valor do checkbox for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define uma mensagem de validação customizada para o checkbox.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise<boolean>_** - Executa o validator do checkbox e retorna se o valor atual é válido.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **setIndeterminate(value: _boolean_)** - Define o estado indeterminado do checkbox.\n- **toggleChecked()** - @deprecated Atualize a propriedade `checked` diretamente. - Inverte o valor da prop `checked`\n- **setNumberOfChildren(value: _number_)** - Define o número de checkboxes filhos em um grupo de checkboxes.\n\n### **Slots:**\n - **default** - Slot para o rótulo do checkbox, como alternativa à propriedade label.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **container** - Contêiner visual do checkbox.\n- **input** - Elemento input nativo do checkbox.\n- **label** - Rótulo do checkbox.\n- **feedback** - Contêiner da mensagem de validação.",
|
|
411
411
|
"attributes": [
|
|
412
412
|
{
|
|
413
413
|
"name": "indeterminate",
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
},
|
|
467
467
|
{
|
|
468
468
|
"name": "feedback-state",
|
|
469
|
-
"description": "Estado de feedback
|
|
469
|
+
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`.",
|
|
470
470
|
"values": [{ "name": "valid" }, { "name": "invalid" }]
|
|
471
471
|
},
|
|
472
472
|
{
|
|
@@ -484,7 +484,7 @@
|
|
|
484
484
|
},
|
|
485
485
|
{
|
|
486
486
|
"name": "br-checkbox-group",
|
|
487
|
-
"description": "O
|
|
487
|
+
"description": "O `br-checkbox-group` reúne checkboxes da mesma pergunta e adiciona um checkbox \"Selecionar tudo\" no topo.\n\nO \"Selecionar tudo\" marca ou desmarca todas as opções e fica em estado parcial quando só algumas estão marcadas. O `label` vira a legenda do grupo para leitores de tela.\n\n```html\n<br-checkbox-group label=\"Receber notificações por\">\n <br-checkbox name=\"canais\" value=\"email\" label=\"E-mail\"></br-checkbox>\n <br-checkbox name=\"canais\" value=\"sms\" label=\"SMS\"></br-checkbox>\n <br-checkbox name=\"canais\" value=\"app\" label=\"Aplicativo\"></br-checkbox>\n</br-checkbox-group>\n```\n\nUse `orientation=\"horizontal\"` para as opções lado a lado, e `select-all-label` e `unselect-all-label` para trocar os textos do \"Selecionar tudo\".\n\n### Quando usar\n\n- Várias opções independentes que respondem à mesma pergunta.\n\n### Quando evitar\n\n- Um único checkbox, como aceite de termos: use só o `br-checkbox`.\n- Apenas uma opção pode ser escolhida: use `br-radio-group`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/checkgroup?tab=designer).\n---\n\n\n### **Slots:**\n - **default** - Slot para adicionar os checkboxes controlados pelo grupo.",
|
|
488
488
|
"attributes": [
|
|
489
489
|
{
|
|
490
490
|
"name": "disabled",
|
|
@@ -526,7 +526,7 @@
|
|
|
526
526
|
},
|
|
527
527
|
{
|
|
528
528
|
"name": "br-checkgroup",
|
|
529
|
-
"description": "@deprecated Use `br-checkbox-group`.\n\
|
|
529
|
+
"description": "@deprecated Use `br-checkbox-group`.\n\nNome antigo do `br-checkbox-group`, mantido para compatibilidade. Em código novo, use `br-checkbox-group`.\n---\n\n\n### **Slots:**\n - **default** - Slot para adicionar os checkboxes controlados pelo grupo.",
|
|
530
530
|
"attributes": [
|
|
531
531
|
{
|
|
532
532
|
"name": "label",
|
|
@@ -573,7 +573,7 @@
|
|
|
573
573
|
},
|
|
574
574
|
{
|
|
575
575
|
"name": "br-collapse",
|
|
576
|
-
"description": "O
|
|
576
|
+
"description": "O `br-collapse` mostra e esconde um bloco de conteúdo ao clicar no título. Funciona como um `<details>`.\n\n```html\n<br-collapse>\n <span slot=\"trigger\">Quem pode solicitar?</span>\n <p>Qualquer pessoa com CPF regular.</p>\n</br-collapse>\n```\n\nUse `open` para começar aberto. Para que só um item fique aberto por vez (sanfona), dê o mesmo `accordion-group` a todos:\n\n```html\n<br-collapse accordion-group=\"faq\">…</br-collapse>\n<br-collapse accordion-group=\"faq\">…</br-collapse>\n```\n\nOs ícones de abrir e fechar podem ser trocados por `icon-to-show` e `icon-to-hide`, como propriedade ou como slot.\n\n### Quando usar\n\n- Perguntas frequentes e conteúdos longos divididos em tópicos.\n- Seções opcionais de um formulário longo.\n\n### Quando evitar\n\n- Informação essencial, que precisa ficar sempre visível.\n- Alternar entre visões diferentes da mesma tela: use `br-tab`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/collapse?tab=designer).\n---\n\n\n### **Events:**\n - **brDidOpen** - Emitido ao expandir, com o identificador e o grupo de accordion.\n- **brCollapseOpen** - Evento emitido ao expandir.\n- **brDidClose** - Emitido ao recolher, com o identificador e o grupo de accordion.\n- **brCollapseClose** - Evento emitido ao recolher.\n\n### **Methods:**\n - **openCollapse()** - @deprecated Atualize a propriedade `open`. - Abre o collapse programaticamente.\n- **closeCollapse()** - @deprecated Atualize a propriedade `open`. - Fecha o collapse programaticamente.\n- **toggle(): _Promise<void>_** - Alterna o estado aberto.\nO elemento também redispara o evento nativo `toggle` no host; essa ocorrência é sintética (`isTrusted === false`).\n- **render()** - Renderiza o <details> com acionador e conteúdo expansível.\n\n### **Slots:**\n - **default** - Slot para o conteúdo expansível exibido ao abrir o collapse.\n- **trigger** - Slot para personalizar o acionador (texto, ícones, imagens, etc.).\n- **icon-to-show** - Ícone exibido quando o conteúdo está oculto (ex.: `<i slot=\"icon-to-show\" class=\"fas fa-plus\"></i>`). Forma preferida para ícones por classe CSS; tem precedência sobre a prop `iconToShow`.\n- **icon-to-hide** - Ícone exibido quando o conteúdo está visível. Forma preferida para ícones por classe CSS; tem precedência sobre a prop `iconToHide`.\n\n### **CSS Parts:**\n - **details** - Elemento details nativo do collapse.\n- **trigger** - Acionador (summary) do collapse.\n- **content** - Área de conteúdo expansível.",
|
|
577
577
|
"attributes": [
|
|
578
578
|
{
|
|
579
579
|
"name": "custom-id",
|
|
@@ -597,12 +597,12 @@
|
|
|
597
597
|
},
|
|
598
598
|
{
|
|
599
599
|
"name": "icon-to-show",
|
|
600
|
-
"description": "Identificador
|
|
600
|
+
"description": "Identificador de ícone Font Awesome 5 Free presente no cache local, exibido quando o conteúdo está oculto.\nPara ícones por classe CSS, use o slot `icon-to-show`.",
|
|
601
601
|
"values": []
|
|
602
602
|
},
|
|
603
603
|
{
|
|
604
604
|
"name": "icon-to-hide",
|
|
605
|
-
"description": "Identificador
|
|
605
|
+
"description": "Identificador de ícone Font Awesome 5 Free presente no cache local, exibido quando o conteúdo está visível.\nPara ícones por classe CSS, use o slot `icon-to-hide`.",
|
|
606
606
|
"values": []
|
|
607
607
|
},
|
|
608
608
|
{
|
|
@@ -635,7 +635,7 @@
|
|
|
635
635
|
},
|
|
636
636
|
{
|
|
637
637
|
"name": "br-cookiebar",
|
|
638
|
-
"description": "O
|
|
638
|
+
"description": "O `br-cookiebar` avisa sobre o uso de cookies e registra o consentimento da pessoa, por categoria e por cookie.\n\nEle aparece como uma barra no rodapé (`mode=\"default\"`) e abre um painel com as categorias quando a pessoa escolhe \"Definir Cookies\" (`mode=\"open\"`).\n\n### Como usar\n\n1. Escreva o texto da barra em `info-text`.\n2. Coloque o título e a introdução do painel em um `br-cookiebar-header`.\n3. Crie um `br-cookiebar-group` por categoria e, dentro dele, um `br-cookiebar-cookie` por cookie. Use `group-opt-out=\"false\"` nas categorias que não podem ser desativadas.\n4. Adicione os links de política em `br-cookiebar-link`, no slot `links`.\n5. Ouça `brCookiebarResponse` para salvar a escolha e ative `show` somente enquanto não houver escolha salva.\n\n```html\n<br-cookiebar info-text=\"Usamos cookies para melhorar sua experiência.\">\n <br-cookiebar-header slot=\"header\" main-title=\"Aviso de cookies\" entry-text=\"Escolha quais cookies aceitar.\"></br-cookiebar-header>\n\n <br-cookiebar-group group-id=\"necessarios\" group-name=\"Necessários\" group-text=\"Essenciais para o site funcionar.\" group-opt-out=\"false\">\n <br-cookiebar-cookie cookie-id=\"sessao\" cookie-name=\"sessao\" expires=\"Ao fechar o navegador\" domain=\"exemplo.gov.br\" enterprise=\"Próprio\" purpose=\"Manter a sessão\" description=\"Identifica a sessão de acesso.\"></br-cookiebar-cookie>\n </br-cookiebar-group>\n\n <br-cookiebar-link slot=\"links\" name=\"Política de privacidade\" href=\"/privacidade\"></br-cookiebar-link>\n</br-cookiebar>\n```\n\n```js\nconst cookiebar = document.querySelector('br-cookiebar');\ncookiebar.show = !localStorage.getItem('consentimento');\ncookiebar.addEventListener('brCookiebarResponse', (event) => {\n localStorage.setItem('consentimento', JSON.stringify(event.detail));\n});\n```\n\n`event.detail` traz o estado de cada categoria (`cookieGroups`) e de cada cookie (`cookieList`). Para reabrir o painel depois, por exemplo num link \"Preferências de cookies\", chame `openPanel()`.\n\n### Quando evitar\n\n- Avisos que não tratam de consentimento: use `br-message` ou `br-notification`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/cookiebar?tab=designer).\n---\n\n\n### **Events:**\n - **brCookiebarShow** - Emitido quando o componente se torna visível (`show` → true).\n- **brCookiebarHide** - Emitido quando o componente é ocultado (`show` → false).\n- **brCookiebarOpen** - Emitido quando o painel expande para modo open.\n- **brCookiebarClose** - Emitido quando o painel recolhe para modo default.\n- **brCookiebarAccept** - Sinal emitido quando o usuário clica em Aceitar.\nNão carrega payload — ouça `brCookiebarResponse` para obter o estado completo de consentimento.\n- **brCookiebarReject** - Sinal emitido quando o usuário clica em \"Rejeitar não obrigatórios\".\nNão carrega payload — ouça `brCookiebarResponse` para obter o estado completo de consentimento.\n- **brCookiebarResponse** - Emitido após `brCookiebarAccept` ou `brCookiebarReject`, com o estado final de consentimento.\nÉ o único evento que carrega `CookiebarOutputData` — use-o para persistir o consentimento\n(localStorage, cookie HTTP, API etc.).\nNão é disparado durante interações com checkboxes e switches internos.\n- **brCookiebarPolicyClick** - Emitido quando o usuário clica no botão secundário no modo opt-in (`allOptOut=false`).\nO consumidor é responsável por navegar para a página de Política de Cookies.\n\n### **Methods:**\n - **handleShowChange(newValue: _boolean_)** - Observa mudanças em `show`.\nAo exibir o componente, garante que o modo inicial seja sempre `default` e emite `brCookiebarShow`.\nCom `scrim=true`, aplica `inert` nos irmãos e registra o trap de foco.\nCom `scrim=false`, o usuário pode navegar livremente pela página (WCAG 2.1.2).\nAo ocultar, emite `brCookiebarHide`.\n- **handleModeChange(newValue: _CookiebarMode_)** - Observa mudanças em `mode`.\nAo entrar em modo `open`, emite `brCookiebarOpen`, aplica `inert` nos irmãos e move o foco\npara o botão fechar (trap focus modal).\nAo sair do modo `open`, emite `brCookiebarClose` e — se `scrim=true` — reaplica `inert`\ne o listener de trap para o painel default. Sem scrim, nenhum trap é ativado.\n- **handleSelectAllPropChange(newValue: _boolean_)** - Observa mudanças externas na prop `selectAll`.\nSincroniza o estado interno do checkbox e propaga o valor para todos os grupos opt-out.\n- **handleGroupChange()** - Escuta o evento `brCookiebarGroupChange` emitido por qualquer `br-cookiebar-group` filho.\nApenas recalcula o estado visual do checkbox \"Selecionar tudo\" — não emite `brCookiebarResponse`.\nO evento de resposta completo é emitido somente ao clicar em Aceitar ou Rejeitar.\n- **openDefault(): _Promise<void>_** - Exibe o cookiebar no modo `default` (barra inferior).\n- **openPanel(): _Promise<void>_** - Exibe o cookiebar diretamente no modo `open` (painel de tela cheia).\n- **close(): _Promise<void>_** - Oculta o cookiebar.\n- **getSelectedCookies(): _Promise<CookiebarOutputData>_** - Retorna o JSON com o estado atual de seleção de todos os grupos e cookies.\n\n### **Slots:**\n - **default** - Recebe os subcomponentes `br-cookiebar-group`, `br-cookiebar-note-group` e `br-cookiebar-note`.\n- **header** - Recebe `br-cookiebar-header` ou HTML livre.\n- **links** - Recebe links complementares (`br-cookiebar-link` ou elementos `<a>` livres).\n- **actions** - Recebe botões de ação. Se vazio, o componente renderiza os botões padrão.\n\n### **CSS Parts:**\n - **container** - Container raiz do componente.\n- **default-panel** - Painel fechado (modo default).\n- **open-panel** - Painel expandido (modo open).\n- **header** - Cabeçalho do painel aberto.\n- **body** - Corpo do painel aberto (com rolagem).\n- **footer** - Rodapé com botões de ação.\n- **scrim** - Camada de sobreposição opcional.",
|
|
639
639
|
"attributes": [
|
|
640
640
|
{
|
|
641
641
|
"name": "custom-id",
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
},
|
|
743
743
|
{
|
|
744
744
|
"name": "br-cookiebar-cookie",
|
|
745
|
-
"description": "
|
|
745
|
+
"description": "Descreve um cookie dentro de um `br-cookiebar-group`: nome, validade, domínio, empresa responsável, finalidade e descrição.\n\nUse `cookie-opt-out=\"false\"` quando o cookie não puder ser desativado.\n---\n\n\n### **Events:**\n - **brCookiebarCookieChange** - Emitido ao ligar/desligar o switch.\nBorbulha até o `br-cookiebar-group` pai para recalcular o estado do grupo.\n\n### **Slots:**\n - **default** - Área livre para inserir conteúdo personalizado abaixo dos itens do cookie.\n\n### **CSS Parts:**\n - **card** - Container principal do cookie.\n- **switch** - Área que contém o switch de ativação.\n- **details** - Wrapper interno com o switch, alerta e lista de itens.",
|
|
746
746
|
"attributes": [
|
|
747
747
|
{
|
|
748
748
|
"name": "custom-id",
|
|
@@ -854,7 +854,7 @@
|
|
|
854
854
|
},
|
|
855
855
|
{
|
|
856
856
|
"name": "br-cookiebar-group",
|
|
857
|
-
"description": "
|
|
857
|
+
"description": "Uma categoria de cookies dentro do `br-cookiebar`, como \"Necessários\" ou \"Estatísticas\". Contém um `br-cookiebar-cookie` para cada cookie.\n\nInforme `group-id`, `group-name` e `group-text`. Use `group-opt-out=\"false\"` quando a categoria não puder ser desativada: ela aparece como \"Sempre ativo\".\n---\n\n\n### **Events:**\n - **brCookiebarGroupChange** - Emitido quando o estado de seleção do grupo muda (por interação do usuário ou propagação).\nO `br-cookiebar` pai escuta este evento para recalcular o checkbox \"Selecionar todos\".\n- **brCookiebarGroupToggle** - Emitido ao expandir ou recolher a lista de cookies do grupo.\n\n### **Methods:**\n - **handleGroupSelectedChange(newValue: _boolean_)** - Observa mudanças externas em `groupSelected` (propagação top-down do `br-cookiebar`).\nPropaga o novo valor para todos os cookies opt-out filhos e atualiza os contadores.\nIgnorado quando a mudança é originada internamente pelo recálculo bottom-up.\n- **handleCookieChange()** - Escuta o evento `brCookiebarCookieChange` emitido por qualquer `br-cookiebar-cookie` filho.\nRecalcula o estado do grupo (marcado / desmarcado / indeterminado) com base\nno estado atual de todos os cookies opt-out. Ignorado durante propagações top-down.\n- **getState(): _Promise<CookiebarSelectionState>_** - Retorna o estado atual de seleção do grupo:\n- `true`: todos os cookies opt-out estão selecionados.\n- `false`: nenhum cookie opt-out está selecionado.\n- `'indeterminate'`: seleção parcial.\n\n### **Slots:**\n - **default** - Recebe os subcomponentes `br-cookiebar-cookie` do grupo.\n\n### **CSS Parts:**\n - **container** - Div raiz do grupo.\n- **header** - Linha de cabeçalho com nome, contadores e controles.\n- **body** - Área expansível que contém os cookies.",
|
|
858
858
|
"attributes": [
|
|
859
859
|
{
|
|
860
860
|
"name": "custom-id",
|
|
@@ -916,7 +916,7 @@
|
|
|
916
916
|
},
|
|
917
917
|
{
|
|
918
918
|
"name": "br-cookiebar-header",
|
|
919
|
-
"description": "
|
|
919
|
+
"description": "Título e texto de introdução do painel do `br-cookiebar`. Use no slot `header` do cookiebar.\n\nInforme `main-title`, `entry-text` e, se quiser, a data em `last-update`. Para outro layout, coloque seu próprio conteúdo dentro do componente.\n---\n\n\n### **Slots:**\n - **default** - Conteúdo HTML personalizado que substitui o layout estruturado. Quando preenchido, as props `main-title`, `entry-text` e `last-update` são ignoradas.\n\n### **CSS Parts:**\n - **container** - Div raiz do cabeçalho.",
|
|
920
920
|
"attributes": [
|
|
921
921
|
{
|
|
922
922
|
"name": "custom-id",
|
|
@@ -948,7 +948,7 @@
|
|
|
948
948
|
},
|
|
949
949
|
{
|
|
950
950
|
"name": "br-cookiebar-link",
|
|
951
|
-
"description": "
|
|
951
|
+
"description": "Link do `br-cookiebar` para a política de privacidade ou os termos de uso. Use no slot `links` do cookiebar.\n\nInforme `name` e `href`. Em SPA, use `navigation-mode=\"event\"` e trate o evento `brNavigate`.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **CSS Parts:**\n - **link** - Elemento âncora (`<a>`) do link.",
|
|
952
952
|
"attributes": [
|
|
953
953
|
{
|
|
954
954
|
"name": "custom-id",
|
|
@@ -980,7 +980,7 @@
|
|
|
980
980
|
},
|
|
981
981
|
{
|
|
982
982
|
"name": "br-cookiebar-note",
|
|
983
|
-
"description": "
|
|
983
|
+
"description": "Uma pergunta e resposta complementar no painel do `br-cookiebar`. Informe `question` e `answer`.\n\nPara reunir várias notas, coloque-as em um `br-cookiebar-note-group`.\n---\n\n\n### **CSS Parts:**\n - **container** - Div raiz do item.\n- **question** - Parágrafo da pergunta.\n- **answer** - Parágrafo da resposta.",
|
|
984
984
|
"attributes": [
|
|
985
985
|
{
|
|
986
986
|
"name": "custom-id",
|
|
@@ -998,7 +998,7 @@
|
|
|
998
998
|
},
|
|
999
999
|
{
|
|
1000
1000
|
"name": "br-cookiebar-note-group",
|
|
1001
|
-
"description": "
|
|
1001
|
+
"description": "Agrupa notas do `br-cookiebar` em uma seção que pode ser expandida. O título vem de `note-title`.\n\nColoque dentro dele elementos `br-cookiebar-note` ou outro conteúdo.\n---\n\n\n### **Events:**\n - **brCookiebarNoteGroupToggle** - Emitido ao expandir ou recolher a seção.\n\n### **Slots:**\n - **default** - Recebe `br-cookiebar-note` ou qualquer conteúdo HTML livre.\n\n### **CSS Parts:**\n - **container** - Div raiz do grupo.\n- **header** - Cabeçalho acessível que expande ou recolhe o conteúdo.\n- **content** - Área de conteúdo exibida quando o grupo está expandido.",
|
|
1002
1002
|
"attributes": [
|
|
1003
1003
|
{
|
|
1004
1004
|
"name": "custom-id",
|
|
@@ -1020,7 +1020,7 @@
|
|
|
1020
1020
|
},
|
|
1021
1021
|
{
|
|
1022
1022
|
"name": "br-datetime-picker",
|
|
1023
|
-
"description": "O `br-datetime-picker` é
|
|
1023
|
+
"description": "O `br-datetime-picker` é um campo para informar data, hora ou data e hora. A pessoa pode digitar ou escolher no calendário e nos controles de horário.\n\nEscolha o tipo em `mode`: `date`, `time` ou `datetime`. Para início e fim, use `selection-mode=\"range\"`.\n\n```html\n<br-datetime-picker mode=\"date\" name=\"nascimento\" required></br-datetime-picker>\n\n<br-datetime-picker mode=\"date\" selection-mode=\"range\" name=\"periodo\"></br-datetime-picker>\n```\n\n### Ler o valor\n\n| Onde | Formato |\n| --- | --- |\n| `value` | `Date` (ou `null`) |\n| `rangeValue` | `{ start, end }` com `Date` |\n| `serialized-value` e envio do formulário | `2026-05-20` (data), `14:30` (hora), `2026-05-20T14:30:00-03:00` (data e hora), `início/fim` (intervalo) |\n\nAtribua valores do tipo `Date` pelo JavaScript (`picker.value = new Date()`), não por atributo. Para restringir datas, use `min`, `max` e `disabled-dates`.\n\n### Quando usar\n\n- Formulários que pedem uma data, um horário ou um período.\n\n### Quando evitar\n\n- Para só exibir uma data: use texto formatado.\n- Para escolher várias datas soltas: o componente aceita uma data ou um intervalo.\n\nO calendário (`br-date-picker`), os controles de horário (`br-time-picker`) e o campo de texto (`br-datetime-input`) são criados pelo próprio componente; não é preciso declará-los.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/datetimepicker?tab=designer).\n---\n\n\n### **Events:**\n - **dateStateChange** - Evento público emitido quando a data de referência ou a seleção mudam.\n\nPayload (`DatetimePickerDateState`):\n- `referenceDate`: Date — data usada para navegação visual (mês/semana exibidos).\n- `value`: Date | null — valor selecionado atualmente.\n- **brDatetimePickerChange** - Evento emitido quando a seleção muda.\n\nPayload (`DatetimePickerChangeDetail`):\n- `mode`: DatetimePickerMode — modo atual do componente (`date` | `time` | `datetime`).\n- `selectionMode`: DatetimePickerSelectionMode — `single` ou `range`.\n- `value`: Date | null | DatetimePickerDateRange — seleção atual (tipo depende de `selectionMode`).\n- `serializedValue`: string | undefined — representação serializada para integração com formulários.\n- **valueChange** - Evento emitido quando o valor selecionado muda.\n- **brDatetimePickerValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\nPayload (`FormValidationChangeDetail`):\n- `validating`: boolean — indica se a validação está em execução.\n- `valid`: boolean | null — resultado da validação (`null` enquanto valida).\n- `message`: string | null — mensagem de validação associada.\n\n### **Methods:**\n - **handleModeChange(newValue: _string_)** - Revalida o modo sempre que a prop mudar.\n- **handleRequiredChange()** - Revalida o estado do formulário quando required mudar.\n- **handleDisabledChange()** - Exclui o valor do FormData enquanto o componente estiver desabilitado.\n- **handleSelectionModeChange(newValue: _DatetimePickerSelectionMode_)** - Reage a mudanças no modo de seleção e limpa intervalo quando necessário.\n- **handleWeekStartsOnChange(newValue: _DatetimePickerWeekDayIndex_)** - Revalida o dia inicial da semana sempre que a prop mudar.\n- **handleInitialMomentChange(newValue: _DatetimePickerInitialMoment_)** - Aplica ou limpa a seleção da data atual conforme o novo valor da prop.\n- **handleValueChange(newValue: _Date | null_)** - Sincroniza alterações externas do valor com o estado visual e o formulário nativo.\n- **handleSerializedValueChange(newValue: _string_)** - Converte alterações externas no valor serializado sem mudar o tipo da prop legada `value`.\n- **handleValueAsDateChange(newValue: _Date | null_)** - Mantém `valueAsDate` e a prop legada `value` apontando para o mesmo estado observável.\n- **handleDisabledDatesChange(newValue: _DatetimePickerDisabledDates_)** - Recalcula a lista de datas desabilitadas quando a prop mudar.\n- **formResetCallback()** - Restaura o estado do componente quando o formulário é restaurado.\n- **formStateRestoreCallback(state: _string | File | FormData | null_)** - Restaura o estado do formulário (autofill / histórico).\n- **setDisabledDates(dates: _DatetimePickerDisabledDate[] | null_): _Promise<void>_** - Define programaticamente as datas desabilitadas.\n\nUse quando scripts externos precisam fornecer uma lista tipada de\ndatas a bloquear no calendário. Substitui a prop `disabledDates` para\natualizações imperativas.\n- **setValue(value: _Date | string | null_): _Promise<void>_** - Define o valor do componente de forma imperativa.\n\nAceita `Date`, string compatível com o `mode`, ou `null` para limpar a seleção.\nValidação de datas desabilitadas é aplicada antes da atribuição.\n- **getValue(): _Promise<Date | null>_** - Retorna uma cópia do valor selecionado atualmente.\n- **clear(): _Promise<void>_** - Limpa valor e intervalo selecionados.\n\nRemove seleção atual e restaura a referência de navegação para a data atual.\n- **open(): _Promise<void>_** - Abre o picker quando o componente estiver habilitado.\n- **close(): _Promise<void>_** - Fecha o picker.\n- **toggle(): _Promise<void>_** - Alterna o estado de abertura do picker.\n- **focusInput(): _Promise<void>_** - Move o foco para o input nativo interno.\n- **setRange(start: _Date | string | null_, end: _Date | string | null_): _Promise<void>_** - Define um intervalo no modo atual e ativa `selectionMode=\"range\"`.\n\nValida datas contra bloqueios e sincroniza estado visual e de formulário.\nEm `datetime`, mantém os limites informados e sinaliza intervalo inválido\nquando o término precede o início, sem ajustar datas automaticamente.\n- **getRange(): _Promise<{ start: Date | null; end: Date | null } | null>_** - Retorna o intervalo de datas selecionado quando em modo `selectionMode=\"range\"`.\n- **isOpen(): _Promise<boolean>_** - Consulta se o picker está atualmente aberto.\n- **resetToInitial(): _Promise<void>_** - Restaura o estado inicial atualmente registrado para reset.\n- **checkValidity(): _Promise<boolean>_** - Permite que consumidores acionem validação nativa do formulário via host.\n- **reportValidity(): _Promise<boolean>_** - Permite exibir mensagens nativas de validação no host.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define ou limpa uma mensagem de validade customizada.\n- **validate(): _Promise<boolean>_** - Executa o validator customizado (se houver) e valida o controle.\n\nEmite eventos de início/conclusão da validação e atualiza mensagens internas.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **render()** - Renderização principal do componente.\n\n### **Slots:**\n - **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **container** - Parte para o container base do seletor.\n- **panel** - Parte para o painel em forma de card que engloba o seletor.\n- **input-container** - Container base do campo de entrada interno.\n- **input-field** - Campo textual interno.\n- **input-icon** - Ícone de ação (calendário/relógio).\n- **feedback** - Contêiner da mensagem de validação.",
|
|
1024
1024
|
"attributes": [
|
|
1025
1025
|
{
|
|
1026
1026
|
"name": "mode",
|
|
@@ -1113,7 +1113,7 @@
|
|
|
1113
1113
|
},
|
|
1114
1114
|
{
|
|
1115
1115
|
"name": "br-date-picker",
|
|
1116
|
-
"description": "
|
|
1116
|
+
"description": "Calendário usado pelo `br-datetime-picker`. Também pode ser usado sozinho, quando a tela precisa de um calendário sempre visível.\n\nUsado sozinho, ele não tem campo de texto nem participa de formulário: a aplicação lê a seleção e cuida da validação.\n\n```html\n<br-date-picker id=\"agenda\"></br-date-picker>\n```\n\n```js\nconst calendario = document.querySelector('#agenda');\ncalendario.addEventListener('change', () => console.log(calendario.value));\n```\n\n- `value`: data selecionada (`Date`).\n- `referenceDate`: mês exibido.\n- `disabledDates`: datas que não podem ser escolhidas.\n- `selectionMode=\"range\"`: seleção de intervalo, lida em `rangeValue`.\n\nPara mudar o idioma, veja \"Idiomas\" na documentação do `br-datetime-picker`.\n---\n\n\n### **Events:**\n - **dateStateChange** - Emite o estado consolidado do componente quando há mudança de referência/seleção.\n\nPayload (DatetimePickerDateState):\n\n### **Methods:**\n - **handleValueChange(newValue: _Date | null_, oldValue: _Date | null_)** - Sincroniza `focusedDate` quando o valor selecionado muda externamente.\n- **handleWeekStartsOnChange(newValue: _number_)** - Revalida a configuração quando o início da semana muda.\n- **handleLocaleChange(newValue: _string_)** - Revalida o locale quando a prop muda.\n\n### **CSS Parts:**\n - **container** - Parte para o container base do calendário.\n- **header** - Cabeçalho do calendário (contendo navegação e seleção de mês/ano).\n- **month-select** - Elemento de seleção do mês.\n- **year-input** - Elemento de entrada do ano.\n- **calendar** - Grade geral do calendário.\n- **weekdays** - Container para os rótulos dos dias da semana.\n- **weekday** - Rótulo individual do dia da semana.\n- **grid** - Grade de dias do mês.\n- **day** - Célula individual do dia no calendário.",
|
|
1117
1117
|
"attributes": [
|
|
1118
1118
|
{
|
|
1119
1119
|
"name": "week-starts-on",
|
|
@@ -1175,7 +1175,7 @@
|
|
|
1175
1175
|
},
|
|
1176
1176
|
{
|
|
1177
1177
|
"name": "br-datetime-input",
|
|
1178
|
-
"description": "
|
|
1178
|
+
"description": "Campo de texto com máscara usado pelo `br-datetime-picker`. Interpreta a data ou a hora digitada e abre o calendário pelo botão do campo.\n\nÉ criado pelo `br-datetime-picker`; não é preciso declará-lo. Para um campo de data em formulário, use o `br-datetime-picker`.\n---\n\n\n### **Events:**\n - **dateStateChange** - Evento emitido quando o estado de data/hora muda (após commit ou parsing).\n\nPayload (`detail`):\n- **togglePicker** - Emite uma solicitação ao componente pai para alternar a abertura do picker.\nEmite sem payload.\n- **inputValidationChange** - Emite validação do texto digitado sem alterar o valor selecionado.\n\nPayload (`detail`):\n\n### **Methods:**\n - **handleRangeValueChange(newValue: _DatetimePickerDateRange | undefined_): _void_** - Watcher: sincroniza `rangeStart`/`rangeEnd` a partir de `rangeValue` controlado.\n- **handleValueChange(newValue: _Date | null_): _void_** - Watcher: reage a mudanças externas em `value`, normalizando e sincronizando\no texto exibido no input.\n- **handleModeChange(newValue: _string_): _void_** - Watcher: aplica normalização do `mode` e atualiza a máscara/valor exibido.\n- **handleReferenceDateChange(newValue: _Date_): _void_** - Watcher: valida `referenceDate` e resina o input quando não há seleção.\n- **handleRangeStartChange(newValue): _void_** - Watcher: atualiza a representação textual quando o início do range muda.\n- **handleRangeEndChange(newValue): _void_** - Watcher: atualiza a representação textual quando o fim do range muda.\n- **render()** - Renderização principal do componente.\n\n### **CSS Parts:**\n - **container** - Container do campo.\n- **input** - Elemento de entrada textual interno.\n- **icon** - Ícone de ação (calendário/relógio).",
|
|
1179
1179
|
"attributes": [
|
|
1180
1180
|
{
|
|
1181
1181
|
"name": "placeholder",
|
|
@@ -1227,7 +1227,7 @@
|
|
|
1227
1227
|
},
|
|
1228
1228
|
{
|
|
1229
1229
|
"name": "br-time-picker",
|
|
1230
|
-
"description": "
|
|
1230
|
+
"description": "Controles de hora e minuto usados pelo `br-datetime-picker`. Em um intervalo, o componente cria um controle para o início e outro para o fim.\n\nPara um campo de horário em formulário, use `<br-datetime-picker mode=\"time\">`. Usado sozinho, ele não participa de formulário: leia o horário em `value` e trate a validação na aplicação.\n---\n\n\n### **Events:**\n - **dateStateChange** - Evento emitido sempre que `referenceDate` ou `value` são atualizados.\n\nO `detail` segue a forma de `DatetimePickerDateState` e contém o estado\ncompartilhado entre subcomponentes de data e horário.\n\nPayload (`detail`):\n\n### **Methods:**\n - **handleValueChange(newValue: _Date | null_): _void_** - Sincroniza `referenceDate` quando a prop `value` muda.\n\nNormaliza segundos/milissegundos e restaura rascunhos locais.\n- **render(): _JSX.Element_** - Render principal do componente.\n\n### **CSS Parts:**\n - **container** - Container base do seletor de horários.\n- **timer** - Grupo que contém os campos de hora e minuto.\n- **field** - Campo de tempo com botões de ajuste.\n- **separator** - Separador visual entre hora e minuto.\n- **input** - Campo de entrada textual interno do tempo.",
|
|
1231
1231
|
"attributes": [
|
|
1232
1232
|
{
|
|
1233
1233
|
"name": "reference-date",
|
|
@@ -1236,7 +1236,7 @@
|
|
|
1236
1236
|
},
|
|
1237
1237
|
{
|
|
1238
1238
|
"name": "value",
|
|
1239
|
-
"description": "Valor
|
|
1239
|
+
"description": "Valor selecionado pelo usuário.",
|
|
1240
1240
|
"values": [{ "name": "Date" }]
|
|
1241
1241
|
},
|
|
1242
1242
|
{
|
|
@@ -1249,7 +1249,7 @@
|
|
|
1249
1249
|
},
|
|
1250
1250
|
{
|
|
1251
1251
|
"name": "br-divider",
|
|
1252
|
-
"description": "O
|
|
1252
|
+
"description": "O `br-divider` é uma linha que separa seções ou grupos de conteúdo. Pode ser horizontal ou vertical e ter um texto no meio.\n\n```html\n<br-divider></br-divider>\n\n<br-divider>ou</br-divider>\n\n<br-divider orientation=\"vertical\" thickness=\"medium\" border-style=\"dashed\"></br-divider>\n```\n\n### Quando usar\n\n- Marcar o fim de um bloco e o início de outro.\n- Separar alternativas, como \"Entrar com gov.br\" ou \"Entrar com certificado digital\".\n\n### Quando evitar\n\n- Quando o espaço em branco já separa bem o conteúdo.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/divider?tab=designer).\n---\n\n\n### **Methods:**\n - **updateColor()** - Watcher para a cor do divisor.\nAtualiza a propriedade CSS '--border-color' do elemento para refletir a cor definida.\nIsso permite que o divisor use cores personalizadas sem precisar de estilos adicionais.\n- **updateMargins()** - Watcher para as propriedades de margin.\nAtualiza as propriedades CSS customizáveis do elemento para refletir os margins definidos.\n\n### **Slots:**\n - **default** - Slot opcional para conteúdo dentro do divisor (texto, ícones ou elementos personalizados).\n\n### **CSS Parts:**\n - **divider** - Elemento principal do divisor.\n- **content** - Conteúdo do divisor (quando há slot).",
|
|
1253
1253
|
"attributes": [
|
|
1254
1254
|
{
|
|
1255
1255
|
"name": "custom-id",
|
|
@@ -1278,7 +1278,7 @@
|
|
|
1278
1278
|
},
|
|
1279
1279
|
{
|
|
1280
1280
|
"name": "color-mode",
|
|
1281
|
-
"description": "Esquema de cor
|
|
1281
|
+
"description": "Esquema de cor padrão. Quando informado, tem precedência sobre `isDarkMode`; valores inválidos usam `light`.",
|
|
1282
1282
|
"values": [{ "name": "light" }, { "name": "dark" }]
|
|
1283
1283
|
},
|
|
1284
1284
|
{
|
|
@@ -1321,7 +1321,7 @@
|
|
|
1321
1321
|
},
|
|
1322
1322
|
{
|
|
1323
1323
|
"name": "br-dropdown",
|
|
1324
|
-
"description": "O
|
|
1324
|
+
"description": "O `br-dropdown` abre um painel flutuante a partir de um botão, com ações ou conteúdo complementar, como um menu \"Mais opções\".\n\nColoque o botão no slot `trigger` e o conteúdo no slot `target`:\n\n```html\n<br-dropdown>\n <br-button slot=\"trigger\" emphasis=\"tertiary\">Mais opções</br-button>\n <br-list slot=\"target\">\n <br-item>Exportar</br-item>\n <br-item>Imprimir</br-item>\n </br-list>\n</br-dropdown>\n```\n\nO painel fecha com Escape ou com um clique fora dele (desative com `prevent-auto-dismiss`). A posição é definida por `placement`, por exemplo `bottom-start` ou `top-end`. Para acompanhar a abertura e o fechamento, ouça `brDropdownOpenChange`.\n\n### Quando usar\n\n- Várias ações secundárias quando há pouco espaço na tela.\n\n### Quando evitar\n\n- Escolher um valor de formulário: use `br-select`.\n- Navegação principal do site: use `br-menu`.\n- Avisos: use `br-message` ou `br-notification`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/dropdown?tab=designer).\n---\n\n\n### **Events:**\n - **brDidOpen** - Emitido quando o dropdown abre.\n- **brDidClose** - Emitido quando o dropdown fecha.\n- **brDropdownChange**\n- **brDropdownOpenChange** - Evento emitido quando o estado aberto muda.\n\n### **Methods:**\n - **targetZIndexChanged()** - Aplica o novo valor de z-index ao elemento target.\n- **matchTriggerWidthChanged()** - Recalcula a superfície aberta quando a política de largura muda.\n- **disabledChanged(newValue: _boolean_)** - Fecha o dropdown se for desabilitado enquanto estiver aberto.\n- **hide(): _Promise<{ isOpen: boolean }>_** - @deprecated Use `close`. - Esconde o dropdown.\nDefine a propriedade `isOpen` como falsa e retorna o novo estado.\nEste método pode ser chamado externamente.\n- **close(): _Promise<{ isOpen: boolean }>_** - Fecha o dropdown e mantém o formato de retorno legado.\n- **open(): _Promise<{ isOpen: boolean }>_** - Abre o dropdown.\nDefine a propriedade `isOpen` como verdadeira e retorna o novo estado.\nEste método pode ser chamado externamente.\n- **setFocus()** - Define o foco no elemento interno do componente.\nEste método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.\n\n### **Slots:**\n - **trigger** - Slot para o elemento que aciona a abertura do dropdown.\n- **target** - Slot para o conteúdo exibido pelo dropdown.\n\n### **CSS Parts:**\n - **trigger** - Área do acionador do dropdown.\n- **target** - Área de conteúdo exibida pelo dropdown.\n- **trigger-arrow** - Indicador visual opcional do acionador do dropdown.",
|
|
1325
1325
|
"attributes": [
|
|
1326
1326
|
{
|
|
1327
1327
|
"name": "custom-id",
|
|
@@ -1378,7 +1378,7 @@
|
|
|
1378
1378
|
},
|
|
1379
1379
|
{
|
|
1380
1380
|
"name": "br-footer",
|
|
1381
|
-
"description": "O
|
|
1381
|
+
"description": "O `br-footer` é o rodapé da página: logotipo, mapa do site, redes sociais, parceiros e informações legais.\n\n### Como montar\n\n| Área | Onde colocar |\n| --- | --- |\n| Logotipo | `br-footer-logo` no slot `logo` |\n| Mapa do site | `br-footer-category` com `br-footer-item`, no conteúdo do footer |\n| Redes sociais | `br-footer-social` no slot `social-network` |\n| Parceiros | `br-footer-logo partner` no slot `partner-logo` |\n| Informações legais | `br-footer-legal` no slot `legal` |\n\n```html\n<br-footer social-network-title=\"Redes sociais\">\n <br-footer-logo slot=\"logo\" src=\"/logo.svg\" description=\"Nome do órgão\" href=\"/\"></br-footer-logo>\n\n <br-footer-category label=\"Serviços\">\n <br-footer-item href=\"/servicos/emitir\">Emitir documento</br-footer-item>\n <br-footer-item href=\"/servicos/consultar\">Consultar processo</br-footer-item>\n </br-footer-category>\n\n <br-footer-social slot=\"social-network\" icon=\"instagram\" description=\"Instagram\" href=\"https://instagram.com/orgao\" target=\"_blank\"></br-footer-social>\n\n <br-footer-legal slot=\"legal\">Texto destinado a exibir informações sobre o licenciamento.</br-footer-legal>\n</br-footer>\n```\n\nEm telas pequenas, as categorias viram seções que abrem e fecham. O tema padrão é escuro; use `theme=\"light\"` para o claro.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/footer?tab=designer).\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **logo** - Slot para o logo do rodapé, utilizando o componente br-logo.\n- **default** - Slot para o mapa do site, utilizando br-footer-category e br-footer-item.\n- **social-network** - Slot para as redes sociais, utilizando br-footer-social.\n- **partner-logo** - Slot para logos de parceiros, utilizando br-logo.\n- **legal** - Slot para informações legais, utilizando br-footer-legal.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do footer.\n- **site-map** - Área do mapa do site.\n- **social** - Área de redes sociais.\n- **partners** - Área de logos de parceiros.",
|
|
1382
1382
|
"attributes": [
|
|
1383
1383
|
{
|
|
1384
1384
|
"name": "custom-id",
|
|
@@ -1392,7 +1392,7 @@
|
|
|
1392
1392
|
},
|
|
1393
1393
|
{
|
|
1394
1394
|
"name": "color-mode",
|
|
1395
|
-
"description": "Esquema de cor
|
|
1395
|
+
"description": "Esquema de cor padrão. Quando informado, tem precedência sobre `theme`.",
|
|
1396
1396
|
"values": [{ "name": "FooterTheme" }]
|
|
1397
1397
|
},
|
|
1398
1398
|
{
|
|
@@ -1410,7 +1410,7 @@
|
|
|
1410
1410
|
},
|
|
1411
1411
|
{
|
|
1412
1412
|
"name": "br-footer-category",
|
|
1413
|
-
"description": "
|
|
1413
|
+
"description": "Grupo de links do mapa do site no `br-footer`. O título vem de `label` e os links são `br-footer-item`.\n\nEm telas pequenas, a categoria vira uma seção que abre e fecha.\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para os itens da categoria no rodapé, utilizando br-footer-item.",
|
|
1414
1414
|
"attributes": [
|
|
1415
1415
|
{
|
|
1416
1416
|
"name": "custom-id",
|
|
@@ -1427,7 +1427,7 @@
|
|
|
1427
1427
|
},
|
|
1428
1428
|
{
|
|
1429
1429
|
"name": "br-footer-item",
|
|
1430
|
-
"description": "
|
|
1430
|
+
"description": "Um link do mapa do site, dentro de um `br-footer-category`. Informe o destino em `href` e o texto no conteúdo.\n\nEm SPA, use `navigation-mode=\"event\"` e trate o evento `brNavigate`.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **render(): __** - Renderiza o componente\n\n### **Slots:**\n - **default** - Slot para o conteúdo do item no rodapé, incluindo texto ou componentes de roteamento para SPAs.",
|
|
1431
1431
|
"attributes": [
|
|
1432
1432
|
{
|
|
1433
1433
|
"name": "custom-id",
|
|
@@ -1449,7 +1449,7 @@
|
|
|
1449
1449
|
},
|
|
1450
1450
|
{
|
|
1451
1451
|
"name": "br-footer-legal",
|
|
1452
|
-
"description": "
|
|
1452
|
+
"description": "Informações legais do `br-footer`, como licença de uso e direitos autorais. Use no slot `legal`.\n---\n\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para informações legais no rodapé, como direitos autorais ou termos de uso.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do footer-legal.",
|
|
1453
1453
|
"attributes": [
|
|
1454
1454
|
{
|
|
1455
1455
|
"name": "custom-id",
|
|
@@ -1461,7 +1461,7 @@
|
|
|
1461
1461
|
},
|
|
1462
1462
|
{
|
|
1463
1463
|
"name": "br-footer-logo",
|
|
1464
|
-
"description": "
|
|
1464
|
+
"description": "Logotipo do `br-footer`. Use no slot `logo` para a marca do órgão, ou com `partner` no slot `partner-logo` para parceiros.\n\nInforme a imagem em `src` e o texto alternativo em `description`. Com `href`, a logo vira link.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **render(): __** - Monta o JSX que representa o componente.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do footer-logo.",
|
|
1465
1465
|
"attributes": [
|
|
1466
1466
|
{
|
|
1467
1467
|
"name": "custom-id",
|
|
@@ -1509,7 +1509,7 @@
|
|
|
1509
1509
|
},
|
|
1510
1510
|
{
|
|
1511
1511
|
"name": "br-footer-social",
|
|
1512
|
-
"description": "
|
|
1512
|
+
"description": "Link para uma rede social no `br-footer`. Use no slot `social-network`.\n\nInforme em `icon` o nome do ícone de marca, como `instagram` ou `youtube`; em `description`, o nome da rede (usado como texto acessível); e em `href`, o endereço. Para outro ícone, use o slot `icon`.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **icon** - Ícone personalizado. Quando preenchido, substitui o ícone definido por `icon`.",
|
|
1513
1513
|
"attributes": [
|
|
1514
1514
|
{
|
|
1515
1515
|
"name": "custom-id",
|
|
@@ -1518,7 +1518,7 @@
|
|
|
1518
1518
|
},
|
|
1519
1519
|
{
|
|
1520
1520
|
"name": "icon",
|
|
1521
|
-
"description": "
|
|
1521
|
+
"description": "Nome do ícone Font Awesome 5 Free presente no cache local, sem o prefixo\n`fa-brands:` (ex.: `instagram`). Use o slot `icon` para conteúdo próprio.",
|
|
1522
1522
|
"values": []
|
|
1523
1523
|
},
|
|
1524
1524
|
{
|
|
@@ -1542,7 +1542,7 @@
|
|
|
1542
1542
|
},
|
|
1543
1543
|
{
|
|
1544
1544
|
"name": "br-header",
|
|
1545
|
-
"description": "O
|
|
1545
|
+
"description": "O `br-header` é o cabeçalho da página: logotipo, nome do sistema, links, atalhos, busca, acesso e botão do menu.\n\n### Como montar\n\nCada área tem um slot:\n\n| Área | Slot | Componente sugerido |\n| --- | --- | --- |\n| Logotipo | `logo` | `br-header-logo` |\n| Nome e subtítulo | — | props `caption` e `subcaption` |\n| Links | `links` | `br-header-list` com `br-header-link` |\n| Atalhos (contraste, ajuda…) | `functions` | `br-header-list` com `br-header-function` |\n| Busca | `search` e `search-icon` | `br-input` e um `br-button` com ícone |\n| Entrar | `access` | `br-sign-in` |\n| Menu | `menu-trigger` | `br-button` que abre o `br-menu` |\n\n```html\n<br-header caption=\"Nome do sistema\" subcaption=\"Nome do órgão\" sticky>\n <br-header-logo slot=\"logo\" src=\"/logo.svg\" description=\"gov.br\"></br-header-logo>\n\n <br-header-list slot=\"links\" list-title=\"Acesso rápido\">\n <br-header-link href=\"/servicos\">Serviços</br-header-link>\n </br-header-list>\n\n <br-input slot=\"search\" label=\"Buscar\" type=\"search\"></br-input>\n\n <br-button slot=\"menu-trigger\" shape=\"circle\" aria-label=\"Abrir menu\" data-toggle=\"menu\" data-target=\"#menu-principal\">\n <br-icon src=\"/icones/menu.svg\"></br-icon>\n </br-button>\n</br-header>\n```\n\nUse `sticky` para manter o cabeçalho visível ao rolar a página e `compact` para a versão reduzida. Em telas menores, a busca fica escondida até o clique no botão do slot `search-icon`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/header?tab=designer).\n---\n\n\n### **Events:**\n - **headerCompactChange** - Evento disparado quando o cabeçalho entra ou sai do modo compacto.\nO evento contém os detalhes do estado compacto e o ID do componente pai.\n- **brHeaderCompactChange** - Evento emitido quando o modo compacto muda.\n- **headerWidthChange** - Evento disparado para indicar qual lista deve encolher primeiro.\nO evento contém os detalhes do ID do componente pai e o nome da lista.\n- **brMenuToggle** - Evento disparado para alternar o estado de um menu associado.\n- **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **watchIsCompact(newValue: _boolean_)** - Observa mudanças na propriedade isCompact.\n- **resetHeaderList()** - Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento.\nPode ser chamado externamente para forçar a atualização das listas.\n- **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **logo** - Slot para a logo do cabeçalho.\n- **signature** - Slot para a assinatura visual da organização.\n- **links** - Slot para links de navegação principais.\n- **functions** - Slot para botões de ação no cabeçalho.\n- **search-icon** - Botão que mostra o campo de busca em telas menores e no modo compacto.\n- **search** - Slot para o campo de busca.\n- **access** - Slot para o botão de acesso ou autenticação.\n- **menu-trigger** - Slot para o botão que abre o menu.\n- **caption** - Slot para o título do cabeçalho.\n- **subcaption** - Slot para o subtítulo do cabeçalho.\n\n### **CSS Parts:**\n - **header** - Elemento header principal.\n- **top** - Área superior do header.\n- **top-left** - Área superior esquerda (logo + assinatura).\n- **top-right** - Área superior direita (links + funções + busca + acesso).\n- **bottom** - Área inferior do header.\n- **bottom-left** - Área inferior esquerda (menu + título).\n- **bottom-right** - Área inferior direita (busca expandida).",
|
|
1546
1546
|
"attributes": [
|
|
1547
1547
|
{
|
|
1548
1548
|
"name": "caption",
|
|
@@ -1571,7 +1571,7 @@
|
|
|
1571
1571
|
},
|
|
1572
1572
|
{
|
|
1573
1573
|
"name": "compact",
|
|
1574
|
-
"description": "Estado compacto
|
|
1574
|
+
"description": "Estado compacto. Quando informado, tem precedência sobre `isCompact`.",
|
|
1575
1575
|
"values": []
|
|
1576
1576
|
},
|
|
1577
1577
|
{
|
|
@@ -1619,7 +1619,7 @@
|
|
|
1619
1619
|
},
|
|
1620
1620
|
{
|
|
1621
1621
|
"name": "br-header-function",
|
|
1622
|
-
"description": "
|
|
1622
|
+
"description": "Atalho do `br-header`, como contraste ou ajuda, dentro de um `br-header-list` no slot `functions`.\n\nColoque o ícone no slot `icon` e o nome no conteúdo:\n\n```html\n<br-header-function href=\"/ajuda\">\n <br-icon slot=\"icon\" src=\"/icones/ajuda.svg\"></br-icon>\n Ajuda\n</br-header-function>\n```\n\nEm telas grandes, aparece como botão de ícone, e o nome é usado como texto acessível. Em telas menores, aparece com ícone e nome dentro do menu da lista.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **handleHeaderWidthChange(event: _CustomEvent<{ id: string; listNames: string[]; shrink: boolean }>_)** - Listener para o evento 'headerWidthChange', disparado pelo componente pai 'br-header'.\nO evento contém o ID do pai e o nome da lista.\nSe o ID do pai corresponder ao ID do cabeçalho atual, o evento será tratado.\n- **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para o nome ou rótulo da funcionalidade.\n- **icon** - Slot para ícone que representa a funcionalidade.",
|
|
1623
1623
|
"attributes": [
|
|
1624
1624
|
{
|
|
1625
1625
|
"name": "custom-id",
|
|
@@ -1651,7 +1651,7 @@
|
|
|
1651
1651
|
},
|
|
1652
1652
|
{
|
|
1653
1653
|
"name": "br-header-link",
|
|
1654
|
-
"description": "
|
|
1654
|
+
"description": "Link do `br-header`, dentro de um `br-header-list` no slot `links`. Informe o destino em `href` e o texto no conteúdo.\n\nEm SPA, use `navigation-mode=\"event\"` e trate `brNavigate`.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para o conteúdo do link exibido no cabeçalho.",
|
|
1655
1655
|
"attributes": [
|
|
1656
1656
|
{
|
|
1657
1657
|
"name": "custom-id",
|
|
@@ -1674,7 +1674,7 @@
|
|
|
1674
1674
|
},
|
|
1675
1675
|
{
|
|
1676
1676
|
"name": "br-header-list",
|
|
1677
|
-
"description": "
|
|
1677
|
+
"description": "Lista de links ou atalhos do `br-header`. Use no slot `links`, com `br-header-link`, ou no slot `functions`, com `br-header-function`.\n\nEm telas menores, a lista vira um menu que abre e fecha; o título desse menu vem de `list-title`.\n---\n\n\n### **Events:**\n - **headerListUpdate** - Evento disparado para indicar qual lista deve encolher primeiro.\nO evento envia o ID do componente pai e o nome da lista.\n- **headerListFocused** - Evento disparado quando a lista recebe foco.\nO evento envia o ID do componente.\n\n### **Methods:**\n - **closeList()** - Fecha a lista.\n- **isListOpen(): _Promise<boolean>_** - Verifica se a lista está aberta.\n- **openList(): _Promise<void>_** - Abre a lista.\n- **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para o conteúdo da lista de navegação no cabeçalho.",
|
|
1678
1678
|
"attributes": [
|
|
1679
1679
|
{
|
|
1680
1680
|
"name": "custom-id",
|
|
@@ -1691,7 +1691,7 @@
|
|
|
1691
1691
|
},
|
|
1692
1692
|
{
|
|
1693
1693
|
"name": "br-header-logo",
|
|
1694
|
-
"description": "
|
|
1694
|
+
"description": "Logotipo do `br-header`. Use no slot `logo`.\n\nInforme a imagem em `src` e o texto alternativo em `description`. Com `href`, a logo vira link; em SPA, use `navigation-mode=\"event\"` e trate `brNavigate`.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **handleIsCompactChange()** - Observa mudanças na propriedade `isCompact` e ajusta a altura da logo se `hasDefaultHeight` for verdadeiro.\n- **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para a logo personalizada exibida no cabeçalho.\n\n### **CSS Parts:**\n - **container** - Wrapper da logo do header.",
|
|
1695
1695
|
"attributes": [
|
|
1696
1696
|
{
|
|
1697
1697
|
"name": "custom-id",
|
|
@@ -1731,7 +1731,7 @@
|
|
|
1731
1731
|
},
|
|
1732
1732
|
{
|
|
1733
1733
|
"name": "br-icon",
|
|
1734
|
-
"description": "O
|
|
1734
|
+
"description": "O `br-icon` exibe um ícone com tamanho e alinhamento padronizados. O ícone vem da sua aplicação, de uma destas formas:\n\n```html\n<!-- Arquivo ou URL -->\n<br-icon src=\"/icones/busca.svg\"></br-icon>\n\n<!-- SVG no próprio código -->\n<br-icon svg='<svg viewBox=\"0 0 24 24\"><path d=\"…\" fill=\"currentColor\"/></svg>'></br-icon>\n\n<!-- Outra biblioteca, como Font Awesome -->\n<br-icon><i class=\"fas fa-search\"></i></br-icon>\n```\n\nSem `label`, o ícone é decorativo e ignorado por leitores de tela. Quando o ícone transmite informação sozinho, descreva-o em `label`:\n\n```html\n<br-icon src=\"/icones/alerta.svg\" label=\"Atenção\"></br-icon>\n```\n\nO tamanho padrão é 16 × 16 px; ajuste com `width` e `height`, em qualquer unidade CSS. Use `rotate` e `flip` para girar ou espelhar.\n\nSe mais de uma forma for informada, vale nesta ordem: conteúdo, `svg`, `src` e, por último, `icon-name` (depreciado). Para fixar uma delas, use `source`.\n\n### Quando evitar\n\n- Fotos e ilustrações: use `<img>`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/icon?tab=designer).\n---\n\n\n### **Slots:**\n - _default_ - Conteúdo customizado do ícone. Pode receber elementos como `<i>`, `<svg>` ou componentes de outras bibliotecas.\n\n### **CSS Parts:**\n - **icon** - Elemento interno que representa o ícone renderizado.\n- **image** - Elemento img interno quando `src` é usado.\n- **svg** - Elemento interno que recebe SVG inline quando `svg` é usado.\n- **slot** - Elemento interno que recebe conteúdo via slot.",
|
|
1735
1735
|
"attributes": [
|
|
1736
1736
|
{
|
|
1737
1737
|
"name": "label",
|
|
@@ -1740,7 +1740,7 @@
|
|
|
1740
1740
|
},
|
|
1741
1741
|
{
|
|
1742
1742
|
"name": "icon-name",
|
|
1743
|
-
"description": "Identificador legado do ícone.
|
|
1743
|
+
"description": "Identificador legado do ícone. Nomes no cache local são renderizados como SVG empacotado;\nem `source=\"auto\"`, nomes ausentes usam Iconify como fallback. `source=\"iconify\"` força essa origem.",
|
|
1744
1744
|
"values": []
|
|
1745
1745
|
},
|
|
1746
1746
|
{
|
|
@@ -1755,7 +1755,7 @@
|
|
|
1755
1755
|
},
|
|
1756
1756
|
{
|
|
1757
1757
|
"name": "source",
|
|
1758
|
-
"description": "Define explicitamente a origem do ícone.\nQuando `auto`, o componente prioriza slot, SVG inline
|
|
1758
|
+
"description": "Define explicitamente a origem do ícone.\nQuando `auto`, o componente prioriza slot, SVG inline, imagem por URL e o cache local Font Awesome 5 Free.\nSe `iconName` não estiver no cache, usa Iconify como fallback. `iconify` força essa origem mesmo para nomes presentes no cache.\nAceita `auto`, `iconify`, `image`, `svg` ou `slot`; valores inválidos usam `auto`.",
|
|
1759
1759
|
"values": [{ "name": "IconSource" }]
|
|
1760
1760
|
},
|
|
1761
1761
|
{
|
|
@@ -1810,7 +1810,7 @@
|
|
|
1810
1810
|
},
|
|
1811
1811
|
{
|
|
1812
1812
|
"name": "lazy",
|
|
1813
|
-
"description": "Controla o comportamento de carregamento do ícone.\n\nComportamento:\n- Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift\n- `lazy={true}`: ativa o carregamento tardio nativo para imagens em `src
|
|
1813
|
+
"description": "Controla o comportamento de carregamento do ícone.\n\nComportamento:\n- Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift\n- `lazy={true}`: ativa o carregamento tardio nativo para imagens em `src`\n- `lazy={false}`: carregamento imediato\n\n**Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout\nque ocorriam quando ícones eram carregados depois do conteúdo inicial.\n\nSVG inline e conteúdo em slot não precisam de carregamento tardio, pois já estão disponíveis no DOM.",
|
|
1814
1814
|
"values": []
|
|
1815
1815
|
}
|
|
1816
1816
|
],
|
|
@@ -1818,7 +1818,7 @@
|
|
|
1818
1818
|
},
|
|
1819
1819
|
{
|
|
1820
1820
|
"name": "br-input",
|
|
1821
|
-
"description": "O
|
|
1821
|
+
"description": "O `br-input` captura dados de texto em linha única, como nomes, e-mails, números ou senhas.\n\nConfigure `label`, `placeholder` e o tipo em `type` (como `text`, `email`, `password`, `number`). Use `state` (`success`, `danger`, `info`, `warning`) para indicar validação.\n\n```html\n<br-input label=\"E-mail\" type=\"email\" placeholder=\"nome@exemplo.com\"></br-input>\n<br-input label=\"Senha\" type=\"password\"></br-input>\n```\n\nEm formulários HTML, o componente integra-se nativamente via `ElementInternals`, participando do submit e da validação nativa com `required`.\n\n### Quando usar\n\n- Entrada de texto curto que cabe em uma única linha (nome, CPF, e-mail, telefone).\n- Campo de busca ou senha com alternância de visualização.\n\n### Quando evitar\n\n- Textos longos ou com quebra de linha: use `br-textarea`.\n- Escolha entre opções pré-definidas: use `br-select` ou `br-radio`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/input?tab=designer).\n---\n\n\n### **Events:**\n - **valueChange** - Valor atualizado do input\n- **brClear** - Emitido quando o usuário aciona o botão de limpar (`clearable`), depois que o\nvalor foi limpo e o evento `input` foi disparado.\n- **brInputActionClick** - Notifica a ativação do botão do slot `action` por clique ou teclado.\nEmitido no host com `detail.originalEvent` contendo o clique original.\nPropaga e atravessa Shadow DOM; não é cancelável nem altera o clique nativo.\nNão emite para o campo textual, botão de senha, inicialização ou controle desabilitado.\n- **brInputValidationChange** - Informa o início e o resultado do validator, inclusive quando ele consulta\num serviço remoto. O `detail` contém `validating`, `valid` e `message`;\nescrita programática e reset não representam interação do usuário.\n\n### **Methods:**\n - **reportValidity(): _Promise<boolean>_** - Retorna `true` se o valor do input for válido, caso contrário `false`.\nSe o input for inválido, exibe uma mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define uma mensagem de validação customizada para o input.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise<boolean>_** - Executa a regra customizada e retorna se o campo está válido.\nSe o validator for assíncrono, aguarda a resposta e ignora resultados\nantigos quando uma execução posterior já começou.\n- **checkValidity(): _Promise<boolean>_** - Retorna `true` se o valor do input for válido, caso contrário `false`.\nSe o input for inválido, dispara um evento 'invalid'.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **select(): _Promise<void>_** - Seleciona todo o texto do controle nativo, conforme HTMLInputElement.select().\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectionMode: _SelectionMode_): _Promise<void>_** - Substitui um intervalo de texto usando a API nativa do input.\n- **setSelectionRange(start: _number_, end: _number_, direction: _'forward' | 'backward' | 'none'_): _Promise<void>_** - Define o intervalo selecionado no controle nativo.\n- **stepUp(n: _number_): _Promise<void>_** - Incrementa o valor numérico pelo step nativo.\n- **stepDown(n: _number_): _Promise<void>_** - Decrementa o valor numérico pelo step nativo.\n- **showPicker(): _Promise<void>_** - Abre o picker nativo quando o navegador e o tipo do input oferecem essa API.\n- **render(): __** - Renderiza o componente de input.\n\n### **Slots:**\n - **action** - Botão à direita do input.\n- **icon** - Ícone à esquerda do input.\n- **help-text** - Personalização do texto de ajuda.\n- **feedback** - Mensagem de feedback como resposta específica a uma interação do usuário com o input. Pode ser feedback de erro, aviso, sucesso ou informação.\n- **validation-loading** - Indicador exibido enquanto o validator assíncrono está pendente.\n\n### **CSS Parts:**\n - **container** - Contêiner visual principal do input.\n- **label** - Rótulo do input.\n- **input** - Elemento input nativo.\n- **group** - Grupo que contém ícone, input, botão e ajuda.\n- **icon** - Contêiner do slot de ícone.\n- **action** - Botão de ação lateral.\n- **action-button** - Botão interno reexportado do br-button da ação.\n- **clear** - Botão de limpar exibido com `clearable` enquanto há texto editável.\n- **help-text** - Texto de ajuda ou slot de ajuda.\n- **feedback** - Slot de feedback.",
|
|
1822
1822
|
"attributes": [
|
|
1823
1823
|
{
|
|
1824
1824
|
"name": "type",
|
|
@@ -1867,7 +1867,7 @@
|
|
|
1867
1867
|
},
|
|
1868
1868
|
{
|
|
1869
1869
|
"name": "feedback-state",
|
|
1870
|
-
"description": "Estado de feedback
|
|
1870
|
+
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`.",
|
|
1871
1871
|
"values": [{ "name": "InputState" }]
|
|
1872
1872
|
},
|
|
1873
1873
|
{
|
|
@@ -1984,13 +1984,18 @@
|
|
|
1984
1984
|
"name": "action-tab-index",
|
|
1985
1985
|
"description": "Define o tabindex do botão de ação.\nÚtil para remover o botão da sequência de tabulação quando o foco é gerenciado externamente (ex.: br-select).\nAceita inteiros maiores ou iguais a -1; valores inválidos são ignorados.",
|
|
1986
1986
|
"values": []
|
|
1987
|
+
},
|
|
1988
|
+
{
|
|
1989
|
+
"name": "clearable",
|
|
1990
|
+
"description": "Exibe um botão para limpar o texto enquanto o campo tem valor e aceita edição.\nO botão fica à esquerda do botão de ação, quando houver. Ao ser acionado,\nlimpa o valor, emite `input` uma única vez e `brClear`, e devolve o foco ao campo.\nNão é exibido com `disabled` ou `readonly`.",
|
|
1991
|
+
"values": []
|
|
1987
1992
|
}
|
|
1988
1993
|
],
|
|
1989
1994
|
"references": []
|
|
1990
1995
|
},
|
|
1991
1996
|
{
|
|
1992
1997
|
"name": "br-item",
|
|
1993
|
-
"description": "O
|
|
1998
|
+
"description": "O `br-item` padroniza uma linha de conteúdo, ação ou link dentro de listas, menus ou agrupamentos verticais.\n\nColoque o texto ou elementos no slot padrão. Use `interactive` para habilitar efeito de clique e foco, ou `href` para transformá-lo em link navegável. Para destacar um item escolhido, use `selected`.\n\n```html\n<br-item interactive>Item de ação</br-item>\n<br-item href=\"/perfil\">Meu Perfil</br-item>\n```\n\n### Quando usar\n\n- Linhas de dados em listas (`br-list`) ou painéis verticais.\n- Linhas com foco, hover e seleção consistentes com o design system.\n\n### Quando evitar\n\n- Itens específicos de navegação estruturada: use `br-breadcrumb-item`, `br-tab-item` ou `br-step-item`.\n- Opções de seleção em formulário: use `br-select-option`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/item?tab=designer).\n---\n\n\n### **Events:**\n - **brDidClick** - Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\nPode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n- **brItemClick** - Evento emitido quando o item com comportamento de botão é acionado.\n- **brDidSelect** - Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando a seleção do item interativo ou botão muda.\nO `detail` expõe `{ selected: boolean }` indicando o novo estado.\nNão é emitido quando `disabled` está ativo.\n- **brItemSelect** - Evento emitido quando a seleção muda.\n- **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Methods:**\n - **activate()** - Ativa o item programaticamente, simulando um clique na superfície.\nUtilizado pelo br-list para tratar Enter e Espaço via teclado, e\ninternamente pelo próprio item quando standalone (fora de br-list).\n- **setFocus()** - Define o foco no elemento interno do componente.\nEste método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.\n- **setTabIndex(value: _number_)** - Define o tabIndex do elemento interno.\nUtilizado pelo br-list para implementar o padrão roving tabindex,\ngarantindo que apenas um item por vez seja alcançável via Tab.\n\n### **Slots:**\n - **default** - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n- **start** - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.\n- **end** - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.\n\n### **CSS Parts:**\n - **item** - Elemento principal do item (botão, link ou div).",
|
|
1994
1999
|
"attributes": [
|
|
1995
2000
|
{
|
|
1996
2001
|
"name": "disabled",
|
|
@@ -2009,7 +2014,7 @@
|
|
|
2009
2014
|
},
|
|
2010
2015
|
{
|
|
2011
2016
|
"name": "active",
|
|
2012
|
-
"description": "Estado ativo
|
|
2017
|
+
"description": "Estado ativo atual. Quando informado, tem precedência sobre `isActive`.",
|
|
2013
2018
|
"values": []
|
|
2014
2019
|
},
|
|
2015
2020
|
{
|
|
@@ -2019,7 +2024,7 @@
|
|
|
2019
2024
|
},
|
|
2020
2025
|
{
|
|
2021
2026
|
"name": "selected",
|
|
2022
|
-
"description": "Estado selecionado
|
|
2027
|
+
"description": "Estado selecionado. Em itens interativos, também é atualizado pelo acionamento.",
|
|
2023
2028
|
"values": []
|
|
2024
2029
|
},
|
|
2025
2030
|
{
|
|
@@ -2077,7 +2082,7 @@
|
|
|
2077
2082
|
},
|
|
2078
2083
|
{
|
|
2079
2084
|
"name": "br-link",
|
|
2080
|
-
"description": "O
|
|
2085
|
+
"description": "O `br-link` conduz a pessoa usuária a outra página, arquivo para download ou seção externa.\n\nColoque o texto ou ícone no slot padrão e aponte o destino em `href`. Para destinos externos ou abas novas, use `target=\"_blank\"`. Para integração com roteadores de SPA, use `navigation-mode=\"event\"` e ouça o evento `brNavigate`.\n\n```html\n<br-link href=\"/servicos\">Serviços disponíveis</br-link>\n<br-link href=\"https://www.gov.br\" target=\"_blank\">Portal Gov.br</br-link>\n```\n\n### Quando usar\n\n- Navegar para outra página, rota ou domínio.\n- Fazer download de arquivos ou saltar para âncoras na mesma página.\n\n### Quando evitar\n\n- Executar uma ação na página atual (salvar, abrir diálogo): use `br-button`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/link?tab=designer).\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n- **brSpaNavigate**\n\n### **Slots:**\n - **default** - Conteúdo do link (texto, ícones ou outros elementos).\n\n### **CSS Parts:**\n - **anchor** - Parte exposta para o elemento âncora interno, usada para estilos customizados via `::part(anchor)`.",
|
|
2081
2086
|
"attributes": [
|
|
2082
2087
|
{
|
|
2083
2088
|
"name": "href",
|
|
@@ -2151,7 +2156,7 @@
|
|
|
2151
2156
|
},
|
|
2152
2157
|
{
|
|
2153
2158
|
"name": "aria-expanded",
|
|
2154
|
-
"description": "Valor
|
|
2159
|
+
"description": "Valor de `aria-expanded`.",
|
|
2155
2160
|
"values": []
|
|
2156
2161
|
},
|
|
2157
2162
|
{
|
|
@@ -2161,7 +2166,7 @@
|
|
|
2161
2166
|
},
|
|
2162
2167
|
{
|
|
2163
2168
|
"name": "aria-selected",
|
|
2164
|
-
"description": "Valor
|
|
2169
|
+
"description": "Valor de `aria-selected`.",
|
|
2165
2170
|
"values": []
|
|
2166
2171
|
},
|
|
2167
2172
|
{
|
|
@@ -2171,7 +2176,7 @@
|
|
|
2171
2176
|
},
|
|
2172
2177
|
{
|
|
2173
2178
|
"name": "aria-haspopup",
|
|
2174
|
-
"description": "Valor
|
|
2179
|
+
"description": "Valor de `aria-haspopup`.",
|
|
2175
2180
|
"values": []
|
|
2176
2181
|
},
|
|
2177
2182
|
{
|
|
@@ -2181,7 +2186,7 @@
|
|
|
2181
2186
|
},
|
|
2182
2187
|
{
|
|
2183
2188
|
"name": "aria-current",
|
|
2184
|
-
"description": "Valor
|
|
2189
|
+
"description": "Valor de `aria-current`.",
|
|
2185
2190
|
"values": []
|
|
2186
2191
|
},
|
|
2187
2192
|
{
|
|
@@ -2191,7 +2196,7 @@
|
|
|
2191
2196
|
},
|
|
2192
2197
|
{
|
|
2193
2198
|
"name": "aria-label",
|
|
2194
|
-
"description": "Valor
|
|
2199
|
+
"description": "Valor de `aria-label`.",
|
|
2195
2200
|
"values": []
|
|
2196
2201
|
},
|
|
2197
2202
|
{
|
|
@@ -2201,7 +2206,7 @@
|
|
|
2201
2206
|
},
|
|
2202
2207
|
{
|
|
2203
2208
|
"name": "aria-describedby",
|
|
2204
|
-
"description": "Valor
|
|
2209
|
+
"description": "Valor de `aria-describedby`.",
|
|
2205
2210
|
"values": []
|
|
2206
2211
|
}
|
|
2207
2212
|
],
|
|
@@ -2209,7 +2214,7 @@
|
|
|
2209
2214
|
},
|
|
2210
2215
|
{
|
|
2211
2216
|
"name": "br-list",
|
|
2212
|
-
"description": "O
|
|
2217
|
+
"description": "O `br-list` organiza coleções verticais de itens homogêneos ou relacionados, como listas de contatos, tarefas ou configurações.\n\nAdicione os itens (como `br-item`) no slot padrão. Se precisar de um título ou ações no topo da lista, use o slot `header` ou a propriedade `title`.\n\n```html\n<br-list title=\"Configurações\">\n <br-item interactive>Notificações</br-item>\n <br-item interactive>Segurança</br-item>\n</br-list>\n```\n\n### Quando usar\n\n- Sequências verticais de itens com leitura linear.\n- Listas de opções simples ou links agrupados.\n\n### Quando evitar\n\n- Dados em linhas e colunas com ordenação: use `br-table`.\n- Menu lateral de navegação da página: use `br-menu`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/list?tab=designer).\n---\n\n\n### **Methods:**\n - **handleAccordionExclusivity(event: _CustomEvent<{ accordionGroup?: string }>_)** - Coordena o accordion entre listas irmãs. Quando o `br-collapse` interno\ndesta lista abre, fecha o `br-collapse` das demais `br-list` irmãs que\ncompartilham o mesmo valor de `accordion`. Só reage ao evento da própria\nlista — `brCollapseOpen` de outras listas não passa por este host.\n- **focusFirstItem()** - Move o foco para o primeiro item navegável da lista.\nAPI pública para componentes que abrem a lista programaticamente\n(ex.: `br-dropdown`), evitando acesso direto ao `br-item`.\n\n### **Slots:**\n - **default** - Slot para os itens da lista.\n- **header** - Slot para ações ou conteúdo do cabeçalho da lista.\n\n### **CSS Parts:**\n - **container** - Wrapper principal da lista.",
|
|
2213
2218
|
"attributes": [
|
|
2214
2219
|
{
|
|
2215
2220
|
"name": "header",
|
|
@@ -2223,7 +2228,7 @@
|
|
|
2223
2228
|
},
|
|
2224
2229
|
{
|
|
2225
2230
|
"name": "orientation",
|
|
2226
|
-
"description": "Orientação
|
|
2231
|
+
"description": "Orientação padrão. Quando informada, tem precedência sobre `isHorizontal`; valores inválidos usam `vertical`.",
|
|
2227
2232
|
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
2228
2233
|
},
|
|
2229
2234
|
{
|
|
@@ -2270,7 +2275,7 @@
|
|
|
2270
2275
|
},
|
|
2271
2276
|
{
|
|
2272
2277
|
"name": "br-loading",
|
|
2273
|
-
"description": "O
|
|
2278
|
+
"description": "O `br-loading` indica visualmente que uma operação assíncrona está em andamento.\n\nSuporta o modo circular padrão (indeterminado) ou o modo determinístico com barra e percentual via `progress`. Para adicionar uma mensagem explicativa, informe `label`.\n\n```html\n<br-loading label=\"Carregando dados...\"></br-loading>\n<br-loading progress=\"60\" label=\"Enviando arquivo...\"></br-loading>\n```\n\n### Quando usar\n\n- Operações que demoram mais de 300 ms (carregamento de dados, envio de formulário).\n- Downloads ou uploads com percentual de progresso mensurável.\n\n### Quando evitar\n\n- Operações instantâneas (menos de 300 ms).\n- Carregamento interno em botão: use a propriedade `loading` do `br-button`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/loading?tab=designer).\n---\n\n\n### **Events:**\n - **brLoadingChange** - Notifica mudança de progresso no modo `progress`.\n- **brLoadingComplete** - Notifica conclusão do progresso no modo `progress`.\n- **brLoadingReset** - Notifica reinício do progresso no modo `progress`.\n- **brLoadingCancel** - Notifica clique no botão de cancelamento no modo `progress`.\nEste evento não altera o progresso automaticamente.\nA aplicação consumidora define a ação após o cancelamento (ex.: limpar ou ocultar).\n- **brIndeterminateStateChange** - Notifica mudança do estado lógico no modo `spinner`.\n- **brDidShow** - Notifica que o componente foi exibido.\n- **brLoadingShow** - Evento emitido quando o loading é exibido.\n- **brDidHide** - Notifica que o componente foi ocultado.\n- **brLoadingHide** - Evento emitido quando o loading é ocultado.\n\n### **Methods:**\n - **handleCompletion(newValue: _number_)** - Reage a mudanças em `value` no modo `progress`.\n- **handleModeChange()** - Reage a mudanças em `mode` e atualiza o estado lógico de atividade.\n- **setValue(value: _number_): _Promise<{ value: number }>_** - Define o valor do progresso.\n- **incrementValue(step): _Promise<{ value: number }>_** - Soma um valor ao progresso atual.\n- **complete(): _Promise<{ value: number }>_** - Define o progresso como concluído.\n- **reset(): _Promise<{ value: number }>_** - Reinicia o progresso e exibe o componente.\n- **show(): _Promise<{ visible: boolean }>_** - Exibe o componente.\n- **hide(): _Promise<{ visible: boolean }>_** - Oculta o componente.\n- **render(): __** - Renderiza o componente conforme o modo atual.\n\n### **Slots:**\n - **label** - Rótulo customizado do loading. Quando utilizado, a prop `label` é ignorada.\n- **cancel-button** - Conteúdo customizado do botão de cancelar. Quando utilizado, a prop `cancelLabel` é ignorada.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do loading.\n- **wrapper** - Wrapper do conteúdo do spinner/progress.\n- **svg** - Elemento SVG principal do loading.\n- **percentage** - Texto de percentual no modo `progress`.\n- **label-wrapper** - Wrapper do rótulo no modo `spinner`.\n- **cancel-button** - Botão de cancelamento no modo `progress` cancelável.",
|
|
2274
2279
|
"attributes": [
|
|
2275
2280
|
{
|
|
2276
2281
|
"name": "label-position",
|
|
@@ -2294,7 +2299,7 @@
|
|
|
2294
2299
|
},
|
|
2295
2300
|
{
|
|
2296
2301
|
"name": "density",
|
|
2297
|
-
"description": "Densidade visual
|
|
2302
|
+
"description": "Densidade visual. Quando informada, tem precedência sobre `size`.\nAceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.",
|
|
2298
2303
|
"values": [{ "name": "LoadingSize" }]
|
|
2299
2304
|
},
|
|
2300
2305
|
{
|
|
@@ -2337,7 +2342,7 @@
|
|
|
2337
2342
|
},
|
|
2338
2343
|
{
|
|
2339
2344
|
"name": "br-magic-button",
|
|
2340
|
-
"description": "O
|
|
2345
|
+
"description": "O `br-magic-button` é o botão de ação flutuante (FAB) que destaca a ação primária ou mais frequente da tela.\n\nPode ser exibido apenas com ícone (formato circular) ou expandido com texto descritivo.\n\n```html\n<br-magic-button icon=\"fa-solid:plus\" aria-label=\"Novo item\"></br-magic-button>\n<br-magic-button icon=\"fa-solid:plus\">Criar documento</br-magic-button>\n```\n\n### Quando usar\n\n- Ação principal e dominante da tela em dispositivos móveis ou interfaces focadas em uma tarefa única.\n\n### Quando evitar\n\n- Múltiplas ações de mesma importância: use `br-button`.\n- Ações secundárias ou destrutivas.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/magic-button?tab=designer).\n---\n\n\n### **Methods:**\n - **render()** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Conteúdo interno do botão (texto ou ícone).\n- **icon** - Ícone customizado do botão. Quando utilizado, a prop `icon` é ignorada.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do magic-button.\n- **button** - Elemento button interno.",
|
|
2341
2346
|
"attributes": [
|
|
2342
2347
|
{
|
|
2343
2348
|
"name": "custom-id",
|
|
@@ -2351,7 +2356,7 @@
|
|
|
2351
2356
|
},
|
|
2352
2357
|
{
|
|
2353
2358
|
"name": "icon",
|
|
2354
|
-
"description": "Ícone como identificador
|
|
2359
|
+
"description": "Ícone como identificador Font Awesome 5 Free do cache local (ex.: `fa-solid:star`) ou nome simples\n(ex.: `question`, resolvido como `fa-solid:question`), renderizado pelo `br-icon`.\nPara classes CSS (ex.: Font Awesome) ou SVGs personalizados, use o slot `icon`, a forma preferida.\nUso descontinuado: classes CSS nesta prop (ex.: `fas fa-star`) não são exibidas no Shadow DOM\ne geram aviso.",
|
|
2355
2360
|
"values": []
|
|
2356
2361
|
},
|
|
2357
2362
|
{
|
|
@@ -2374,7 +2379,7 @@
|
|
|
2374
2379
|
},
|
|
2375
2380
|
{
|
|
2376
2381
|
"name": "br-menu",
|
|
2377
|
-
"description": "O
|
|
2382
|
+
"description": "O `br-menu` organiza a navegação lateral da aplicação em gaveta retrátil ou barra fixa.\n\nUse `is-open` para controlar a visibilidade, ou chame os métodos `open()`, `close()` e `toggle()`. Estruture a navegação com os subcomponentes `br-menu-header`, `br-menu-group`, `br-menu-list` e `br-menu-item`.\n\n```html\n<br-menu id=\"menu-principal\">\n <div slot=\"header\">\n <br-menu-header title-text=\"Menu Principal\"></br-menu-header>\n </div>\n <br-menu-list>\n <br-menu-item>\n <br-menu-link href=\"/inicio\">Início</br-menu-link>\n </br-menu-item>\n <br-menu-item>\n <br-menu-link href=\"/servicos\">Serviços</br-menu-link>\n </br-menu-item>\n </br-menu-list>\n</br-menu>\n```\n\n### Quando usar\n\n- Menus com hierarquia de seções, grupos ou múltiplos níveis de páginas.\n- Navegação lateral que precisa ser recolhida em telas móveis com fechamento por máscara (`br-scrim`).\n\n### Quando evitar\n\n- Poucos itens que cabem diretamente no cabeçalho: use `br-header`.\n- Alternar visões na mesma página: use `br-tab`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/menu?tab=designer).\n---\n\n\n### **Events:**\n - **brMenuStateChange** - Evento emitido quando o menu abre ou fecha.\n- **brMenuOpenChange** - Evento emitido quando o menu abre ou fecha.\n`detail.open` contém o estado concluído e `detail.sourceId` identifica a instância pelo `id` ou `customId`.\n\n### **Methods:**\n - **onDocumentClick(ev: _MouseEvent_)** - Escuta cliques no documento para alternar o estado do menu automaticamente\nquando um elemento com o atributo `data-toggle=\"menu\"` é clicado.\nUtiliza o caminho completo do evento (composedPath) para permitir o funcionamento\ncorreto quando o botão acionador está dentro de outros componentes com Shadow DOM (ex: br-header).\n- **open(): _Promise<void>_** - Abre o painel do menu.\nPode ser chamado externamente: `menuEl.open()`.\n- **close(): _Promise<void>_** - Fecha o painel do menu.\nPode ser chamado externamente: `menuEl.close()`.\n- **toggle(): _Promise<void>_** - Alterna o estado do painel do menu (abre se fechado, fecha se aberto).\nPode ser chamado externamente: `menuEl.toggle()`.\n\n### **Slots:**\n - **default** - Slot para o conteúdo principal do menu (menu-list, menu-group e menu-item).\n- **header** - Slot para o cabeçalho do menu, exibido apenas em modo não contextual e não push.\n- **logo** - Slot para logotipos de parceiros no rodapé.\n- **link** - Slot para links externos no rodapé (use br-menu-link).\n- **social** - Slot para ícones de redes sociais no rodapé.\n- **info** - Slot para informações adicionais no rodapé.\n\n### **CSS Parts:**\n - **footer** - Parte para o contêiner principal do rodapé do menu, agrupando logos, links, redes sociais e informações.\n- **logo** - Parte para a área de logotipos de parceiros no rodapé.\n- **link** - Parte para links úteis ou navegação secundária no rodapé.\n- **social** - Parte para ícones de redes sociais no rodapé.\n- **info** - Parte para informações adicionais, como licença ou direitos autorais.\n- **container** - Parte para o container externo que envolve o menu inteiro.\n- **panel** - Parte para o painel de navegação do menu (o menu propriamente dito).\n- **body** - Parte principal onde ficam os links e grupos de navegação.\n- **trigger** - Botão de acionamento do menu (hambúrguer ou contextual).\n- **back-btn** - Botão de voltar do menu de navegação drill-down.",
|
|
2378
2383
|
"attributes": [
|
|
2379
2384
|
{
|
|
2380
2385
|
"name": "custom-id",
|
|
@@ -2426,7 +2431,7 @@
|
|
|
2426
2431
|
},
|
|
2427
2432
|
{
|
|
2428
2433
|
"name": "br-menu-group",
|
|
2429
|
-
"description": "
|
|
2434
|
+
"description": "Agrupa itens de menu sob um título ou categoria comum. Use dentro do `br-menu`.\n\nDefina o título do grupo pelo slot `label` ou pela propriedade `label`. Insira a lista de itens (`br-menu-list`) no slot padrão.\n---\n\n\n### **Slots:**\n - **default** - Itens do grupo.\n\n### **CSS Parts:**\n - **container** - Contêiner do agrupamento.\n- **label** - Rótulo visual do agrupamento.\n- **list** - Contêiner dos itens agrupados.",
|
|
2430
2435
|
"attributes": [
|
|
2431
2436
|
{
|
|
2432
2437
|
"name": "label",
|
|
@@ -2443,7 +2448,7 @@
|
|
|
2443
2448
|
},
|
|
2444
2449
|
{
|
|
2445
2450
|
"name": "br-menu-header",
|
|
2446
|
-
"description": "
|
|
2451
|
+
"description": "Cabeçalho do menu lateral com título e botão de fechar. Use no slot `header` do `br-menu`.\n\nDefina o título da área em `title-text`. O botão de fechar emite o fechamento para o `br-menu` pai.\n---\n\n\n### **Events:**\n - **brMenuToggle** - Evento emitido para alternar o estado do menu\n\n### **Slots:**\n - **logo** - Slot para logo personalizado no cabeçalho.\n- **signature** - Slot para a assinatura personalizada do sistema.\n\n### **CSS Parts:**\n - **container** - Wrapper do cabeçalho do menu.\n- **title** - Área do título com logo e assinatura.\n- **close** - Área do botão de fechar.\n- **logo** - Elemento de imagem do logotipo (se renderizado a partir de logoSrc).\n- **signature** - Elemento de texto contendo a assinatura do sistema.",
|
|
2447
2452
|
"attributes": [
|
|
2448
2453
|
{
|
|
2449
2454
|
"name": "custom-id",
|
|
@@ -2470,7 +2475,7 @@
|
|
|
2470
2475
|
},
|
|
2471
2476
|
{
|
|
2472
2477
|
"name": "br-menu-info",
|
|
2473
|
-
"description": "
|
|
2478
|
+
"description": "Exibe informações de apoio (versão do sistema, dados do usuário ou licença) no menu. Use no slot `info` ou no rodapé do `br-menu`.\n---\n\n\n### **Slots:**\n - **default** - Slot para conteúdo personalizado no lugar do texto padrão de informações.",
|
|
2474
2479
|
"attributes": [
|
|
2475
2480
|
{
|
|
2476
2481
|
"name": "custom-id",
|
|
@@ -2487,7 +2492,7 @@
|
|
|
2487
2492
|
},
|
|
2488
2493
|
{
|
|
2489
2494
|
"name": "br-menu-item",
|
|
2490
|
-
"description": "
|
|
2495
|
+
"description": "Representa uma linha de navegação ou botão de submenu dentro do `br-menu-list`.\n\nColoque um `br-menu-link` ou texto no slot padrão. Para submenus multiníveis, adicione a lista filha no interior do item.\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Slots:**\n - **default** - Conteúdo textual principal exibido no item de menu.\n- **icon** - Ícone personalizado. Quando preenchido, substitui o ícone definido por `icon`.\n\n### **CSS Parts:**\n - **link** - Elemento âncora do item de menu.\n- **icon** - Ícone do item de menu.\n- **content** - Conteúdo textual do item de menu.\n- **support** - Ícone de suporte (seta para baixo/direita).",
|
|
2491
2496
|
"attributes": [
|
|
2492
2497
|
{
|
|
2493
2498
|
"name": "icon",
|
|
@@ -2534,7 +2539,7 @@
|
|
|
2534
2539
|
},
|
|
2535
2540
|
{
|
|
2536
2541
|
"name": "br-menu-link",
|
|
2537
|
-
"description": "
|
|
2542
|
+
"description": "Hiperlink de navegação dentro do `br-menu`. Use dentro de um `br-menu-item` ou no rodapé do menu.\n\nAponte o destino em `href`. Para destinos externos, use `target=\"_blank\"`.\n---\n\n\n### **Events:**\n - **brLinkClick** - Evento emitido quando o link externo é clicado.\n- **brMenuLinkClick** - Evento emitido quando o link externo é clicado.\n- **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Slots:**\n - **icon** - Slot para ícone personalizado do link.\n- **url** - Slot para o texto exibido no link.\n\n### **CSS Parts:**\n - **link** - Elemento âncora do link.",
|
|
2538
2543
|
"attributes": [
|
|
2539
2544
|
{
|
|
2540
2545
|
"name": "custom-id",
|
|
@@ -2555,7 +2560,7 @@
|
|
|
2555
2560
|
{ "name": "titulo", "description": "Título do link", "values": [] },
|
|
2556
2561
|
{
|
|
2557
2562
|
"name": "label",
|
|
2558
|
-
"description": "Texto
|
|
2563
|
+
"description": "Texto do link. Quando informado, tem precedência sobre `titulo`.",
|
|
2559
2564
|
"values": []
|
|
2560
2565
|
}
|
|
2561
2566
|
],
|
|
@@ -2563,7 +2568,7 @@
|
|
|
2563
2568
|
},
|
|
2564
2569
|
{
|
|
2565
2570
|
"name": "br-menu-list",
|
|
2566
|
-
"description": "
|
|
2571
|
+
"description": "Lista de itens de navegação dentro do `br-menu` ou `br-menu-group`.\n\nInsira os elementos `br-menu-item` no slot padrão para compor a lista navegável.\n---\n\n\n### **Events:**\n - **folderToggled** - Emitido quando um folder é expandido ou recolhido no nível 0 (comportamento acordeão).\n- **navigateToSubmenu** - Emitido quando navegando para um submenu nos níveis 1+ (comportamento drill-down).\n\n### **Slots:**\n - **default** - Itens filhos renderizados no conteúdo do grupo.\n- **icon** - Ícone personalizado do item principal. Quando preenchido, substitui `icon`.\n\n### **CSS Parts:**\n - **container** - Wrapper do grupo de menu.\n- **list** - Lista de itens do grupo.\n- **header-link** - Elemento âncora do item de menu principal (header).\n- **header-icon** - Ícone do item de menu principal (header).\n- **header-content** - Conteúdo textual do item de menu principal (header).\n- **header-support** - Ícone de suporte (seta) do item de menu principal (header).",
|
|
2567
2572
|
"attributes": [
|
|
2568
2573
|
{
|
|
2569
2574
|
"name": "icon",
|
|
@@ -2595,7 +2600,7 @@
|
|
|
2595
2600
|
},
|
|
2596
2601
|
{
|
|
2597
2602
|
"name": "br-menu-logo",
|
|
2598
|
-
"description": "
|
|
2603
|
+
"description": "Exibe o logotipo institucional no interior do `br-menu`. Use no cabeçalho ou rodapé do menu.\n---\n\n\n### **Events:**\n - **brMenuLogoError** - Emitido quando a imagem principal e o fallback falham.\n- **brMenuLogoError**\n\n### **Slots:**\n - **default** - Slot para logo ou conteúdo que substitui a imagem padrão.\n\n### **CSS Parts:**\n - **container** - Wrapper da logo.",
|
|
2599
2604
|
"attributes": [
|
|
2600
2605
|
{
|
|
2601
2606
|
"name": "custom-id",
|
|
@@ -2628,7 +2633,7 @@
|
|
|
2628
2633
|
},
|
|
2629
2634
|
{
|
|
2630
2635
|
"name": "br-menu-social",
|
|
2631
|
-
"description": "
|
|
2636
|
+
"description": "Bloco de canais e redes sociais institucionais dentro do `br-menu`. Use no slot `social` ou rodapé do menu.\n---\n\n\n### **Events:**\n - **brSocialClick** - Evento emitido quando o link de rede social é clicado.\n- **brMenuSocialClick** - Evento emitido quando o link de rede social é clicado.\n- **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Slots:**\n - **icon** - Slot para ícone personalizado da rede social.",
|
|
2632
2637
|
"attributes": [
|
|
2633
2638
|
{
|
|
2634
2639
|
"name": "custom-id",
|
|
@@ -2653,7 +2658,7 @@
|
|
|
2653
2658
|
},
|
|
2654
2659
|
{
|
|
2655
2660
|
"name": "icon",
|
|
2656
|
-
"description": "
|
|
2661
|
+
"description": "Nome do ícone Font Awesome 5 Free presente no cache local, sem o prefixo\n`fa-brands:` (ex.: `facebook-f`). Use o slot `icon` para conteúdo próprio.",
|
|
2657
2662
|
"values": []
|
|
2658
2663
|
}
|
|
2659
2664
|
],
|
|
@@ -2661,7 +2666,7 @@
|
|
|
2661
2666
|
},
|
|
2662
2667
|
{
|
|
2663
2668
|
"name": "br-message",
|
|
2664
|
-
"description": "O
|
|
2669
|
+
"description": "O `br-message` apresenta um aviso contextual ou feedback em linha sobre uma operação ou estado do sistema.\n\nDefina o tipo de mensagem em `state` (`success`, `danger`, `warning` ou `info`). Opcionalmente, adicione um botão para fechar com `closable`.\n\n```html\n<br-message state=\"success\" message-title=\"Sucesso\">\n Operação realizada com sucesso.\n</br-message>\n<br-message state=\"danger\" closable>\n Não foi possível salvar os dados. Tente novamente.\n</br-message>\n```\n\n### Quando usar\n\n- Feedback sobre uma ação recém-executada na página (salvar, excluir, atualizar).\n- Mensagens de erro ou orientação em formulários (no slot `feedback` de inputs).\n\n### Quando evitar\n\n- Avisos críticos que exigem decisão antes de prosseguir: use `br-modal`.\n- Notificações acumuladas em uma central: use `br-notification`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/message?tab=designer).\n---\n\n\n### **Events:**\n - **brDidClose** - Evento emitido quando o usuário fecha a mensagem, se closable for true.\n- **brMessageClose** - Evento emitido quando a mensagem é fechada.\n\n### **Slots:**\n - **default** - Conteúdo principal da mensagem. Quando utilizado, a prop `message` é ignorada.\n- **icon** - Ícone customizado da mensagem. Quando utilizado, o ícone padrão gerado pela prop `state` é ignorado.\n- **message-title** - Título customizado da mensagem. Quando utilizado, a prop `messageTitle` é ignorada.\n- **message-body** - Corpo customizado da mensagem. Quando utilizado, a prop `message` é ignorada.\n- **close-button** - Botão de fechar customizado. Quando utilizado, o botão padrão é substituído.\n\n### **CSS Parts:**\n - **container** - Wrapper principal da mensagem.\n- **icon** - Área do ícone da mensagem.\n- **content** - Área de conteúdo da mensagem.\n- **close** - Área do botão de fechar.",
|
|
2665
2670
|
"attributes": [
|
|
2666
2671
|
{
|
|
2667
2672
|
"name": "message-title",
|
|
@@ -2725,7 +2730,7 @@
|
|
|
2725
2730
|
},
|
|
2726
2731
|
{
|
|
2727
2732
|
"name": "feedback-state",
|
|
2728
|
-
"description": "Estado de feedback
|
|
2733
|
+
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`.",
|
|
2729
2734
|
"values": [{ "name": "BrFeedbackState" }]
|
|
2730
2735
|
},
|
|
2731
2736
|
{
|
|
@@ -2738,7 +2743,7 @@
|
|
|
2738
2743
|
},
|
|
2739
2744
|
{
|
|
2740
2745
|
"name": "br-modal",
|
|
2741
|
-
"description": "O
|
|
2746
|
+
"description": "O `br-modal` abre uma janela de diálogo bloqueadora sobre uma máscara, capturando a atenção imediata da pessoa usuária.\n\nControle a abertura com os métodos `open()`, `close()` e `showModal()`. Estruture o conteúdo usando os slots `header`, `default` (corpo) e `footer` (botões de ação).\n\n```html\n<br-modal title-text=\"Excluir item\">\n <p>Deseja realmente excluir este registro? Esta ação não pode ser desfeita.</p>\n <div slot=\"footer\">\n <br-button emphasis=\"secondary\">Cancelar</br-button>\n <br-button emphasis=\"primary\">Excluir</br-button>\n </div>\n</br-modal>\n```\n\n### Quando usar\n\n- Confirmação de ações críticas ou irreversíveis (excluir registro, descartar alterações).\n- Formulários curtos e contextuais sem sair da tela atual.\n\n### Quando evitar\n\n- Mensagens informativas que não exigem confirmação: use `br-message`.\n- Conteúdos longos com navegação interna: use uma página dedicada.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/modal?tab=designer).\n---\n\n\n### **Events:**\n - **brModalOpen** - Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).\n- **brModalClose** - Evento emitido após o modal ser fechado (quando `show` muda de `true` para `false`).\n- **brModalBeforeClose** - Evento emitido antes do fechamento do modal (quando o botão X é clicado).\nSe autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento.\nSe autoClose está ativado, o modal fecha automaticamente após este evento.\n- **brModalOpened** - Evento emitido após o modal estar completamente aberto e com o foco estabilizado\ndentro dele. Complementa `brModalOpen` (que dispara imediatamente ao abrir):\nuse `brModalOpened` quando precisar interagir com o modal já pronto.\n\n### **Methods:**\n - **open()** - Método público para abrir o modal\n- **showModal(): _Promise<void>_** - Abre o modal usando a nomenclatura de `HTMLDialogElement`.\n- **close()** - Método público para fechar o modal\n- **requestClose(): _Promise<void>_** - Solicita fechamento e permite cancelamento pelo evento `cancel`.\n- **toggle()** - Método público para alternar a visibilidade do modal\n\n### **Slots:**\n - **header** - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.\n- **default** - Corpo do modal.\n- **footer** - Rodapé do modal.\n- **close-button** - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do modal.\n- **header** - Cabeçalho do modal.\n- **title** - Título do modal.\n- **body** - Corpo do modal.\n- **footer** - Rodapé do modal.\n- **close-button** - Botão de fechar do modal.",
|
|
2742
2747
|
"attributes": [
|
|
2743
2748
|
{
|
|
2744
2749
|
"name": "custom-id",
|
|
@@ -2785,7 +2790,7 @@
|
|
|
2785
2790
|
},
|
|
2786
2791
|
{
|
|
2787
2792
|
"name": "br-notification",
|
|
2788
|
-
"description": "O
|
|
2793
|
+
"description": "O `br-notification` organiza a central de mensagens, comunicados e avisos do usuário em um painel retrátil.\n\nUse os métodos `open()`, `close()` ou a propriedade `isOpen` para controlar o painel. Estruture o conteúdo com `br-notification-header`, `br-notification-body` e `br-notification-item`.\n\n```html\n<br-notification>\n <div slot=\"header\">\n <br-notification-header title-text=\"Notificações\"></br-notification-header>\n </div>\n <br-notification-body>\n <br-notification-item title-text=\"Seu processo foi atualizado\" date=\"10/10/2026\"></br-notification-item>\n </br-notification-body>\n</br-notification>\n```\n\n### Quando usar\n\n- Central de avisos acumulados da aplicação, normalmente acionada por um botão no cabeçalho.\n\n### Quando evitar\n\n- Mensagens em linha como resposta direta a uma ação na tela: use `br-message`.\n- Confirmação de ação crítica: use `br-modal`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/notification?tab=designer).\n---\n\n\n### **Events:**\n - **brOpenChange** - Informa a mudança de estado aberto/fechado do painel.\n- **brNotificationOpen** - Informa que o painel foi aberto.\n- **brNotificationClose** - Informa que o painel foi fechado.\n- **brNotificationItemClick** - Expõe a interação com um item da lista.\n- **brNotificationTabChange** - Informa troca de aba quando o componente possuir navegação por tabs.\n\n### **Methods:**\n - **show()** - Abre o painel de notificações.\n- **hide(reason: _NotificationCloseReason_)** - Fecha o painel de notificações.\n- **toggle()** - Alterna o estado aberto/fechado.\n- **focusTrigger()** - Move o foco de volta para o acionador.\n- **focusFirstItem()** - Move o foco para o primeiro item interativo da lista.\n\n### **Slots:**\n - **trigger** - Elemento acionador externo responsável por abrir e fechar o painel.\n- **header** - Região superior do componente, para uso com subcomponentes de cabeçalho ou conteúdo customizado.\n- **tabs** - Região opcional para navegação por abas.\n- **default** - Região principal da lista de notificações.\n- **footer** - Região opcional para ações complementares, como \"ver todas\".\n\n### **CSS Parts:**\n - **base** - Superfície principal do painel.\n- **header** - Região superior do componente.\n- **body** - Região principal do componente.\n- **tabs** - Região de abas, quando existir.\n- **list** - Região com rolagem onde os itens são exibidos.\n- **close-button** - Botão de fechar do painel.\n- **divider** - Divisor entre itens da lista.",
|
|
2789
2794
|
"attributes": [
|
|
2790
2795
|
{
|
|
2791
2796
|
"name": "custom-id",
|
|
@@ -2852,7 +2857,7 @@
|
|
|
2852
2857
|
},
|
|
2853
2858
|
{
|
|
2854
2859
|
"name": "br-notification-body",
|
|
2855
|
-
"description": "
|
|
2860
|
+
"description": "Corpo do painel de notificações com rolagem independente. Use dentro do `br-notification`.\n\nInsira os itens `br-notification-item` no slot padrão.\n---\n\n\n### **Slots:**\n - **tabs** - Navegação por abas quando presente.\n- **default** - Lista principal de notificações.\n- **empty** - Conteúdo para estado vazio.",
|
|
2856
2861
|
"attributes": [
|
|
2857
2862
|
{
|
|
2858
2863
|
"name": "custom-id",
|
|
@@ -2874,7 +2879,7 @@
|
|
|
2874
2879
|
},
|
|
2875
2880
|
{
|
|
2876
2881
|
"name": "br-notification-header",
|
|
2877
|
-
"description": "
|
|
2882
|
+
"description": "Cabeçalho da central de notificações com título e botão de fechar. Use no slot `header` do `br-notification`.\n\nDefina o título em `title-text`. O botão de fechar emite o fechamento para o painel pai.\n---\n\n\n### **Events:**\n - **brNotificationHeaderClose** - Solicita o fechamento do painel a partir do cabeçalho.\n\n### **Slots:**\n - **title** - Conteúdo customizado do título.\n- **subtitle** - Conteúdo customizado do subtítulo.\n- **actions** - Região para botão de fechar ou outras ações contextuais.",
|
|
2878
2883
|
"attributes": [
|
|
2879
2884
|
{
|
|
2880
2885
|
"name": "custom-id",
|
|
@@ -2906,7 +2911,7 @@
|
|
|
2906
2911
|
},
|
|
2907
2912
|
{
|
|
2908
2913
|
"name": "br-notification-item",
|
|
2909
|
-
"description": "
|
|
2914
|
+
"description": "Item individual de notificação com título, data e status de leitura. Use dentro do `br-notification-body`.\n\nDefina o título em `title-text` e a data em `date`. Use `read` para indicar se o item já foi lido.\n---\n\n\n### **Events:**\n - **brNotificationItemSelect** - Informa seleção ou acionamento do item.\n- **brNotificationItemRead** - Informa mudança de estado para lido.\n\n### **Methods:**\n - **callFocus()** - Move o foco para o elemento interativo do item.\n\n### **Slots:**\n - **default** - Conteúdo principal da notificação.\n- **actions** - Ações contextuais do item.",
|
|
2910
2915
|
"attributes": [
|
|
2911
2916
|
{
|
|
2912
2917
|
"name": "item-id",
|
|
@@ -2948,7 +2953,7 @@
|
|
|
2948
2953
|
},
|
|
2949
2954
|
{
|
|
2950
2955
|
"name": "br-pagination",
|
|
2951
|
-
"description": "O
|
|
2956
|
+
"description": "O `br-pagination` divide grandes volumes de dados em páginas numeradas sequenciais.\n\nInforme a quantidade total de itens em `total` e a página atual em `current`. Ouça o evento `brPaginationPageChange` para carregar a página solicitada. Para permitir alterar itens por página, use a variante contextual ou defina `per-page`.\n\n```html\n<br-pagination total=\"100\" per-page=\"10\" current=\"1\"></br-pagination>\n```\n\n### Quando usar\n\n- Paginação de tabelas (`br-table`) ou listas extensas.\n\n### Quando evitar\n\n- Poucos itens (menos de 20 itens) que cabem em uma visualização direta.\n- Etapas sequenciais de um formulário ou cadastro: use `br-step` ou `br-wizard`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/pagination?tab=designer).\n---\n\n\n### **Events:**\n - **pageChange** - Solicita uma página por interação do usuário ou pelo método público.\n\nEm `controlled`, o evento informa a página solicitada, mas `current` só\nmuda quando a aplicação confirma o resultado. O componente não faz\nchamadas remotas nem cancela a consulta do consumidor.\n- **brPaginationPageChange** - Evento para iniciar o carregamento de uma página.\nO `detail` contém `{ page }`; o evento não é cancelável.\n- **perPageChange** - Solicita uma quantidade de itens por página (variante contextual).\nEm `controlled`, a aplicação confirma a mudança atribuindo `perPage`.\n- **brPaginationPerPageChange** - Evento para iniciar o carregamento de uma nova quantidade de\nitens. O `detail` contém `{ perPage }`; o evento não é cancelável.\n\n### **Methods:**\n - **setPage(page: _number_): _Promise<void>_** - Define programaticamente a página atual dentro do intervalo permitido.\n- **goToPage(page: _number_): _Promise<void>_** - Solicita navegação programática para uma página (1-indexada).\nEm `controlled`, aguarda a confirmação externa para alterar `current`.\n\n### **Slots:**\n - **pagination-info** - Informação customizada da paginação contextual. Quando utilizado, o texto padrão de contagem é substituído.\n- **loading** - Indicador exibido enquanto uma página é carregada.\n\n### **CSS Parts:**\n - **nav** - Parte para o contêiner raiz da paginação (elemento nav), usada para estilização via ::part().\n- **list** - Parte para a lista de páginas (elemento ul), usada para estilização via ::part().\n- **page** - Parte para os itens de página numérica (elemento a), usada para estilização via ::part().\n- **ellipsis** - Parte para o botão de reticências e seu contêiner.\n- **ellipsis-button** - Parte encaminhada do botão de reticências.\n- **per-page** - Parte para o seletor de itens por página na variante contextual.\n- **per-page-container** - Contêiner encaminhado do seletor de itens por página.\n- **per-page-input** - Campo encaminhado do seletor de itens por página.\n- **per-page-input-label** - Rótulo encaminhado do seletor de itens por página.\n- **per-page-list** - Lista encaminhada do seletor de itens por página.\n- **go-to** - Parte para o seletor de navegação direta na variante contextual.\n- **go-to-container** - Contêiner encaminhado do seletor de navegação direta.\n- **go-to-input** - Campo encaminhado do seletor de navegação direta.\n- **go-to-input-label** - Rótulo encaminhado do seletor de navegação direta.\n- **go-to-list** - Lista encaminhada do seletor de navegação direta.\n- **prev-button** - Parte para o botão de página anterior, usada para estilização via ::part().\n- **prev-button-inner** - Botão interno encaminhado da página anterior.\n- **next-button** - Parte para o botão de próxima página, usada para estilização via ::part().\n- **next-button-inner** - Botão interno encaminhado da próxima página.\n- **loading** - Área do indicador de carregamento.",
|
|
2952
2957
|
"attributes": [
|
|
2953
2958
|
{
|
|
2954
2959
|
"name": "color-mode",
|
|
@@ -3055,7 +3060,7 @@
|
|
|
3055
3060
|
},
|
|
3056
3061
|
{
|
|
3057
3062
|
"name": "br-radio",
|
|
3058
|
-
"description": "O
|
|
3063
|
+
"description": "O `br-radio` representa uma opção individual dentro de um conjunto de escolha única.\n\nDefina `name` para associar as opções do mesmo grupo, `value` para o valor enviado no formulário e `label` para o texto exibido.\n\n```html\n<br-radio name=\"preferencia\" value=\"email\" label=\"Receber por e-mail\" checked></br-radio>\n<br-radio name=\"preferencia\" value=\"sms\" label=\"Receber por SMS\"></br-radio>\n```\n\nEm formulários HTML, integra-se nativamente via `ElementInternals` com suporte a `required`.\n\n### Quando usar\n\n- Opção única em grupos pequenos de 2 a 5 alternativas.\n\n### Quando evitar\n\n- Mais de 5 opções: use `br-select`.\n- Seleção múltipla: use `br-checkbox`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/radio?tab=designer).\n---\n\n\n### **Events:**\n - **checkedChange** - Disparado depois que o valor do `checked` foi alterado.\n- **brRadioValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **handleCheckedChange(event: _CustomEvent<boolean>_)** - @deprecated A coordenação interna agora é limitada à raiz DOM do grupo. - Mantém o protocolo legado de sincronização por `checkedChange`.\n- **handleKeyDown(event: _KeyboardEvent_)** - Navega e seleciona o próximo/anterior rádio habilitado no grupo via teclas de seta.\nAtivado por 'keydown', move a seleção entre rádios do mesmo 'name'\nusando as setas, partindo do rádio atualmente checado.\n- **checkValidity(): _Promise<boolean>_** - Retorna `true` se o valor do radio for válido, caso contrário `false`.\nSe o radio for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise<boolean>_** - Retorna `true` se o valor do radio for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define uma mensagem de validação customizada para o radio.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise<boolean>_** - Executa o validator do radio e retorna se o valor atual é válido.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **toggleChecked()** - @deprecated Atualize a propriedade `checked` diretamente. - Inverte o valor da prop `checked`\n- **setFocus()** - Move o foco para o input radio nativo interno.\n\n### **Slots:**\n - **default** - Slot para o rótulo do rádio, como alternativa à propriedade label.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **container** - Contêiner visual do radio.\n- **radio-input** - Elemento input nativo do radio.\n- **radio-label** - Rótulo do radio.\n- **feedback** - Contêiner da mensagem de validação.",
|
|
3059
3064
|
"attributes": [
|
|
3060
3065
|
{
|
|
3061
3066
|
"name": "checked",
|
|
@@ -3094,7 +3099,7 @@
|
|
|
3094
3099
|
},
|
|
3095
3100
|
{
|
|
3096
3101
|
"name": "feedback-state",
|
|
3097
|
-
"description": "Estado de feedback
|
|
3102
|
+
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`.",
|
|
3098
3103
|
"values": [{ "name": "valid" }, { "name": "invalid" }]
|
|
3099
3104
|
},
|
|
3100
3105
|
{
|
|
@@ -3132,7 +3137,7 @@
|
|
|
3132
3137
|
},
|
|
3133
3138
|
{
|
|
3134
3139
|
"name": "br-radio-group",
|
|
3135
|
-
"description": "O
|
|
3140
|
+
"description": "O `br-radio-group` agrupa opções de múltipla escolha onde apenas uma pode ser selecionada.\n\nAdicione os elementos `br-radio` no slot padrão. Defina o rótulo do grupo em `label` e o valor selecionado em `value`.\n\n```html\n<br-radio-group label=\"Turno de atendimento\" name=\"turno\">\n <br-radio value=\"manha\" label=\"Manhã\"></br-radio>\n <br-radio value=\"tarde\" label=\"Tarde\"></br-radio>\n <br-radio value=\"noite\" label=\"Noite\"></br-radio>\n</br-radio-group>\n```\n\nEm formulários HTML, o grupo integra-se via `ElementInternals`, controlando validação nativa com `required`.\n\n### Quando usar\n\n- Entre 2 e 5 opções mutuamente exclusivas que devem permanecer visíveis.\n\n### Quando evitar\n\n- Mais de 6 opções: use `br-select` para economizar espaço de tela.\n- Seleção de múltiplas opções ao mesmo tempo: use `br-checkbox-group`.\n- Liga/desliga imediato: use `br-switch`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/radio-group?tab=designer).\n---\n\n\n### **Events:**\n - **brRadioGroupValidationChange** - Emitido ao iniciar e concluir uma validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Verifica a validade do grupo.\n- **reportValidity(): _Promise<boolean>_** - Verifica a validade e apresenta a mensagem do grupo.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define a mensagem de validade customizada do grupo.\n- **validate(): _Promise<boolean>_** - Executa o validator do grupo.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna o snapshot de validade do grupo.\n- **setFocus(): _Promise<void>_** - Move o foco para o radio marcado ou para o primeiro radio habilitado.\n\n### **Slots:**\n - **default** - Radios pertencentes ao grupo.\n- **label** - Legenda do grupo, como alternativa à propriedade `label`.\n- **description** - Texto auxiliar do grupo.\n- **feedback** - Mensagem de validação do grupo.\n- **validation-loading** - Indicador exibido durante validação assíncrona.\n\n### **CSS Parts:**\n - **group** - Fieldset semântico do grupo.\n- **legend** - Legenda e nome acessível do grupo.\n- **options** - Contêiner das opções.\n- **description** - Área de texto auxiliar.\n- **feedback** - Área de mensagem de validação.\n- **validation-loading** - Área do indicador de validação assíncrona.",
|
|
3136
3141
|
"attributes": [
|
|
3137
3142
|
{
|
|
3138
3143
|
"name": "name",
|
|
@@ -3194,7 +3199,7 @@
|
|
|
3194
3199
|
},
|
|
3195
3200
|
{
|
|
3196
3201
|
"name": "br-scrim",
|
|
3197
|
-
"description": "O
|
|
3202
|
+
"description": "O `br-scrim` cria uma máscara visual escura sobre a tela ou sobre um elemento pai para focar a atenção do usuário.\n\nUse os métodos `show()`, `hide()` ou a propriedade `active` para controlar a exibição. Coloque o conteúdo em destaque no slot padrão.\n\n```html\n<br-scrim active>\n <div class=\"destaque\">Conteúdo em evidência</div>\n</br-scrim>\n```\n\n### Quando usar\n\n- Destaque visual pontual de um elemento (tutoriais guiados ou máscaras personalizadas).\n\n### Quando evitar\n\n- Caixas de diálogo modais padrão: use `br-modal` (que já gerencia seu próprio scrim internamente).\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/scrim?tab=designer).\n---\n\n\n### **Events:**\n - **brScrimOpen** - Indica que o scrim foi aberto.\n- **brScrimClose** - Indica que o scrim foi fechado\n\n### **Methods:**\n - **setScrollThreshold(threshold: _number_)** - Define o limite de rolagem para o fechamento automático do scrim.\n- **open()** - Método público para exibir o scrim\n- **close()** - Método público para esconder o scrim\n- **toggle()** - Método público para alternar o estado de exibição do scrim\n- **updateSpotlight()** - Recalcula manualmente a posição e dimensões da fresta do scrim vazado.\nÚtil quando o elemento alvo muda de posição sem disparar resize ou scroll.\n- **handleDocumentKeyDown(event: _KeyboardEvent_)** - Intercepta todos os eventos de teclado globalmente quando o scrim está ativo.\n\nUsa `composedPath()[0]` para obter o elemento real com foco, mesmo dentro de shadow roots.\n`event.target` é redirecionado ao cruzar shadow boundaries e não reflete o elemento concreto\nquando o foco está dentro do shadow DOM de componentes filhos como `br-modal`.\n\n### **Slots:**\n - **default** - Slot para o conteúdo principal a ser exibido sobre o fundo escurecido do scrim.\n- **activator** - Slot para o elemento ativador do scrim, com prioridade sobre a propriedade activator.",
|
|
3198
3203
|
"attributes": [
|
|
3199
3204
|
{
|
|
3200
3205
|
"name": "custom-id",
|
|
@@ -3301,7 +3306,7 @@
|
|
|
3301
3306
|
},
|
|
3302
3307
|
{
|
|
3303
3308
|
"name": "br-select",
|
|
3304
|
-
"description": "O componente `br-select` é o controle oficial de seleção do GovBR-DS, desenvolvido para permitir que o usuário escolha uma ou múltiplas opções a partir de uma lista expansível. Compatível com o padrão WAI-ARIA Combobox, ele reúne em um único componente acessível o campo de acionamento/digitação, a lista suspensa e as opções selecionáveis, integrando-se nativamente a formulários HTML e frameworks modernos.\n\n### Para que serve\n\nO `br-select` gerencia todo o fluxo de interação de seleção:\n- **Seleção simples e múltipla:** Permite selecionar uma única opção ou múltiplas opções (`multiple`), incluindo a opção de selecionar ou desmarcar todas em lote.\n- **Busca e filtragem:** Oferece filtro local integrado (conforme o usuário digita) e suporte a busca remota assíncrona (`search-mode=\"remote\"`), disparando eventos para carregamento sob demanda via API.\n- **Agrupamento de opções:** Organiza opções contíguas por categoria, preservando virtualização, busca local e semântica nativa de formulário.\n- **Integração com formulários:** É associado a formulários nativos (`formAssociated`), comunicando seu valor, estado de validação (válido/inválido), mensagens de erro contextuais e eventos padrão (`change`, `input`).\n- **Navegação acessível:** Suporta controle total via teclado (setas para cima/baixo, Enter, Escape, Home, End), foco gerenciado e anúncios para leitores de tela.\n\n### Navegação por teclado\n\nO foco permanece no campo `combobox` enquanto a lista está aberta; a opção em destaque é comunicada por `aria-activedescendant`.\nAo receber foco, o campo abre a lista sem alterar a seleção atual.\n\n- **ArrowDown / ArrowUp:** abre a lista e destaca a próxima opção na direção pressionada; com a lista aberta, move o destaque sem mover o foco físico.\n- **Home / End:** em modo não filtrável, destaca a primeira ou a última opção habilitada; em modo filtrável, preserva o movimento do cursor no texto.\n- **Enter:** abre a lista quando fechada e confirma a opção destacada quando aberta.\n- **Espaço:** confirma a opção destacada em modo não filtrável; em modo filtrável, insere um espaço no campo de busca.\n- **Escape:** fecha a lista, remove o destaque e devolve o foco ao campo.\n- **Tab:** fecha a lista e deixa o navegador mover o foco para o próximo controle, sem alterar a seleção implicitamente.\n- **Busca incremental:** em modo não filtrável, caracteres consecutivos destacam a primeira opção habilitada correspondente; em modo filtrável, a digitação filtra a lista.\n- **Alt+ArrowDown / Alt+ArrowUp:** abre ou fecha a lista sem alterar a seleção.\n\n### Quando utilizar\n\n- **Utilize quando:**\n - O número de opções for moderado a grande (mais de 5 a 7 itens), onde listar todas diretamente na tela consumiria muito espaço visual.\n - For necessário filtrar opções por texto (digitação em lista longa).\n - As opções forem carregadas dinamicamente de uma API externa (busca remota/paginada).\n - O espaço no leiaute for restrito e exigir um controle compacto e expansível.\n- **Evite e prefira outro componente quando:**\n - Houver poucas opções fixas (de 2 a 4 opções mutuamente exclusivas): prefira `br-radio` ou `br-radio-group` para manter as alternativas imediatamente visíveis.\n - Houver uma escolha binária (sim/não, ativo/inativo): prefira `br-switch` ou `br-checkbox`.\n - Houver seleção múltipla com até 4 alternativas: prefira `br-checkbox` ou um grupo de checkboxes visíveis.\n\n### Composição e Subcomponentes\n\nO ecossistema do Select é composto pelo elemento principal orquestrador e três subcomponentes especializados:\n\n| Subcomponente | Papel | Regra de uso |\n| --- | --- | --- |\n| `br-select` | **Orquestrador principal.** Gerencia o valor, ciclo de vida, acessibilidade, busca, formulário e renderização dos elementos internos. | Deve ser o único componente diretamente instanciado no template da aplicação. |\n| `br-select-input` | **Campo de acionamento.** Exibe o valor selecionado, o rótulo (`label`), o campo de busca/digitação e o botão de expandir/recolher. | Coordenado automaticamente pelo `br-select`; utilize isoladamente apenas em composições arquiteturais avançadas. |\n| `br-select-list` | **Lista suspensa virtualizada.** Contêiner flutuante que renderiza as opções de forma otimizada com suporte a rolagem e virtualização. | Gerenciada exclusivamente pelo `br-select`; não deve ser usada como controle autônomo. |\n| `br-select-option` | **Item individual de opção.** Representa um valor selecionável, exibindo texto, estado de seleção e checkbox/radio associado. | Deve ser declarado dentro do slot padrão do `br-select` para cada opção desejada. |\n\nAlém dos subcomponentes, o `br-select` oferece slots dedicados:\n- `default`: Slot principal onde são passados os elementos `br-select-option`.\n- `feedback`: Slot para exibição de mensagens de validação (ex.: `br-message`).\n- `loading`: Slot para indicador de carregamento durante busca remota.\n- `validation-loading`: Slot para indicador visual durante validação assíncrona.\n\n### Como fornecer opções\n\nO `br-select` possui uma API declarativa canônica e uma API imperativa para atualizações dinâmicas:\n\n1. **Slot com `br-select-option`:** é a forma declarativa canônica para código novo. O pai lê os atributos e o conteúdo de cada opção e os transforma em dados para a lista. Em frameworks, a coleção também pode ser renderizada como vários elementos `br-select-option`.\n2. **Método `setOptions()`:** substitui a coleção de forma imperativa e deve ser reservado para dados dinâmicos, especialmente respostas de busca remota. A lista recebe os objetos e cria internamente somente a janela visível de opções.\n\n`br-select-input` e `br-select-list` não substituem essas fontes. Eles são peças internas da composição: o primeiro controla o campo de acionamento e busca; o segundo recebe a coleção normalizada e renderiza a lista virtualizada.\n\nEvite misturar slot e dados imperativos sem necessidade. Na inicialização, opções declaradas no slot têm precedência quando existem. Depois que `options` é alterada ou `setOptions()` é chamado, a coleção imperativa passa a ser a fonte de dados e alterações posteriores no slot não são sincronizadas.\n\nA prop `options` é uma API legada e está depreciada. Ela continua funcionando apenas para preservar compatibilidade: no HTML, recebe uma string JSON; em JavaScript e frameworks, recebe um array por property binding. Não a adote em código novo; use `br-select-option` ou, para respostas dinâmicas/remotas, `setOptions()`.\n\nCada objeto deve conter `value` string e pode conter `label`, `selected`, `disabled`, `indeterminate` e `content`. `content` é renderizado como HTML na lista; não use esse campo com conteúdo não confiável.\n\n### O Conceito \"Lego\" e a Diferença entre os Componentes {#conceito-lego}\n\nO ecossistema de seleção do GovBR-DS foi projetado seguindo o **conceito de peças de Lego**: modular, flexível e combinável:\n\n1. **`br-select` (Componente Principal / Modelo Pronto):**\n É o **componente principal**. Já vem montado com todas as peças essenciais integradas: o acionador (`br-select-input`), a lista flutuante virtualizada (`br-select-list`), a navegação por teclado e a integração nativa com formulários (`formAssociated`). Na quase totalidade das aplicações (99% dos casos), você deve usar apenas `<br-select>`.\n\n2. **`br-select-option` (Peça de Conteúdo):**\n É a peça de Lego que você encaixa diretamente no slot padrão do `<br-select>` para definir cada valor selecionável.\n\n3. **`br-select-input` e `br-select-list` (Subcomponentes Internos):**\n São as peças internas que formam a estrutura do `br-select`. No uso comum, **não devem ser declarados manualmente**, pois o `br-select` já os instancia e os sincroniza automaticamente.\n\n#### Quando usar apenas `<br-select>`?\nUse apenas `<br-select>` em quase todos os fluxos. Para opções fixas, declare os itens `<br-select-option>` no slot padrão; para opções dinâmicas, alimente a coleção com `setOptions()`. A prop `options` permanece disponível somente para compatibilidade legada.\n\n#### Quando montar os componentes separadamente?\nA montagem separada das peças avulsas de Lego (`br-select-input` + `br-select-list` + `br-select-option`) destina-se exclusivamente a **composições arquiteturais avançadas**, onde o leiaute exige desacoplar fisicamente o campo de acionamento da lista suspensa (ex.: campo de busca fixo na barra superior e a lista exibida dentro de um drawer ou modal lateral). Nesse caso, a aplicação precisa implementar manualmente a sincronização de foco, abertura, navegação por teclado e repasse de valor ao formulário.\n\n### Como os subcomponentes se relacionam\n\nA arquitetura do `br-select` segue o padrão de **orquestrador centralizado**:\n1. **O componente pai coordena o estado:** A aplicação declara o `<br-select>` com múltiplos `<br-select-option>` filhos ou usa `setOptions()` para dados dinâmicos. O `br-select` projeta internamente o `<br-select-input>` e a `<br-select-list>`, garantindo sincronia total de foco, estados de abertura, termos pesquisados e eventos. A prop `options` não é uma alternativa para código novo; existe somente para compatibilidade legada.\n2. **Evite montagem manual desarticulada:** Tentar declarar manualmente `br-select-input` e `br-select-list` fora do `br-select` quebra as relações de acessibilidade WAI-ARIA (combobox, controles expandidos, aria-activedescendant) e desvincula o controle da validação nativa de formulários (`ElementInternals`).\n3. **Comunicação por eventos:** Para busca remota ou resposta a seleção, a aplicação escuta os eventos disparados diretamente pelo `br-select` (`brSearch`, `change`, `input`), sem precisar interceptar nós internos da lista ou do campo de texto.\n\nPara a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).\n---\n\n\n### **Events:**\n - **brSelectStateChange** - Evento emitido quando o estado público do select muda.\n- **valueChange** - Evento emitido quando o valor público do select é alterado.\n- **optionHover** - Emite a opção que recebeu foco ou hover.\n- **brSelectSearch** - Emitido uma vez por edição do campo de busca, inclusive ao limpar a consulta.\nO `detail` contém `{ query }`; o evento é informativo e não cancelável.\nA aplicação deve controlar debounce, transporte e ciclo de vida da busca.\n- **opened** - Emitido quando a lista é aberta.\n- **closed** - Emitido quando a lista é fechada.\n- **brSelectValidationChange** - Informa o início e o resultado de uma validação síncrona ou assíncrona.\nO `detail` contém `validating`, `valid` e `message`.\n\n### **Methods:**\n - **handleSelectOptionPropsChange(event: _Event_)** - Recalcula a coleção quando uma opção projetada muda por atribuição direta\nde `selected`, `disabled`, `label`, `group` ou `value`. A lista virtualizada em\nShadow DOM não é uma fonte independente; ela recebe o snapshot pelo seu\ncontrato público `options`.\n- **enable(): _Promise<void>_** - Habilita o select para interação do usuário.\n- **disable(): _Promise<void>_** - Desabilita o select e impede novas interações.\n- **show(): _Promise<void>_** - Abre a lista de opções quando o componente está habilitado.\n- **close(): _Promise<void>_** - Fecha a lista de opções quando o componente está habilitado.\n- **toggleOpen(): _Promise<void>_** - Alterna entre os estados aberto e fechado do select.\n- **clear(): _Promise<void>_** - @deprecated Use `setValue('')` ou a API de formulário. - Limpa a seleção atual.\n- **getValue(): _Promise<string | string[]>_** - @deprecated Leia a propriedade `value` diretamente. - Retorna o valor público atual.\n- **setValue(value: _string | string[]_): _Promise<void>_** - @deprecated Atribua a propriedade `value` diretamente. - Define o valor público do select.\n- **setFocus(): _Promise<void>_** - @deprecated Use o foco nativo do componente quando possível. - Move o foco para o campo interno.\n- **setOptions(options: _SelectOptionData[]_): _Promise<void>_** - Substitui a coleção atual de opções por uma nova lista.\n- **setOption(option: _SelectOptionData_): _Promise<void>_** - Adiciona ou atualiza uma única opção na coleção interna.\n\n### **Slots:**\n - **default** - Opções declaradas com elementos br-select-option.\n- **feedback** - Mensagem de validação, normalmente um br-message.\n- **validation-loading** - Indicador exibido durante validação assíncrona.\n- **loading** - Indicador exibido durante a busca remota de opções.\n\n### **CSS Parts:**\n - **container** - Contêiner visual principal do select.\n- **input** - Campo de seleção e busca.\n- **input-container** - Contêiner visual do campo.\n- **input-label** - Rótulo do campo.\n- **input-field** - Campo input nativo.\n- **input-group** - Grupo visual do campo.\n- **input-icon** - Ícone do campo.\n- **input-action** - Botão de abertura e fechamento.\n- **input-action-button** - Botão interno da ação.\n- **list** - Lista de opções.\n- **option** - Opção individual.\n- **option-group** - Cabeçalho visual de um grupo de opções.\n- **select-all** - Alias legado para a opção de selecionar todos.\n- **empty-option** - Alias legado para a opção vazia da lista.\n- **option-checkbox** - Alias legado para o checkbox da opção.\n- **option-radio** - Alias legado para o radio da opção.\n- **hidden-select** - Select nativo invisível usado na integração com formulários.\n- **feedback** - Área de mensagem de validação.\n- **validation-loading** - Área do indicador de validação assíncrona.",
|
|
3309
|
+
"description": "O `br-select` permite escolher uma ou mais opções em uma lista suspensa expansível com suporte a busca e virtualização.\n\nDeclare as opções com `<br-select-option>` no slot padrão, ou forneça os dados dinamicamente com o método `setOptions()`. Para seleção múltipla, use `multiple`. Para habilitar busca por digitação, use `filterable`.\n\n```html\n<br-select label=\"Estado\" placeholder=\"Selecione um estado\">\n <br-select-option value=\"df\" label=\"Distrito Federal\"></br-select-option>\n <br-select-option value=\"sp\" label=\"São Paulo\"></br-select-option>\n <br-select-option value=\"rj\" label=\"Rio de Janeiro\"></br-select-option>\n</br-select>\n```\n\nEm formulários HTML, o componente integra-se nativamente via `ElementInternals`, enviando os valores selecionados no submit e validando campos obrigatórios com `required`.\n\n### Quando usar\n\n- Listas com 5 ou mais opções que ocupariam muito espaço visível se exibidas abertas.\n- Seleção que exige filtro ou busca por digitação.\n- Carregamento dinâmico ou remoto de opções a partir de uma API (`search-mode=\"remote\"`).\n\n### Quando evitar\n\n- Poucas opções fixas (2 a 4 opções): use `br-radio` ou `br-radio-group`.\n- Escolha simples de sim/não: use `br-switch` ou `br-checkbox`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/select?tab=designer).\n---\n\n\n### **Events:**\n - **brSelectStateChange** - Evento emitido quando o estado público do select muda.\n- **valueChange** - Evento emitido quando o valor público do select é alterado.\n- **optionHover** - Emite a opção que recebeu foco ou hover.\n- **brSelectSearch** - Emitido uma vez por edição do campo de busca, inclusive ao limpar a consulta.\nO `detail` contém `{ query }`; o evento é informativo e não cancelável.\nA aplicação deve controlar debounce, transporte e ciclo de vida da busca.\n- **opened** - Emitido quando a lista é aberta.\n- **closed** - Emitido quando a lista é fechada.\n- **brSelectValidationChange** - Informa o início e o resultado de uma validação síncrona ou assíncrona.\nO `detail` contém `validating`, `valid` e `message`.\n\n### **Methods:**\n - **handleSelectOptionPropsChange(event: _Event_)** - Recalcula a coleção quando uma opção projetada muda por atribuição direta\nde `selected`, `disabled`, `label`, `group` ou `value`. A lista virtualizada em\nShadow DOM não é uma fonte independente; ela recebe o snapshot pelo seu\ncontrato público `options`.\n- **enable(): _Promise<void>_** - Habilita o select para interação do usuário.\n- **disable(): _Promise<void>_** - Desabilita o select e impede novas interações.\n- **show(): _Promise<void>_** - Abre a lista de opções quando o componente está habilitado.\n- **close(): _Promise<void>_** - Fecha a lista de opções quando o componente está habilitado.\n- **toggleOpen(): _Promise<void>_** - Alterna entre os estados aberto e fechado do select.\n- **clear(): _Promise<void>_** - @deprecated Use `setValue('')` ou a API de formulário. - Limpa a seleção atual.\n- **getValue(): _Promise<string | string[]>_** - @deprecated Leia a propriedade `value` diretamente. - Retorna o valor público atual.\n- **setValue(value: _string | string[]_): _Promise<void>_** - @deprecated Atribua a propriedade `value` diretamente. - Define o valor público do select.\n- **setFocus(): _Promise<void>_** - @deprecated Use o foco nativo do componente quando possível. - Move o foco para o campo interno.\n- **setOptions(options: _SelectOptionData[]_): _Promise<void>_** - Substitui a coleção atual de opções por uma nova lista.\n- **setOption(option: _SelectOptionData_): _Promise<void>_** - Adiciona ou atualiza uma única opção na coleção interna.\n\n### **Slots:**\n - **default** - Opções declaradas com elementos br-select-option.\n- **feedback** - Mensagem de validação, normalmente um br-message.\n- **validation-loading** - Indicador exibido durante validação assíncrona.\n- **loading** - Indicador exibido na lista enquanto `loading` está ativo. Padrão: spinner com o texto \"Pesquisando…\"; aceita texto, imagem ou qualquer HTML.\n\n### **CSS Parts:**\n - **container** - Contêiner visual principal do select.\n- **input** - Campo de seleção e busca.\n- **input-container** - Contêiner visual do campo.\n- **input-label** - Rótulo do campo.\n- **input-field** - Campo input nativo.\n- **input-group** - Grupo visual do campo.\n- **input-icon** - Ícone do campo.\n- **input-action** - Botão de abertura e fechamento.\n- **input-action-button** - Botão interno da ação.\n- **input-clear** - Botão de limpar o termo digitado durante a busca.\n- **list** - Lista de opções.\n- **option** - Opção individual.\n- **option-group** - Cabeçalho visual de um grupo de opções.\n- **select-all** - Alias legado para a opção de selecionar todos.\n- **empty-option** - Alias legado para a opção vazia da lista.\n- **option-checkbox** - Alias legado para o checkbox da opção.\n- **option-radio** - Alias legado para o radio da opção.\n- **hidden-select** - Select nativo invisível usado na integração com formulários.\n- **feedback** - Área de mensagem de validação.\n- **validation-loading** - Área do indicador de validação assíncrona.",
|
|
3305
3310
|
"attributes": [
|
|
3306
3311
|
{
|
|
3307
3312
|
"name": "borderless",
|
|
@@ -3415,17 +3420,22 @@
|
|
|
3415
3420
|
},
|
|
3416
3421
|
{
|
|
3417
3422
|
"name": "search-mode",
|
|
3418
|
-
"description": "Define se as opções são filtradas localmente ou fornecidas por uma busca remota.\nEm `remote`, o componente emite `brSelectSearch
|
|
3423
|
+
"description": "Define se as opções são filtradas localmente ou fornecidas por uma busca remota.\nEm `remote`, o componente emite `brSelectSearch` e exibe as opções recebidas\nsem filtrá-las de novo pelo termo digitado; a aplicação deve buscar, validar e\naplicar a resposta com `setOptions()` ou re-renderizando os `br-select-option`.\nA seleção é preservada mesmo quando não aparece na resposta seguinte.",
|
|
3419
3424
|
"values": [{ "name": "SelectSearchMode" }]
|
|
3420
3425
|
},
|
|
3421
3426
|
{
|
|
3422
3427
|
"name": "loading",
|
|
3423
|
-
"description": "Indica que uma busca remota de opções está pendente.\nEnquanto ativo, novas
|
|
3428
|
+
"description": "Indica que uma busca remota de opções está pendente.\nEnquanto ativo, a lista exibe o slot `loading` (padrão: \"Pesquisando…\") e novas\nopções não podem ser selecionadas; a aplicação continua responsável por\ndebounce, cancelamento, erros e autenticação.",
|
|
3424
3429
|
"values": []
|
|
3425
3430
|
},
|
|
3426
3431
|
{
|
|
3427
3432
|
"name": "show-search-icon",
|
|
3428
|
-
"description": "Exibe o
|
|
3433
|
+
"description": "Exibe a lupa mesmo quando o select não é filtrável; selects com `filterable`\njá a exibem. A lupa é omitida quando o campo é estreito demais (menos de\n128px) para comportar lupa, valor e seta.",
|
|
3434
|
+
"values": []
|
|
3435
|
+
},
|
|
3436
|
+
{
|
|
3437
|
+
"name": "hide-search-icon",
|
|
3438
|
+
"description": "Oculta a lupa mesmo quando `filterable` está ativo, sem desabilitar a busca.\nTem precedência visual sobre `showSearchIcon` e não altera o comportamento padrão.",
|
|
3429
3439
|
"values": []
|
|
3430
3440
|
},
|
|
3431
3441
|
{
|
|
@@ -3474,7 +3484,7 @@
|
|
|
3474
3484
|
},
|
|
3475
3485
|
{
|
|
3476
3486
|
"name": "br-select-input",
|
|
3477
|
-
"description": "
|
|
3487
|
+
"description": "Campo de texto e acionamento interno do `br-select`.\n\nÉ gerenciado automaticamente pelo `br-select` para exibir o valor selecionado, receber termos de busca e abrir ou fechar a lista suspensa. Não é necessário utilizá-lo de forma avulsa.\n---\n\n\n### **Events:**\n - **brSelectInputFocus** - Evento emitido quando o campo interno recebe foco.\n- **brSelectInputValueChange** - Evento emitido quando o valor digitado no campo de busca muda.\n- **brSelectInputActionClick** - Evento emitido quando o usuário aciona o ícone de abertura/fechamento.\n- **brSelectInputClick** - Evento emitido quando o usuário clica no campo do select.\n\n### **Methods:**\n - **syncCombobox(state: _SelectComboboxState_): _Promise<void>_** - Sincroniza o estado acessível do campo com o select orquestrador.\n- **flipUp(): _Promise<void>_** - Atualiza o ícone para o estado visual de lista aberta.\n- **flipDown(): _Promise<void>_** - Atualiza o ícone para o estado visual de lista fechada.\n- **setFocus(): _Promise<void>_** - Reaplica o foco no input nativo encapsulado por `br-input`.\n\n### **CSS Parts:**\n - **container** - Contêiner visual do campo.\n- **input** - Campo input nativo.\n- **label** - Rótulo do campo.\n- **group** - Grupo visual do campo.\n- **icon** - Ícone do campo.\n- **action** - Botão de ação.\n- **action-button** - Botão interno da ação.\n- **clear** - Botão de limpar o texto digitado.",
|
|
3478
3488
|
"attributes": [
|
|
3479
3489
|
{
|
|
3480
3490
|
"name": "borderless",
|
|
@@ -3533,7 +3543,12 @@
|
|
|
3533
3543
|
},
|
|
3534
3544
|
{
|
|
3535
3545
|
"name": "show-search-icon",
|
|
3536
|
-
"description": "Exibe a lupa mesmo quando o campo não é filtrável.\nQuando filterable é true, a lupa é exibida automaticamente.",
|
|
3546
|
+
"description": "Exibe a lupa mesmo quando o campo não é filtrável.\nQuando filterable é true, a lupa é exibida automaticamente.\nEm campos com menos de 128px, a lupa é omitida para preservar valor e seta.",
|
|
3547
|
+
"values": []
|
|
3548
|
+
},
|
|
3549
|
+
{
|
|
3550
|
+
"name": "clearable",
|
|
3551
|
+
"description": "Exibe o botão de limpar enquanto houver texto no campo editável.\nO `br-select` o ativa somente durante a busca, para limpar o termo digitado\nsem alterar a seleção.",
|
|
3537
3552
|
"values": []
|
|
3538
3553
|
},
|
|
3539
3554
|
{
|
|
@@ -3546,7 +3561,7 @@
|
|
|
3546
3561
|
},
|
|
3547
3562
|
{
|
|
3548
3563
|
"name": "br-select-list",
|
|
3549
|
-
"description": "
|
|
3564
|
+
"description": "Painel suspenso com lista virtualizada do `br-select`.\n\nÉ gerenciado internamente pelo `br-select` para exibir as opções com alta performance, mesmo em listas grandes. Não é necessário utilizá-lo de forma avulsa.\n---\n\n\n### **Methods:**\n - **open(): _Promise<void>_** - Abre a lista e agenda a medição das opções quando necessário.\n- **close(): _Promise<void>_** - Fecha a lista de opções.\n- **setOptions(options: _SelectOptionData[]_): _Promise<void>_** - Substitui todas as opções renderizadas pela lista.\n- **setOption(option: _SelectOptionData_): _Promise<void>_** - Adiciona ou atualiza uma única opção na coleção atual.\n- **setSearchTerm(term: _string_): _Promise<void>_** - Atualiza o termo de busca e reinicia a janela virtual no topo.\n- **setMultiple(isMultiple: _boolean_): _Promise<void>_** - Alterna a lista entre modo simples e múltiplo.\n- **getOptions(): _Promise<SelectOptionData[]>_** - Retorna uma cópia das opções atualmente controladas pela lista.\n- **scrollOptionToTop(index: _number_): _Promise<boolean>_** - Posiciona uma opção no topo da viewport virtual, respeitando o limite final da lista.\n- **scrollFirstSelectedOptionToTop(): _Promise<boolean>_** - Posiciona no topo a primeira opção selecionada na ordem visual da lista.\nA opção auxiliar de selecionar tudo não participa dessa escolha.\n- **focusOption(index: _number_): _Promise<boolean>_** - Garante visibilidade e foco para uma opção específica.\n- **revealOption(index: _number_): _Promise<boolean>_** - Torna o item ativo visível sem retirar o foco do campo.\n- **setOptionSelected(index: _number_, selected: _boolean_): _Promise<boolean>_** - Aciona a seleção programática de uma opção específica.\n\n### **Slots:**\n - **loading** - Indicador exibido enquanto resultados remotos são carregados. Padrão: spinner com o texto \"Pesquisando…\".\n\n### **CSS Parts:**\n - **list** - Contêiner visual da lista virtualizada.\n- **loading** - Área do indicador de carregamento.\n- **option-group** - Cabeçalho visual de um grupo de opções.",
|
|
3550
3565
|
"attributes": [
|
|
3551
3566
|
{
|
|
3552
3567
|
"name": "density",
|
|
@@ -3563,6 +3578,11 @@
|
|
|
3563
3578
|
"description": "Termo usado para filtrar opções por rótulo ou valor.",
|
|
3564
3579
|
"values": []
|
|
3565
3580
|
},
|
|
3581
|
+
{
|
|
3582
|
+
"name": "search-mode",
|
|
3583
|
+
"description": "Define se `searchTerm` filtra as opções (`local`) ou se as opções já chegam\nfiltradas pelo servidor (`remote`). Nos dois modos, um termo sem resultados\nexibe a mensagem de lista vazia. Valores inválidos usam `local`.",
|
|
3584
|
+
"values": [{ "name": "SelectSearchMode" }]
|
|
3585
|
+
},
|
|
3566
3586
|
{
|
|
3567
3587
|
"name": "loading",
|
|
3568
3588
|
"description": "Indica que os resultados remotos estão sendo carregados.",
|
|
@@ -3608,7 +3628,7 @@
|
|
|
3608
3628
|
},
|
|
3609
3629
|
{
|
|
3610
3630
|
"name": "br-select-option",
|
|
3611
|
-
"description": "
|
|
3631
|
+
"description": "Representa uma opção dentro do `br-select`. Use no slot padrão do componente.\n\nDefina `value` para o valor de formulário e `label` para o texto exibido. Use `selected` para marcar a opção como selecionada inicialmente e `disabled` para desabilitá-la. Para agrupamento, utilize `group`.\n\n```html\n<br-select-option value=\"df\" label=\"Distrito Federal\"></br-select-option>\n```\n---\n\n\n### **Events:**\n - **brSelectOptionStateChange** - Evento emitido ao ativar a opção por clique, teclado ou `setSelectedState()`.\nFora de `br-select`, também informa alterações de `selected` e `disabled`.\nDentro de `br-select`, a sincronização dessas props não é uma nova interação.\n- **brSelectOptionPropsChange** - Evento legado emitido quando as propriedades da opção são alteradas.\n\n### **Methods:**\n - **getItemHeight(): _Promise<number>_** - Retorna a altura efetiva da opção para cálculo de virtual scroll.\n- **setFocus(): _Promise<void>_** - Encaminha o foco para o elemento interativo interno da opção.\n- **setSelectedState(selected: _boolean_): _Promise<void>_** - Atualiza programaticamente o estado selecionado da opção.\n\n### **Slots:**\n - **default** - Conteúdo ou rótulo visual da opção.\n\n### **CSS Parts:**\n - **option** - Item visual da opção.\n- **checkbox** - Checkbox exibido no modo múltiplo.",
|
|
3612
3632
|
"attributes": [
|
|
3613
3633
|
{
|
|
3614
3634
|
"name": "density",
|
|
@@ -3660,7 +3680,7 @@
|
|
|
3660
3680
|
},
|
|
3661
3681
|
{
|
|
3662
3682
|
"name": "br-sign-in",
|
|
3663
|
-
"description": "O
|
|
3683
|
+
"description": "O `br-sign-in` padroniza o botão oficial de autenticação da conta gov.br.\n\nPode ser exibido no formato padrão (bloco com texto) ou no formato circular compacto com `shape=\"circle\"`. Use a propriedade `density` para ajustar a densidade visual.\n\n```html\n<br-sign-in label=\"Entrar com gov.br\"></br-sign-in>\n<br-sign-in shape=\"circle\" aria-label=\"Entrar com gov.br\"></br-sign-in>\n```\n\n### Quando usar\n\n- Ponto de acesso ou login único com a conta Gov.br em serviços públicos federais.\n\n### Quando evitar\n\n- Ações gerais de formulário (salvar, enviar, cancelar): use `br-button`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/signin?tab=designer).\n---\n\n\n### **Events:**\n - **brNavigate** - Evento cancelável emitido em `navigation-mode=\"event\"` para cliques primários sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA.\n\n### **Slots:**\n - **default** - Slot para o texto do sign-in.\n- **icon** - Slot para ícone personalizado; em `shape=\"circle\"`, o padrão é um SVG local de usuário.\n- **image** - Slot para imagem ou ícone ao lado do texto.\n\n### **CSS Parts:**\n - **content** - Parte para a área de conteúdo/texto do sign-in, usada para estilização via ::part().\n- **image** - Parte para a área da imagem/ícone, usada para controle de tamanho via CSS e ::part().",
|
|
3664
3684
|
"attributes": [
|
|
3665
3685
|
{
|
|
3666
3686
|
"name": "custom-id",
|
|
@@ -3717,7 +3737,7 @@
|
|
|
3717
3737
|
},
|
|
3718
3738
|
{
|
|
3719
3739
|
"name": "br-skip-link",
|
|
3720
|
-
"description": "O
|
|
3740
|
+
"description": "O `br-skip-link` fornece atalhos acessíveis de teclado no topo da página para saltar blocos repetitivos de conteúdo.\n\nPosicione no início da página. Declare os atalhos usando elementos `br-skip-link-item` no slot padrão, apontando cada destino em `target`.\n\n```html\n<br-skip-link>\n <br-skip-link-item target=\"#conteudo-principal\">Ir para o conteúdo</br-skip-link-item>\n <br-skip-link-item target=\"#menu-navegacao\">Ir para o menu</br-skip-link-item>\n</br-skip-link>\n```\n\nO componente permanece oculto e se torna visível automaticamente assim que recebe o foco do teclado (Tab).\n\n### Quando usar\n\n- No topo de todas as páginas para cumprir as diretrizes de acessibilidade (WCAG 2.4.1).\n\n### Quando evitar\n\n- Links de navegação comuns no corpo do texto: use `br-link`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/skip-link?tab=designer).\n---\n\n\n### **Events:**\n - **brSkiplinkNavigation** - Evento emitido quando um item do skiplink é ativado.\nO evento contém informações sobre o item acionado e o elemento target.\n- **brSkipLinkNavigate** - Evento emitido quando um destino é ativado.\n- **brDidShow** - Evento emitido quando o skiplink se torna visível.\n- **brSkipLinkShow** - Evento emitido ao exibir o componente.\n- **brDidHide** - Evento emitido quando o skiplink se torna oculto.\n- **brSkipLinkHide** - Evento emitido ao ocultar o componente.\n\n### **Methods:**\n - **watchModeChanges()** - Observa mudanças nos estados que afetam o modo efetivo (simple/compound)\ne atualiza as contagens dos itens quando necessário.\n- **handleItemNavigation(event: _CustomEvent<{ itemId: string; target: string }>_)** - Listener para eventos de navegação dos itens filhos.\n- **handleFocusIn(event: _FocusEvent_)** - Listener para evento de foco no componente.\n- **handleFocusOut(event: _FocusEvent_)** - Listener para evento de perda de foco no componente.\n- **handleKeyDown(event: _KeyboardEvent_)** - Listener para a tecla Escape.\n- **hide(): _Promise<void>_** - Oculta o componente programaticamente.\n- **show(): _Promise<void>_** - Exibe o componente programaticamente.\n\n### **Slots:**\n - **default** - Slot para inserir os itens de navegação rápida (br-skip-link-item). A tag br-skiplink-item é aceita por compatibilidade.\n\n### **CSS Parts:**\n - **container** - Parte para o contêiner principal do componente skip-link, usada para estilização via ::part().",
|
|
3721
3741
|
"attributes": [
|
|
3722
3742
|
{
|
|
3723
3743
|
"name": "custom-id",
|
|
@@ -3754,7 +3774,7 @@
|
|
|
3754
3774
|
},
|
|
3755
3775
|
{
|
|
3756
3776
|
"name": "br-skip-link-item",
|
|
3757
|
-
"description": "
|
|
3777
|
+
"description": "Representa um atalho de salto dentro do `br-skip-link`.\n\nAponte em `target` o seletor ou `id` do elemento de destino (ex.: `#conteudo`). Coloque o texto no slot padrão.\n\n```html\n<br-skip-link-item target=\"#conteudo\">Ir para o conteúdo principal</br-skip-link-item>\n```\n---\n\n\n### **Methods:**\n - **itemFocus(): _Promise<void>_** - Encaminha o foco para o item legado sem expor seu Shadow DOM ao pai.\n- **navigateToTarget(): _Promise<void>_** - Encaminha a navegação para o item legado sem expor seu Shadow DOM ao pai.\n\n### **Slots:**\n - **default** - Texto do link de navegação rápida.\n- **tag** - Conteúdo da indicação do atalho.",
|
|
3758
3778
|
"attributes": [
|
|
3759
3779
|
{
|
|
3760
3780
|
"name": "target",
|
|
@@ -3781,7 +3801,7 @@
|
|
|
3781
3801
|
},
|
|
3782
3802
|
{
|
|
3783
3803
|
"name": "br-skiplink-item",
|
|
3784
|
-
"description": "@deprecated Use `br-skip-link-item`.\n\
|
|
3804
|
+
"description": "@deprecated Use `br-skip-link-item`.\n\nItem legado de atalho do `br-skip-link`. Em código novo, utilize `br-skip-link-item`.\n\nDefina o destino em `target` e o texto do link no slot padrão.\n---\n\n\n### **Events:**\n - **brSkiplinkItemClick** - Evento emitido quando o item é clicado/ativado.\nO evento contém informações sobre o item e o target.\n- **brSkipLinkItemActivate** - Evento emitido quando o item é ativado.\n- **brSkiplinkItemFocus** - Evento emitido quando o item recebe foco.\n- **brSkipLinkItemFocus** - Evento emitido quando o item recebe foco.\n\n### **Methods:**\n - **handleClick(_event: _MouseEvent_)** - Listener para cliques no item.\n- **handleKeyDown(event: _KeyboardEvent_)** - Listener para teclas Enter, Space e atalho Alt+[keyNumber].\n- **handleFocus()** - Listener para foco no item.\n- **itemFocus(): _Promise<void>_** - Move o foco para este item.\n- **navigateToTarget(): _Promise<void>_** - Navega para o target definido.\nMove o foco para o elemento alvo e ajusta a rolagem da página se necessário.\n\n### **Slots:**\n - **default** - Slot para o texto do link de navegação rápida.\n- **tag** - Slot para personalizar a tag numérica do atalho de teclado, exibindo o valor de key-number por padrão.",
|
|
3785
3805
|
"attributes": [
|
|
3786
3806
|
{
|
|
3787
3807
|
"name": "target",
|
|
@@ -3808,7 +3828,7 @@
|
|
|
3808
3828
|
},
|
|
3809
3829
|
{
|
|
3810
3830
|
"name": "br-slider",
|
|
3811
|
-
"description": "O
|
|
3831
|
+
"description": "O `br-slider` seleciona um valor ou uma faixa de valores numéricos em uma trilha graduada.\n\nUse `min`, `max`, `step` e `value` para definir os limites e o valor. Para selecionar um intervalo (faixa com duas alças), use `range` e `range-value`.\n\n```html\n<br-slider min=\"0\" max=\"100\" value=\"50\" label=\"Volume\"></br-slider>\n<br-slider min=\"0\" max=\"1000\" range range-value=\"[200, 800]\" label=\"Faixa de preço\"></br-slider>\n```\n\n### Quando usar\n\n- Ajuste gradual de quantidades contínuas (volume, brilho, zoom).\n- Filtros de intervalos numéricos ou de preços.\n\n### Quando evitar\n\n- Entrada numérica exata arbitrária: use `br-input` com `type=\"number\"`.\n- Poucas escolhas fixas discretas: use `br-radio` ou `br-select`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/slider?tab=designer).\n---\n\n\n### **Events:**\n - **brDidChangeValue** - Disparado após alteração do valor da alça inicial.\n- **brDidChangeValueEnd** - Disparado após alteração do valor da alça final (modo composto).\n- **brSliderValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Retorna se o slider atende às constraints configuradas.\n- **reportValidity(): _Promise<boolean>_** - Valida e solicita ao navegador a apresentação do erro atual.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define ou limpa uma mensagem de validade customizada.\n- **validate(): _Promise<boolean>_** - Executa o validator do slider e retorna se o valor atual é válido.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n\n### **Slots:**\n - **ref-start** - Conteúdo exibido como referência inicial abaixo da trilha.\n- **ref-end** - Conteúdo exibido como referência final abaixo da trilha.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n- **thumb-icon** - Ícone customizado na alça de controle em modo simples.\n- **thumb-start-icon** - Ícone customizado na alça inicial em modo composto.\n- **thumb-end-icon** - Ícone customizado na alça final em modo composto.\n\n### **CSS Parts:**\n - **base** - Contêiner principal do slider.\n- **layout** - Contêiner de layout do slider.\n- **body** - Área que agrupa trilha e referências.\n- **track** - Área interativa da trilha.\n- **track-visual** - Trilha visual do slider.\n- **tick-labels** - Contêiner das etiquetas das marcações.\n- **tick-label** - Etiqueta de uma marcação intermediária.\n- **filled-track** - Trecho preenchido da trilha.\n- **value-label** - Etiqueta com o valor da alça.\n- **value-label-arrow** - Seta da etiqueta de valor.\n- **thumb** - Alça de controle do slider.\n- **thumb-start** - Alça inicial do slider.\n- **thumb-end** - Alça final do slider em modo composto.\n- **references** - Contêiner das referências inicial e final.\n- **reference-start** - Referência inicial.\n- **reference-end** - Referência final.\n- **reference-bound** - Valor fixo de limite renderizado por `show-bounds`.\n- **input-wrapper** - Contêiner do campo numérico.\n- **input** - Campo numérico sincronizado com o slider.\n- **feedback** - Contêiner da mensagem de validação.\n- **steps** - Contêiner das marcações de passos customizados.\n- **step** - Botão indicador de passo customizado individual.",
|
|
3812
3832
|
"attributes": [
|
|
3813
3833
|
{
|
|
3814
3834
|
"name": "custom-id",
|
|
@@ -3872,7 +3892,7 @@
|
|
|
3872
3892
|
},
|
|
3873
3893
|
{
|
|
3874
3894
|
"name": "orientation",
|
|
3875
|
-
"description": "Orientação
|
|
3895
|
+
"description": "Orientação padrão. Quando informada, tem precedência sobre `vertical`; valores inválidos usam `horizontal`.",
|
|
3876
3896
|
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
3877
3897
|
},
|
|
3878
3898
|
{
|
|
@@ -3912,7 +3932,7 @@
|
|
|
3912
3932
|
},
|
|
3913
3933
|
{
|
|
3914
3934
|
"name": "thumb-icon",
|
|
3915
|
-
"description": "Nome do ícone a ser exibido no interior da alça de controle (thumb).\nNo modo `range`, aplica-se a ambas as alças caso `thumbStartIcon` ou `thumbEndIcon` não sejam especificados.\nExemplo: 'fa-solid:arrows-
|
|
3935
|
+
"description": "Nome do ícone a ser exibido no interior da alça de controle (thumb).\nNo modo `range`, aplica-se a ambas as alças caso `thumbStartIcon` ou `thumbEndIcon` não sejam especificados.\nExemplo: 'fa-solid:arrows-alt-h', 'fa-solid:circle'.",
|
|
3916
3936
|
"values": []
|
|
3917
3937
|
},
|
|
3918
3938
|
{
|
|
@@ -3940,7 +3960,7 @@
|
|
|
3940
3960
|
},
|
|
3941
3961
|
{
|
|
3942
3962
|
"name": "br-step",
|
|
3943
|
-
"description": "O
|
|
3963
|
+
"description": "O `br-step` exibe o progresso visual de um fluxo dividido em etapas consecutivas.\n\nDeclare cada etapa com `br-step-item` no slot padrão. Controle a etapa ativa pela propriedade `current`. Suporta orientação horizontal e vertical via `direction`.\n\n```html\n<br-step current=\"2\">\n <br-step-item step-number=\"1\" label=\"Identificação\"></br-step-item>\n <br-step-item step-number=\"2\" label=\"Dados Pessoais\"></br-step-item>\n <br-step-item step-number=\"3\" label=\"Confirmação\"></br-step-item>\n</br-step>\n```\n\n### Quando usar\n\n- Processos lineares com 3 ou mais etapas bem delimitadas.\n\n### Quando evitar\n\n- Formulários de múltiplas páginas onde o próprio componente gerencia as telas: use `br-wizard`.\n- Navegação plana entre abas da mesma tela: use `br-tab`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/step?tab=designer).\n---\n\n\n### **Events:**\n - **brStepChange** - Emite um evento quando o step ativo muda.\nO evento carrega o índice do novo step ativo (0-based).\n\n### **Methods:**\n - **activeStepChanged(newValue: _number_, oldValue: _number_)** - Observa mudanças na etapa ativa e sincroniza os itens filhos.\n- **initialStepChanged(newValue: _string | number_, oldValue: _string | number_)** - Observa mudanças no passo inicial e atualiza a etapa ativa.\n- **labelPositionChanged()** - Observa mudanças na posição do label e propaga aos itens.\n- **contentTypeChanged()** - Observa mudanças no tipo de conteúdo e propaga aos itens.\n- **modeChanged(_newValue: _StepMode_)** - Observa mudanças no modo e propaga aos itens.\n- **layoutChanged()** - Observa mudanças no layout e atualiza a linha do tempo dos itens.\n- **progressionTypeChanged()** - Observa mudanças no tipo de progressão e atualiza itens desabilitados.\n- **verticalContentPlacementChanged()** - Observa mudanças na posição do conteúdo vertical e propaga aos itens.\n- **handleClick(event: _MouseEvent_)** - listener para ouvir o evento de click no componente step\nAtravés desse listener o componente define qual será o proximo passo do step que terá o estado ativo\n- **ProceedToNextStep()** - @deprecated Use `next`. - \nMétodo disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep\n- **next(): _Promise<void>_** - Avança para o próximo passo.\n- **BackToPreviousStep()** - @deprecated Use `previous`. - \nMétodo disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep\n- **previous(): _Promise<void>_** - Retorna ao passo anterior.\n- **StepValidation(validationStatus: _StepValidationStatus_)** - @deprecated Use `setCurrentValidation`. - \nMétodo disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo.\n- **setCurrentValidation(validationStatus: _StepValidationStatus_): _Promise<void>_** - Define o estado de validação do passo ativo.\n- **GetActiveStep()** - \nMétodo disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.\n\n### **Slots:**\n - **default** - Slot para os itens do step (br-step-item), aceitando apenas esse componente.\n\n### **CSS Parts:**\n - **container** - Parte para o contêiner principal envolvendo todos os step-items, usada para estilizar layout geral via ::part().",
|
|
3944
3964
|
"attributes": [
|
|
3945
3965
|
{
|
|
3946
3966
|
"name": "layout",
|
|
@@ -3992,7 +4012,7 @@
|
|
|
3992
4012
|
},
|
|
3993
4013
|
{
|
|
3994
4014
|
"name": "br-step-item",
|
|
3995
|
-
"description": "
|
|
4015
|
+
"description": "Representa uma etapa individual dentro do `br-step`.\n\nDefina o número da etapa em `step-number` e o texto em `label`. Use `status` (`done`, `active`, `pending`) para indicar o estado da etapa.\n---\n\n\n### **Methods:**\n - **setStepItemPositionStatus(value: _StepItemPositionStatus_)** - \nMétodo disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente\n- **handleShowTimeLine(value: _boolean_, layout: _StepItemLayout_)** - Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.\n- **setLabelPosition(value: _StepItemLabelPosition_)** - \nMétodo disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado\n- **setContentType(value: _StepItemContentType_)** - \nMétodo disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem\n- **setMode(value: _StepItemMode_)** - \nMétodo disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.\n- **setItemRole(value: _StepItemRole_)** - Define o role ARIA do botão interno.\nChamado pelo componente pai quando o contexto semântico exige um role\ndiferente do padrão `option` (ex.: `tab` em contexto de tablist).\n- **setContent(value: _string_)** - \nMétodo disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem\n- **setVerticalContentPlacement(value: _StepItemVerticalContentPlacement_)** - Método que define a posição do conteúdo no layout vertical.\n\n### **Slots:**\n - **content-area** - Slot para conteúdo customizado dentro do botão do item do step.\n- **step-content** - Slot para conteúdo da etapa exibido no layout vertical (texto, formulário, etc.).\n\n### **CSS Parts:**\n - **label** - Parte para o contêiner do texto da etapa, usada para estilizar tipografia e cor via ::part().",
|
|
3996
4016
|
"attributes": [
|
|
3997
4017
|
{
|
|
3998
4018
|
"name": "label",
|
|
@@ -4039,7 +4059,7 @@
|
|
|
4039
4059
|
},
|
|
4040
4060
|
{
|
|
4041
4061
|
"name": "br-switch",
|
|
4042
|
-
"description": "O
|
|
4062
|
+
"description": "O `br-switch` alterna instantaneamente entre os estados ligado e desligado.\n\nDefina o estado em `checked`. Opcionalmente configure os rótulos de estado em `label-on` e `label-off`.\n\n```html\n<br-switch label=\"Receber notificações por e-mail\" checked></br-switch>\n<br-switch label=\"Modo escuro\" label-on=\"Ligado\" label-off=\"Desligado\"></br-switch>\n```\n\nEm formulários HTML, o componente integra-se via `ElementInternals`, participando do submit nativo.\n\n### Quando usar\n\n- Ativar ou desativar uma funcionalidade com efeito imediato na tela ou configuração.\n\n### Quando evitar\n\n- Confirmação de termos em formulários (ex.: \"Li e concordo\"): use `br-checkbox`.\n- Escolha entre alternativas mutuamente exclusivas: use `br-radio`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/switch?tab=designer).\n---\n\n\n### **Events:**\n - **checkedChange** - Disparado depois que o valor do `checked` foi alterado.\n- **brSwitchValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Retorna `true` se o valor do switch for válido, caso contrário `false`.\nSe o switch for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise<boolean>_** - Retorna `true` se o valor do componente for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define uma mensagem de validação customizada para o switch.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise<boolean>_** - Executa o validator do switch e retorna se o valor atual é válido.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **toggleChecked()** - @deprecated Atualize a propriedade `checked` diretamente. - Inverte o valor da prop `checked`\n\n### **Slots:**\n - **default** - Slot para o rótulo do switch, com prioridade sobre a propriedade label.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **container** - Contêiner visual do switch.\n- **input** - Elemento input nativo com role switch.\n- **label** - Rótulo do switch.\n- **data** - Elemento com textos de estado ligado/desligado.\n- **feedback** - Contêiner da mensagem de validação.",
|
|
4043
4063
|
"attributes": [
|
|
4044
4064
|
{
|
|
4045
4065
|
"name": "disabled",
|
|
@@ -4120,7 +4140,7 @@
|
|
|
4120
4140
|
},
|
|
4121
4141
|
{
|
|
4122
4142
|
"name": "br-tab",
|
|
4123
|
-
"description": "O
|
|
4143
|
+
"description": "O `br-tab` organiza diferentes visões ou painéis de conteúdo na mesma página através de abas navegáveis.\n\nDeclare os itens usando `br-tab-item` no slot padrão. O componente gera automaticamente os botões da barra de navegação e controla a exibição do painel correspondente.\n\n```html\n<br-tab>\n <br-tab-item label=\"Dados Cadastrais\">\n <p>Conteúdo da primeira aba.</p>\n </br-tab-item>\n <br-tab-item label=\"Documentos\">\n <p>Conteúdo da segunda aba.</p>\n </br-tab-item>\n</br-tab>\n```\n\n### Quando usar\n\n- Alternar entre conjuntos equivalentes de informação sem sair da página e sem ordem fixa de leitura.\n\n### Quando evitar\n\n- Processos com etapas sequenciais que dependem de preenchimento prévio: use `br-wizard` ou `br-step`.\n- Links para páginas ou rotas distintas: use `br-link` ou `br-header`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tab?tab=designer).\n---\n\n\n### **Events:**\n - **brTabChange** - Evento disparado quando um tab é ativado.\n\n### **Methods:**\n - **activeTabChanged(newId: _string_)** - Observa mudanças no tab ativo para atualizar os estados\n- **colorModeChanged(_newValue: _string_)** - Observa mudanças no color mode para propagar aos filhos\n- **handleTabItemPropsChange()** - Escuta evento de mudança de propriedades dos tab-items filhos.\nEste listener garante que o componente pai seja re-renderizado quando\npropriedades mudam dinamicamente, sincronizando o painel ativo.\n- **setActiveTab(tabId: _string_): _Promise<void>_** - Ativa programaticamente uma aba a partir do seu identificador.\n- **getActiveTab(): _Promise<string | undefined>_** - Retorna o identificador da aba ativa atual.\n- **render(): __** - Renderiza o componente.\n\n### **Slots:**\n - **default** - Slot para inserir os itens das abas (br-tab-item)\n- **icon-{id}** - Ícone da aba cujo `br-tab-item` tem o `id` informado (ex.: `<i slot=\"icon-avisos\" class=\"fas fa-bell\" aria-hidden=\"true\"></i>`). Forma preferida para ícones por classe CSS, como Font Awesome: o elemento fica em light DOM e recebe os estilos globais da página. Tem precedência sobre a prop `icon` do item.\n\n### **CSS Parts:**\n - **container** - Contêiner principal que envolve toda a estrutura do componente (navegação e conteúdo). Expõe o elemento para customizações de fundo, bordas e espaçamentos globais.\n- **nav** - Área de navegação (`tablist`) onde os botões das abas estão localizados. Permite customizar o alinhamento, espaçamento e plano de fundo da barra de abas.\n- **button** - Botão individual de cada aba.\n- **indicator** - Indicador visual da aba ativa.\n- **content** - Área de conteúdo das abas.",
|
|
4124
4144
|
"attributes": [
|
|
4125
4145
|
{
|
|
4126
4146
|
"name": "active-tab-id",
|
|
@@ -4154,7 +4174,7 @@
|
|
|
4154
4174
|
},
|
|
4155
4175
|
{
|
|
4156
4176
|
"name": "alignment",
|
|
4157
|
-
"description": "Alinhamento horizontal
|
|
4177
|
+
"description": "Alinhamento horizontal. Quando informado, tem precedência sobre `alignItemsTab`; valores inválidos usam `start`.",
|
|
4158
4178
|
"values": [{ "name": "TabAlignItems" }]
|
|
4159
4179
|
},
|
|
4160
4180
|
{
|
|
@@ -4177,7 +4197,7 @@
|
|
|
4177
4197
|
},
|
|
4178
4198
|
{
|
|
4179
4199
|
"name": "br-tab-item",
|
|
4180
|
-
"description": "
|
|
4200
|
+
"description": "Define uma aba e seu respectivo painel de conteúdo dentro do `br-tab`.\n\nDefina o título da aba em `label` ou no slot `label`, e insira o conteúdo do painel no slot padrão. Use `active` para iniciar a aba selecionada e `disabled` para desabilitá-la.\n---\n\n\n### **Events:**\n - **brTabItemPropsChange** - Evento disparado quando as propriedades do tab-item mudam.\nO componente pai (br-tab) escuta este evento para atualizar a navegação.\n\n### **Methods:**\n - **tabItemTitleChanged()** - Observa mudanças no título e notifica o pai\n- **iconChanged()** - Observa mudanças no ícone e notifica o pai\n- **counterChanged()** - Observa mudanças no contador e notifica o pai\n- **onlyIconChanged()** - Observa mudanças em onlyIcon e notifica o pai\n- **isActiveChanged()** - Observa mudanças no estado ativo (alterações via JS/DOM direto) e notifica o pai\n\n### **Slots:**\n - **default** - Slot para o conteúdo do item da aba.",
|
|
4181
4201
|
"attributes": [
|
|
4182
4202
|
{
|
|
4183
4203
|
"name": "tab-item-id",
|
|
@@ -4191,12 +4211,12 @@
|
|
|
4191
4211
|
},
|
|
4192
4212
|
{
|
|
4193
4213
|
"name": "label",
|
|
4194
|
-
"description": "Texto
|
|
4214
|
+
"description": "Texto do item. Quando informado, tem precedência sobre `tabItemTitle`.",
|
|
4195
4215
|
"values": []
|
|
4196
4216
|
},
|
|
4197
4217
|
{
|
|
4198
4218
|
"name": "icon",
|
|
4199
|
-
"description": "Ícone da aba como identificador
|
|
4219
|
+
"description": "Ícone da aba como identificador Font Awesome 5 Free presente no cache local (ex.: `fa-solid:bell`), renderizado pelo `br-icon`.\nPara ícones por classe CSS (ex.: Font Awesome), use o slot `icon-{id}` do `br-tab`, a forma\npreferida: `<i slot=\"icon-avisos\" class=\"fas fa-bell\" aria-hidden=\"true\"></i>`.\nO slot tem precedência sobre esta prop.\nUso descontinuado: classes CSS nesta prop (ex.: `fas fa-bell`) não são exibidas no Shadow DOM,\ngeram aviso e devem migrar para o slot `icon-{id}`. Nomes fora do cache local não são carregados remotamente.",
|
|
4200
4220
|
"values": []
|
|
4201
4221
|
},
|
|
4202
4222
|
{
|
|
@@ -4216,7 +4236,7 @@
|
|
|
4216
4236
|
},
|
|
4217
4237
|
{
|
|
4218
4238
|
"name": "active",
|
|
4219
|
-
"description": "Estado ativo
|
|
4239
|
+
"description": "Estado ativo atual. Quando informado, tem precedência sobre `isActive`.",
|
|
4220
4240
|
"values": []
|
|
4221
4241
|
},
|
|
4222
4242
|
{
|
|
@@ -4234,192 +4254,498 @@
|
|
|
4234
4254
|
},
|
|
4235
4255
|
{
|
|
4236
4256
|
"name": "br-table",
|
|
4237
|
-
"description": "
|
|
4257
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nApresenta e permite interagir com dados tabulares; não deve ser usada para\norganizar layout ou conteúdo que não seja tabular. Recebe o cabeçalho e o corpo\npelos slots `header` e `body`, compostos por `br-table-header` e\n`br-table-header-cell`, e por `br-table-body`, `br-table-row` e `br-table-cell`.\nOrquestra a grade, a acessibilidade, a ordenação, a seleção e a expansão das\nlinhas. A barra de ações é gerenciada pela tabela; `br-table-footer` é\nrenderizado quando a paginação está habilitada. As propriedades de célula\nseguem, quando aplicável, a precedência: célula, linha, coluna, tabela e valor\npadrão. Cabeçalhos multinível usam várias linhas em `br-table-header` com\n`colSpan`/`rowSpan`. Linhas contíguas com `rowGroup` formam unidades de ordenação,\npaginação e virtualização; a seleção permanece individual. Células com `rowSpan`\nnão atravessam os limites do grupo. Prefira tabelas simples quando possível.\n---\n\n\n### **Events:**\n - **brTableActionClick** - Quando uma ação pública é acionada.\n- **brTableSelectionChange** - Quando o conjunto selecionado muda.\n- **brTableRowExpansionChange** - Quando uma linha expande ou recolhe.\n- **brTableSortRequest** - Antes de aplicar uma solicitação de ordenação.\n- **brTableSortChange** - Quando os critérios de ordenação mudam.\n- **brTablePageChange** - Quando o consumidor solicita outra página pela paginação do rodapé.\n- **brTablePageSizeChange** - Quando o consumidor solicita outra quantidade de itens por página.\n- **brTableSearch** - Quando a busca é enviada ou fechada.\n- **brTableActionClick** - Reemite ações globais, contextuais e de linha para o consumidor.\n- **brTableSelectionChange** - Emitido quando o conjunto de linhas selecionadas muda.\n- **brTableRowExpansionChange** - Emitido quando uma linha é expandida ou recolhida.\n- **brTableSortChange** - Emitido sempre que o conjunto de critérios de ordenação muda.\n- **brTableSortRequest** - Emitido antes de aplicar uma solicitação de ordenação; `preventDefault()` cancela a mudança local.\n- **brTablePageChange** - Emitido quando o consumidor solicita outra página pela paginação do rodapé.\n- **brTablePageSizeChange** - Emitido quando o consumidor solicita outra quantidade de itens por página; atualize `visibleRows` ao tratar.\n- **brTableSearch** - Evento customizado originado em `br-table-bar` e propagado pela tabela,\nsem reemissão. Envia `{ term }` por Enter ou botão e `{ term: '' }` ao fechar.\nDigitação, inicialização e alterações programáticas não emitem o evento.\nPropaga, atravessa Shadow DOM e é cancelável.\n\n### **Methods:**\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n- **startLoading(): _Promise<void>_** - Inicia o estado visual de carregamento sem alterar os dados da tabela.\n- **stopLoading(): _Promise<void>_** - Interrompe o estado visual de carregamento sem alterar os dados da tabela.\n- **setData(data: _TableData_): _Promise<void>_** - Substitui os dados lógicos da tabela e reconstrói seus subcomponentes.\n- **getSelectedRows(): _Promise<HTMLBrTableRowElement[]>_** - Retorna as linhas atualmente selecionadas.\n- **selectAllRows(): _Promise<void>_** - Seleciona todas as linhas elegíveis.\n- **clearSelection(): _Promise<void>_** - Limpa a seleção de todas as linhas elegíveis.\n- **getSorting(): _Promise<TableSortState[]>_** - Retorna o estado atual de ordenação aplicado na tabela.\n- **expandRow(rowIndex: _number_): _Promise<void>_** - Expande uma linha elegível do corpo.\n- **collapseRow(rowIndex: _number_): _Promise<void>_** - Recolhe uma linha do corpo.\n- **collapseAllRows(): _Promise<void>_** - Recolhe todas as linhas que estiverem expandidas.\n- **render()** - Renderiza o componente com semântica ARIA de grid.\n\n### **Slots:**\n - **header** - Componente `br-table-header` que define as colunas.\n- **body** - Componente `br-table-body` que contém as linhas de dados.\n- **global-actions** - Ações aplicadas ao conjunto completo de dados.\n- **contextual-actions** - Ações aplicadas às linhas selecionadas.\n- **loading** - Indicador exibido enquanto as linhas são atualizadas.\n\n### **CSS Properties:**\n - **--br-table-loading-opacity** - Opacidade do conteúdo durante o carregamento. Padrão: 0.5. _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - Contêiner visual principal.\n- **scroll-container** - Área com rolagem que contém apenas os dados da tabela.\n- **content** - Grid que contém cabeçalho e corpo.\n- **footer** - Contêiner do rodapé, exibido abaixo do corpo da tabela.\n- **loading** - Scrim local e área do painel de carregamento sobre a tabela inteira.",
|
|
4238
4258
|
"attributes": [
|
|
4239
4259
|
{
|
|
4240
4260
|
"name": "column-width",
|
|
4241
|
-
"description": "Largura
|
|
4261
|
+
"description": "Largura padrão utilizada pelas colunas sem configuração própria.",
|
|
4242
4262
|
"values": [{ "name": "ColumnWidth" }]
|
|
4243
4263
|
},
|
|
4244
4264
|
{
|
|
4245
4265
|
"name": "density",
|
|
4246
|
-
"description": "
|
|
4266
|
+
"description": "Densidade visual aplicada aos espaçamentos da tabela.",
|
|
4247
4267
|
"values": [{ "name": "TableDensity" }]
|
|
4248
4268
|
},
|
|
4249
4269
|
{
|
|
4250
4270
|
"name": "divider-style",
|
|
4251
|
-
"description": "
|
|
4271
|
+
"description": "Estilo aplicado aos divisores habilitados.",
|
|
4252
4272
|
"values": [{ "name": "TableDividerStyle" }]
|
|
4253
4273
|
},
|
|
4254
4274
|
{
|
|
4255
4275
|
"name": "has-column-divider",
|
|
4256
|
-
"description": "
|
|
4276
|
+
"description": "Habilita divisores entre colunas quando `columnDivider` não é informado.",
|
|
4257
4277
|
"values": []
|
|
4258
4278
|
},
|
|
4259
4279
|
{
|
|
4260
4280
|
"name": "column-divider",
|
|
4261
|
-
"description": "
|
|
4281
|
+
"description": "Habilita divisores entre colunas.",
|
|
4262
4282
|
"values": []
|
|
4263
4283
|
},
|
|
4264
4284
|
{
|
|
4265
4285
|
"name": "has-row-divider",
|
|
4266
|
-
"description": "
|
|
4286
|
+
"description": "Habilita divisores entre linhas quando `rowDivider` não é informado.",
|
|
4267
4287
|
"values": []
|
|
4268
4288
|
},
|
|
4269
4289
|
{
|
|
4270
4290
|
"name": "row-divider",
|
|
4271
|
-
"description": "
|
|
4291
|
+
"description": "Habilita divisores entre linhas.",
|
|
4292
|
+
"values": []
|
|
4293
|
+
},
|
|
4294
|
+
{
|
|
4295
|
+
"name": "has-row-hover",
|
|
4296
|
+
"description": "Habilita o realce visual das linhas ao passar o ponteiro.",
|
|
4297
|
+
"values": []
|
|
4298
|
+
},
|
|
4299
|
+
{
|
|
4300
|
+
"name": "loading",
|
|
4301
|
+
"description": "Indica que as linhas estão sendo atualizadas pelo consumidor.",
|
|
4302
|
+
"values": []
|
|
4303
|
+
},
|
|
4304
|
+
{
|
|
4305
|
+
"name": "heading",
|
|
4306
|
+
"description": "Título apresentado na barra principal.",
|
|
4307
|
+
"values": []
|
|
4308
|
+
},
|
|
4309
|
+
{
|
|
4310
|
+
"name": "show-contextual-bar",
|
|
4311
|
+
"description": "Força a apresentação da barra contextual.",
|
|
4312
|
+
"values": []
|
|
4313
|
+
},
|
|
4314
|
+
{
|
|
4315
|
+
"name": "heading-actions-limit",
|
|
4316
|
+
"description": "Limite usado para decidir quando agrupar ações globais em um menu.\nQuando o número de ações excede esse valor, as ações são agrupadas no\ndropdown (atualmente todas são movidas para o menu colapsado).",
|
|
4317
|
+
"values": []
|
|
4318
|
+
},
|
|
4319
|
+
{
|
|
4320
|
+
"name": "contextual-actions-limit",
|
|
4321
|
+
"description": "Limite usado para decidir quando agrupar ações contextuais em um menu.\nQuando o número de ações excede esse valor, as ações são agrupadas no\ndropdown (atualmente todas são movidas para o menu colapsado).",
|
|
4322
|
+
"values": []
|
|
4323
|
+
},
|
|
4324
|
+
{
|
|
4325
|
+
"name": "more-actions-heading-label",
|
|
4326
|
+
"description": "Texto do tooltip do botão de ações agrupadas na barra de título.\nQuando vazio ou composto apenas por espaços, usa \"Mais ações\".\nNão altera o nome acessível do botão nem os rótulos do menu.",
|
|
4327
|
+
"values": []
|
|
4328
|
+
},
|
|
4329
|
+
{
|
|
4330
|
+
"name": "more-actions-contextual-label",
|
|
4331
|
+
"description": "Texto do tooltip do botão de ações agrupadas da barra contextual.\nQuando vazio ou composto apenas por espaços, usa \"Mais ações\".\nNão altera o nome acessível do botão nem os rótulos do menu.",
|
|
4332
|
+
"values": []
|
|
4333
|
+
},
|
|
4334
|
+
{
|
|
4335
|
+
"name": "more-actions-label",
|
|
4336
|
+
"description": "Texto completo do tooltip dos botões de ações agrupadas nas células.\nQuando informado, prevalece sobre `moreActionsLabel` de cada célula.\nQuando omitido, a célula usa seu valor local ou \"Mais ações\".\nValores vazios ou compostos apenas por espaços usam \"Mais ações\".\nAceita texto simples por atributo ou propriedade.\nReflete o valor no atributo `more-actions-label` para sincronizar as células.",
|
|
4337
|
+
"values": []
|
|
4338
|
+
},
|
|
4339
|
+
{
|
|
4340
|
+
"name": "cell-actions-limit",
|
|
4341
|
+
"description": "Limite padrão de ações exibidas em cada célula.",
|
|
4342
|
+
"values": []
|
|
4343
|
+
},
|
|
4344
|
+
{
|
|
4345
|
+
"name": "has-row-selection",
|
|
4346
|
+
"description": "Habilita a coluna de seleção de linhas.",
|
|
4347
|
+
"values": []
|
|
4348
|
+
},
|
|
4349
|
+
{
|
|
4350
|
+
"name": "has-row-expansion",
|
|
4351
|
+
"description": "Habilita a coluna de expansão de linhas.",
|
|
4352
|
+
"values": []
|
|
4353
|
+
},
|
|
4354
|
+
{
|
|
4355
|
+
"name": "has-search",
|
|
4356
|
+
"description": "Disponibiliza a interface de busca, sem filtrar ou destacar o conteúdo.\nA aplicação recebe `brTableSearch` e atualiza os dados local ou remotamente.",
|
|
4357
|
+
"values": []
|
|
4358
|
+
},
|
|
4359
|
+
{
|
|
4360
|
+
"name": "has-pagination",
|
|
4361
|
+
"description": "Habilita a paginação da tabela, renderizando `br-table-footer` internamente.",
|
|
4362
|
+
"values": []
|
|
4363
|
+
},
|
|
4364
|
+
{
|
|
4365
|
+
"name": "current-page",
|
|
4366
|
+
"description": "Página atual exibida pela paginação (1-indexada).",
|
|
4367
|
+
"values": []
|
|
4368
|
+
},
|
|
4369
|
+
{
|
|
4370
|
+
"name": "page-size",
|
|
4371
|
+
"description": "Quantidade de itens pertencentes a cada página (linhas independentes ou grupos completos).",
|
|
4372
|
+
"values": []
|
|
4373
|
+
},
|
|
4374
|
+
{
|
|
4375
|
+
"name": "page-size-options",
|
|
4376
|
+
"description": "Opções disponíveis de itens por página no seletor da paginação.",
|
|
4377
|
+
"values": [{ "name": "number[]" }]
|
|
4378
|
+
},
|
|
4379
|
+
{
|
|
4380
|
+
"name": "total-items",
|
|
4381
|
+
"description": "Quantidade total de itens do conjunto de dados.",
|
|
4382
|
+
"values": []
|
|
4383
|
+
},
|
|
4384
|
+
{
|
|
4385
|
+
"name": "sort-mode",
|
|
4386
|
+
"description": "Define se a tabela aceita uma única coluna ordenada ou múltiplas colunas.\nNo modo `multi`, a prioridade é sempre a ordem visual da esquerda para a direita.",
|
|
4387
|
+
"values": [{ "name": "TableSortMode" }]
|
|
4388
|
+
},
|
|
4389
|
+
{
|
|
4390
|
+
"name": "sort-strategy",
|
|
4391
|
+
"description": "Define se a tabela ordena as linhas localmente ou deixa a aplicação aplicar\na ordenação solicitada. Em `manual`, a tabela mantém os indicadores e emite\n`brTableSortChange`, mas não reordena as linhas; use `setData()` para fornecer\nos resultados customizados ou remotos. Valores não reconhecidos usam a\nestratégia local.",
|
|
4392
|
+
"values": [{ "name": "TableSortStrategy" }]
|
|
4393
|
+
},
|
|
4394
|
+
{
|
|
4395
|
+
"name": "visible-rows",
|
|
4396
|
+
"description": "Quantidade de linhas de dados visíveis simultaneamente na viewport.",
|
|
4397
|
+
"values": []
|
|
4398
|
+
},
|
|
4399
|
+
{
|
|
4400
|
+
"name": "height-rows",
|
|
4401
|
+
"description": "Quantidade de itens lógicos usada somente para calcular a altura da viewport.\nCada grupo contíguo conta como um item; a altura inclui todas as linhas\nfísicas que compõem os grupos reservados. Não altera paginação, rolagem ou\nvirtualização. Quando omitida, acompanha `visibleRows`.",
|
|
4402
|
+
"values": []
|
|
4403
|
+
},
|
|
4404
|
+
{
|
|
4405
|
+
"name": "virtual-expanded-content-height",
|
|
4406
|
+
"description": "Altura adicional estimada para conteúdo expandido ainda não medido.",
|
|
4272
4407
|
"values": []
|
|
4273
4408
|
},
|
|
4274
4409
|
{
|
|
4275
4410
|
"name": "horizontal-alignment",
|
|
4276
|
-
"description": "
|
|
4411
|
+
"description": "Alinhamento horizontal padrão da tabela.",
|
|
4277
4412
|
"values": [{ "name": "TableAlignment" }]
|
|
4278
4413
|
},
|
|
4279
4414
|
{
|
|
4280
4415
|
"name": "vertical-alignment",
|
|
4281
|
-
"description": "
|
|
4416
|
+
"description": "Alinhamento vertical padrão da tabela.",
|
|
4282
4417
|
"values": [{ "name": "TableAlignment" }]
|
|
4283
4418
|
},
|
|
4284
4419
|
{
|
|
4285
4420
|
"name": "overflow",
|
|
4286
|
-
"description": "
|
|
4421
|
+
"description": "Estratégia padrão para conteúdos que excedem a célula.",
|
|
4287
4422
|
"values": [{ "name": "TableOverflow" }]
|
|
4288
4423
|
},
|
|
4289
4424
|
{
|
|
4290
4425
|
"name": "tooltip-state",
|
|
4291
|
-
"description": "
|
|
4426
|
+
"description": "Estado visual padrão dos tooltips.",
|
|
4292
4427
|
"values": [{ "name": "TableTooltipState" }]
|
|
4293
4428
|
},
|
|
4294
4429
|
{
|
|
4295
4430
|
"name": "tooltip-mode",
|
|
4296
4431
|
"description": "Define o modo de resolução do tooltip nas células da tabela.",
|
|
4297
4432
|
"values": [{ "name": "TableTooltipMode" }]
|
|
4433
|
+
}
|
|
4434
|
+
],
|
|
4435
|
+
"references": []
|
|
4436
|
+
},
|
|
4437
|
+
{
|
|
4438
|
+
"name": "br-table-action",
|
|
4439
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nRepresenta uma ação global, contextual ou associada a uma linha da tabela.\nO contexto é inferido pelo slot e pela posição do componente na árvore.\n\nPara executar funções a partir das ações, ouça o evento `brTableActionClick`:\n\n```html\n<!-- 1. Ouvindo diretamente na ação -->\n<br-table-action id=\"btn-filtro\" label=\"Filtros\" icon-name=\"fa-solid:filter\"></br-table-action>\n<script>\n document.getElementById('btn-filtro').addEventListener('brTableActionClick', () => {\n executarFiltros();\n });\n</script>\n\n<!-- 2. Ouvindo na tabela (recomendado para ações diretas e colapsadas em menu) -->\n<script>\n table.addEventListener('brTableActionClick', (event) => {\n const { type, label, rowIndex } = event.detail;\n if (type === 'row') executarAcaoLinha(label, rowIndex);\n else if (type === 'global') executarAcaoGlobal(label);\n });\n</script>\n```\n---\n\n\n### **Events:**\n - **brTableActionClick** - Quando o usuário aciona o botão.\n- **brTableActionClick** - Emitido quando o usuário aciona o botão.\n\n### **Methods:**\n - **render()** - Renderiza a ação e adiciona tooltip quando o botão é circular.",
|
|
4440
|
+
"attributes": [
|
|
4441
|
+
{
|
|
4442
|
+
"name": "label",
|
|
4443
|
+
"description": "Texto visível e identificação semântica da ação.",
|
|
4444
|
+
"values": []
|
|
4298
4445
|
},
|
|
4299
4446
|
{
|
|
4300
|
-
"name": "
|
|
4301
|
-
"description": "
|
|
4447
|
+
"name": "icon-name",
|
|
4448
|
+
"description": "Nome do ícone exibido pelo botão.",
|
|
4302
4449
|
"values": []
|
|
4450
|
+
},
|
|
4451
|
+
{
|
|
4452
|
+
"name": "aria-label",
|
|
4453
|
+
"description": "Rótulo acessível. Quando omitido, utiliza `label`.",
|
|
4454
|
+
"values": []
|
|
4455
|
+
},
|
|
4456
|
+
{
|
|
4457
|
+
"name": "density",
|
|
4458
|
+
"description": "Densidade visual aplicada ao botão interno da ação.",
|
|
4459
|
+
"values": [{ "name": "TableDensity" }]
|
|
4460
|
+
}
|
|
4461
|
+
],
|
|
4462
|
+
"references": []
|
|
4463
|
+
},
|
|
4464
|
+
{
|
|
4465
|
+
"name": "br-table-bar",
|
|
4466
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nExibe o título, as ações globais e as ações contextuais da tabela.\nAções excedentes são agrupadas automaticamente em um menu.\nCompõe `br-table`, que configura a barra automaticamente. Também pode ser usada\ndiretamente para compor uma barra de ações. Quando `hasSearch` está ativo,\nsolicita a busca à aplicação, sem filtrar ou destacar os dados.\n---\n\n\n### **Events:**\n - **brTableSearch** - Evento customizado emitido pela barra ao enviar a busca por Enter ou pelo\nbotão, com `{ term }`, e ao fechar, com `{ term: '' }`. Propaga até `br-table`\ne atravessa Shadow DOM; é cancelável. Digitação, inicialização e alterações\nprogramáticas não emitem o evento.\n\n### **Methods:**\n - **render()** - Renderiza somente as barras necessárias ao estado atual.\n\n### **Slots:**\n - **global-actions** - Ações relacionadas ao conjunto completo de dados.\n- **contextual-actions** - Ações aplicadas às linhas selecionadas.",
|
|
4467
|
+
"attributes": [
|
|
4468
|
+
{
|
|
4469
|
+
"name": "heading",
|
|
4470
|
+
"description": "Título apresentado na barra principal.",
|
|
4471
|
+
"values": []
|
|
4472
|
+
},
|
|
4473
|
+
{
|
|
4474
|
+
"name": "heading-actions-limit",
|
|
4475
|
+
"description": "Limite usado para decidir quando agrupar ações em um menu. Quando o\nnúmero de ações excede esse valor, as ações são agrupadas no dropdown\n(atualmente todas são movidas para o menu colapsado).",
|
|
4476
|
+
"values": []
|
|
4477
|
+
},
|
|
4478
|
+
{
|
|
4479
|
+
"name": "contextual-actions-limit",
|
|
4480
|
+
"description": "Limite usado para decidir quando agrupar ações contextuais em um menu.\nQuando o número de ações excede esse valor, as ações são agrupadas no\ndropdown (atualmente todas são movidas para o menu colapsado).",
|
|
4481
|
+
"values": []
|
|
4482
|
+
},
|
|
4483
|
+
{
|
|
4484
|
+
"name": "show-contextual-bar",
|
|
4485
|
+
"description": "Força a apresentação da barra contextual mesmo sem seleção.",
|
|
4486
|
+
"values": []
|
|
4487
|
+
},
|
|
4488
|
+
{
|
|
4489
|
+
"name": "selected-rows-count",
|
|
4490
|
+
"description": "Número de linhas atualmente selecionadas.",
|
|
4491
|
+
"values": []
|
|
4492
|
+
},
|
|
4493
|
+
{
|
|
4494
|
+
"name": "has-global-actions-content",
|
|
4495
|
+
"description": "Indica se o slot de ações globais possui conteúdo.",
|
|
4496
|
+
"values": []
|
|
4497
|
+
},
|
|
4498
|
+
{
|
|
4499
|
+
"name": "has-contextual-actions-content",
|
|
4500
|
+
"description": "Indica se o slot de ações contextuais possui conteúdo.",
|
|
4501
|
+
"values": []
|
|
4502
|
+
},
|
|
4503
|
+
{
|
|
4504
|
+
"name": "has-search",
|
|
4505
|
+
"description": "Disponibiliza a interface de busca controlada pela aplicação.",
|
|
4506
|
+
"values": []
|
|
4507
|
+
},
|
|
4508
|
+
{
|
|
4509
|
+
"name": "density",
|
|
4510
|
+
"description": "Densidade visual aplicada aos controles internos da barra.",
|
|
4511
|
+
"values": [{ "name": "TableDensity" }]
|
|
4303
4512
|
}
|
|
4304
4513
|
],
|
|
4305
4514
|
"references": []
|
|
4306
4515
|
},
|
|
4307
4516
|
{
|
|
4308
4517
|
"name": "br-table-body",
|
|
4309
|
-
"description": "
|
|
4518
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nAgrupa semanticamente as linhas que compõem o corpo de `br-table`.\nÉ uma peça declarativa do slot `body`; recebe `br-table-row` e entrega ao\norquestrador a seleção, ordenação e materialização virtual. Os contêineres\nvisuais dos grupos são internos, montados pela tabela e não devem ser\ninstanciados pelo consumidor. Use o componente na composição de `br-table`.\n---\n\n\n### **Methods:**\n - **render()** - Renderiza o agrupamento de linhas com semântica acessível.\n\n### **Slots:**\n - **default** - Linhas `br-table-row` pertencentes ao corpo.\n\n### **CSS Parts:**\n - **body** - Contêiner estrutural do corpo.",
|
|
4310
4519
|
"attributes": [],
|
|
4311
4520
|
"references": []
|
|
4312
4521
|
},
|
|
4313
4522
|
{
|
|
4314
4523
|
"name": "br-table-cell",
|
|
4315
|
-
"description": "
|
|
4524
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nRepresenta uma célula de dados, com suporte a alinhamento, overflow,\ntooltip e agrupamento automático de ações excedentes. Compõe `br-table-row`\ndentro do corpo de `br-table`, que coordena posição, interação e herança.\nUse `rowSpan` dentro de um grupo contíguo de linhas e `rowHeader` para seu\nrótulo compartilhado; evite uso avulso fora da composição da tabela.\n---\n\n\n### **Events:**\n - **brAlignmentChange** - Quando um alinhamento específico muda.\n- **brOverflowChange** - Quando a estratégia de overflow muda.\n- **brAlignmentChange** - Emitido quando um alinhamento específico da célula muda.\n- **brOverflowChange** - Emitido quando a estratégia de overflow da célula muda.\n\n### **Methods:**\n - **getMeasuredHeight(): _Promise<number>_** - Retorna a altura renderizada da superfície visual desta célula, em pixels.\n\n\n- **render()** - Renderiza o conteúdo, as ações e o tooltip opcional.\n\n### **Slots:**\n - **default** - Conteúdo ou ações da célula.\n\n### **CSS Parts:**\n - **cell** - Superfície visual da célula.\n- **content** - Contêiner responsável pelo alinhamento.",
|
|
4316
4525
|
"attributes": [
|
|
4526
|
+
{
|
|
4527
|
+
"name": "col-span",
|
|
4528
|
+
"description": "Quantidade de colunas ocupadas. Inteiro entre 1 e 1000; valores inválidos usam 1.",
|
|
4529
|
+
"values": []
|
|
4530
|
+
},
|
|
4531
|
+
{
|
|
4532
|
+
"name": "row-span",
|
|
4533
|
+
"description": "Quantidade de linhas ocupadas no cabeçalho ou grupo. Limitada às linhas\ndisponíveis; aceita inteiros de 1 a 1000 e valores inválidos usam 1.",
|
|
4534
|
+
"values": []
|
|
4535
|
+
},
|
|
4536
|
+
{
|
|
4537
|
+
"name": "row-header",
|
|
4538
|
+
"description": "Identifica um cabeçalho de linha, inclusive rótulos compartilhados por um grupo.",
|
|
4539
|
+
"values": []
|
|
4540
|
+
},
|
|
4317
4541
|
{
|
|
4318
4542
|
"name": "horizontal-alignment",
|
|
4319
|
-
"description": "
|
|
4543
|
+
"description": "Alinhamento horizontal específico da célula. Quando omitido, herda da\nlinha, coluna ou tabela, nessa ordem.",
|
|
4320
4544
|
"values": [{ "name": "TableAlignment" }]
|
|
4321
4545
|
},
|
|
4322
4546
|
{
|
|
4323
4547
|
"name": "vertical-alignment",
|
|
4324
|
-
"description": "
|
|
4548
|
+
"description": "Alinhamento vertical específico da célula. Quando omitido, herda da\nlinha, coluna ou tabela, nessa ordem.",
|
|
4325
4549
|
"values": [{ "name": "TableAlignment" }]
|
|
4326
4550
|
},
|
|
4327
4551
|
{
|
|
4328
4552
|
"name": "overflow",
|
|
4329
|
-
"description": "
|
|
4553
|
+
"description": "Estratégia de overflow específica da célula. Quando omitida, herda da\nlinha, coluna ou tabela, nessa ordem.",
|
|
4330
4554
|
"values": [{ "name": "TableOverflow" }]
|
|
4331
4555
|
},
|
|
4556
|
+
{
|
|
4557
|
+
"name": "cell-actions-limit",
|
|
4558
|
+
"description": "Limite local de ações exibidas diretamente.",
|
|
4559
|
+
"values": []
|
|
4560
|
+
},
|
|
4561
|
+
{
|
|
4562
|
+
"name": "more-actions-label",
|
|
4563
|
+
"description": "Texto completo do tooltip do botão de ações agrupadas desta célula.\nA propriedade `moreActionsLabel` de `br-table` prevalece quando\ninformada. Valores vazios ou compostos apenas por espaços usam \"Mais ações\".\nNão altera o nome acessível do botão nem os rótulos das ações.\nAceita texto simples por atributo ou propriedade, sem reflexão.",
|
|
4564
|
+
"values": []
|
|
4565
|
+
},
|
|
4566
|
+
{
|
|
4567
|
+
"name": "sort-value",
|
|
4568
|
+
"description": "Valor utilizado pela ordenação da coluna. Quando omitido, a tabela usa o\ntexto renderizado da célula.",
|
|
4569
|
+
"values": []
|
|
4570
|
+
},
|
|
4332
4571
|
{
|
|
4333
4572
|
"name": "tooltip-state",
|
|
4334
|
-
"description": "
|
|
4573
|
+
"description": "Estado visual do tooltip da célula. Quando omitido, herda da linha,\ncoluna ou tabela, nessa ordem.",
|
|
4335
4574
|
"values": [{ "name": "TableTooltipState" }]
|
|
4336
4575
|
},
|
|
4337
4576
|
{
|
|
4338
4577
|
"name": "tooltip-mode",
|
|
4339
|
-
"description": "
|
|
4578
|
+
"description": "Modo de exibição do tooltip da célula. Quando omitido, herda da linha,\ncoluna ou tabela, nessa ordem. No modo `enabled`, exibe o conteúdo\nsomente quando estiver truncado na largura disponível.",
|
|
4340
4579
|
"values": [{ "name": "TableTooltipMode" }]
|
|
4580
|
+
},
|
|
4581
|
+
{
|
|
4582
|
+
"name": "action-density",
|
|
4583
|
+
"description": "Densidade visual aplicada ao trigger de ações agrupadas.",
|
|
4584
|
+
"values": [{ "name": "TableDensity" }]
|
|
4585
|
+
}
|
|
4586
|
+
],
|
|
4587
|
+
"references": []
|
|
4588
|
+
},
|
|
4589
|
+
{
|
|
4590
|
+
"name": "br-table-footer",
|
|
4591
|
+
"description": "Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nRenderiza a paginação da tabela quando `hasPagination` está habilitado em `br-table`.\nOrquestrado internamente pela tabela; não deve ser inserido diretamente pelo consumidor.\n---\n\n\n### **CSS Parts:**\n - **container** - Contêiner do rodapé.",
|
|
4592
|
+
"attributes": [
|
|
4593
|
+
{
|
|
4594
|
+
"name": "current-page",
|
|
4595
|
+
"description": "Página atual exibida pela paginação (1-indexada).",
|
|
4596
|
+
"values": []
|
|
4597
|
+
},
|
|
4598
|
+
{
|
|
4599
|
+
"name": "page-size",
|
|
4600
|
+
"description": "Quantidade de itens exibidos por página.",
|
|
4601
|
+
"values": []
|
|
4602
|
+
},
|
|
4603
|
+
{
|
|
4604
|
+
"name": "page-size-options",
|
|
4605
|
+
"description": "Opções disponíveis de itens por página.",
|
|
4606
|
+
"values": [{ "name": "number[]" }]
|
|
4607
|
+
},
|
|
4608
|
+
{
|
|
4609
|
+
"name": "total-items",
|
|
4610
|
+
"description": "Quantidade total de itens do conjunto de dados.",
|
|
4611
|
+
"values": []
|
|
4612
|
+
},
|
|
4613
|
+
{
|
|
4614
|
+
"name": "density",
|
|
4615
|
+
"description": "Densidade visual herdada da tabela.",
|
|
4616
|
+
"values": [{ "name": "TableFooterDensity" }]
|
|
4617
|
+
},
|
|
4618
|
+
{
|
|
4619
|
+
"name": "has-scroll",
|
|
4620
|
+
"description": "Indica que a área de dados da tabela possui rolagem.",
|
|
4621
|
+
"values": []
|
|
4341
4622
|
}
|
|
4342
4623
|
],
|
|
4343
4624
|
"references": []
|
|
4344
4625
|
},
|
|
4345
4626
|
{
|
|
4346
4627
|
"name": "br-table-header",
|
|
4347
|
-
"description": "
|
|
4628
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nAgrupa as linhas de cabeçalho de `br-table`, que as posiciona em uma grade.\nUse uma linha para tabelas simples e múltiplas linhas com `colSpan`/`rowSpan`\nem `br-table-header-cell` para hierarquias de colunas. É uma peça declarativa\ndo slot `header`, usada com o orquestrador; não realiza ordenação avulsa.\n---\n\n\n### **Methods:**\n - **render()** - Renderiza o cabeçalho com papel ARIA de grupo de linhas.\n\n### **Slots:**\n - **default** - Linhas contendo células `br-table-header-cell`.\n\n### **CSS Parts:**\n - **header** - Contêiner estrutural do cabeçalho.",
|
|
4348
4629
|
"attributes": [],
|
|
4349
4630
|
"references": []
|
|
4350
4631
|
},
|
|
4351
4632
|
{
|
|
4352
4633
|
"name": "br-table-header-cell",
|
|
4353
|
-
"description": "
|
|
4634
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nDefine o conteúdo e as propriedades herdáveis de uma coluna de `br-table`.\nCompõe as linhas de `br-table-header` no slot `header`; não deve ser usada\navulsa. `colSpan` e `rowSpan` representam grupos e níveis do cabeçalho.\nSomente folhas que ocupam uma coluna podem ordenar os dados.\nTambém exibe tooltip quando o conteúdo truncado requer informação adicional.\n---\n\n\n### **Events:**\n - **brColumnWidthChange** - Quando a largura declarada muda.\n- **brAlignmentChange** - Quando um alinhamento da coluna muda.\n- **brOverflowChange** - Quando a estratégia de overflow muda.\n- **brColumnWidthChange** - Emitido quando a largura declarada para a coluna muda.\n- **brAlignmentChange** - Emitido quando um alinhamento da coluna muda.\n- **brOverflowChange** - Emitido quando a estratégia de overflow muda.\n\n### **Methods:**\n \n\n\n- **render()** - Renderiza o cabeçalho, seu conteúdo e o tooltip opcional.\n\n### **Slots:**\n - **default** - Conteúdo do cabeçalho da coluna.\n\n### **CSS Parts:**\n - **cell** - Superfície visual da célula.\n- **content** - Contêiner responsável pelo alinhamento.",
|
|
4354
4635
|
"attributes": [
|
|
4636
|
+
{
|
|
4637
|
+
"name": "col-span",
|
|
4638
|
+
"description": "Quantidade de colunas ocupadas. Inteiro entre 1 e 1000; valores inválidos usam 1.",
|
|
4639
|
+
"values": []
|
|
4640
|
+
},
|
|
4641
|
+
{
|
|
4642
|
+
"name": "row-span",
|
|
4643
|
+
"description": "Quantidade de linhas ocupadas no cabeçalho ou grupo. Limitada às linhas\ndisponíveis; aceita inteiros de 1 a 1000 e valores inválidos usam 1.",
|
|
4644
|
+
"values": []
|
|
4645
|
+
},
|
|
4355
4646
|
{
|
|
4356
4647
|
"name": "column-width",
|
|
4357
|
-
"description": "
|
|
4648
|
+
"description": "Largura semântica ou CSS aplicada à coluna. Quando omitida, herda da tabela.",
|
|
4358
4649
|
"values": [{ "name": "ColumnWidth" }]
|
|
4359
4650
|
},
|
|
4360
4651
|
{
|
|
4361
4652
|
"name": "horizontal-alignment",
|
|
4362
|
-
"description": "
|
|
4653
|
+
"description": "Alinhamento horizontal herdado pelas células da coluna. Quando omitido,\no cabeçalho herda da linha ou tabela, nessa ordem.",
|
|
4363
4654
|
"values": [{ "name": "TableAlignment" }]
|
|
4364
4655
|
},
|
|
4365
4656
|
{
|
|
4366
4657
|
"name": "vertical-alignment",
|
|
4367
|
-
"description": "
|
|
4658
|
+
"description": "Alinhamento vertical herdado pelas células da coluna. Quando omitido,\no cabeçalho herda da linha ou tabela, nessa ordem.",
|
|
4368
4659
|
"values": [{ "name": "TableAlignment" }]
|
|
4369
4660
|
},
|
|
4370
4661
|
{
|
|
4371
4662
|
"name": "overflow",
|
|
4372
|
-
"description": "
|
|
4663
|
+
"description": "Estratégia de overflow herdada pelas células da coluna. Quando omitida,\no cabeçalho herda da linha ou tabela, nessa ordem.",
|
|
4373
4664
|
"values": [{ "name": "TableOverflow" }]
|
|
4374
4665
|
},
|
|
4375
4666
|
{
|
|
4376
4667
|
"name": "tooltip-state",
|
|
4377
|
-
"description": "
|
|
4668
|
+
"description": "Estado visual herdado pelos tooltips da coluna. Quando omitido,\no cabeçalho herda da linha ou tabela, nessa ordem.",
|
|
4378
4669
|
"values": [{ "name": "TableTooltipState" }]
|
|
4379
4670
|
},
|
|
4380
4671
|
{
|
|
4381
4672
|
"name": "tooltip-mode",
|
|
4382
|
-
"description": "
|
|
4673
|
+
"description": "Modo de exibição herdado pelos tooltips da coluna. Quando omitido ou\ndefinido como inherit, o cabeçalho herda da linha ou tabela, nessa ordem.",
|
|
4383
4674
|
"values": [{ "name": "TableTooltipMode" }]
|
|
4675
|
+
},
|
|
4676
|
+
{
|
|
4677
|
+
"name": "sortable",
|
|
4678
|
+
"description": "Habilita a ordenação desta coluna.",
|
|
4679
|
+
"values": []
|
|
4680
|
+
},
|
|
4681
|
+
{
|
|
4682
|
+
"name": "sort-direction",
|
|
4683
|
+
"description": "Estado atual de ordenação controlado por `br-table`.",
|
|
4684
|
+
"values": [{ "name": "TableSortDirection" }]
|
|
4384
4685
|
}
|
|
4385
4686
|
],
|
|
4386
4687
|
"references": []
|
|
4387
4688
|
},
|
|
4388
4689
|
{
|
|
4389
4690
|
"name": "br-table-row",
|
|
4390
|
-
"description": "
|
|
4691
|
+
"description": "## Design System\n\nPara a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/table?tab=designer).\n\nRepresenta uma linha de dados e sua área opcional de conteúdo expandido.\nÉ uma peça declarativa de `br-table-body` ou `br-table-header`, coordenada por\n`br-table`. Recebe células de dados ou cabeçalho conforme o pai. `rowGroup`\nidentifica linhas contíguas que devem permanecer juntas; use-o apenas no corpo.\nEm grupos, os detalhes expandidos são apresentados após as linhas do grupo.\n---\n\n\n### **Events:**\n - **brAlignmentChange** - Quando um alinhamento herdável muda.\n- **brOverflowChange** - Quando a estratégia de overflow muda.\n- **brAlignmentChange** - Emitido quando uma propriedade de alinhamento da linha muda.\n- **brOverflowChange** - Emitido quando a estratégia de overflow da linha muda.\n\n### **Methods:**\n - **getMeasuredHeight(): _Promise<number>_** - Retorna a maior altura das células desta linha somada à área de expansão, em pixels.\n\n\n\n- **render()** - Renderiza as células e, quando expandida, o conteúdo adicional.\n\n### **Slots:**\n - **default** - Células de dados da linha.\n- **expanded-content** - Conteúdo arbitrário exibido abaixo da linha.\n\n### **CSS Parts:**\n - **row** - Contêiner estrutural da linha.\n- **expanded-content** - Área de conteúdo expandido.",
|
|
4391
4692
|
"attributes": [
|
|
4693
|
+
{
|
|
4694
|
+
"name": "row-group",
|
|
4695
|
+
"description": "Identifica um grupo contíguo de linhas com chave exclusiva, preservado como unidade na ordenação,\npaginação e virtualização. Vazio ou omitido mantém a linha independente.\nA seleção continua sendo individual por linha.",
|
|
4696
|
+
"values": []
|
|
4697
|
+
},
|
|
4392
4698
|
{
|
|
4393
4699
|
"name": "horizontal-alignment",
|
|
4394
|
-
"description": "
|
|
4700
|
+
"description": "Alinhamento horizontal herdado pelas células da linha.",
|
|
4395
4701
|
"values": [{ "name": "TableAlignment" }]
|
|
4396
4702
|
},
|
|
4397
4703
|
{
|
|
4398
4704
|
"name": "vertical-alignment",
|
|
4399
|
-
"description": "
|
|
4705
|
+
"description": "Alinhamento vertical herdado pelas células da linha.",
|
|
4400
4706
|
"values": [{ "name": "TableAlignment" }]
|
|
4401
4707
|
},
|
|
4402
4708
|
{
|
|
4403
4709
|
"name": "overflow",
|
|
4404
|
-
"description": "
|
|
4710
|
+
"description": "Estratégia de overflow herdada pelas células da linha.",
|
|
4405
4711
|
"values": [{ "name": "TableOverflow" }]
|
|
4406
4712
|
},
|
|
4407
4713
|
{
|
|
4408
4714
|
"name": "tooltip-state",
|
|
4409
|
-
"description": "
|
|
4715
|
+
"description": "Estado visual herdado pelos tooltips da linha.",
|
|
4410
4716
|
"values": [{ "name": "TableTooltipState" }]
|
|
4411
4717
|
},
|
|
4412
4718
|
{
|
|
4413
4719
|
"name": "tooltip-mode",
|
|
4414
|
-
"description": "
|
|
4720
|
+
"description": "Modo de exibição herdado pelos tooltips da linha.",
|
|
4415
4721
|
"values": [{ "name": "TableTooltipMode" }]
|
|
4722
|
+
},
|
|
4723
|
+
{
|
|
4724
|
+
"name": "selected",
|
|
4725
|
+
"description": "Indica se a linha está selecionada.",
|
|
4726
|
+
"values": []
|
|
4727
|
+
},
|
|
4728
|
+
{
|
|
4729
|
+
"name": "row-expansion",
|
|
4730
|
+
"description": "Controla se a expansão é habilitada, desabilitada ou herdada da tabela.",
|
|
4731
|
+
"values": [{ "name": "TableRowExpansion" }]
|
|
4732
|
+
},
|
|
4733
|
+
{
|
|
4734
|
+
"name": "virtual-expanded-content-height",
|
|
4735
|
+
"description": "Altura visível da área expandida desta linha, em pixels.",
|
|
4736
|
+
"values": []
|
|
4737
|
+
},
|
|
4738
|
+
{
|
|
4739
|
+
"name": "expanded",
|
|
4740
|
+
"description": "Indica se o conteúdo adicional da linha está visível.",
|
|
4741
|
+
"values": []
|
|
4416
4742
|
}
|
|
4417
4743
|
],
|
|
4418
4744
|
"references": []
|
|
4419
4745
|
},
|
|
4420
4746
|
{
|
|
4421
4747
|
"name": "br-tag",
|
|
4422
|
-
"description": "O
|
|
4748
|
+
"description": "O `br-tag` categoriza, rotula ou destaca informações curtas e metadados.\n\nSuporta modo estático informativo, modo interativo clicável com `action`, modo com botão de fechar (`closable`) e modo selecionável com `selectable`.\n\n```html\n<br-tag>Pendente</br-tag>\n<br-tag status=\"success\">Concluído</br-tag>\n<br-tag closable>Filtro: Brasília</br-tag>\n```\n\n### Quando usar\n\n- Rótulos de estado, tags de categorias ou palavras-chave.\n- Filtros aplicados que podem ser removidos individualmente.\n\n### Quando evitar\n\n- Ações primárias ou envio de formulário: use `br-button`.\n- Contagem numérica pura: use `br-avatar` ou texto de badge.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tag?tab=designer).\n---\n\n\n### **Events:**\n - **radioSelected** - Evento emitido quando a tag é selecionada.\n- **brTagValidationChange** - Emitido ao iniciar e concluir a validação customizada.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Retorna se a tag selecionável atende às constraints configuradas.\n- **reportValidity(): _Promise<boolean>_** - Valida e solicita ao navegador a apresentação do erro atual.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define ou limpa uma mensagem de validade customizada.\n- **validate(): _Promise<boolean>_** - Executa o validator da tag e retorna se o valor atual é válido.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n\n### **Slots:**\n - **default** - Slot para inserir o conteúdo da tag, como rótulo ou ícone.\n- **label** - Rótulo customizado da tag. Quando utilizado, a prop `label` é ignorada.\n- **icon** - Ícone customizado da tag. Quando utilizado, a prop `icon` é ignorada.\n- **close-button** - Botão de fechar customizado. Quando utilizado, o botão padrão é substituído.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n\n### **CSS Parts:**\n - **tag** - Elemento principal da tag.\n- **input** - Elemento input da tag de seleção.\n- **label** - Rótulo da tag de seleção.\n- **feedback** - Contêiner da mensagem de validação.",
|
|
4423
4749
|
"attributes": [
|
|
4424
4750
|
{
|
|
4425
4751
|
"name": "label",
|
|
@@ -4483,7 +4809,7 @@
|
|
|
4483
4809
|
},
|
|
4484
4810
|
{
|
|
4485
4811
|
"name": "variant",
|
|
4486
|
-
"description": "Variante funcional
|
|
4812
|
+
"description": "Variante funcional padrão. Aceita `default`, `status`, `action` ou `selectable`.\nValores inválidos são ignorados; nesse caso, os aliases booleanos legados\ncontinuam disponíveis para manter a compatibilidade.",
|
|
4487
4813
|
"values": [{ "name": "TagVariant" }]
|
|
4488
4814
|
},
|
|
4489
4815
|
{
|
|
@@ -4536,7 +4862,7 @@
|
|
|
4536
4862
|
},
|
|
4537
4863
|
{
|
|
4538
4864
|
"name": "br-textarea",
|
|
4539
|
-
"description": "O
|
|
4865
|
+
"description": "O `br-textarea` captura textos longos em múltiplas linhas em formulários.\n\nConfigure `label`, `placeholder`, `maxlength` e `state` para validação. Use `show-counter` para exibir o contador de caracteres restantes.\n\n```html\n<br-textarea label=\"Observações\" placeholder=\"Digite sua mensagem\" maxlength=\"500\" show-counter></br-textarea>\n```\n\nEm formulários HTML, o componente integra-se via `ElementInternals`, participando da validação nativa com `required`.\n\n### Quando usar\n\n- Mensagens, comentários, justificativas, descrições ou textos extensos.\n\n### Quando evitar\n\n- Dados curtos de linha única (nome, CPF, e-mail): use `br-input`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/textarea?tab=designer).\n---\n\n\n### **Events:**\n - **valueChange** - Valor atualizado do textarea\n- **brTextareaValidationChange** - Informa o início e o resultado do validator; o `detail` contém\n`validating`, `valid` e `message`.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Retorna `true` se o valor do textarea for válido, caso contrário `false`.\nSe o textarea for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise<boolean>_** - Retorna `true` se o valor do textarea for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define uma mensagem de validação customizada para o textarea.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise<boolean>_** - Executa o validator customizado e retorna se o textarea está válido.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **select(): _Promise<void>_** - Seleciona todo o texto do controle nativo, conforme HTMLTextAreaElement.select().\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectionMode: _SelectionMode_): _Promise<void>_** - Substitui um intervalo de texto usando a API nativa do textarea.\n- **setSelectionRange(start: _number_, end: _number_, direction: _'forward' | 'backward' | 'none'_): _Promise<void>_** - Define o intervalo selecionado no controle nativo.\n- **setValue(newValue: _string_)** - Define um novo valor para o textarea.\n\n### **Slots:**\n - **default** - Slot para texto adicional ou instruções a serem exibidos junto ao textarea.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n- **validation-loading** - Indicador exibido durante validação assíncrona.\n\n### **CSS Parts:**\n - **container** - Contêiner visual principal.\n- **label** - Rótulo do textarea.\n- **textarea** - Elemento textarea nativo.\n- **counter** - Contêiner do contador.\n- **counter-text** - Texto do contador.\n- **helper** - Contêiner do conteúdo auxiliar do slot default.\n- **feedback** - Contêiner da mensagem de validação.",
|
|
4540
4866
|
"attributes": [
|
|
4541
4867
|
{
|
|
4542
4868
|
"name": "value",
|
|
@@ -4609,7 +4935,7 @@
|
|
|
4609
4935
|
},
|
|
4610
4936
|
{
|
|
4611
4937
|
"name": "feedback-state",
|
|
4612
|
-
"description": "Estado de feedback
|
|
4938
|
+
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`; valores inválidos não aplicam estado.",
|
|
4613
4939
|
"values": [
|
|
4614
4940
|
{ "name": "danger" },
|
|
4615
4941
|
{ "name": "success" },
|
|
@@ -4670,7 +4996,7 @@
|
|
|
4670
4996
|
},
|
|
4671
4997
|
{
|
|
4672
4998
|
"name": "br-tooltip",
|
|
4673
|
-
"description": "O
|
|
4999
|
+
"description": "O `br-tooltip` exibe uma dica rápida e contextual quando o usuário foca ou passa o mouse sobre um elemento.\n\nColoque o texto da dica em `text` ou no slot padrão, e vincule-o ao elemento acionador através de `target` ou colocando o acionador no slot `trigger`.\n\n```html\n<br-button id=\"btn-ajuda\" shape=\"circle\" aria-label=\"Ajuda\">?</br-button>\n<br-tooltip target=\"#btn-ajuda\" text=\"Clique para obter informações\"></br-tooltip>\n```\n\n### Quando usar\n\n- Esclarecer o significado de botões que usam apenas ícones ou rótulos abreviados.\n\n### Quando evitar\n\n- Informações essenciais que todos os usuários precisam ler imediatamente: exiba como texto visível na página.\n- Conteúdos longos com links clicáveis: use `br-message` ou diálogo.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/tooltip?tab=designer).\n---\n\n\n### **Events:**\n - **brDidOpen** - Emitido quando o tooltip abre.\n- **brDidClose** - Emitido quando o tooltip fecha.\n\n### **Methods:**\n - **handleVisibilityChange(visible: _boolean_): __** - Watcher para monitorar alterações na propriedade `isVisible`.\n- **handleMatchTriggerWidthChange()** - Recalcula a superfície visível quando a política de largura muda.\n- **handleFocusIn()** - Exibe o tooltip quando o acionador recebe foco.\n- **handleFocusOut()** - Oculta o tooltip quando o acionador perde foco.\n- **handleKeyDown(event: _KeyboardEvent_)** - Fecha com Escape enquanto o tooltip estiver visível.\n- **setTriggerElement(element: _HTMLElement | null_)** - Define um trigger externo para o tooltip.\n- **showTooltip()** - Exibe o tooltip programaticamente.\n- **hideTooltip()** - Oculta o tooltip programaticamente.\n- **show()** - Exibe o tooltip programaticamente (alias para `showTooltip`).\n- **hide()** - Oculta o tooltip programaticamente (alias para `hideTooltip`).\n- **render(): __** - Renderiza o componente.\nEste método é responsável por gerar o conteúdo HTML do componente.\nEle utiliza a função `h` do Stencil para criar elementos JSX.\n\n### **Slots:**\n - **trigger** - Slot para o elemento que aciona a exibição do tooltip.\n- **content** - Slot para o conteúdo exibido no tooltip.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do tooltip.\n- **trigger** - Área do acionador do tooltip.\n- **content** - Área de conteúdo do tooltip.\n- **arrow** - Seta indicativa do tooltip.",
|
|
4674
5000
|
"attributes": [
|
|
4675
5001
|
{
|
|
4676
5002
|
"name": "custom-id",
|
|
@@ -4732,7 +5058,7 @@
|
|
|
4732
5058
|
},
|
|
4733
5059
|
{
|
|
4734
5060
|
"name": "br-upload",
|
|
4735
|
-
"description": "O
|
|
5061
|
+
"description": "O `br-upload` gerencia a seleção e envio de arquivos em formulários, com suporte a arrastar e soltar (drag and drop).\n\nDefina os tipos aceitos em `accept` e permita múltiplos arquivos com `multiple`. Use a lista de arquivos para exibir o progresso e o botão de exclusão.\n\n```html\n<br-upload label=\"Enviar documento\" accept=\".pdf,.png,.jpg\" multiple></br-upload>\n```\n\nEm formulários HTML, o componente integra-se via `ElementInternals`, enviando a lista de arquivos no submit nativo.\n\n### Quando usar\n\n- Anexar comprovantes, fotos ou documentos em formulários.\n\n### Quando evitar\n\n- Campo de texto ou URL de arquivo remoto: use `br-input`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/upload?tab=designer).\n---\n\n\n### **Events:**\n - **selectedFilesChange** - Emitido quando a lista de arquivos selecionados muda.\n- **brRemove** - Evento emitido quando um arquivo da lista `uploadFiles` (externos) é removido pelo usuário.\nO objeto emitido contém os dados do arquivo removido.\n- **brUploadRemove** - Evento emitido quando um arquivo existente é removido.\n- **brUploadCancel** - Emitido quando o usuário fecha a caixa de seleção de arquivos sem escolher nada.\n- **brUploadValidationChange** - Emitido ao iniciar e concluir a validação customizada.\nO `detail` contém `validating`, `valid` e `message`.\n- **brUploadStart** - Emitido antes de o `uploadHandler` processar um arquivo.\n- **brUploadProgress** - Emitido quando o `uploadHandler` informa o progresso de um arquivo.\n- **brUploadSuccess** - Emitido quando o `uploadHandler` conclui um arquivo.\n- **brUploadError** - Emitido quando o `uploadHandler` falha ao enviar um arquivo.\n\n### **Methods:**\n - **checkValidity(): _Promise<boolean>_** - Retorna `true` se o valor do componente for válido, caso contrário `false`.\nSe o componente for inválido, dispara um evento 'invalid'.\n- **reportValidity(): _Promise<boolean>_** - Retorna `true` se o valor do componente for válido, caso contrário `false`.\nSe for inválido, exibe a mensagem de erro padrão do navegador.\n- **setCustomValidity(message: _string_): _Promise<void>_** - Define uma mensagem de validação customizada para o upload.\nSe a mensagem for uma string vazia, o erro customizado é limpo.\n- **validate(): _Promise<boolean>_** - Executa o validator do upload e retorna se a lista atual é válida.\n- **getValidationState(): _Promise<FormValidationState>_** - Retorna um snapshot serializável da Constraint Validation API.\n- **cancelUpload(): _Promise<void>_** - Cancela o envio atual iniciado pelo `uploadHandler`.\n\n### **Slots:**\n - **default** - Conteúdo personalizado do botão de upload, com precedência sobre `buttonLabel` (use a prop para texto simples).\n- **upload-list** - Permite customizar a área de listagem de arquivos. Se utilizado, substitui a lista padrão gerada pelo componente.\n- **label** - Rótulo customizado do upload. Quando utilizado, a prop `label` é ignorada.\n- **helper** - Texto auxiliar exibido abaixo da superfície de seleção.\n- **feedback** - Mensagem de validação, normalmente um `br-message`.\n- **loading** - Conteúdo exibido enquanto o handler fornecido pela aplicação envia um arquivo.\n\n### **CSS Parts:**\n - **container** - Wrapper principal do upload.\n- **label** - Rótulo do campo de upload.\n- **input** - Elemento input de arquivo.\n- **button** - Botão de seleção de arquivo.\n- **helper** - Texto auxiliar do upload.\n- **remove-button** - Botão de remoção de arquivo.\n- **file-list** - Lista de arquivos selecionados.\n- **feedback** - Contêiner da mensagem de validação.\n- **loading** - Estado e progresso do envio assíncrono.",
|
|
4736
5062
|
"attributes": [
|
|
4737
5063
|
{
|
|
4738
5064
|
"name": "custom-id",
|
|
@@ -4763,6 +5089,11 @@
|
|
|
4763
5089
|
"description": "Rótulo exibido acima do botão de upload.",
|
|
4764
5090
|
"values": []
|
|
4765
5091
|
},
|
|
5092
|
+
{
|
|
5093
|
+
"name": "button-label",
|
|
5094
|
+
"description": "Texto do botão de seleção. Quando omitido, usa \"Selecione o arquivo\" ou,\ncom `multiple`, \"Selecione o(s) arquivo(s)\". O slot padrão tem precedência.",
|
|
5095
|
+
"values": []
|
|
5096
|
+
},
|
|
4766
5097
|
{
|
|
4767
5098
|
"name": "upload-files",
|
|
4768
5099
|
"description": "Lista de arquivos já enviados (para edição ou pré-visualização).\nPode ser uma string JSON ou um array de objetos IUploadFile. Cada item deve ter `name` não vazio e `size` numérico não negativo opcional; itens inválidos são ignorados.",
|
|
@@ -4790,7 +5121,7 @@
|
|
|
4790
5121
|
},
|
|
4791
5122
|
{
|
|
4792
5123
|
"name": "feedback-state",
|
|
4793
|
-
"description": "Estado de feedback
|
|
5124
|
+
"description": "Estado de feedback. Quando informado, tem precedência sobre `state`.",
|
|
4794
5125
|
"values": [{ "name": "BrFeedbackState" }]
|
|
4795
5126
|
},
|
|
4796
5127
|
{
|
|
@@ -4833,7 +5164,7 @@
|
|
|
4833
5164
|
},
|
|
4834
5165
|
{
|
|
4835
5166
|
"name": "br-wizard",
|
|
4836
|
-
"description": "O
|
|
5167
|
+
"description": "O `br-wizard` conduz fluxos passo a passo divididos em telas sequenciais com botões de navegação e barra de progresso.\n\nInsira cada tela com `br-wizard-panel` no slot padrão. Acompanhe a mudança de etapas pelo evento `brStepChange`.\n\n```html\n<br-wizard>\n <br-wizard-panel title-text=\"Identificação\">\n <p>Primeira etapa do cadastro.</p>\n </br-wizard-panel>\n <br-wizard-panel title-text=\"Endereço\">\n <p>Segunda etapa do cadastro.</p>\n </br-wizard-panel>\n <br-wizard-panel title-text=\"Confirmação\">\n <p>Revise os dados antes de enviar.</p>\n </br-wizard-panel>\n</br-wizard>\n```\n\n### Quando usar\n\n- Formulários extensos com dependência lógica entre etapas.\n\n### Quando evitar\n\n- Apenas indicar o status de um pedido já realizado: use `br-step`.\n- Conteúdos independentes onde a ordem de preenchimento é livre: use `br-tab`.\n\nConsulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/wizard?tab=designer).\n---\n\n\n### **Events:**\n - **brWizardStepChange** - Evento emitido APÓS mudar de etapa com sucesso.\n\nEste evento é disparado independente da origem da navegação:\n- Botões \"Avançar\" ou \"Voltar\"\n- Click direto em um step do indicador de progresso\n- Chamadas programáticas via métodos públicos (goToStep, nextStep, etc)\n- **brWizardBeforeStepChange** - Evento emitido ANTES de mudar de etapa (permite validação e cancelamento).\n\nComportamento:\n- Disparado apenas ao AVANÇAR (targetStep > currentStep)\n- Não é disparado ao VOLTAR (targetStep < currentStep)\n- Funciona tanto para cliques nos botões quanto para cliques diretos nos steps\n- Pode ser cancelado com `event.preventDefault()` para bloquear a navegação\n- **brWizardComplete** - Evento emitido ao concluir o wizard (última etapa).\n- **brWizardCancel** - Evento emitido ao cancelar o wizard.\n- **brWizardNavigationBlocked** - Evento emitido quando uma ação é bloqueada (validação falha, progressão linear impedida).\nEmite uma string indicando o motivo: 'linear-progression' ou 'validation-failed'.\nUse getCurrentStepIndex() para obter o contexto da etapa atual.\n\n### **Methods:**\n - **handleProgressionTypeChange()** - Observa mudanças no tipo de progressão.\nAtualiza a navegação dos painéis quando muda entre linear/nonlinear.\n- **handleInitialStepChange()** - Observa mudanças na etapa inicial.\nReinicializa o wizard quando a prop initialStep é alterada externamente.\n- **handleCurrentStepChange(newStep: _number_, oldStep: _number_)** - Observa mudanças na etapa atual (fonte única de verdade).\nSincroniza com br-step, atualiza painéis, anuncia mudança e move foco.\n- **handleSlotChange(event: _Event_)** - Detecta quando o slot muda (painéis adicionados/removidos dinamicamente).\nRedescobre os painéis e ressincroniza o estado.\n- **handleStepChange(event: _CustomEvent<{ activeStep: number }>_)** - Detecta quando o br-step muda de etapa ativa.\nValida e sincroniza a navegação com o componente interno br-step.\n- **nextStep(): _Promise<boolean>_** - Avança para a próxima etapa.\nExecuta validação via evento `brWizardBeforeStepChange` antes de navegar.\n- **next(): _Promise<boolean>_** - Avança para a próxima etapa.\n- **previousStep(): _Promise<boolean>_** - Volta para a etapa anterior.\nNão executa validação ao retornar.\n- **previous(): _Promise<boolean>_** - Retorna para a etapa anterior.\n- **goToStep(stepNumber: _number_): _Promise<boolean>_** - Navega para uma etapa específica.\nExecuta validação se estiver avançando (etapa alvo > etapa atual).\n- **reset(): _Promise<void>_** - Retorna à primeira etapa do wizard.\nNão executa validação (útil para reiniciar o fluxo).\n- **getCurrentStep(): _Promise<HTMLElement | null>_** - Retorna o elemento HTML do painel ativo no momento.\n- **getAllSteps(): _Promise<HTMLElement[]>_** - Retorna todos os painéis do wizard.\n- **getStepByIndex(stepNumber: _number_): _Promise<HTMLElement | null>_** - Retorna um painel específico pelo índice.\n- **getCurrentStepIndex(): _Promise<number>_** - Retorna o índice (número) da etapa atual.\nA numeração começa em 1 (primeira etapa = 1, segunda = 2, etc).\n- **getTotalSteps(): _Promise<number>_** - Retorna o número total de etapas do wizard.\n- **render(): __** - Método de renderização principal do componente.\nMonta a estrutura completa do wizard com acessibilidade integrada.\n\n### **Slots:**\n - **default** - Slot para os painéis de etapa (br-wizard-panel) do wizard.\n- **cancel-button** - Conteúdo customizado do botão de cancelar. Quando utilizado, o texto padrão \"Cancelar\" é substituído.\n- **next-button** - Conteúdo customizado do botão de avançar/concluir. Quando utilizado, os textos padrão \"Avançar\" e \"Concluir\" são substituídos.\n- **previous-button** - Conteúdo customizado do botão de voltar. Quando utilizado, o texto padrão \"Voltar\" é substituído.\n\n### **CSS Parts:**\n - **form** - Área do formulário do wizard.\n- **panel** - Painel ativo do wizard.\n- **progress** - Área de progresso do wizard.\n- **content** - Conteúdo do painel ativo.\n- **buttons** - Área de botões de navegação.",
|
|
4837
5168
|
"attributes": [
|
|
4838
5169
|
{
|
|
4839
5170
|
"name": "step",
|
|
@@ -4875,7 +5206,7 @@
|
|
|
4875
5206
|
},
|
|
4876
5207
|
{
|
|
4877
5208
|
"name": "br-wizard-panel",
|
|
4878
|
-
"description": "
|
|
5209
|
+
"description": "Painel de conteúdo de uma etapa individual do `br-wizard`.\n\nDefina o título da etapa em `title-text`. Insira os campos e conteúdos dessa fase no slot padrão.\n---\n\n\n### **Slots:**\n - **default** - Slot para o conteúdo da etapa (formulários, campos ou informações da fase atual).\n\n### **CSS Parts:**\n - **panel** - Wrapper do painel.\n- **content** - Área de conteúdo do painel.",
|
|
4879
5210
|
"attributes": [
|
|
4880
5211
|
{
|
|
4881
5212
|
"name": "label",
|