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