[{"data":1,"prerenderedAt":999},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":247,"page-en-\u002Fcomponents\u002Fbb-asterisk":378,"pt-showcase-BbAsterisk":967},null,[5,20,32,56,68,112,145,181,202,223,235,241],{"label":6,"entries":7},"Getting started",[8,12,16],{"title":9,"path":10,"component":-1,"order":11},"Installation","\u002Fguides\u002Finstallation",1,{"title":13,"path":14,"component":-1,"order":15},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":17,"path":18,"component":-1,"order":19},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":21,"entries":22},"Design system",[23,26,29],{"title":24,"path":25,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":27,"path":28,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"title":30,"path":31,"component":-1,"order":19},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":33,"entries":34},"Playbooks",[35,38,41,44,48,52],{"title":36,"path":37,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":39,"path":40,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":42,"path":43,"component":-1,"order":19},"Coherence","\u002Fguides\u002Fcoherence",{"title":45,"path":46,"component":-1,"order":47},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":49,"path":50,"component":-1,"order":51},"Icons","\u002Fguides\u002Ficons",5,{"title":53,"path":54,"component":-1,"order":55},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":57,"entries":58},"Ecosystem",[59,62,65],{"title":60,"path":61,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":63,"path":64,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":66,"path":67,"component":-1,"order":19},"AI agents","\u002Fguides\u002Fai-agents",{"label":69,"entries":70},"Inputs",[71,74,77,80,83,86,89,92,96,100,104,108],{"title":72,"path":73,"component":72,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":75,"path":76,"component":75,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":78,"path":79,"component":78,"order":19},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":81,"path":82,"component":81,"order":19},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":84,"path":85,"component":84,"order":47},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":87,"path":88,"component":87,"order":51},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":90,"path":91,"component":90,"order":55},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":93,"path":94,"component":93,"order":95},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":97,"path":98,"component":97,"order":99},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":101,"path":102,"component":101,"order":103},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":105,"path":106,"component":105,"order":107},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":109,"path":110,"component":109,"order":111},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":113,"entries":114},"Selection",[115,118,121,124,127,130,133,136,139,142],{"title":116,"path":117,"component":116,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":119,"path":120,"component":119,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":122,"path":123,"component":122,"order":19},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":125,"path":126,"component":125,"order":47},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":128,"path":129,"component":128,"order":51},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":131,"path":132,"component":131,"order":55},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":134,"path":135,"component":134,"order":95},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":137,"path":138,"component":137,"order":99},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":140,"path":141,"component":140,"order":103},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":143,"path":144,"component":143,"order":107},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":146,"entries":147},"Overlay",[148,151,154,157,160,163,166,169,172,175,178],{"title":149,"path":150,"component":149,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":152,"path":153,"component":152,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":155,"path":156,"component":155,"order":19},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":158,"path":159,"component":158,"order":47},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":161,"path":162,"component":161,"order":51},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":164,"path":165,"component":164,"order":55},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":167,"path":168,"component":167,"order":95},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":170,"path":171,"component":170,"order":95},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":173,"path":174,"component":173,"order":99},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":176,"path":177,"component":176,"order":103},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":179,"path":180,"component":179,"order":107},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":182,"entries":183},"Navigation",[184,187,190,193,196,199],{"title":185,"path":186,"component":185,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":188,"path":189,"component":188,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":191,"path":192,"component":191,"order":19},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":194,"path":195,"component":194,"order":47},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":197,"path":198,"component":197,"order":51},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":200,"path":201,"component":200,"order":55},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":203,"entries":204},"Feedback",[205,208,211,214,217,220],{"title":206,"path":207,"component":206,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":209,"path":210,"component":209,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":212,"path":213,"component":212,"order":19},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":215,"path":216,"component":215,"order":47},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":218,"path":219,"component":218,"order":51},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":221,"path":222,"component":221,"order":55},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":224,"entries":225},"Data Display",[226,229,232],{"title":227,"path":228,"component":227,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":230,"path":231,"component":230,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":233,"path":234,"component":233,"order":19},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":236,"entries":237},"Layout & Utility",[238],{"title":239,"path":240,"component":239,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":242,"entries":243},"Other",[244],{"title":245,"path":246,"component":245,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":248,"\u002Fen\u002Fcomponents\u002Fbb-accordion":249,"\u002Fit\u002Fcomponenti\u002Fbb-alert":250,"\u002Fen\u002Fcomponents\u002Fbb-alert":251,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":252,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":253,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":254,"\u002Fen\u002Fcomponents\u002Fbb-avatar":255,"\u002Fit\u002Fcomponenti\u002Fbb-badge":256,"\u002Fen\u002Fcomponents\u002Fbb-badge":257,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":258,"\u002Fen\u002Fcomponents\u002Fbb-base-button":259,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":260,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":261,"\u002Fit\u002Fcomponenti\u002Fbb-button":262,"\u002Fen\u002Fcomponents\u002Fbb-button":263,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":264,"\u002Fen\u002Fcomponents\u002Fbb-calendar":265,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":266,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":267,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":268,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":269,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":270,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":271,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":272,"\u002Fen\u002Fcomponents\u002Fbb-color-input":273,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":274,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":275,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":276,"\u002Fen\u002Fcomponents\u002Fbb-confirm":277,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":278,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":279,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":280,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":281,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":282,"\u002Fen\u002Fcomponents\u002Fbb-dialog":283,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":284,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":285,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":286,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":287,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":288,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":289,"\u002Fit\u002Fcomponenti\u002Fbb-form":290,"\u002Fen\u002Fcomponents\u002Fbb-form":291,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":292,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":293,"\u002Fit\u002Fcomponenti\u002Fbb-icon":294,"\u002Fen\u002Fcomponents\u002Fbb-icon":295,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":296,"\u002Fen\u002Fcomponents\u002Fbb-indicator":297,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":298,"\u002Fen\u002Fcomponents\u002Fbb-number-input":299,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":300,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":301,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":302,"\u002Fen\u002Fcomponents\u002Fbb-pagination":303,"\u002Fit\u002Fcomponenti\u002Fbb-popover":304,"\u002Fen\u002Fcomponents\u002Fbb-popover":305,"\u002Fit\u002Fcomponenti\u002Fbb-progress":306,"\u002Fen\u002Fcomponents\u002Fbb-progress":307,"\u002Fit\u002Fcomponenti\u002Fbb-radio":308,"\u002Fen\u002Fcomponents\u002Fbb-radio":309,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":310,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":311,"\u002Fit\u002Fcomponenti\u002Fbb-rating":312,"\u002Fen\u002Fcomponents\u002Fbb-rating":313,"\u002Fit\u002Fcomponenti\u002Fbb-select":314,"\u002Fen\u002Fcomponents\u002Fbb-select":315,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":316,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":317,"\u002Fit\u002Fcomponenti\u002Fbb-slider":318,"\u002Fen\u002Fcomponents\u002Fbb-slider":319,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":320,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":321,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":322,"\u002Fen\u002Fcomponents\u002Fbb-spinner":323,"\u002Fit\u002Fcomponenti\u002Fbb-switch":324,"\u002Fen\u002Fcomponents\u002Fbb-switch":325,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":326,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":327,"\u002Fit\u002Fcomponenti\u002Fbb-table":328,"\u002Fen\u002Fcomponents\u002Fbb-table":329,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":330,"\u002Fen\u002Fcomponents\u002Fbb-tabs":331,"\u002Fit\u002Fcomponenti\u002Fbb-tag":332,"\u002Fen\u002Fcomponents\u002Fbb-tag":333,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":334,"\u002Fen\u002Fcomponents\u002Fbb-text-input":335,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":336,"\u002Fen\u002Fcomponents\u002Fbb-textarea":337,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":338,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":339,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":340,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":341,"\u002Fit\u002Fcomponenti\u002Fbb-toast":342,"\u002Fen\u002Fcomponents\u002Fbb-toast":343,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":344,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":345,"\u002Fit\u002Fcomponenti\u002Fbb-tree":346,"\u002Fen\u002Fcomponents\u002Fbb-tree":347,"\u002Fit\u002Fguide\u002Fadoption-checklist":348,"\u002Fen\u002Fguides\u002Fadoption-checklist":349,"\u002Fit\u002Fguide\u002Fai-agents":350,"\u002Fen\u002Fguides\u002Fai-agents":351,"\u002Fit\u002Fguide\u002Fcoherence":352,"\u002Fen\u002Fguides\u002Fcoherence":353,"\u002Fit\u002Fguide\u002Fdesign-language":354,"\u002Fen\u002Fguides\u002Fdesign-language":355,"\u002Fit\u002Fguide\u002Fdesign-tokens":356,"\u002Fen\u002Fguides\u002Fdesign-tokens":357,"\u002Fit\u002Fguide\u002Ffetching-data":358,"\u002Fen\u002Fguides\u002Ffetching-data":359,"\u002Fit\u002Fguide\u002Ficons":360,"\u002Fen\u002Fguides\u002Ficons":361,"\u002Fit\u002Fguide\u002Finertia":362,"\u002Fen\u002Fguides\u002Finertia":363,"\u002Fit\u002Fguide\u002Finstallation":364,"\u002Fen\u002Fguides\u002Finstallation":365,"\u002Fit\u002Fguide\u002Fmigration":366,"\u002Fen\u002Fguides\u002Fmigration":367,"\u002Fit\u002Fguide\u002Fnuxt":368,"\u002Fen\u002Fguides\u002Fnuxt":369,"\u002Fit\u002Fguide\u002Foptions-and-items":370,"\u002Fen\u002Fguides\u002Foptions-and-items":371,"\u002Fit\u002Fguide\u002Fpassthrough":372,"\u002Fen\u002Fguides\u002Fpassthrough":373,"\u002Fit\u002Fguide\u002Fpreset-components":374,"\u002Fen\u002Fguides\u002Fpreset-components":375,"\u002Fit\u002Fguide\u002Fvalidated-forms":376,"\u002Fen\u002Fguides\u002Fvalidated-forms":377},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",{"id":379,"title":245,"body":380,"component":245,"description":955,"extension":956,"group":242,"meta":957,"navigation":958,"order":11,"path":246,"sections":959,"seo":964,"stem":965,"__hash__":966},"docs_en\u002Fcomponents\u002Fbb-asterisk.md",{"type":381,"value":382,"toc":949},"minimark",[383,418,424,431,439,442,487,491,510,519,525,531,583,606,644,655,683,689,696,699,713,789,802,816,822,825,904,910,923,930,945],[384,385,386,402],"when",{},[387,388,389,390,393,394,397,398,401],"p",{},"Use ",[391,392,245],"code",{}," for the small red ",[391,395,396],{},"*"," next to a required field. It has no\nbehaviour props, slots or events: it does not read ",[391,399,400],{},"required"," and it does not\nvalidate anything. It draws the asterisk and exposes only root passthrough.",[403,404,406],"template",{"v-slot:else":405},"",[407,408,409],"ul",{},[410,411,412,417],"li",{},[413,414,415],"a",{"href":290},[391,416,90],{},", if the question is how required fields get\nmarked across a whole form",[387,419,420,421,423],{},"Also see: ",[413,422,45],{"href":376},".",[387,425,426,427,430],{},"Most projects never place it by hand: the form controls add it themselves,\nbecause the ",[391,428,429],{},"requiredAsterisk"," plugin option is on by default. You need this\ncomponent in three cases: a legend that says what the marker means, a control\nwhose label you replaced, or an app that turned the option off and marks\nrequired fields itself.",[432,433,435],"h2",{"id":434},"default",[436,437,438],"span",{},"The marker",[387,440,441],{},"The markup is one span:",[443,444,448],"pre",{"className":445,"code":446,"language":447,"meta":405,"style":405},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cspan aria-hidden=\"true\" class=\"bb-asterisk\">*\u003C\u002Fspan>\n","html",[391,449,450],{"__ignoreMap":405},[436,451,453,457,460,464,467,471,474,476,479,482,484],{"class":452,"line":11},"line",[436,454,456],{"class":455},"suds8","\u003C",[436,458,436],{"class":459},"sne4z",[436,461,463],{"class":462},"s-5SL"," aria-hidden",[436,465,466],{"class":455},"=",[436,468,470],{"class":469},"sT6z2","\"true\"",[436,472,473],{"class":462}," class",[436,475,466],{"class":455},[436,477,478],{"class":469},"\"bb-asterisk\"",[436,480,481],{"class":455},">*\u003C\u002F",[436,483,436],{"class":459},[436,485,486],{"class":455},">\n",[488,489],"demo",{"name":490},"BbAsterisk\u002FBasic",[387,492,493,496,497,499,500,502,503,505,506,423],{},[391,494,495],{},"aria-hidden"," is intentional: sighted users see the asterisk, screen readers do\nnot. A lone ",[391,498,396],{}," read aloud in a label is noise. Assistive tech learns that a\nfield is required from the control: ",[391,501,400],{}," outside a form, a ",[391,504,400],{}," rule\nor the schema on a field joined to a ",[413,507,508],{"href":290},[391,509,90],{},[387,511,512,513,515,516,518],{},"The marker and the requirement are separate. ",[391,514,245],{}," does not make a field\nrequired, and inside a ",[391,517,90],{}," the asterisk a field draws checks nothing on its\nown.",[432,520,522],{"id":521},"automatic",[436,523,524],{},"Where it appears on its own",[387,526,527,528,530],{},"Every form control puts the marker after its label or legend when the field is\nrequired. The ",[391,529,429],{}," plugin option is on by default; turning it off\nis a project-wide choice, not a per-field one, because some required fields\nmarked and others not is worse than no markers:",[443,532,536],{"className":533,"code":534,"language":535,"meta":405,"style":405},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { requiredAsterisk: false },\n});\n","ts",[391,537,538,544,561,575],{"__ignoreMap":405},[436,539,540],{"class":452,"line":11},[436,541,543],{"class":542},"sLBg1","\u002F\u002F nuxt.config.ts\n",[436,545,546,550,553,557],{"class":452,"line":15},[436,547,549],{"class":548},"sHUrx","export",[436,551,552],{"class":548}," default",[436,554,556],{"class":555},"sKwhi"," defineNuxtConfig",[436,558,560],{"class":559},"soyes","({\n",[436,562,563,566,569,572],{"class":452,"line":19},[436,564,565],{"class":455},"    bitboss: { requiredAsterisk: ",[436,567,568],{"class":462},"false",[436,570,571],{"class":455}," }",[436,573,574],{"class":559},",\n",[436,576,577,580],{"class":452,"line":47},[436,578,579],{"class":559},"})",[436,581,582],{"class":455},";\n",[443,584,586],{"className":533,"code":585,"language":535,"meta":405,"style":405},"\u002F\u002F vite.config.ts, for a plain Vue app\nbitbossUi({ requiredAsterisk: false });\n",[391,587,588,593],{"__ignoreMap":405},[436,589,590],{"class":452,"line":11},[436,591,592],{"class":542},"\u002F\u002F vite.config.ts, for a plain Vue app\n",[436,594,595,598,601,603],{"class":452,"line":15},[436,596,597],{"class":555},"bitbossUi",[436,599,600],{"class":455},"({ requiredAsterisk: ",[436,602,568],{"class":462},[436,604,605],{"class":455}," });\n",[387,607,608,609,614,615,619,620,623,624,627,628,631,632,635,636,639,640,643],{},"A field shows it when it is marked\n",[413,610,612],{"href":611},"\u002Fen\u002Fcomponents\u002Fbb-text-input\u002Fapi#prop-required",[391,613,400],{},". On a field\njoined to a ",[413,616,617],{"href":290},[391,618,90],{}," that prop is a hint: it marks the\nfield and checks nothing (the form posts ",[391,621,622],{},"novalidate","), which suits a form the\nserver validates. To check on the client too, write ",[391,625,626],{},"rules=\"required\"",", which\nalso raises the marker. The rule counts in either shape: the string form (",[391,629,630],{},"'required|email'",", including ",[391,633,634],{},"'required:true'",") or the\nobject form (",[391,637,638],{},"{ required: true }","; ",[391,641,642],{},"{ required: false }"," shows nothing).",[387,645,646,647,650,651,654],{},"Nothing else counts. Rules like ",[391,648,649],{},"max:5"," pass on an empty field, so an asterisk\nfor \"any rule\" would mark optional fields. ",[391,652,653],{},"required_if"," and relatives do not\ncount either: conditionally required is not required.",[387,656,657,658,664,665,668,669,672,673,675,676,679,680,423],{},"With a form ",[413,659,661],{"href":660},"\u002Fen\u002Fcomponents\u002Fbb-form\u002Fapi#prop-schema",[391,662,663],{},"schema",", the schema\ndecides. A key that is not optional, has no default and is not nullable gets the\nmarker, and its field gets ",[391,666,667],{},"aria-required=\"true\""," as well. A validator\nfunction passed as ",[391,670,671],{},"rules"," is opaque to the form and never raises the marker:\nadd the ",[391,674,400],{}," hint beside it, or register it with ",[391,677,678],{},"defineRule"," and write\n",[391,681,682],{},"rules=\"required|…\"",[432,684,686],{"id":685},"custom-label",[436,687,688],{},"In your own label",[387,690,691,692,695],{},"A control's ",[391,693,694],{},"label"," slot replaces the label text and anything the control was\ndrawing beside it. If the field is required, put the marker back.",[488,697],{"name":698},"BbAsterisk\u002FCustomLabel",[387,700,701,702,705,706,709,710,712],{},"On the input family the slot scope is ",[391,703,704],{},"{ text, hasErrors, hasWarnings }",", plus\n",[391,707,708],{},"showAsterisk"," while the marker would show. It is already computed from\n",[391,711,400],{},", the rules, the schema and the plugin option, so bind to it instead\nof deciding again:",[443,714,718],{"className":715,"code":716,"language":717,"meta":405,"style":405},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbTextInput v-model=\"email\" label=\"Work email\" name=\"email\" required>\n    \u003Ctemplate #label=\"{ text, showAsterisk }\">\n        {{ text }}\u003CBbAsterisk v-if=\"showAsterisk\" \u002F>\n        \u003Cspan class=\"ms-2 text-xs opacity-70\">we never share it\u003C\u002Fspan>\n    \u003C\u002Ftemplate>\n\u003C\u002FBbTextInput>\n","vue",[391,719,720,760,765,770,775,780],{"__ignoreMap":405},[436,721,722,724,726,729,731,734,737,739,742,744,747,750,752,755,758],{"class":452,"line":11},[436,723,456],{"class":455},[436,725,105],{"class":459},[436,727,728],{"class":462}," v-model",[436,730,466],{"class":455},[436,732,733],{"class":455},"\"",[436,735,736],{"class":455},"email",[436,738,733],{"class":455},[436,740,741],{"class":462}," label",[436,743,466],{"class":455},[436,745,746],{"class":469},"\"Work email\"",[436,748,749],{"class":462}," name",[436,751,466],{"class":455},[436,753,754],{"class":469},"\"email\"",[436,756,757],{"class":462}," required",[436,759,486],{"class":455},[436,761,762],{"class":452,"line":15},[436,763,764],{"class":455},"    \u003Ctemplate #label=\"{ text, showAsterisk }\">\n",[436,766,767],{"class":452,"line":19},[436,768,769],{"class":455},"        {{ text }}\u003CBbAsterisk v-if=\"showAsterisk\" \u002F>\n",[436,771,772],{"class":452,"line":47},[436,773,774],{"class":455},"        \u003Cspan class=\"ms-2 text-xs opacity-70\">we never share it\u003C\u002Fspan>\n",[436,776,777],{"class":452,"line":51},[436,778,779],{"class":455},"    \u003C\u002Ftemplate>\n",[436,781,782,785,787],{"class":452,"line":55},[436,783,784],{"class":455},"\u003C\u002F",[436,786,105],{"class":459},[436,788,486],{"class":455},[387,790,791,792,794,795,797,798,801],{},"With ",[391,793,429],{}," off, ",[391,796,708],{}," never turns on: place\n",[391,799,800],{},"\u003CBbAsterisk \u002F>"," yourself on the required fields.",[387,803,804,805,807,808,807,810,812,813,423],{},"Group controls (",[391,806,119],{},", ",[391,809,125],{},[391,811,143],{},") expose the\nsame scope on ",[391,814,815],{},"legend",[432,817,819],{"id":818},"styling",[436,820,821],{},"Colour and spacing",[387,823,824],{},"The component ships these declarations and inherits nothing else:",[443,826,830],{"className":827,"code":828,"language":829,"meta":405,"style":405},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-asterisk {\n    color: var(--bb-danger);\n    font-weight: 600;\n    margin-inline-start: 0.15em;\n    user-select: none;\n}\n","css",[391,831,832,840,860,872,887,899],{"__ignoreMap":405},[436,833,834,837],{"class":452,"line":11},[436,835,836],{"class":462},".bb-asterisk",[436,838,839],{"class":455}," {\n",[436,841,842,845,848,851,854,857],{"class":452,"line":15},[436,843,844],{"class":462},"    color",[436,846,847],{"class":455},": ",[436,849,850],{"class":462},"var",[436,852,853],{"class":455},"(",[436,855,856],{"class":559},"--bb-danger",[436,858,859],{"class":455},");\n",[436,861,862,865,867,870],{"class":452,"line":19},[436,863,864],{"class":462},"    font-weight",[436,866,847],{"class":455},[436,868,869],{"class":462},"600",[436,871,582],{"class":455},[436,873,874,877,879,882,885],{"class":452,"line":47},[436,875,876],{"class":462},"    margin-inline-start",[436,878,847],{"class":455},[436,880,881],{"class":462},"0.15",[436,883,884],{"class":548},"em",[436,886,582],{"class":455},[436,888,889,892,894,897],{"class":452,"line":51},[436,890,891],{"class":462},"    user-select",[436,893,847],{"class":455},[436,895,896],{"class":462},"none",[436,898,582],{"class":455},[436,900,901],{"class":452,"line":55},[436,902,903],{"class":455},"}\n",[387,905,906,907,909],{},"The colour is ",[391,908,856],{},": retheme that token and the marker follows everything\nelse that means \"wrong\". Do not hard-code a red here.",[387,911,389,912,915,916,922],{},[391,913,914],{},"class"," or ",[413,917,919],{"href":918},"\u002Fen\u002Fcomponents\u002Fbb-asterisk\u002Fapi#prop-pt:%3Cpart%3E",[391,920,921],{},"pt:root"," for a deliberate local adjustment. Neither changes the\nfield's required state.",[387,924,925,926,929],{},"Font size comes from the label, so the asterisk stays in proportion on a\n",[391,927,928],{},"compact"," field. If the default margin does not fit, wrap the component and space\nthat wrapper instead of overriding the class for one form.",[387,931,932,933,937,938,941,942,944],{},"If your product marks ",[934,935,936],"strong",{},"optional"," fields instead of required ones, do not\nrepurpose the asterisk. Write \"optional\", as the Overage allowance field in\n",[413,939,688],{"href":940},"#custom-label"," does. A\nred ",[391,943,396],{}," already means one thing to anyone who has filled in a form.",[946,947,948],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}",{"title":405,"searchDepth":19,"depth":19,"links":950},[951,952,953,954],{"id":434,"depth":15,"text":438},{"id":521,"depth":15,"text":524},{"id":685,"depth":15,"text":688},{"id":818,"depth":15,"text":821},"The visual marker for required fields: placed by the form controls when the plugin option is on, or by hand in a custom label.","md",{},true,[960,961,962,963],{"id":434,"title":438},{"id":521,"title":524},{"id":685,"title":688},{"id":818,"title":821},{"title":245,"description":955},"components\u002Fbb-asterisk","giBLJqelx-NjFYOOaxEbvRMNahtDJdm61uCkj_AHrNg",{"name":245,"slug":968,"group":242,"description":969,"entrypoint":970,"docs":971,"props":974,"models":986,"events":987,"slots":988,"exposed":989,"pt":990,"validated":3,"migration":996},"bb-asterisk","Presentational required-field marker (red \"*\"). No behaviour props\u002Fslots\u002Fevents (only `pt`); placed in custom label content.","bitboss-ui",{"contract":972,"source":973},"ai\u002FBbAsterisk.md","ai\u002Fsource\u002FBbAsterisk.md",[975,981],{"name":976,"type":977,"required":978,"default":3,"description":979,"note":980,"demo":818},"pt","PtMap\u003C\"root\", never> | undefined",false,"Passthrough, object form: `{ root: '…' }`. See the `pt:\u003Cpart>` row.","Passthrough only changes presentation. The control still needs `required` to expose the requirement to assistive technology.",{"name":982,"type":983,"required":978,"default":3,"description":984,"note":985,"demo":818},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`. Parts: `root`.","Targets the `aria-hidden` marker span. Prefer the shared `--bb-danger` token for project-wide colour changes.",[],[],[],[],{"parts":991,"states":995},[992],{"name":993,"description":994},"root","The required-marker span.",[],{"removed":997,"renamed":998},[],[],1793055138208]