[{"data":1,"prerenderedAt":1401},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-switch":378,"pt-showcase-BbSwitch":1173},{"\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":270,"body":380,"component":270,"description":1159,"extension":1160,"group":243,"meta":1161,"navigation":1162,"order":233,"path":271,"sections":1163,"seo":1170,"stem":1171,"__hash__":1172},"docs_en\u002Fcomponents\u002Fbb-switch.md",{"type":381,"value":382,"toc":1151},"minimark",[383,426,432,448,461,469,488,492,529,564,567,586,626,632,635,638,669,675,691,694,697,720,726,733,736,762,769,782,785,806,823,826,832,835,838,864,873,892,898,901,950,953,956,971,978,981,1013,1016,1132,1147],[384,385,386,399],"when",{},[387,388,389,390,393,394,398],"p",{},"Reach for ",[391,392,270],"code",{}," when the control is the ",[395,396,397],"strong",{},"on\u002Foff state of a thing",": dark\nmode, notifications, a beta flag, \"anyone with the link can view\".",[400,401,403],"template",{"v-slot:else":402},"",[404,405,406,419],"ul",{},[407,408,409,414,415,418],"li",{},[410,411,412],"a",{"href":22},[391,413,246],{},": it is an ",[395,416,417],{},"answer or a\nselection",", like accepting terms or ticking \"send me a copy\"",[407,420,421,425],{},[410,422,423],{"href":82},[391,424,273],{},": several related on\u002Foff\nsettings bound to one array",[387,427,428,429,431],{},"Also see: ",[410,430,175],{"href":132},".",[387,433,434,435,438,439,443,444,447],{},"The commit model does ",[395,436,437],{},"not"," decide this. A switch fits both a live toggle and\na form that commits on Save: inside a ",[410,440,441],{"href":46},[391,442,220],{}," it\njoins the form by ",[391,445,446],{},"name"," and submits with the rest.",[387,449,450,451,456,457,460],{},"The field states, the value contract and the layout are identical to\n",[410,452,454],{"href":453},"\u002Fen\u002Fcomponents\u002Fbb-checkbox#states",[391,455,246],{},"'s, and are documented there.\nCarry one thing over: ",[391,458,459],{},"reverse"," inverted its meaning in v3, and the label-first\nsettings row is where you will hit it.",[462,463,465],"h2",{"id":464},"default",[466,467,468],"span",{},"A settings panel",[387,470,471,472,474,475,481,482,487],{},"Give each setting its own ",[391,473,270],{}," and set ",[410,476,478],{"href":477},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-layout",[391,479,480],{},"layout=\"label-fill\""," with ",[410,483,485],{"href":484},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-reverse",[391,486,459],{},", so the label reads first and every switch lines up on the trailing edge.",[489,490],"demo",{"name":491},"BbSwitch\u002FSettingsPanel",[387,493,494,495,501,502,508,509,515,516,522,523,528],{},"When a setting only makes sense after another one, set ",[410,496,498],{"href":497},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-disabled",[391,499,500],{},"disabled"," and say why in ",[410,503,505],{"href":504},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-description",[391,506,507],{},"description",". ",[410,510,512],{"href":511},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-compact",[391,513,514],{},"compact"," tightens the gap between each label and its description, which keeps a long panel dense. When a description runs to two lines,\n",[410,517,519],{"href":518},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-inputAlign",[391,520,521],{},"input-align=\"center\""," centres the switch on the label and description together instead of\non the first line. If the rows are one array of enabled values rather than separate fields, use ",[410,524,526],{"href":525},"\u002Fen\u002Fcomponents\u002Fbb-switch-group#default",[391,527,273],{}," instead.",[387,530,531,532,538,539,545,546,550,551,557,558,431],{},"The smallest switch is a ",[410,533,535],{"href":534},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-label",[391,536,537],{},"label"," and a ",[410,540,542],{"href":541},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#model-modelValue",[391,543,544],{},"v-model",", which updates on every toggle, whether the user clicks the control or presses Space on it. ",[410,547,548],{"href":504},[391,549,507],{}," is always-visible helper text; ",[410,552,554],{"href":553},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-hint",[391,555,556],{},"hint"," shows only while the switch has focus, unless you pin it with ",[410,559,561],{"href":560},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-persistentHint",[391,562,563],{},"persistent-hint",[489,565],{"name":566},"BbSwitch\u002FBasic",[387,568,569,570,573,574,578,579,585],{},"The control exposes ",[391,571,572],{},"role=\"switch\""," and its checked state on its own, so add no\nARIA of your own. ",[410,575,576],{"href":534},[391,577,537],{}," is required and is the accessible name. ",[410,580,582],{"href":581},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-hideLabel",[391,583,584],{},"hide-label","\nkeeps it for assistive technology only, for the rare row where adjacent text\nalready names the switch.",[387,587,588,589,595,596,602,603,606,607,606,610,606,613,606,616,606,619,606,622,625],{},"Besides ",[410,590,592],{"href":591},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#event-update:modelValue",[391,593,594],{},"update:modelValue"," the switch re-emits the native events: ",[410,597,599],{"href":598},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#event-change",[391,600,601],{},"change",",\n",[391,604,605],{},"click",", ",[391,608,609],{},"input",[391,611,612],{},"focus",[391,614,615],{},"blur",[391,617,618],{},"keydown",[391,620,621],{},"mousedown",[391,623,624],{},"mouseup",". Use them\nfor analytics or side effects, never to work out the new value.",[462,627,629],{"id":628},"states",[466,630,631],{},"States at a glance",[387,633,634],{},"Every field state a switch can show, next to each other.",[489,636],{"name":637},"BbSwitch\u002FStates",[387,639,640,641,647,648,650,651,657,658,664,665,431],{},"Lock an admin-managed setting with ",[410,642,644],{"href":643},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-readonly",[391,645,646],{},"readonly",", not ",[391,649,500],{},": it stays focusable and still submits. The difference between ",[410,652,654],{"href":653},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-errors",[391,655,656],{},"errors"," and ",[410,659,661],{"href":660},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-warnings",[391,662,663],{},"warnings"," is explained on ",[410,666,667],{"href":453},[391,668,246],{},[462,670,672],{"id":671},"values",[466,673,674],{},"When the model is not a boolean",[387,676,677,678,657,684,690],{},"Point ",[410,679,681],{"href":680},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-trueValue",[391,682,683],{},"true-value",[410,685,687],{"href":686},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-falseValue",[391,688,689],{},"false-value"," at the two members of an enum and the model\nholds whichever the current state maps to.",[489,692],{"name":693},"BbSwitch\u002FEnumValues",[387,695,696],{},"Do this whenever the API behind the switch speaks in names rather than booleans:\na visibility setting, a plan tier, a retention mode. The translation layer you\nwould otherwise write on both sides of the request stops existing.",[387,698,699,700,702,703,709,710,715,716,431],{},"The rest of the value contract is shared with ",[391,701,246],{},": any serializable\nvalue, compared structurally. When a classic form post must carry the unchecked\ncase, set ",[410,704,706],{"href":705},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-submitWhenFalse",[391,707,708],{},"submit-when-false"," together with ",[410,711,713],{"href":712},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-name",[391,714,446],{},". See\n",[410,717,719],{"href":718},"\u002Fen\u002Fcomponents\u002Fbb-checkbox#values","what the model holds",[462,721,723],{"id":722},"instant-save",[466,724,725],{},"Saving on toggle or on submit",[387,727,728,729,732],{},"A ",[395,730,731],{},"live"," switch, one with no Save button behind it, owns its own persistence,\nand the request can fail after the thumb has already moved.",[489,734],{"name":735},"BbSwitch\u002FInstantSave",[387,737,738,739,745,746,751,752,756,757,761],{},"Bind ",[410,740,742],{"href":741},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-modelValue",[391,743,744],{},":model-value"," and handle ",[410,747,748],{"href":591},[391,749,750],{},"@update:model-value"," rather than using\n",[410,753,754],{"href":541},[391,755,544],{},", because you need to put the value back. Write the value optimistically so\nthe control responds at once. Hold it ",[410,758,759],{"href":643},[391,760,646],{}," while the request is in flight,\nso nobody queues conflicting toggles, and restore the previous value on failure.",[387,763,764,765,768],{},"In this demo turning it on succeeds and turning it off is refused, so flip it\noff to see the revert. In a real application pair the failure with ",[391,766,767],{},"useToast",",\nbecause the user may not still be looking at that corner of the page.",[387,770,771,772,776,777,781],{},"Joined to a ",[410,773,774],{"href":46},[391,775,220],{},", do none of this. The switch joins\nthe form under its ",[410,778,779],{"href":712},[391,780,446],{},", and the form submits it with everything else.",[489,783],{"name":784},"BbSwitch\u002FFormField",[387,786,787,788,794,795,798,799,805],{},"A switch that only changes the view, like \"Show advanced options\", would join\ntoo and land in the submitted values. ",[410,789,791],{"href":790},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-formless",[391,792,793],{},"formless"," keeps it out. A field hidden\nwith ",[391,796,797],{},"v-if"," leaves the values too, so \"Expire the token\" is not sent while the\nadvanced options are closed. To keep its value, set ",[410,800,802],{"href":801},"\u002Fen\u002Fcomponents\u002Fbb-form\u002Fapi#prop-keepValuesOnUnmount",[391,803,804],{},"keep-values-on-unmount"," on the form.",[387,807,808,809,815,816,822],{},"To make a joined switch mandatory, say an agreement that must be on, give it\n",[410,810,812],{"href":811},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-rules",[391,813,814],{},"rules=\"required\"",". The\n",[410,817,819],{"href":818},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-required",[391,820,821],{},"required"," prop is for a switch outside a form: on a joined one it is\na hint that marks the switch and checks nothing. The asterisk follows the rule.",[387,824,825],{},"What a surface must not do is both. Take a switch that applied the moment it\nwas flipped, under a Save button that implies it had not: the user cannot tell\nwhat is already live. Pick one commit model per surface.",[462,827,829],{"id":828},"passive-state",[466,830,831],{},"A switch driven from outside",[387,833,834],{},"Two props paint the control from state you own elsewhere, without either of them\nentering the model.",[489,836],{"name":837},"BbSwitch\u002FPassiveState",[387,839,840,846,847,852,853,857,858,860,861,863],{},[410,841,843],{"href":842},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-checked",[391,844,845],{},"checked"," forces the checked visual regardless of ",[410,848,849],{"href":541},[391,850,851],{},"modelValue",", and re-syncs\nwhenever the prop changes. Interaction still emits ",[410,854,855],{"href":591},[391,856,594],{}," for you\nto handle. Passing it together with a ",[391,859,544],{}," gives the switch two sources of\ntruth, and ",[391,862,845],{}," wins until you unset it.",[387,865,866,872],{},[410,867,869],{"href":868},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#prop-indeterminate",[391,870,871],{},"indeterminate"," parks the thumb midway, for a master switch whose children\ndisagree. It is a visual flag only: the model keeps its value, and the component\nre-asserts the state after clicks.",[874,875,876],"migration",{},[387,877,878,880,881,657,884,887,888,891],{},[391,879,845],{}," used to accept the strings ",[391,882,883],{},"'true'",[391,885,886],{},"'false'"," as well. In v3 it is\na plain boolean, so ",[391,889,890],{},"checked=\"false\""," no longer compiles. That string was truthy\nand turned the switch on, so this is a loud failure replacing a silent one.",[462,893,895],{"id":894},"custom-markup",[466,896,897],{},"Custom track and markup",[387,899,900],{},"There are two escape hatches here, and they are different sizes. Take the\nsmaller one first.",[387,902,903,904,910,911,914,915,917,918,606,920,606,923,606,926,602,928,606,930,606,932,606,935,606,938,606,941,602,944,657,947,431],{},"The ",[410,905,907],{"href":906},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#slot-icon",[391,908,909],{},"icon"," slot replaces the ",[395,912,913],{},"entire track and thumb",", not a mark inside them,\nwhile keeping the input, the label, the field chrome and ",[391,916,572],{},". It\nreceives the current state: ",[391,919,845],{},[391,921,922],{},"focused",[391,924,925],{},"focusVisible",[391,927,500],{},[391,929,646],{},[391,931,871],{},[391,933,934],{},"hasErrors",[391,936,937],{},"hasWarnings",[391,939,940],{},"value",[391,942,943],{},"trueValue",[391,945,946],{},"falseValue",[391,948,949],{},"text",[489,951],{"name":952},"BbSwitch\u002FIconSlot",[387,954,955],{},"Because the slot is the whole visual, what you put there has to communicate on,\noff and focused by itself. The common mistake is passing a bare icon and\nexpecting the track to stay behind it: there is no track any more, so wrap the\nicon in a container you have styled.",[387,957,958,959,961,962,967,968,970],{},"To change only the label, say to append a ",[391,960,339],{}," reading \"Beta\", fill the ",[410,963,965],{"href":964},"\u002Fen\u002Fcomponents\u002Fbb-switch\u002Fapi#slot-label",[391,966,537],{}," slot instead. It receives ",[391,969,949],{},", and the accessible name stays.",[387,972,973,974,977],{},"When even the row is wrong, say a toolbar toggle or a compact inline control,\n",[391,975,976],{},"BbBaseSwitchIcon"," gives you the track and thumb on their own.",[489,979],{"name":980},"BbSwitch\u002FCustomMarkup",[387,982,983,985,986,989,990,993,994,997,998,1001,1002,1005,1006,1008,1009,1012],{},[391,984,976],{}," has no input, no events and no state. It is ",[391,987,988],{},"aria-hidden"," and\ncannot be focused, so it must sit on a real control: a ",[391,991,992],{},"\u003Clabel>"," wrapping an\n",[391,995,996],{},"\u003Cinput type=\"checkbox\" role=\"switch\">"," hidden with ",[391,999,1000],{},"sr-only",", never with\n",[391,1003,1004],{},"display: none",". That ",[391,1007,572],{}," is what makes a screen reader say \"on\" and\n\"off\" rather than \"checked\". The track cannot see the input's focus, so pass\n",[391,1010,1011],{},"focus-visible"," yourself, as the demo does, or a keyboard user gets no ring.",[387,1014,1015],{},"The custom properties live on the track element, so target that element rather\nthan an ancestor. Change the geometry freely, because everything else derives\nfrom it: the thumb stays centred and travels flush at any size.",[1017,1018,1022],"pre",{"className":1019,"code":1020,"language":1021,"meta":402,"style":402},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-switch .bb-base-switch-icon {\n    --w: 44px; \u002F* track width, default 32px *\u002F\n    --h: 24px; \u002F* track height, default 18px *\u002F\n    --thumb: 20px; \u002F* thumb diameter, default 16px *\u002F\n    --accent: #16a34a; \u002F* track fill when on *\u002F\n    --r: 6px; \u002F* default 999px *\u002F\n}\n","css",[391,1023,1024,1038,1061,1078,1095,1110,1127],{"__ignoreMap":402},[466,1025,1027,1031,1034],{"class":1026,"line":141},"line",[466,1028,1030],{"class":1029},"s-5SL",".bb-switch",[466,1032,1033],{"class":1029}," .bb-base-switch-icon",[466,1035,1037],{"class":1036},"suds8"," {\n",[466,1039,1040,1044,1047,1050,1054,1057],{"class":1026,"line":145},[466,1041,1043],{"class":1042},"soyes","    --w",[466,1045,1046],{"class":1036},": ",[466,1048,1049],{"class":1029},"44",[466,1051,1053],{"class":1052},"sHUrx","px",[466,1055,1056],{"class":1036},"; ",[466,1058,1060],{"class":1059},"sLBg1","\u002F* track width, default 32px *\u002F\n",[466,1062,1063,1066,1068,1071,1073,1075],{"class":1026,"line":149},[466,1064,1065],{"class":1042},"    --h",[466,1067,1046],{"class":1036},[466,1069,1070],{"class":1029},"24",[466,1072,1053],{"class":1052},[466,1074,1056],{"class":1036},[466,1076,1077],{"class":1059},"\u002F* track height, default 18px *\u002F\n",[466,1079,1080,1083,1085,1088,1090,1092],{"class":1026,"line":177},[466,1081,1082],{"class":1042},"    --thumb",[466,1084,1046],{"class":1036},[466,1086,1087],{"class":1029},"20",[466,1089,1053],{"class":1052},[466,1091,1056],{"class":1036},[466,1093,1094],{"class":1059},"\u002F* thumb diameter, default 16px *\u002F\n",[466,1096,1097,1100,1102,1105,1107],{"class":1026,"line":181},[466,1098,1099],{"class":1042},"    --accent",[466,1101,1046],{"class":1036},[466,1103,1104],{"class":1029},"#16a34a",[466,1106,1056],{"class":1036},[466,1108,1109],{"class":1059},"\u002F* track fill when on *\u002F\n",[466,1111,1112,1115,1117,1120,1122,1124],{"class":1026,"line":185},[466,1113,1114],{"class":1042},"    --r",[466,1116,1046],{"class":1036},[466,1118,1119],{"class":1029},"6",[466,1121,1053],{"class":1052},[466,1123,1056],{"class":1036},[466,1125,1126],{"class":1059},"\u002F* default 999px *\u002F\n",[466,1128,1129],{"class":1026,"line":225},[466,1130,1131],{"class":1036},"}\n",[387,1133,1134,1135,1138,1139,1142,1143,1146],{},"This is where v2's ",[391,1136,1137],{},"color"," prop went, removed with no replacement. Recolor\nthrough ",[391,1140,1141],{},"--accent",", or through the theme's ",[391,1144,1145],{},"--bb-primary"," when the whole product\nshould follow.",[1148,1149,1150],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}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);}",{"title":402,"searchDepth":149,"depth":149,"links":1152},[1153,1154,1155,1156,1157,1158],{"id":464,"depth":145,"text":468},{"id":628,"depth":145,"text":631},{"id":671,"depth":145,"text":674},{"id":722,"depth":145,"text":725},{"id":828,"depth":145,"text":831},{"id":894,"depth":145,"text":897},"One on\u002Foff switch for the state of a thing, with your own values and a replaceable track.","md",{},true,[1164,1165,1166,1167,1168,1169],{"id":464,"title":468},{"id":628,"title":631},{"id":671,"title":674},{"id":722,"title":725},{"id":828,"title":831},{"id":894,"title":897},{"title":270,"description":1159},"components\u002Fbb-switch","ml4QHj1mh8zazWQvj3fRYBAKX66uecVg5nSRozvCnt0",{"name":270,"slug":1174,"group":243,"description":1175,"entrypoint":1176,"docs":1177,"props":1180,"models":1293,"events":1296,"slots":1321,"exposed":1332,"pt":1333,"validated":377,"migration":1366},"bb-switch","Toggles two-state values with switch semantics.","bitboss-ui",{"contract":1178,"source":1179},"ai\u002FBbSwitch.md","ai\u002Fsource\u002FBbSwitch.md",[1181,1186,1190,1193,1197,1200,1203,1206,1209,1211,1213,1216,1218,1221,1224,1228,1233,1237,1240,1243,1249,1251,1253,1256,1260,1265,1268,1270,1273,1277,1281,1284,1287,1291],{"name":1182,"type":1183,"required":1184,"default":377,"description":1185,"note":377,"demo":377},"autofocus","Booleanish | undefined",false,"Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.",{"name":845,"type":1187,"required":1184,"default":377,"description":1188,"note":1189,"demo":828},"boolean | undefined","Defines the input as checked.","Paints the control from state you own elsewhere and wins over `modelValue` until you unset it, so it is display-driven or bound, never both. Narrowed to a plain boolean in v3: the v2 `checked=\"false\"` no longer compiles, where it used to turn the switch on.",{"name":514,"type":1187,"required":1184,"default":1191,"description":1192,"note":377,"demo":464},"false","Compact density. Swaps `--bb-label-spacing-y` for `--bb-label-spacing-y-compact`, so tune a compact field's label gap with the `-compact` token, not the base one. The same meaning as on the checkbox, radio and switch groups.",{"name":507,"type":1194,"required":1184,"default":377,"description":1195,"note":1196,"demo":464},"string | undefined","Text between the label and the input. Unlike the hint it is always visible; it joins the input's `aria-describedby` after any `errors` \u002F `warnings`, before the `hint`.","Always visible and tied to the control through `aria-describedby`. On a settings row it is where the consequence of flipping the switch belongs.",{"name":500,"type":1187,"required":1184,"default":1191,"description":1198,"note":1199,"demo":464},"Disables the component.","Takes the switch out of the tab order and out of the submitted form. Say why in `description`; for an admin-locked setting prefer `readonly`.",{"name":656,"type":1201,"required":1184,"default":377,"description":1202,"note":377,"demo":628},"string | string[] | undefined","Error messages under the field, a string or array, in an `aria-live=\"polite\"` region and first in the control's `aria-describedby`, so they are re-read when it regains focus.",{"name":946,"type":1204,"required":1184,"default":377,"description":1205,"note":377,"demo":671},"any","Value of the input when unchecked. It handles any kind of serializable object.",{"name":793,"type":1187,"required":1184,"default":1191,"description":1207,"note":1208,"demo":722},"Keep this control out of the enclosing `BbForm` entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a \"show advanced\" switch).","For a switch that changes the page rather than the data, such as \"Show advanced options\": without it the switch joins the enclosing `BbForm` and lands in the submitted values.",{"name":934,"type":1187,"required":1184,"default":1191,"description":1210,"note":377,"demo":377},"Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.",{"name":937,"type":1187,"required":1184,"default":1191,"description":1212,"note":377,"demo":377},"Define if the component should be in a warning state. Same chrome as errors with `--bb-warn`; errors take priority.",{"name":1214,"type":1187,"required":1184,"default":1191,"description":1215,"note":377,"demo":377},"hideLabel","Visually hides the label of the input while maintaining accessibility.",{"name":556,"type":1194,"required":1184,"default":377,"description":1217,"note":377,"demo":377},"Text box to be displayed near the input, usually to indicate instructions.",{"name":1219,"type":1194,"required":1184,"default":377,"description":1220,"note":377,"demo":377},"id","The `id` of the native control; the label's `for` and the description and message ids derive from it. Generated when omitted.",{"name":871,"type":1187,"required":1184,"default":1191,"description":1222,"note":1223,"demo":828},"Sets the input in an indeterminate state.","Parks the thumb midway, for a master switch whose children disagree. Visual only: the model keeps its value, and the component re-asserts the state after clicks because the DOM resets it natively.",{"name":1225,"type":1226,"required":1184,"default":377,"description":1227,"note":377,"demo":377},"inputAlign","FieldCrossAlign | undefined","Vertical position of the control in a side-by-side row; not `inputPosition`, the horizontal one. Omitted, the control's first line meets the label's.",{"name":1229,"type":1230,"required":1184,"default":1231,"description":1232,"note":377,"demo":377},"inputPosition","\"left\" | \"center\" | \"right\" | undefined","\"left\"","Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can.",{"name":537,"type":1234,"required":1162,"default":377,"description":1235,"note":1236,"demo":464},"string","Text content of the label of the element.","Required: it is the accessible name of the switch. Do not add ARIA of your own: the control already exposes `role=\"switch\"` and its state.",{"name":1238,"type":1226,"required":1184,"default":377,"description":1239,"note":377,"demo":377},"labelAlign","Vertical position of the label block in a side-by-side row; not `labelPosition`, the horizontal one. Omitted, the label's first line meets the control's.",{"name":1241,"type":1230,"required":1184,"default":377,"description":1242,"note":377,"demo":377},"labelPosition","Sets the text alignment of the label.",{"name":1244,"type":1245,"required":1184,"default":1246,"description":1247,"note":1248,"demo":464},"layout","Responsive\u003CFieldLayout> | undefined","\"auto\"","How label and input sit together: `'vertical'`, `'horizontal'` (50\u002F50), `'auto'`, `'label-fill'`, `'input-fill'`, a ratio like `'xx xxxxx'`, or a per-breakpoint map (`{ default: 'vertical', md: 'xx xxxxx' }`).","The settings row is `layout=\"label-fill\"` with `reverse`: the label takes the free width and the switch sits on the trailing edge.",{"name":851,"type":1204,"required":1184,"default":377,"description":1250,"note":377,"demo":377},"Used by v-model. Can be any serializable type.",{"name":446,"type":1194,"required":1184,"default":377,"description":1252,"note":377,"demo":377},"Defines the name of the input.",{"name":1254,"type":1187,"required":1184,"default":1191,"description":1255,"note":377,"demo":377},"persistentHint","Keeps the hint displayed.",{"name":1257,"type":1258,"required":1184,"default":377,"description":1259,"note":377,"demo":377},"pt","PtMap\u003CTogglePtPart, CheckablePtState> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1261,"type":1262,"required":1184,"default":377,"description":1263,"note":377,"demo":1264},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `description`, `hint`, `icon`, `label`, `message`, `root`. States: `checked`, `disabled`, `errors`, `focused`, `focusVisible`, `indeterminate`, `readonly`, `warnings`.","passthrough",{"name":646,"type":1187,"required":1184,"default":1191,"description":1266,"note":1267,"demo":722},"Sets the input in a readonly state.","The right state for a switch whose change is in flight, and for admin-locked settings. It sets no native `disabled` attribute, so do not target `:disabled` in CSS or tests; `.bb-base-switch-icon--readonly` is the hook.",{"name":821,"type":1187,"required":1184,"default":1191,"description":1269,"note":377,"demo":377},"Sets the input as required.",{"name":459,"type":1187,"required":1184,"default":1191,"description":1271,"note":1272,"demo":464},"Reverses the layout: in every direction the order of the label and the input is swapped from the standard arrangement.","Its meaning inverted in v3 and the compiler cannot see it. The default rendering is unchanged, but a v2 `:reverse=\"false\"` becomes a bare `reverse`, which is the label-first settings row, so most switches that set it are affected.",{"name":1274,"type":1275,"required":1184,"default":377,"description":1276,"note":377,"demo":377},"rules","RuleExpression\u003Cany>","vee-validate rules for this field. Only inside a `BbForm`.",{"name":1278,"type":1187,"required":1184,"default":1191,"description":1279,"note":1280,"demo":377},"submitWhenFalse","Will submit \"falseValue\" if the input is not checked. Otherwise \"trueValue\" will be submitted.","Only for classic form posts: an unchecked switch otherwise submits nothing. The full value contract is shared with `BbCheckbox`.",{"name":943,"type":1204,"required":1184,"default":377,"description":1282,"note":1283,"demo":671},"Value of the input when checked. It handles any kind of serializable object.","Point it and `false-value` at the two members of an enum and the model stops needing a translation layer on either side of the request.",{"name":1285,"type":1194,"required":1184,"default":377,"description":1286,"note":377,"demo":377},"validationLabel","The field's name in validation messages (`{field}`): \"Email is not valid\". Defaults to the `label` (or `legend`), then \"This field\"; never the `name`. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). `BbForm` only.",{"name":1288,"type":1289,"required":1184,"default":377,"description":1290,"note":377,"demo":377},"validationMode","ValidationMode | undefined","When the field validates: `aggressive` (each change), `balanced` (on leave, then live while in error), `lazy` (on leave), `submit-only`, `submit-live`. Unset: the `BbForm`'s `validation-mode`, then `formControls.validationMode` (`'balanced'`). `BbForm` only.",{"name":663,"type":1201,"required":1184,"default":377,"description":1292,"note":377,"demo":628},"Warning messages under the field, a string or array: amber, in their own `aria-live` region and in the control's `aria-describedby` after the errors. Non-empty turns on the warning state; errors win when both are set.",[1294],{"name":851,"type":1204,"note":1295,"demo":464},"Carries the mapped `true-value` \u002F `false-value`. Use `:model-value` with `@update:model-value` instead of `v-model` when a failed save has to put the previous value back.",[1297,1300,1303,1306,1308,1310,1313,1315,1317],{"name":615,"signature":1298,"description":1299,"note":377,"demo":377},"(event: FocusEvent): void","Emitted when the native input loses focus. Forwards the original DOM `FocusEvent`.",{"name":601,"signature":1301,"description":1302,"note":377,"demo":377},"(event: Event): void","Emitted when the switch checked state changes. Forwards the original DOM `Event` from the input.",{"name":605,"signature":1304,"description":1305,"note":377,"demo":377},"(event: MouseEvent): void","Emitted when the input receives a click interaction. Forwards the original DOM `MouseEvent`.",{"name":612,"signature":1298,"description":1307,"note":377,"demo":377},"Emitted when the native input gains focus. Forwards the original DOM `FocusEvent`.",{"name":609,"signature":1301,"description":1309,"note":377,"demo":377},"Emitted on native input events from the switch input. Forwards the original DOM `Event`.",{"name":618,"signature":1311,"description":1312,"note":377,"demo":377},"(event: KeyboardEvent): void","Emitted for keyboard interaction on the input. Forwards the original DOM `KeyboardEvent`.",{"name":621,"signature":1304,"description":1314,"note":377,"demo":377},"Emitted when a pointing device button is pressed over the input. Forwards the original DOM `MouseEvent`.",{"name":624,"signature":1304,"description":1316,"note":377,"demo":377},"Emitted when a pointing device button is released over the input. Forwards the original DOM `MouseEvent`.",{"name":594,"signature":1318,"description":1319,"note":1320,"demo":722},"(value: any): void","Emitted on checked-state changes with the effective model value:\n- `trueValue` when checked\n- `falseValue` when unchecked","The hook for a live switch that saves itself: write optimistically here, hold the control readonly while the request is in progress, and restore the previous value on failure.",[1322,1325,1329],{"name":507,"type":1323,"description":1324,"note":377,"demo":377},"BbSwitchDescriptionSlotProps","Replaces the description text. Provided alone (no `description` prop) it still renders the description region and wires it into `aria-describedby`.",{"name":909,"type":1326,"description":1327,"note":1328,"demo":894},"BbCheckboxIconSlotProps","Replaces the default toggle track visual inside the switch. Receives the switch state plus the label text.","Replaces the entire track and thumb, not a glyph inside them: a bare icon here leaves no track at all. Keep it when only the visual is wrong; when the whole row is wrong, drop to `BbBaseSwitchIcon`.",{"name":537,"type":1330,"description":1331,"note":377,"demo":377},"BbSwitchLabelSlotProps","Replaces the default label text rendered next to the switch.",[],{"parts":1334,"states":1349},[1335,1338,1340,1342,1345,1347],{"name":1336,"description":1337},"root","The toggle's container: the glyph, the label and the lines under them.",{"name":537,"description":1339},"The label text beside the glyph (the `label` prop).",{"name":507,"description":1341},"The muted line under the label (the `description` prop).",{"name":1343,"description":1344},"message","The errors \u002F warnings line. A node of its own: it can show at the same time as `hint`.",{"name":556,"description":1346},"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`.",{"name":909,"description":1348},"The drawn glyph — the box, the dot or the switch track. The default one: a consumer `icon` slot replaces it. The hidden native input is not a part.",[1350,1352,1354,1356,1358,1360,1362,1364],{"name":845,"description":1351},"Component-wide: the toggle is on.",{"name":500,"description":1353},"Component-wide: the toggle is `disabled`.",{"name":656,"description":1355},"Component-wide: the toggle shows errors — the glyph and the message line turn red.",{"name":922,"description":1357},"Component-wide: the native input has focus — any focus, mouse included, like the `focused` slot prop.",{"name":925,"description":1359},"Component-wide: that focus is keyboard-visible — where a focus ring belongs.",{"name":871,"description":1361},"Component-wide: the mixed state (the `indeterminate` prop) — neither on nor off.",{"name":646,"description":1363},"Component-wide: the toggle is `readonly` — focusable, cannot change.",{"name":663,"description":1365},"Component-wide: the toggle shows warnings and no errors.",{"removed":1367,"renamed":1394},[1368,1374,1380,1384,1389],{"name":1137,"surface":1369,"replacedBy":377,"hint":377,"since":1370,"migration":1371,"silent":1162,"fix":1372},"prop","3.0.0-beta.15","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-checkbox.md",{"kind":1373},"manual",{"name":1375,"surface":1369,"replacedBy":1244,"hint":377,"since":1376,"migration":1377,"silent":1162,"fix":1378},"direction","3.0.0-beta.33","ai\u002Fguides\u002Fmigration\u002Fv2-to-v3.md",{"kind":1379},"rename",{"name":1381,"surface":1369,"replacedBy":937,"hint":377,"since":1382,"migration":1377,"silent":1162,"fix":1383},"hasWarning","3.0.0-beta.26",{"kind":1379},{"name":1385,"surface":1369,"replacedBy":1288,"hint":1386,"since":1387,"migration":1377,"silent":1162,"fix":1388},"validateOn","an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `\u003CBbForm validation-mode>` instead of per field","3.0.0-beta.41",{"kind":1373},{"name":1390,"surface":1369,"replacedBy":377,"hint":1391,"since":1387,"migration":1377,"silent":1162,"fix":1392},"vid","a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value",{"kind":1393,"display":1285,"key":446},"byValue",[1395,1397,1399],{"from":1375,"to":1244,"surface":1369,"since":1376,"migration":1377,"fix":1396},{"kind":1379},{"from":1381,"to":937,"surface":1369,"since":1382,"migration":1377,"fix":1398},{"kind":1379},{"from":1385,"to":1288,"surface":1369,"since":1387,"migration":1377,"fix":1400},{"kind":1373},1793055145375]