[{"data":1,"prerenderedAt":880},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-progress":378,"pt-showcase-BbProgress":822},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\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",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":345,"body":380,"component":345,"description":811,"extension":812,"group":333,"meta":813,"navigation":534,"order":177,"path":346,"sections":814,"seo":819,"stem":820,"__hash__":821},"docs_en\u002Fcomponents\u002Fbb-progress.md",{"type":381,"value":382,"toc":802},"minimark",[383,417,425,435,439,449,454,457,472,475,479,482,485,488,494,588,594,608,611,627,633,669,675,749,755,789,792,798],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Use ",[391,392,345],"code",{}," when you can measure how far along a task is: bytes uploaded,\nsteps completed, gigabytes of a quota consumed.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":78},[391,408,348],{},", when the wait cannot be measured\nand there is no bar to keep on screen",[402,411,412,416],{},[405,413,414],{"href":84},[391,415,363],{},", when a table is fetching: its\nskeleton rows say more",[418,419,421],"h2",{"id":420},"task",[422,423,424],"span",{},"Track measurable work",[387,426,427,428,434],{},"Bind the value you already own and let ",[405,429,431],{"href":430},"\u002Fen\u002Fcomponents\u002Fbb-progress\u002Fapi#prop-max",[391,432,433],{},"max"," do the arithmetic in the task's\nreal units.",[436,437],"demo",{"name":438},"BbProgress\u002FUploadList",[387,440,441,442,448],{},"The bar is display-only: it emits no events, and ",[405,443,445],{"href":444},"\u002Fen\u002Fcomponents\u002Fbb-progress\u002Fapi#prop-modelValue",[391,446,447],{},"v-model"," writes nothing back.",[450,451,453],"h3",{"id":452},"your-own-units","Your own units",[387,455,456],{},"Megabytes, euros and steps all work as they are, so there is no percentage to\ncompute first.",[387,458,459,465,466,468,469,471],{},[405,460,462],{"href":461},"\u002Fen\u002Fcomponents\u002Fbb-progress\u002Fapi#prop-min",[391,463,464],{},"min"," moves the lower bound for a range that does not start at zero: a sales\nfloor, an XP band. Leave it at zero on such a range and the bar still looks\nreasonable while showing the wrong fraction. Values outside the range from ",[391,467,464],{}," to ",[391,470,433],{}," are clamped.",[436,473],{"name":474},"BbProgress\u002FSalesBand",[450,476,478],{"id":477},"a-bar-that-moves","A bar that moves",[387,480,481],{},"The bar follows your state and never drives it, animating each change over\n250 ms. Do not add a transition of your own.",[436,483],{"name":484},"BbProgress\u002FOnboardingSteps",[387,486,487],{},"There are no events, so derive completion from the same state that feeds the\nbar, and announce it yourself: a bar reaching its end is silent.",[387,489,490,491,493],{},"In a real upload the value comes from your request layer. ",[391,492,217],{}," captures\nand validates the files but does not send them, so the request and the progress\nit reports stay yours.",[495,496,500],"pre",{"className":497,"code":498,"language":499,"meta":397,"style":397},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","const sentBytes = ref(0);\n\nawait axios.post('\u002Fimports', form, {\n    onUploadProgress: (event) => (sentBytes.value = event.loaded),\n});\n","ts",[391,501,502,530,536,556,583],{"__ignoreMap":397},[422,503,505,509,513,516,520,524,527],{"class":504,"line":141},"line",[422,506,508],{"class":507},"sHUrx","const",[422,510,512],{"class":511},"s-5SL"," sentBytes",[422,514,515],{"class":507}," =",[422,517,519],{"class":518},"sKwhi"," ref",[422,521,523],{"class":522},"suds8","(",[422,525,526],{"class":511},"0",[422,528,529],{"class":522},");\n",[422,531,532],{"class":504,"line":145},[422,533,535],{"emptyLinePlaceholder":534},true,"\n",[422,537,538,541,544,547,549,553],{"class":504,"line":149},[422,539,540],{"class":507},"await",[422,542,543],{"class":522}," axios.",[422,545,546],{"class":518},"post",[422,548,523],{"class":522},[422,550,552],{"class":551},"sT6z2","'\u002Fimports'",[422,554,555],{"class":522},", form, {\n",[422,557,558,561,564,568,571,574,577,580],{"class":504,"line":177},[422,559,560],{"class":518},"    onUploadProgress",[422,562,563],{"class":522},": (",[422,565,567],{"class":566},"soyes","event",[422,569,570],{"class":522},") ",[422,572,573],{"class":507},"=>",[422,575,576],{"class":522}," (sentBytes.value ",[422,578,579],{"class":507},"=",[422,581,582],{"class":522}," event.loaded),\n",[422,584,585],{"class":504,"line":181},[422,586,587],{"class":522},"});\n",[418,589,591],{"id":590},"handoff",[422,592,593],{},"When there is no number",[387,595,596,597,603,604,607],{},"Set ",[405,598,600],{"href":599},"\u002Fen\u002Fcomponents\u002Fbb-progress\u002Fapi#prop-indeterminate",[391,601,602],{},"indeterminate"," while the wait has no measurable end: the bar slides\nand announces no value, and any ",[391,605,606],{},"aria-valuetext"," you set waits until it turns off.",[436,609],{"name":610},"BbProgress\u002FImportHandoff",[387,612,613,614,616,617,622,623,626],{},"The boundary worth handling is the end of an upload, where the bytes stop and\nthe work does not. Switch the same bar to ",[391,615,602],{}," there rather than\ncreeping it toward 99%. A ",[405,618,619],{"href":444},[391,620,621],{},"model-value"," of ",[391,624,625],{},"null"," alone is an empty bar,\nnot a moving one.",[418,628,630],{"id":629},"accessibility",[422,631,632],{},"Naming and announcing",[387,634,635,636,639,640,646,647,650,651,653,654,656,657,660,661,664,665,668],{},"The bar already carries ",[391,637,638],{},"role=\"progressbar\""," and its values, so do not repeat\nthe role on a wrapper. ",[405,641,643],{"href":642},"\u002Fen\u002Fcomponents\u002Fbb-progress\u002Fapi#prop-label",[391,644,645],{},"label"," becomes the ",[391,648,649],{},"aria-label","; a bar with no\n",[391,652,645],{},", ",[391,655,649],{}," or ",[391,658,659],{},"aria-labelledby"," is an error for ",[391,662,663],{},"npx bitboss-ui check","\nand the ESLint rule ",[391,666,667],{},"require-accessible-name",".",[387,670,671,672,674],{},"Print the number beside the bar: geometry alone is not a readable value.\n",[391,673,606],{}," gives screen readers the unit a raw number lacks.",[495,676,680],{"className":677,"code":678,"language":679,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbProgress\n    aria-valuetext=\"220 of 500 gigabytes\"\n    label=\"Storage used\"\n    :max=\"500\"\n    :model-value=\"220\"\n\u002F>\n","vue",[391,681,682,691,701,711,729,744],{"__ignoreMap":397},[422,683,684,687],{"class":504,"line":141},[422,685,686],{"class":522},"\u003C",[422,688,690],{"class":689},"sne4z","BbProgress\n",[422,692,693,696,698],{"class":504,"line":145},[422,694,695],{"class":511},"    aria-valuetext",[422,697,579],{"class":522},[422,699,700],{"class":551},"\"220 of 500 gigabytes\"\n",[422,702,703,706,708],{"class":504,"line":149},[422,704,705],{"class":511},"    label",[422,707,579],{"class":522},[422,709,710],{"class":551},"\"Storage used\"\n",[422,712,713,716,718,720,723,726],{"class":504,"line":177},[422,714,715],{"class":522},"    :",[422,717,433],{"class":511},[422,719,579],{"class":522},[422,721,722],{"class":522},"\"",[422,724,725],{"class":511},"500",[422,727,728],{"class":522},"\"\n",[422,730,731,733,735,737,739,742],{"class":504,"line":181},[422,732,715],{"class":522},[422,734,621],{"class":511},[422,736,579],{"class":522},[422,738,722],{"class":522},[422,740,741],{"class":511},"220",[422,743,728],{"class":522},[422,745,746],{"class":504,"line":185},[422,747,748],{"class":522},"\u002F>\n",[418,750,752],{"id":751},"styling",[422,753,754],{},"Track and fill",[387,756,757,758,760,761,764,765,768,769,772,773,776,777,780,781,784,785,788],{},"There are no size or colour props. Four locals do the job, the same words as\n",[391,759,267],{},"'s rail and bar: ",[391,762,763],{},"--track"," (the height, 4px), ",[391,766,767],{},"--track-color"," (the\nunfilled track, ",[391,770,771],{},"var(--bb-track)","), ",[391,774,775],{},"--accent"," (the bar, ",[391,778,779],{},"var(--bb-primary)",")\nand ",[391,782,783],{},"--r"," (the radius of both, ",[391,786,787],{},"var(--bb-radius)",").",[436,790],{"name":791},"BbProgress\u002FStyleHooks",[387,793,794,795,797],{},"Point ",[391,796,775],{}," at a token rather than a hex, so a retinted bar still follows the\ntheme.",[799,800,801],"style",{},"html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}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 .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}",{"title":397,"searchDepth":149,"depth":149,"links":803},[804,808,809,810],{"id":420,"depth":145,"text":424,"children":805},[806,807],{"id":452,"depth":149,"text":453},{"id":477,"depth":149,"text":478},{"id":590,"depth":145,"text":593},{"id":629,"depth":145,"text":632},{"id":751,"depth":145,"text":754},"A progress bar that draws the value you bind, in your own units.","md",{},[815,816,817,818],{"id":420,"title":424},{"id":590,"title":593},{"id":629,"title":632},{"id":751,"title":754},{"title":345,"description":811},"components\u002Fbb-progress","VHrhVybYDWC5pShwLNp7I3TieaSLYnCk8GksYz4Qrxc",{"name":345,"slug":823,"group":333,"description":824,"entrypoint":825,"docs":826,"props":829,"models":862,"events":863,"slots":864,"exposed":865,"pt":866,"validated":377,"migration":877},"bb-progress","Visualizes task or operation progress state.","bitboss-ui",{"contract":827,"source":828},"ai\u002FBbProgress.md","ai\u002Fsource\u002FBbProgress.md",[830,836,840,845,848,853,857],{"name":602,"type":831,"required":832,"default":833,"description":834,"note":835,"demo":590},"boolean | undefined",false,"false","A wait you cannot measure yet: the bar slides back and forth (a calm pulse under reduced motion) and reports no `aria-valuenow`. `modelValue` is kept for when it turns off; a `null` `modelValue` alone is an empty bar.","For the phase you cannot measure, such as the server processing an upload that has reached 100%. The `model-value` is kept and shows again when this turns off.",{"name":645,"type":837,"required":832,"default":377,"description":838,"note":839,"demo":629},"string | undefined","Accessible name for the progress bar, forwarded to `aria-label`. A `progressbar` with no name is announced only as a bare percentage, so give it one whenever the surrounding text doesn't already name it (e.g. `\"Upload\"`). Matches the `label` naming prop on BbSpinner \u002F BbIcon.","Names the bar for assistive tech; it renders nothing on screen. Print the value beside the bar as well, and add an `aria-valuetext` attribute when the raw number reads badly out loud. A bar with no `label`, `aria-label` or `aria-labelledby` fails `npx bitboss-ui check` and the ESLint rule `require-accessible-name`.",{"name":433,"type":841,"required":832,"default":842,"description":843,"note":844,"demo":420},"number | undefined","100","Maximum value. Upper cap.","Feed it your real units — bytes, gigabytes, number of steps — and let the component do the arithmetic. Pre-computing a percentage adds a rounding step between the number you print and the bar you draw.",{"name":464,"type":841,"required":832,"default":526,"description":846,"note":847,"demo":420},"Minimum value. Lower cap.","Only for ranges that do not start at zero, such as a sales floor or an XP band. Getting it wrong is silent: the bar stays plausible and reports the wrong fraction. `max` at or below `min` renders an empty bar.",{"name":849,"type":850,"required":832,"default":526,"description":851,"note":852,"demo":420},"modelValue","number | null | undefined","The current progress value — a number between `min` and `max`. This is a one-way input prop (BbProgress is a display component and never emits `update:modelValue`); `null` means no value and renders an empty bar.","Bind it one way. There is no event to listen for, so derive completion from your own state (`value >= max`), and set `indeterminate` for an unmeasurable phase: `null` alone is an empty bar, not an animation.",{"name":854,"type":855,"required":832,"default":377,"description":856,"note":377,"demo":377},"pt","PtMap\u003CBbProgressPtPart, \"indeterminate\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. Parts: `root`, `bar`; state: `indeterminate`.",{"name":858,"type":859,"required":832,"default":377,"description":860,"note":377,"demo":861},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `bar`, `root`. States: `indeterminate`.","passthrough",[],[],[],[],{"parts":867,"states":874},[868,871],{"name":869,"description":870},"root","The track (the `progressbar` element); the bar follows it through its locals (`--track`, `--track-color`, `--accent`, `--r`, the same words as BbSlider's rail and bar).",{"name":872,"description":873},"bar","The fill itself. Its inline `transform` IS the value (it slides from -100% to 0), so style its look here — colour, gradient, radius — never its position.",[875],{"name":602,"description":876},"Component-wide: `indeterminate` is on; the bar slides (pulses under reduced motion) instead of showing a value.",{"removed":878,"renamed":879},[],[],1793055143578]