[{"data":1,"prerenderedAt":2317},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Foptions-and-items":378},{"\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":166,"body":380,"component":377,"description":2301,"extension":2302,"group":163,"meta":2303,"navigation":632,"order":141,"path":167,"sections":2304,"seo":2314,"stem":2315,"__hash__":2316},"docs_en\u002Fguides\u002Foptions-and-items.md",{"type":381,"value":382,"toc":2290},"minimark",[383,392,405,413,422,542,644,668,682,688,691,709,723,729,732,736,752,758,768,771,800,876,887,893,908,911,914,942,967,973,983,1035,1038,1141,1147,1154,1182,1202,1300,1306,1375,1393,1398,1411,1414,1462,1465,1475,1489,1495,1506,1594,1615,1618,1745,1754,2193,2210,2223,2229,2254,2269,2286],[384,385,386,387,391],"p",{},"Every component that takes an ",[388,389,390],"code",{},"items"," prop shares one contract. You hand it your\ndomain objects as they are, and you tell it which field to display and which to\nstore. Nothing in your code maps rows into option objects.",[384,393,394,395,398,399,401,402,404],{},"This is the page the other playbooks build on.\n",[396,397,169],"a",{"href":114}," covers ",[388,400,390],{}," as a function, and\n",[396,403,172],{"href":108}," covers what happens to a bound value when the\noptions underneath it change.",[406,407,409],"h2",{"id":408},"vocabularies",[410,411,412],"span",{},"Two item vocabularies",[384,414,415,417,418],{},[388,416,390],{}," means two different things in this library, and picking the wrong one is\nthe most common early mistake. The question that settles it is ",[419,420,421],"strong",{},"whose data is\nit?",[423,424,425,447],"table",{},[426,427,428],"thead",{},[429,430,431,434,441],"tr",{},[432,433],"th",{},[432,435,436,437],{},"Accessor mode — ",[438,439,440],"em",{},"your data",[432,442,443,444],{},"Authored mode — ",[438,445,446],{},"your UI",[448,449,450,481,504,531],"tbody",{},[429,451,452,456,469],{},[453,454,455],"td",{},"Components",[453,457,458,460,461,460,463,460,465,460,467],{},[388,459,261],{},", ",[388,462,264],{},[388,464,249],{},[388,466,255],{},[388,468,273],{},[453,470,471,460,473,460,475,460,477,460,479],{},[388,472,291],{},[388,474,294],{},[388,476,327],{},[388,478,318],{},[388,480,330],{},[429,482,483,486,489],{},[453,484,485],{},"Shape",[453,487,488],{},"any shape — raw API rows",[453,490,491,492,495,496,499,500,503],{},"entries you write, each with its own ",[388,493,494],{},"label"," and, where it has one, its identity in ",[388,497,498],{},"value"," (dropdown rows, tabs, breadcrumbs); tree nodes carry your ",[388,501,502],{},"meta"," and render through the default slot",[429,505,506,509,528],{},[453,507,508],{},"Caption",[453,510,511,512,514,515,518,519,521,522,460,525],{},"read from an own ",[388,513,494],{}," (or ",[388,516,517],{},"text",") and ",[388,520,498],{},"; any other field you point at with ",[388,523,524],{},"item-text",[388,526,527],{},"item-value",[453,529,530],{},"it is on the entry itself",[429,532,533,536,539],{},[453,534,535],{},"This page",[453,537,538],{},"applies",[453,540,541],{},"mostly does not",[543,544,549],"pre",{"className":545,"code":546,"language":547,"meta":548,"style":548},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!-- Accessor mode: customers came from an API; keep their fields. -->\n\u003CBbSelect\n    v-model=\"customerId\"\n    :items=\"customers\"\n    item-text=\"name\"\n    item-value=\"id\"\n\u002F>\n\n\u003C!-- Authored mode: a menu you typed out. The caption is on the entry. -->\n\u003CBbDropdown :items=\"[{ value: 'edit', label: 'Edit' }]\" \u002F>\n","vue","",[388,550,551,558,568,586,602,613,623,628,634,639],{"__ignoreMap":548},[410,552,554],{"class":553,"line":141},"line",[410,555,557],{"class":556},"sLBg1","\u003C!-- Accessor mode: customers came from an API; keep their fields. -->\n",[410,559,560,564],{"class":553,"line":145},[410,561,563],{"class":562},"suds8","\u003C",[410,565,567],{"class":566},"sne4z","BbSelect\n",[410,569,570,574,577,580,583],{"class":553,"line":149},[410,571,573],{"class":572},"s-5SL","    v-model",[410,575,576],{"class":562},"=",[410,578,579],{"class":562},"\"",[410,581,582],{"class":562},"customerId",[410,584,585],{"class":562},"\"\n",[410,587,588,591,593,595,597,600],{"class":553,"line":177},[410,589,590],{"class":562},"    :",[410,592,390],{"class":572},[410,594,576],{"class":562},[410,596,579],{"class":562},[410,598,599],{"class":562},"customers",[410,601,585],{"class":562},[410,603,604,607,609],{"class":553,"line":181},[410,605,606],{"class":572},"    item-text",[410,608,576],{"class":562},[410,610,612],{"class":611},"sT6z2","\"name\"\n",[410,614,615,618,620],{"class":553,"line":185},[410,616,617],{"class":572},"    item-value",[410,619,576],{"class":562},[410,621,622],{"class":611},"\"id\"\n",[410,624,625],{"class":553,"line":225},[410,626,627],{"class":562},"\u002F>\n",[410,629,630],{"class":553,"line":229},[410,631,633],{"emptyLinePlaceholder":632},true,"\n",[410,635,636],{"class":553,"line":233},[410,637,638],{"class":562},"\u003C!-- Authored mode: a menu you typed out. The caption is on the entry. -->\n",[410,640,641],{"class":553,"line":237},[410,642,643],{"class":562},"\u003CBbDropdown :items=\"[{ value: 'edit', label: 'Edit' }]\" \u002F>\n",[384,645,646,647,650,651,654,655,658,659,662,663,650,665,667],{},"The split is deliberate. A picker lists records that arrive with their own field\nnames, ",[388,648,649],{},"full_name"," and ",[388,652,653],{},"uuid",". Forcing them into ",[388,656,657],{},"{ label, value }"," would mean a\npointless ",[388,660,661],{},".map()"," over every list. For the async form it cannot work at all: the\ncomponent fetches the items itself and never sees your array. A dropdown or a tab\nstrip is the opposite. You are writing those captions by hand\nanyway, so an accessor would be indirection with nothing to point at. Rows\nthat already carry ",[388,664,494],{},[388,666,498],{}," need no accessors in either mode: those\ntwo keys are the defaults.",[384,669,670,674,675,677,678,681],{},[396,671,672],{"href":84},[388,673,363],{}," sits between the two. Rows stay raw data and\n",[388,676,527],{}," is row identity, but the captions live on ",[388,679,680],{},"columns[].label"," rather\nthan on the rows.",[406,683,685],{"id":684},"mapping",[410,686,687],{},"Mapping text and value",[384,689,690],{},"Everything below is accessor mode. There are three ways to resolve a field, and\nthey are in order of preference.",[384,692,693,696,697,700,701,704,705,708],{},[419,694,695],{},"Primitives"," need nothing. For a ",[388,698,699],{},"string[]"," or a ",[388,702,703],{},"number[]",", omit both props\nand the value is the primitive itself. A path has nothing to read on a string,\nso it is ignored. To label a list of codes, pass a function:\n",[388,706,707],{},":item-text=\"(code) => labels[code]\""," shows the labels, and the codes stay the\nvalues.",[384,710,711,714,715,718,719,722],{},[419,712,713],{},"Dot paths"," cover nested objects: ",[388,716,717],{},"item-text=\"profile.fullName\"",",\n",[388,720,721],{},"item-value=\"profile.id\"",".",[384,724,725,728],{},[419,726,727],{},"Extractor functions"," are for what a path cannot express: a name assembled\nfrom two columns, a computed label.",[384,730,731],{},"The three selects below render alike. Only the item shape differs, and the\nmodel under each one shows what it stores.",[733,734],"demo",{"name":735},"Guides\u002FItemShapes",[384,737,738,739,741,742,744,745,747,748,751],{},"Object items with the default keys need no props. The text is the item's own\n",[388,740,494],{}," (else ",[388,743,517],{},") and the value its own ",[388,746,498],{},", whatever it holds. Any\nother shape sets both props. Without them the value is the whole item and the\ntext is ",[388,749,750],{},"JSON.stringify(item)",": legible, but not what you meant.",[406,753,755],{"id":754},"row-fields",[410,756,757],{},"A second line or an icon on each option",[384,759,760,761,767],{},"A second line or an icon on a row comes from\n",[396,762,764],{"href":763},"\u002Fen\u002Fcomponents\u002Fbb-select\u002Fapi#prop-itemProps",[388,765,766],{},"item-props",", and from nowhere\nelse: open the select to see the job title and the team icon.",[733,769],{"name":770},"GuidesOptions\u002FRowFields",[384,772,773,774,777,778,460,781,784,785,788,789,792,793,796,797,799],{},"Each field is a path (",[388,775,776],{},"description: 'jobTitle'",") or a function of the item, as\nthe icon is here. To compute every field at once, pass a function instead of\nthe object. ",[388,779,780],{},"null",[388,782,783],{},"undefined"," or ",[388,786,787],{},"''"," renders nothing. A ",[388,790,791],{},"description"," or\n",[388,794,795],{},"prepend:icon"," field on your data does nothing until ",[388,798,766],{}," points at it.",[423,801,802,812],{},[426,803,804],{},[429,805,806,809],{},[432,807,808],{},"Component",[432,810,811],{},"Fields",[448,813,814,828,845],{},[429,815,816,824],{},[453,817,818,460,820,460,822],{},[388,819,249],{},[388,821,255],{},[388,823,273],{},[453,825,826],{},[388,827,791],{},[429,829,830,836],{},[453,831,832,460,834],{},[388,833,261],{},[388,835,264],{},[453,837,838,460,840,460,842],{},[388,839,791],{},[388,841,795],{},[388,843,844],{},"append:icon",[429,846,847,852],{},[453,848,849,851],{},[388,850,291],{}," fetched groups",[453,853,854,855,857,858,460,861,864,865,460,868,871,872,875],{},"the hand-written row fields (",[388,856,791],{},", icons, ",[388,859,860],{},"variant",[388,862,863],{},"href"," \u002F ",[388,866,867],{},"to",[388,869,870],{},"onClick","), as ",[388,873,874],{},"itemProps"," in the group config",[384,877,878,879,882,883,722],{},"The extra fields decorate the option rows only, never the field or its chips.\nThere is no ",[388,880,881],{},"disabled"," field either: see ",[396,884,886],{"href":885},"#disabling","Disabling a choice",[406,888,890],{"id":889},"identity",[410,891,892],{},"How a value is matched",[384,894,895,896,899,900,903,904,907],{},"Selection compares ",[388,897,898],{},"hash(itemValue(item))"," against ",[388,901,902],{},"hash(modelValue)",". That is a\n",[419,905,906],{},"deep value comparison",", not reference identity, so an object value still\nmatches after a refetch replaces the array.",[384,909,910],{},"Prefer primitive ids anyway: they are stable across refetches, cheap to submit,\nand they make the hash trivial.",[384,912,913],{},"Two consequences follow:",[915,916,917,924],"ul",{},[918,919,920,923],"li",{},[419,921,922],{},"Every option needs a unique value."," When two items resolve to the same\nvalue, the first stays and the later ones are dropped without a warning.",[918,925,926,932,933,936,937,650,939,941],{},[419,927,928,931],{},[388,929,930],{},"modelValue"," holds the resolved value, never the option wrapper."," Slots\nreceive the raw ",[388,934,935],{},"item"," plus the resolved ",[388,938,517],{},[388,940,498],{},". A custom row\nstill has everything the record carried.",[384,943,944,945,948,949,953,954,957,958,962,963,966],{},"Clicking the selected option never clears a single select. A second click\nre-picks it and closes the panel; the value does not change. Emptying always\ntakes an explicit control: ",[388,946,947],{},"clearable"," on\n",[396,950,951],{"href":70},[388,952,261],{},", or the ",[388,955,956],{},"clear"," callback on\n",[396,959,960],{"href":72},[388,961,264],{},"'s slots. Multiple mode\nstill toggles, because there removing a pick ",[438,964,965],{},"is"," the interaction.",[406,968,970],{"id":969},"seeding",[410,971,972],{},"Seeding the model",[384,974,975,976,979,980,982],{},"A component in multiple mode ",[419,977,978],{},"throws at setup"," when ",[388,981,930],{}," is not an\narray. This is loud on purpose: the alternative is a control that silently does\nnothing.",[543,984,988],{"className":985,"code":986,"language":987,"meta":548,"style":548},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","const channels = ref\u003Cstring[]>([]); \u002F\u002F correct\n\u002F\u002F throws: \"multiple … but modelValue is not an array\"\nconst channels = ref();\n","ts",[388,989,990,1017,1022],{"__ignoreMap":548},[410,991,992,996,999,1002,1006,1008,1011,1014],{"class":553,"line":141},[410,993,995],{"class":994},"sHUrx","const",[410,997,998],{"class":572}," channels",[410,1000,1001],{"class":994}," =",[410,1003,1005],{"class":1004},"sKwhi"," ref",[410,1007,563],{"class":562},[410,1009,1010],{"class":572},"string",[410,1012,1013],{"class":562},"[]>([]); ",[410,1015,1016],{"class":556},"\u002F\u002F correct\n",[410,1018,1019],{"class":553,"line":145},[410,1020,1021],{"class":556},"\u002F\u002F throws: \"multiple … but modelValue is not an array\"\n",[410,1023,1024,1026,1028,1030,1032],{"class":553,"line":149},[410,1025,995],{"class":994},[410,1027,998],{"class":572},[410,1029,1001],{"class":994},[410,1031,1005],{"class":1004},[410,1033,1034],{"class":562},"();\n",[384,1036,1037],{},"The default differs per component, which is the part people get wrong:",[423,1039,1040,1055],{},[426,1041,1042],{},[429,1043,1044,1046,1052],{},[432,1045,808],{},[432,1047,1048,1051],{},[388,1049,1050],{},"multiple"," default",[432,1053,1054],{},"Seed with",[448,1056,1057,1082,1105,1119],{},[429,1058,1059,1065,1070],{},[453,1060,1061,864,1063],{},[388,1062,261],{},[388,1064,264],{},[453,1066,1067],{},[388,1068,1069],{},"false",[453,1071,1072,1075,1076,1079,1080],{},[388,1073,1074],{},"ref(null)",", or ",[388,1077,1078],{},"ref([])"," with ",[388,1081,1050],{},[429,1083,1084,1090,1097],{},[453,1085,1086,864,1088],{},[388,1087,249],{},[388,1089,273],{},[453,1091,1092],{},[419,1093,1094],{},[388,1095,1096],{},"true",[453,1098,1099,1101,1102],{},[388,1100,1078],{},", unless you set ",[388,1103,1104],{},":multiple=\"false\"",[429,1106,1107,1111,1114],{},[453,1108,1109],{},[388,1110,255],{},[453,1112,1113],{},"single only",[453,1115,1116],{},[388,1117,1118],{},"ref\u003Cstring | null>(null)",[429,1120,1121,1125,1131],{},[453,1122,1123],{},[388,1124,363],{},[453,1126,1127],{},[419,1128,1129],{},[388,1130,1096],{},[453,1132,1133,1134,1137,1138],{},"defaults to ",[388,1135,1136],{},"[]","; throws only on a non-array ",[388,1139,1140],{},"v-model",[406,1142,1144],{"id":1143},"all-option",[410,1145,1146],{},"An \"All\" option",[384,1148,1149,1150,1153],{},"A single select whose top row means ",[438,1151,1152],{},"everything",": \"All locations\", \"Any status\",\nthe no-filter row. This is not a select-all button, which fills a multiple array\nwith every value.",[384,1155,1156,1157,1160,1161,1164,1165,1167,1168,1170,1171,1174,1175,1178,1179,1181],{},"Model it as a real option with ",[388,1158,1159],{},"value: null",", returned by your provider or\npresent in your array like any other option. The components never synthesise it.\n",[388,1162,1163],{},"{ label: 'All locations', value: null }"," needs no accessors: an own ",[388,1166,498],{},"\nkey is the value even when it holds ",[388,1169,780],{},".\nIt resolves and renders as the selection, because matching is on ",[388,1172,1173],{},"hash(value)","\nand selection is marked with ",[388,1176,1177],{},"!== undefined",", so ",[388,1180,780],{}," is a legitimate value.",[1183,1184,1185],"warning",{},[384,1186,1187,1188,1191,1192,1194,1195,1198,1199,1201],{},"With a ",[419,1189,1190],{},"function"," ",[388,1193,390],{},", set ",[388,1196,1197],{},"prefill: true",". ",[388,1200,780],{}," is also the value the\nlibrary reads as \"nothing selected\", so the \"model has a value, load eagerly\"\nupgrade does not fire. Nothing loads, no text resolves, and the select renders\nits placeholder: greyed, indistinguishable from an empty field, while the model\nholds a real choice.",[543,1203,1205],{"className":545,"code":1204,"language":547,"meta":548,"style":548},"\u003C!-- null means \"All\", and items is a provider → say so -->\n\u003CBbSelect v-model=\"location\" :items=\"loadLocations\" :prefill=\"true\" \u002F>\n\n\u003C!-- array items: nothing needed, arrays are never lazy -->\n\u003CBbSelect v-model=\"location\" :items=\"locations\" \u002F>\n",[388,1206,1207,1212,1260,1264,1269],{"__ignoreMap":548},[410,1208,1209],{"class":553,"line":141},[410,1210,1211],{"class":556},"\u003C!-- null means \"All\", and items is a provider → say so -->\n",[410,1213,1214,1216,1218,1221,1223,1225,1228,1230,1233,1235,1237,1239,1242,1244,1246,1249,1251,1253,1255,1257],{"class":553,"line":145},[410,1215,563],{"class":562},[410,1217,261],{"class":566},[410,1219,1220],{"class":572}," v-model",[410,1222,576],{"class":562},[410,1224,579],{"class":562},[410,1226,1227],{"class":562},"location",[410,1229,579],{"class":562},[410,1231,1232],{"class":562}," :",[410,1234,390],{"class":572},[410,1236,576],{"class":562},[410,1238,579],{"class":562},[410,1240,1241],{"class":562},"loadLocations",[410,1243,579],{"class":562},[410,1245,1232],{"class":562},[410,1247,1248],{"class":572},"prefill",[410,1250,576],{"class":562},[410,1252,579],{"class":562},[410,1254,1096],{"class":572},[410,1256,579],{"class":562},[410,1258,1259],{"class":562}," \u002F>\n",[410,1261,1262],{"class":553,"line":149},[410,1263,633],{"emptyLinePlaceholder":632},[410,1265,1266],{"class":553,"line":177},[410,1267,1268],{"class":556},"\u003C!-- array items: nothing needed, arrays are never lazy -->\n",[410,1270,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1296,1298],{"class":553,"line":181},[410,1272,563],{"class":562},[410,1274,261],{"class":566},[410,1276,1220],{"class":572},[410,1278,576],{"class":562},[410,1280,579],{"class":562},[410,1282,1227],{"class":562},[410,1284,579],{"class":562},[410,1286,1232],{"class":562},[410,1288,390],{"class":572},[410,1290,576],{"class":562},[410,1292,579],{"class":562},[410,1294,1295],{"class":562},"locations",[410,1297,579],{"class":562},[410,1299,1259],{"class":562},[384,1301,1302,1303,1305],{},"Overloading ",[388,1304,780],{}," is a supported pattern, and you inherit four behaviours with\nit, because the component cannot tell your two meanings apart:",[423,1307,1308,1318],{},[426,1309,1310],{},[429,1311,1312,1315],{},[432,1313,1314],{},"Behaviour",[432,1316,1317],{},"Consequence",[448,1319,1320,1335,1346,1363],{},[429,1321,1322,1329],{},[453,1323,1324,1326,1327],{},[388,1325,956],{}," emits ",[388,1328,780],{},[453,1330,1331,1332],{},"The clear affordance ",[419,1333,1334],{},"selects \"All\"",[429,1336,1337,1340],{},[453,1338,1339],{},"empty is always coherent",[453,1341,1342,1345],{},[388,1343,1344],{},"enforce-coherence"," never prunes the \"All\" value",[429,1347,1348,1353],{},[453,1349,1350,1351],{},"single-mode enforcement emits ",[388,1352,780],{},[453,1354,1355,1356,1359,1360],{},"Pruning some ",[438,1357,1358],{},"other"," stale value ",[419,1361,1362],{},"widens to \"All\"",[429,1364,1365,1370],{},[453,1366,1367,1369],{},[388,1368,780],{}," reads as empty",[453,1371,1372,1373],{},"A null model stays lazy even with ",[388,1374,1344],{},[384,1376,1377,1378,1381,1382,1384,1385,1388,1389,1392],{},"Sometimes \"everything\" and \"nothing\" have to stay distinct: a required field, or\na filter where silently widening is unsafe. Use a sentinel such as\n",[388,1379,1380],{},"value: 'all'"," there. ",[388,1383,780],{}," then keeps meaning empty. The sentinel has to appear\nin ",[419,1386,1387],{},"every"," provider response or ",[396,1390,1391],{"href":108},"coherence"," prunes it,\nand it counts as a value, so it triggers the eager load by itself.",[406,1394,1396],{"id":1395},"disabling",[410,1397,886],{},[384,1399,1400,1401,1403,1404,1407,1408,722],{},"A ",[388,1402,881],{}," field on the item object is ",[419,1405,1406],{},"plain domain data",", with no UI\nmeaning on any options component. Options are gated through props, so a flag\nyour data already carries goes into a predicate:\n",[388,1409,1410],{},":selectable=\"(item) => !item.disabled\"",[384,1412,1413],{},"The supported surface is three props:",[915,1415,1416,1423,1454],{},[918,1417,1418,1422],{},[419,1419,1420],{},[388,1421,881],{}," turns off the whole control.",[918,1424,1425,1430,1431,460,1433,718,1435,460,1437,460,1439,650,1441,1443,1444,1447,1448,1450,1451,1453],{},[419,1426,1427],{},[388,1428,1429],{},"selectable"," gates per option, on ",[388,1432,249],{},[388,1434,255],{},[388,1436,273],{},[388,1438,261],{},[388,1440,264],{},[388,1442,363],{},". It takes a\nglobal boolean or a predicate ",[388,1445,1446],{},"(item) => boolean","; rejected options render\ndisabled. It defaults to ",[388,1449,1096],{}," on the option components. On ",[388,1452,363],{}," it is\nunset until you pass it, and unset there means \"no selection column\", not\n\"every row selectable\".",[918,1455,1456,1461],{},[419,1457,1458],{},[388,1459,1460],{},"max"," caps a multiple selection. At the cap, unselected options\nauto-disable while selected ones never do, so the user can always deselect.",[733,1463],{"name":1464},"GuidesOptions\u002FAvailability",[384,1466,1467,1468,1470,1471,1474],{},"Feed your own availability flag to the predicate:\n",[388,1469,1410],{},", or\n",[388,1472,1473],{},":selectable=\"(user) => user.active\"",". Filter the rows out entirely when a dead\none would only add noise.",[384,1476,1477,1479,1480,1482,1483,1485,1486,1488],{},[388,1478,291],{}," items you write are buttons rather than options, so ",[388,1481,881],{},"\nthere is an ordinary button prop and works as you expect. The rows of a fetched\ndropdown group have no ",[388,1484,881],{},": gate them with the group's ",[388,1487,1429],{},"\npredicate, which receives the raw fetched item.",[406,1490,1492],{"id":1491},"wrapping",[410,1493,1494],{},"Wrapping a select in your own component",[384,1496,1497,1498,1501,1502,1505],{},"A select that only fixes its items, accessors, label or option row is a\n",[419,1499,1500],{},"preset",", not a wrapper: one ",[388,1503,1504],{},"definePreset"," call, no SFC.",[543,1507,1509],{"className":985,"code":1508,"language":987,"meta":548,"style":548},"export const PriceListSelect = definePreset(\n    BbSelect\u003CPriceList>,\n    { items: getPriceLists, itemText: 'name', itemValue: 'id' },\n    { name: 'PriceListSelect', defaults: { label: 'Price list' } }\n);\n\u002F\u002F \u003CPriceListSelect v-model=\"priceListId\" clearable \u002F>\n\u002F\u002F v-model: number | null\n",[388,1510,1511,1530,1545,1562,1579,1584,1589],{"__ignoreMap":548},[410,1512,1513,1516,1519,1522,1524,1527],{"class":553,"line":141},[410,1514,1515],{"class":994},"export",[410,1517,1518],{"class":994}," const",[410,1520,1521],{"class":572}," PriceListSelect",[410,1523,1001],{"class":994},[410,1525,1526],{"class":1004}," definePreset",[410,1528,1529],{"class":562},"(\n",[410,1531,1532,1535,1537,1540,1543],{"class":553,"line":145},[410,1533,1534],{"class":562},"    BbSelect",[410,1536,563],{"class":994},[410,1538,1539],{"class":562},"PriceList",[410,1541,1542],{"class":994},">",[410,1544,718],{"class":562},[410,1546,1547,1550,1553,1556,1559],{"class":553,"line":149},[410,1548,1549],{"class":562},"    { items: getPriceLists, itemText: ",[410,1551,1552],{"class":611},"'name'",[410,1554,1555],{"class":562},", itemValue: ",[410,1557,1558],{"class":611},"'id'",[410,1560,1561],{"class":562}," },\n",[410,1563,1564,1567,1570,1573,1576],{"class":553,"line":177},[410,1565,1566],{"class":562},"    { name: ",[410,1568,1569],{"class":611},"'PriceListSelect'",[410,1571,1572],{"class":562},", defaults: { label: ",[410,1574,1575],{"class":611},"'Price list'",[410,1577,1578],{"class":562}," } }\n",[410,1580,1581],{"class":553,"line":181},[410,1582,1583],{"class":562},");\n",[410,1585,1586],{"class":553,"line":185},[410,1587,1588],{"class":556},"\u002F\u002F \u003CPriceListSelect v-model=\"priceListId\" clearable \u002F>\n",[410,1590,1591],{"class":553,"line":225},[410,1592,1593],{"class":556},"\u002F\u002F v-model: number | null\n",[384,1595,1596,1598,1599,1602,1603,1605,1606,1608,1609,1611,1612,722],{},[388,1597,1504],{}," is a helper you copy into your app, not a ",[388,1600,1601],{},"bitboss-ui"," export:\n",[396,1604,183],{"href":130}," has its source and its rules.\nEvery ",[388,1607,261],{}," prop, event and slot reaches the select untouched, typed for\nthe row, and ",[388,1610,1140],{}," is typed from ",[388,1613,1614],{},"itemValue",[384,1616,1617],{},"Write a single-file wrapper only when the component has logic of its own: state,\nderived props, extra props it reads, markup around the select. Five rules keep\nit typed and working:",[915,1619,1620,1640,1659,1689,1731],{},[918,1621,1622,1628,1629,1632,1633,1636,1637,722],{},[419,1623,1624,1627],{},[388,1625,1626],{},"BbSelectProps\u003CRow>"," takes the row type, not the value type."," With\n",[388,1630,1631],{},"BbSelectProps\u003CPriceList['id']>",", a caller's ",[388,1634,1635],{},":item-text=\"(p) => p.name\"","\nfails with \"Property 'name' does not exist on type 'number'\". Type the model\nyourself: ",[388,1638,1639],{},"defineModel\u003CPriceList['id'] | null>()",[918,1641,1642,1648,1649,460,1651,460,1654,718,1656,1658],{},[419,1643,1644,1647],{},[388,1645,1646],{},"Omit"," what the wrapper sets"," (",[388,1650,390],{},[388,1652,1653],{},"itemText",[388,1655,1614],{},[388,1657,930],{},"), so a caller cannot pass a second value that loses.",[918,1660,1661,1664,1665,1668,1669,1672,1673,784,1675,1678,1679,1681,1682,1685,1686,722],{},[419,1662,1663],{},"Forward every prop you declare, or leave it undeclared."," A declared prop\nnever reaches ",[388,1666,1667],{},"$attrs",", so a wrapper that declares all of ",[388,1670,1671],{},"BbSelectProps"," and\nforwards seven drops the caller's ",[388,1674,881],{},[388,1676,1677],{},"hint"," in silence. Declare\nonly what the wrapper reads and let ",[388,1680,1667],{}," carry the rest;\n",[388,1683,1684],{},"npx bitboss-ui check"," reports the dropped ones as ",[388,1687,1688],{},"wrapper-drops-props",[918,1690,1691,1698,1699,1702,1703,1706,1707,1710,1711,1713,1714,1717,1718,1720,1721,1723,1724,1727,1728,1730],{},[419,1692,1693,1694,1697],{},"Declaring ",[388,1695,1696],{},"filterBy","? Default it",":\n",[388,1700,1701],{},"withDefaults(defineProps\u003C…>(), { filterBy: () => [] })",". It is\n",[388,1704,1705],{},"string[] | false",", and Vue casts an absent prop with a ",[388,1708,1709],{},"boolean"," member to\n",[388,1712,1069],{},", so a wrapper that declares it (directly, or through a ",[388,1715,1716],{},"Pick"," \u002F\n",[388,1719,1646],{}," that keeps it) forwards ",[388,1722,1069],{}," whenever its caller leaves ",[388,1725,1726],{},"filter-by","\nout, and typing stops filtering in silence. Left to ",[388,1729,1667],{},", it needs nothing.",[918,1732,1733,1736,1737,1740,1741,1744],{},[419,1734,1735],{},"Import types as types",": ",[388,1738,1739],{},"import { BbSelect, type BbSelectProps } from 'bitboss-ui'",". Under ",[388,1742,1743],{},"verbatimModuleSyntax"," a plain import compiles and then\nfails in the browser.",[384,1746,1747,1748,1750,1751,1753],{},"A wrapper that follows them declares only what it reads, and the root\n",[388,1749,261],{}," takes everything else through ",[388,1752,1667],{},":",[543,1755,1757],{"className":545,"code":1756,"language":547,"meta":548,"style":548},"\u003C!-- PriceListSelect.vue -->\n\u003Ctemplate>\n    \u003CBbSelect\n        v-model=\"model\"\n        item-text=\"name\"\n        item-value=\"id\"\n        :items=\"getPriceLists\"\n        :label=\"label\"\n    >\n        \u003Ctemplate #option=\"{ item, text }\">\n            {{ text }}\n            \u003CBbBadge v-if=\"item.isDefault\" variant=\"primary\">\n                Default\n            \u003C\u002FBbBadge>\n        \u003C\u002Ftemplate>\n    \u003C\u002FBbSelect>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { BbBadge, BbSelect } from 'bitboss-ui';\n\ntype PriceList = { id: number; name: string; isDefault: boolean };\n\nconst getPriceLists = async (): Promise\u003CPriceList[]> => [\n    { id: 1, name: 'Base', isDefault: true },\n];\n\n\u002F\u002F Everything else (clearable, errors, pt, …) arrives in $attrs.\ndefineProps\u003C{ label: string }>();\nconst model = defineModel\u003CPriceList['id'] | null>({ default: null });\n\u003C\u002Fscript>\n",[388,1758,1759,1764,1774,1781,1795,1804,1813,1829,1843,1848,1872,1877,1907,1913,1923,1933,1943,1953,1958,1979,1997,2002,2049,2054,2088,2110,2116,2121,2127,2145,2184],{"__ignoreMap":548},[410,1760,1761],{"class":553,"line":141},[410,1762,1763],{"class":556},"\u003C!-- PriceListSelect.vue -->\n",[410,1765,1766,1768,1771],{"class":553,"line":145},[410,1767,563],{"class":562},[410,1769,1770],{"class":566},"template",[410,1772,1773],{"class":562},">\n",[410,1775,1776,1779],{"class":553,"line":149},[410,1777,1778],{"class":562},"    \u003C",[410,1780,567],{"class":566},[410,1782,1783,1786,1788,1790,1793],{"class":553,"line":177},[410,1784,1785],{"class":572},"        v-model",[410,1787,576],{"class":562},[410,1789,579],{"class":562},[410,1791,1792],{"class":562},"model",[410,1794,585],{"class":562},[410,1796,1797,1800,1802],{"class":553,"line":181},[410,1798,1799],{"class":572},"        item-text",[410,1801,576],{"class":562},[410,1803,612],{"class":611},[410,1805,1806,1809,1811],{"class":553,"line":185},[410,1807,1808],{"class":572},"        item-value",[410,1810,576],{"class":562},[410,1812,622],{"class":611},[410,1814,1815,1818,1820,1822,1824,1827],{"class":553,"line":225},[410,1816,1817],{"class":562},"        :",[410,1819,390],{"class":572},[410,1821,576],{"class":562},[410,1823,579],{"class":562},[410,1825,1826],{"class":562},"getPriceLists",[410,1828,585],{"class":562},[410,1830,1831,1833,1835,1837,1839,1841],{"class":553,"line":229},[410,1832,1817],{"class":562},[410,1834,494],{"class":572},[410,1836,576],{"class":562},[410,1838,579],{"class":562},[410,1840,494],{"class":562},[410,1842,585],{"class":562},[410,1844,1845],{"class":553,"line":233},[410,1846,1847],{"class":562},"    >\n",[410,1849,1850,1853,1855,1858,1861,1863,1865,1868,1870],{"class":553,"line":237},[410,1851,1852],{"class":562},"        \u003C",[410,1854,1770],{"class":566},[410,1856,1857],{"class":562}," #",[410,1859,1860],{"class":572},"option",[410,1862,576],{"class":562},[410,1864,579],{"class":562},[410,1866,1867],{"class":562},"{ item, text }",[410,1869,579],{"class":562},[410,1871,1773],{"class":562},[410,1873,1874],{"class":553,"line":241},[410,1875,1876],{"class":562},"            {{ text }}\n",[410,1878,1880,1883,1885,1888,1890,1892,1895,1897,1900,1902,1905],{"class":553,"line":1879},12,[410,1881,1882],{"class":562},"            \u003C",[410,1884,339],{"class":566},[410,1886,1887],{"class":994}," v-if",[410,1889,576],{"class":562},[410,1891,579],{"class":562},[410,1893,1894],{"class":562},"item.isDefault",[410,1896,579],{"class":562},[410,1898,1899],{"class":572}," variant",[410,1901,576],{"class":562},[410,1903,1904],{"class":611},"\"primary\"",[410,1906,1773],{"class":562},[410,1908,1910],{"class":553,"line":1909},13,[410,1911,1912],{"class":562},"                Default\n",[410,1914,1916,1919,1921],{"class":553,"line":1915},14,[410,1917,1918],{"class":562},"            \u003C\u002F",[410,1920,339],{"class":566},[410,1922,1773],{"class":562},[410,1924,1926,1929,1931],{"class":553,"line":1925},15,[410,1927,1928],{"class":562},"        \u003C\u002F",[410,1930,1770],{"class":566},[410,1932,1773],{"class":562},[410,1934,1936,1939,1941],{"class":553,"line":1935},16,[410,1937,1938],{"class":562},"    \u003C\u002F",[410,1940,261],{"class":566},[410,1942,1773],{"class":562},[410,1944,1946,1949,1951],{"class":553,"line":1945},17,[410,1947,1948],{"class":562},"\u003C\u002F",[410,1950,1770],{"class":566},[410,1952,1773],{"class":562},[410,1954,1956],{"class":553,"line":1955},18,[410,1957,633],{"emptyLinePlaceholder":632},[410,1959,1961,1963,1966,1969,1972,1974,1977],{"class":553,"line":1960},19,[410,1962,563],{"class":562},[410,1964,1965],{"class":566},"script",[410,1967,1968],{"class":572}," setup",[410,1970,1971],{"class":572}," lang",[410,1973,576],{"class":562},[410,1975,1976],{"class":611},"\"ts\"",[410,1978,1773],{"class":562},[410,1980,1982,1985,1988,1991,1994],{"class":553,"line":1981},20,[410,1983,1984],{"class":994},"import",[410,1986,1987],{"class":562}," { BbBadge, BbSelect } ",[410,1989,1990],{"class":994},"from",[410,1992,1993],{"class":611}," 'bitboss-ui'",[410,1995,1996],{"class":562},";\n",[410,1998,2000],{"class":553,"line":1999},21,[410,2001,633],{"emptyLinePlaceholder":632},[410,2003,2005,2008,2012,2014,2017,2020,2022,2025,2028,2031,2033,2036,2038,2041,2043,2046],{"class":553,"line":2004},22,[410,2006,2007],{"class":994},"type",[410,2009,2011],{"class":2010},"soyes"," PriceList",[410,2013,1001],{"class":994},[410,2015,2016],{"class":562}," { ",[410,2018,2019],{"class":2010},"id",[410,2021,1753],{"class":994},[410,2023,2024],{"class":572}," number",[410,2026,2027],{"class":562},"; ",[410,2029,2030],{"class":2010},"name",[410,2032,1753],{"class":994},[410,2034,2035],{"class":572}," string",[410,2037,2027],{"class":562},[410,2039,2040],{"class":2010},"isDefault",[410,2042,1753],{"class":994},[410,2044,2045],{"class":572}," boolean",[410,2047,2048],{"class":562}," };\n",[410,2050,2052],{"class":553,"line":2051},23,[410,2053,633],{"emptyLinePlaceholder":632},[410,2055,2057,2059,2062,2064,2067,2070,2072,2075,2077,2079,2082,2085],{"class":553,"line":2056},24,[410,2058,995],{"class":994},[410,2060,2061],{"class":1004}," getPriceLists",[410,2063,1001],{"class":994},[410,2065,2066],{"class":994}," async",[410,2068,2069],{"class":562}," ()",[410,2071,1753],{"class":994},[410,2073,2074],{"class":2010}," Promise",[410,2076,563],{"class":562},[410,2078,1539],{"class":2010},[410,2080,2081],{"class":562},"[]> ",[410,2083,2084],{"class":994},"=>",[410,2086,2087],{"class":562}," [\n",[410,2089,2091,2094,2097,2100,2103,2106,2108],{"class":553,"line":2090},25,[410,2092,2093],{"class":562},"    { id: ",[410,2095,2096],{"class":572},"1",[410,2098,2099],{"class":562},", name: ",[410,2101,2102],{"class":611},"'Base'",[410,2104,2105],{"class":562},", isDefault: ",[410,2107,1096],{"class":572},[410,2109,1561],{"class":562},[410,2111,2113],{"class":553,"line":2112},26,[410,2114,2115],{"class":562},"];\n",[410,2117,2119],{"class":553,"line":2118},27,[410,2120,633],{"emptyLinePlaceholder":632},[410,2122,2124],{"class":553,"line":2123},28,[410,2125,2126],{"class":556},"\u002F\u002F Everything else (clearable, errors, pt, …) arrives in $attrs.\n",[410,2128,2130,2133,2136,2138,2140,2142],{"class":553,"line":2129},29,[410,2131,2132],{"class":1004},"defineProps",[410,2134,2135],{"class":562},"\u003C{ ",[410,2137,494],{"class":2010},[410,2139,1753],{"class":994},[410,2141,2035],{"class":572},[410,2143,2144],{"class":562}," }>();\n",[410,2146,2148,2150,2153,2155,2158,2160,2162,2165,2167,2170,2173,2176,2179,2181],{"class":553,"line":2147},30,[410,2149,995],{"class":994},[410,2151,2152],{"class":572}," model",[410,2154,1001],{"class":994},[410,2156,2157],{"class":1004}," defineModel",[410,2159,563],{"class":562},[410,2161,1539],{"class":2010},[410,2163,2164],{"class":562},"[",[410,2166,1558],{"class":611},[410,2168,2169],{"class":562},"] ",[410,2171,2172],{"class":994},"|",[410,2174,2175],{"class":572}," null",[410,2177,2178],{"class":562},">({ default: ",[410,2180,780],{"class":572},[410,2182,2183],{"class":562}," });\n",[410,2185,2187,2189,2191],{"class":553,"line":2186},31,[410,2188,1948],{"class":562},[410,2190,1965],{"class":566},[410,2192,1773],{"class":562},[384,2194,2195,2196,2199,2200,2203,2204,2207,2208,722],{},"A wrapper that reads or merges ",[388,2197,2198],{},"pt"," itself declares it as\n",[388,2201,2202],{},"pt?: BbSelectProps\u003CPriceList>['pt']"," and binds ",[388,2205,2206],{},":pt=\"pt\"",", so the caller keeps\nthe parts, the states and the row type: see\n",[396,2209,160],{"href":128},[384,2211,2212,2213,460,2215,650,2217,2219,2220,722],{},"The same rules hold for ",[388,2214,249],{},[388,2216,255],{},[388,2218,273],{},"\nwith their own ",[388,2221,2222],{},"\u003CComponent>Props\u003CRow>",[406,2224,2226],{"id":2225},"navigating",[410,2227,2228],{},"Items that navigate",[384,2230,2231,2232,2234,2235,784,2237,2239,2240,1079,2244,2246,2247,2249,2250,2253],{},"When an item is a link, the component navigates, never your code. ",[388,2233,291],{},"\nitems take ",[388,2236,863],{},[388,2238,867],{},"; a table row link is a\n",[396,2241,2242],{"href":18},[388,2243,205],{},[388,2245,863],{},"\u002F",[388,2248,867],{}," in a cell or the\n",[388,2251,2252],{},"#actions"," slot.",[384,2255,2256,2257,2260,2261,2264,2265,2268],{},"Never write ",[388,2258,2259],{},"onClick: () => router.push(…)"," on an item, and never a row\n",[388,2262,2263],{},"@click"," that sets ",[388,2266,2267],{},"window.location",". Both throw away middle-click, open in a\nnew tab, and copy address. Neither is any shorter.",[384,2270,2271,2272,460,2274,2276,2277,2279,2280,2282,2283,2285],{},"Once an array-backed control works, keep the same ",[388,2273,524],{},[388,2275,527],{}," and\nmodel shape when moving to a provider. Only ",[388,2278,390],{}," changes from an array to a\nfunction. Continue with ",[396,2281,169],{"href":114},", then add\n",[396,2284,1391],{"href":108}," if another field can invalidate the current\nselection.",[2287,2288,2289],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}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 .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":548,"searchDepth":149,"depth":149,"links":2291},[2292,2293,2294,2295,2296,2297,2298,2299,2300],{"id":408,"depth":145,"text":412},{"id":684,"depth":145,"text":687},{"id":754,"depth":145,"text":757},{"id":889,"depth":145,"text":892},{"id":969,"depth":145,"text":972},{"id":1143,"depth":145,"text":1146},{"id":1395,"depth":145,"text":886},{"id":1491,"depth":145,"text":1494},{"id":2225,"depth":145,"text":2228},"How every component with an items prop turns your domain objects into options.","md",{},[2305,2306,2307,2308,2309,2310,2311,2312,2313],{"id":408,"title":412},{"id":684,"title":687},{"id":754,"title":757},{"id":889,"title":892},{"id":969,"title":972},{"id":1143,"title":1146},{"id":1395,"title":886},{"id":1491,"title":1494},{"id":2225,"title":2228},{"title":166,"description":2301},"guides\u002Foptions-and-items","1UfW_In1pen_itzGyomAznsZxSP91jWwZjleJ4sTq2Q",1793055149541]