[{"data":1,"prerenderedAt":1609},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Fcoherence":378,"bb-items:v-0-2-0-18-1-5":1576},{"\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":172,"body":380,"component":377,"description":1562,"extension":1563,"group":163,"meta":1564,"navigation":913,"order":149,"path":173,"sections":1565,"seo":1573,"stem":1574,"__hash__":1575},"docs_en\u002Fguides\u002Fcoherence.md",{"type":381,"value":382,"toc":1553},"minimark",[383,387,390,400,408,421,469,472,478,481,534,543,549,625,642,648,655,682,689,693,696,709,715,748,754,769,772,779,798,801,815,821,824,1457,1476,1482,1498,1505,1508,1540,1549],[384,385,386],"p",{},"Region constrains city. The user picks a region, the city options reload, and the\ncity they had chosen is no longer in the list. Something has to notice.",[384,388,389],{},"That something is not a watcher you write. It is two props, and this page is\nabout what they guarantee and where they stop.",[384,391,392,393,396,397,399],{},"Read ",[394,395,166],"a",{"href":126}," for value identity:\ncoherence matches by the same hash. Read\n",[394,398,169],{"href":114}," for the provider signatures these\nflows call.",[401,402,404],"h2",{"id":403},"meaning",[405,406,407],"span",{},"What coherence means",[384,409,410,411,415,416,420],{},"A component is ",[412,413,414],"strong",{},"coherent"," when every entry in ",[417,418,419],"code",{},"modelValue"," resolves to an\noption the user could see and pick:",[422,423,424,432,451],"ul",{},[425,426,427,428,431],"li",{},"with an ",[417,429,430],{},"items"," array, every model entry hash-matches an item's value;",[425,433,427,434,436,437,441,442,446,447,450],{},[417,435,430],{}," function, every model entry hash-matches a row the latest\napplied, non-search load returned. Fetched rows alone count: on\n",[394,438,439],{"href":70},[417,440,261],{}," and\n",[394,443,444],{"href":72},[417,445,264],{},", options kept by ",[417,448,449],{},"stash","\nkeep a pick's text, they do not make it coherent;",[425,452,453,456,457,460,461,464,465,468],{},[412,454,455],{},"an empty selection is always coherent",": ",[417,458,459],{},"[]"," in multiple mode,\n",[417,462,463],{},"null"," or ",[417,466,467],{},"undefined"," in single mode.",[384,470,471],{},"That last line is not a footnote. Half the behaviour on this page follows from\nit.",[401,473,475],{"id":474},"props",[405,476,477],{},"The three props",[384,479,480],{},"Declare it; do not hand-roll it.",[482,483,484,497],"table",{},[485,486,487],"thead",{},[488,489,490,494],"tr",{},[491,492,493],"th",{},"Prop",[491,495,496],{},"What it does",[498,499,500,511,524],"tbody",{},[488,501,502,508],{},[503,504,505],"td",{},[417,506,507],{},"dependencies",[503,509,510],{},"Reactive values that re-run the items provider when they change",[488,512,513,518],{},[503,514,515],{},[417,516,517],{},"deps-debounce-time",[503,519,520,521],{},"Debounce for those reloads. Defaults to ",[417,522,523],{},"0",[488,525,526,531],{},[503,527,528],{},[417,529,530],{},"enforce-coherence",[503,532,533],{},"After a reload, strip model entries that no longer resolve",[384,535,536,538,539,542],{},[417,537,507],{}," is compared by hashed value, not by reference. So\n",[417,540,541],{},":dependencies=\"[filters]\""," reloads when the content changes, not every time the\narray is rebuilt.",[401,544,546],{"id":545},"where",[405,547,548],{},"Where it exists",[482,550,551,566],{},[485,552,553],{},[488,554,555,558,562],{},[491,556,557],{},"Component",[491,559,560],{},[417,561,507],{},[491,563,564],{},[417,565,530],{},[498,567,568,583,597,614],{},[488,569,570,577,580],{},[503,571,572,574,575],{},[417,573,261],{}," \u002F ",[417,576,264],{},[503,578,579],{},"yes",[503,581,582],{},"yes — over a non-empty model it also forces the first load",[488,584,585,593,595],{},[503,586,587,574,589,574,591],{},[417,588,249],{},[417,590,255],{},[417,592,273],{},[503,594,579],{},[503,596,579],{},[488,598,599,604,607],{},[503,600,601,603],{},[417,602,291],{}," pipeline groups",[503,605,606],{},"per group, in the group config",[503,608,609,610,613],{},"per group as ",[417,611,612],{},"enforceCoherence",", or the dropdown-level prop as the default",[488,615,616,620,622],{},[503,617,618],{},[417,619,363],{},[503,621,579],{},[503,623,624],{},"yes — prunes every row-keyed model after each load",[626,627,628],"warning",{},[384,629,630,631,633,634,638,639,641],{},"Keep ",[417,632,530],{}," off on any ",[394,635,636],{"href":84},[417,637,363],{}," whose\n",[417,640,430],{}," provider pages the rows. A page change always refetches, so the rows\npicked on other pages, and the select-all pattern, get pruned away. Reconcile\ninside the items provider instead: it is called with the current selection,\nwhich is exactly where the new rows are known.",[401,643,645],{"id":644},"emits",[405,646,647],{},"What enforcement emits",[384,649,650,651,654],{},"When enforcement runs and finds the model incoherent, the component emits\n",[417,652,653],{},"update:modelValue"," with the coherent remainder:",[422,656,657,663,672],{},[425,658,659,662],{},[412,660,661],{},"multiple:"," the filtered array. Coherent entries survive.",[425,664,665,668,669,671],{},[412,666,667],{},"single:"," ",[417,670,463],{},". An empty selection is the only coherent fallback.",[425,673,674,677,678,681],{},[412,675,676],{},"dropdown groups:"," selection keys that no longer map to a loaded option are\ndropped. They surface through the companion's ",[417,679,680],{},"v-model",": a companion you\nlisten to is controlled, so a prune emits once per load and the rows untick\nwhen you apply it.",[384,683,684,685,688],{},"Remove France from ",[412,686,687],{},"Ship to",": the cities reload, Paris leaves the model and\nMilan stays.",[690,691],"demo",{"name":692},"Guides\u002FCoherentWarehouses",[384,694,695],{},"Pruning waits for an applied, successful load, an empty one included. A\nstill-loading, superseded or failed fetch never prunes, and neither does a\nsearch, so a slow or broken request cannot wipe a valid selection.",[384,697,698,699,701,702,705,706,708],{},"Single-mode enforcement resolves to ",[417,700,463],{},". Seed single models as\n",[417,703,704],{},"ref\u003CT | null>(null)"," and treat ",[417,707,463],{}," as the \"nothing valid\" state in your\nsubmit logic.",[401,710,712],{"id":711},"flows",[405,713,714],{},"When reconciliation runs",[422,716,717,730,742],{},[425,718,719,726,727,729],{},[412,720,721,464,723,725],{},[417,722,507],{},[417,724,430],{}," change:"," re-run the provider, debounced by\n",[417,728,517],{},", then enforce.",[425,731,732,737,738,741],{},[412,733,734,736],{},[417,735,419],{}," changes from outside:"," on selects and groups, an incoherent\nnew value re-runs the provider defensively, debounced by\n",[417,739,740],{},"model-value-debounce-time",", then enforces. A coherent update fetches nothing.",[425,743,744,747],{},[412,745,746],{},"First load:"," the initial load is a load like any other. Enforcement runs on\nit, so a seeded-but-invalid model is pruned as soon as options exist.",[384,749,750,753],{},[412,751,752],{},"None of it runs before the component has loaded once."," Coherence needs\noptions to check against, so until then:",[422,755,756,763,766],{},[425,757,758,759,762],{},"an untouched ",[417,760,761],{},"prefill: 'interaction'"," select ignores dependency changes until\nthe first interaction;",[425,764,765],{},"group and table dependency watchers wait for the mount load;",[425,767,768],{},"a dropdown group nobody opened never fetches, and never prunes.",[384,770,771],{},"Do not \"fix\" the quiet period with eager watchers. Any first load ends it,\nincluding the user's first search.",[384,773,774,775,778],{},"Two things guarantee that first load with no ",[417,776,777],{},"prefill"," prop at all:",[422,780,781,790],{},[425,782,783,784,789],{},"an ",[412,785,786,787],{},"array ",[417,788,430],{},", because there is no request to defer;",[425,791,792,797],{},[412,793,794,796],{},[417,795,530],{}," over a non-empty model",", because validating a value\nwithout options is impossible.",[384,799,800],{},"An empty model stays lazy. Empty is always coherent, so there is nothing to\ncheck.",[384,802,803,805,806,810,811,814],{},[417,804,530],{}," opts each ",[807,808,809],"em",{},"instance"," into its own load. One field, one\nrequest; N provider-backed instances, N requests. With many instances (a popover\nper table row), resolve the options ",[412,812,813],{},"once at page level"," and pass the same\narray down. Then N instances cost zero requests and every one resolves on mount.",[401,816,818],{"id":817},"pattern",[405,819,820],{},"Two tied fields",[384,822,823],{},"Region constrains city. Changing the region reloads the city options and clears a\ncity that no longer fits.",[825,826,831],"pre",{"className":827,"code":828,"language":829,"meta":830,"style":830},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { BbSelect } from 'bitboss-ui';\nimport type { BbSelectItemsContext } from 'bitboss-ui';\n\nconst region = ref\u003Cstring | null>(null);\nconst city = ref\u003Cstring | null>(null);\n\nconst loadRegions = (): Promise\u003CRegion[]> => api.regions.list();\n\nconst loadCities = async ({\n    query,\n    reason,\n    modelValue, \u002F\u002F follows the v-model: a single value here\n    signal,\n}: BbSelectItemsContext\u003Cstring | null>): Promise\u003CCity[]> => {\n    \u002F\u002F Component-initiated: resolve the current selection\n    \u002F\u002F under the new region.\n    if (reason !== 'search') {\n        return api.cities.list({\n            regionId: region.value,\n            selectedIds: modelValue ? [modelValue] : [],\n            signal,\n        });\n    }\n    if (!query.trim()) return [];\n    return api.cities.search({ query, regionId: region.value, signal });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbSelect\n        v-model=\"region\"\n        label=\"Region\"\n        :items=\"loadRegions\"\n        item-text=\"name\"\n        item-value=\"id\"\n    \u002F>\n    \u003CBbSelect\n        v-model=\"city\"\n        label=\"City\"\n        :items=\"loadCities\"\n        :dependencies=\"[region]\"\n        :deps-debounce-time=\"150\"\n        enforce-coherence\n        item-text=\"name\"\n        item-value=\"id\"\n    \u002F>\n\u003C\u002Ftemplate>\n","vue","",[417,832,833,861,879,893,909,915,949,974,978,1017,1021,1036,1042,1048,1058,1064,1102,1108,1114,1132,1146,1152,1169,1175,1181,1187,1213,1227,1233,1243,1248,1258,1267,1284,1295,1312,1323,1334,1340,1347,1361,1371,1387,1403,1419,1425,1434,1443,1448],{"__ignoreMap":830},[405,834,836,840,844,848,851,854,858],{"class":835,"line":141},"line",[405,837,839],{"class":838},"suds8","\u003C",[405,841,843],{"class":842},"sne4z","script",[405,845,847],{"class":846},"s-5SL"," setup",[405,849,850],{"class":846}," lang",[405,852,853],{"class":838},"=",[405,855,857],{"class":856},"sT6z2","\"ts\"",[405,859,860],{"class":838},">\n",[405,862,863,867,870,873,876],{"class":835,"line":145},[405,864,866],{"class":865},"sHUrx","import",[405,868,869],{"class":838}," { ref } ",[405,871,872],{"class":865},"from",[405,874,875],{"class":856}," 'vue'",[405,877,878],{"class":838},";\n",[405,880,881,883,886,888,891],{"class":835,"line":149},[405,882,866],{"class":865},[405,884,885],{"class":838}," { BbSelect } ",[405,887,872],{"class":865},[405,889,890],{"class":856}," 'bitboss-ui'",[405,892,878],{"class":838},[405,894,895,897,900,903,905,907],{"class":835,"line":177},[405,896,866],{"class":865},[405,898,899],{"class":865}," type",[405,901,902],{"class":838}," { BbSelectItemsContext } ",[405,904,872],{"class":865},[405,906,890],{"class":856},[405,908,878],{"class":838},[405,910,911],{"class":835,"line":181},[405,912,914],{"emptyLinePlaceholder":913},true,"\n",[405,916,917,920,923,926,930,932,935,938,941,944,946],{"class":835,"line":185},[405,918,919],{"class":865},"const",[405,921,922],{"class":846}," region",[405,924,925],{"class":865}," =",[405,927,929],{"class":928},"sKwhi"," ref",[405,931,839],{"class":838},[405,933,934],{"class":846},"string",[405,936,937],{"class":865}," |",[405,939,940],{"class":846}," null",[405,942,943],{"class":838},">(",[405,945,463],{"class":846},[405,947,948],{"class":838},");\n",[405,950,951,953,956,958,960,962,964,966,968,970,972],{"class":835,"line":225},[405,952,919],{"class":865},[405,954,955],{"class":846}," city",[405,957,925],{"class":865},[405,959,929],{"class":928},[405,961,839],{"class":838},[405,963,934],{"class":846},[405,965,937],{"class":865},[405,967,940],{"class":846},[405,969,943],{"class":838},[405,971,463],{"class":846},[405,973,948],{"class":838},[405,975,976],{"class":835,"line":229},[405,977,914],{"emptyLinePlaceholder":913},[405,979,980,982,985,987,990,993,997,999,1002,1005,1008,1011,1014],{"class":835,"line":233},[405,981,919],{"class":865},[405,983,984],{"class":928}," loadRegions",[405,986,925],{"class":865},[405,988,989],{"class":838}," ()",[405,991,992],{"class":865},":",[405,994,996],{"class":995},"soyes"," Promise",[405,998,839],{"class":838},[405,1000,1001],{"class":995},"Region",[405,1003,1004],{"class":838},"[]> ",[405,1006,1007],{"class":865},"=>",[405,1009,1010],{"class":838}," api.regions.",[405,1012,1013],{"class":928},"list",[405,1015,1016],{"class":838},"();\n",[405,1018,1019],{"class":835,"line":237},[405,1020,914],{"emptyLinePlaceholder":913},[405,1022,1023,1025,1028,1030,1033],{"class":835,"line":241},[405,1024,919],{"class":865},[405,1026,1027],{"class":928}," loadCities",[405,1029,925],{"class":865},[405,1031,1032],{"class":865}," async",[405,1034,1035],{"class":838}," ({\n",[405,1037,1039],{"class":835,"line":1038},12,[405,1040,1041],{"class":838},"    query,\n",[405,1043,1045],{"class":835,"line":1044},13,[405,1046,1047],{"class":838},"    reason,\n",[405,1049,1051,1054],{"class":835,"line":1050},14,[405,1052,1053],{"class":838},"    modelValue, ",[405,1055,1057],{"class":1056},"sLBg1","\u002F\u002F follows the v-model: a single value here\n",[405,1059,1061],{"class":835,"line":1060},15,[405,1062,1063],{"class":838},"    signal,\n",[405,1065,1067,1070,1072,1075,1077,1079,1081,1083,1086,1088,1090,1092,1095,1097,1099],{"class":835,"line":1066},16,[405,1068,1069],{"class":838},"}",[405,1071,992],{"class":865},[405,1073,1074],{"class":995}," BbSelectItemsContext",[405,1076,839],{"class":838},[405,1078,934],{"class":846},[405,1080,937],{"class":865},[405,1082,940],{"class":846},[405,1084,1085],{"class":838},">)",[405,1087,992],{"class":865},[405,1089,996],{"class":995},[405,1091,839],{"class":838},[405,1093,1094],{"class":995},"City",[405,1096,1004],{"class":838},[405,1098,1007],{"class":865},[405,1100,1101],{"class":838}," {\n",[405,1103,1105],{"class":835,"line":1104},17,[405,1106,1107],{"class":1056},"    \u002F\u002F Component-initiated: resolve the current selection\n",[405,1109,1111],{"class":835,"line":1110},18,[405,1112,1113],{"class":1056},"    \u002F\u002F under the new region.\n",[405,1115,1117,1120,1123,1126,1129],{"class":835,"line":1116},19,[405,1118,1119],{"class":865},"    if",[405,1121,1122],{"class":838}," (reason ",[405,1124,1125],{"class":865},"!==",[405,1127,1128],{"class":856}," 'search'",[405,1130,1131],{"class":838},") {\n",[405,1133,1135,1138,1141,1143],{"class":835,"line":1134},20,[405,1136,1137],{"class":865},"        return",[405,1139,1140],{"class":838}," api.cities.",[405,1142,1013],{"class":928},[405,1144,1145],{"class":838},"({\n",[405,1147,1149],{"class":835,"line":1148},21,[405,1150,1151],{"class":838},"            regionId: region.value,\n",[405,1153,1155,1158,1161,1164,1166],{"class":835,"line":1154},22,[405,1156,1157],{"class":838},"            selectedIds: modelValue ",[405,1159,1160],{"class":865},"?",[405,1162,1163],{"class":838}," [modelValue] ",[405,1165,992],{"class":865},[405,1167,1168],{"class":838}," [],\n",[405,1170,1172],{"class":835,"line":1171},23,[405,1173,1174],{"class":838},"            signal,\n",[405,1176,1178],{"class":835,"line":1177},24,[405,1179,1180],{"class":838},"        });\n",[405,1182,1184],{"class":835,"line":1183},25,[405,1185,1186],{"class":838},"    }\n",[405,1188,1190,1192,1195,1198,1201,1204,1207,1210],{"class":835,"line":1189},26,[405,1191,1119],{"class":865},[405,1193,1194],{"class":838}," (",[405,1196,1197],{"class":865},"!",[405,1199,1200],{"class":838},"query.",[405,1202,1203],{"class":928},"trim",[405,1205,1206],{"class":838},"()) ",[405,1208,1209],{"class":865},"return",[405,1211,1212],{"class":838}," [];\n",[405,1214,1216,1219,1221,1224],{"class":835,"line":1215},27,[405,1217,1218],{"class":865},"    return",[405,1220,1140],{"class":838},[405,1222,1223],{"class":928},"search",[405,1225,1226],{"class":838},"({ query, regionId: region.value, signal });\n",[405,1228,1230],{"class":835,"line":1229},28,[405,1231,1232],{"class":838},"};\n",[405,1234,1236,1239,1241],{"class":835,"line":1235},29,[405,1237,1238],{"class":838},"\u003C\u002F",[405,1240,843],{"class":842},[405,1242,860],{"class":838},[405,1244,1246],{"class":835,"line":1245},30,[405,1247,914],{"emptyLinePlaceholder":913},[405,1249,1251,1253,1256],{"class":835,"line":1250},31,[405,1252,839],{"class":838},[405,1254,1255],{"class":842},"template",[405,1257,860],{"class":838},[405,1259,1261,1264],{"class":835,"line":1260},32,[405,1262,1263],{"class":838},"    \u003C",[405,1265,1266],{"class":842},"BbSelect\n",[405,1268,1270,1273,1275,1278,1281],{"class":835,"line":1269},33,[405,1271,1272],{"class":846},"        v-model",[405,1274,853],{"class":838},[405,1276,1277],{"class":838},"\"",[405,1279,1280],{"class":838},"region",[405,1282,1283],{"class":838},"\"\n",[405,1285,1287,1290,1292],{"class":835,"line":1286},34,[405,1288,1289],{"class":846},"        label",[405,1291,853],{"class":838},[405,1293,1294],{"class":856},"\"Region\"\n",[405,1296,1298,1301,1303,1305,1307,1310],{"class":835,"line":1297},35,[405,1299,1300],{"class":838},"        :",[405,1302,430],{"class":846},[405,1304,853],{"class":838},[405,1306,1277],{"class":838},[405,1308,1309],{"class":838},"loadRegions",[405,1311,1283],{"class":838},[405,1313,1315,1318,1320],{"class":835,"line":1314},36,[405,1316,1317],{"class":846},"        item-text",[405,1319,853],{"class":838},[405,1321,1322],{"class":856},"\"name\"\n",[405,1324,1326,1329,1331],{"class":835,"line":1325},37,[405,1327,1328],{"class":846},"        item-value",[405,1330,853],{"class":838},[405,1332,1333],{"class":856},"\"id\"\n",[405,1335,1337],{"class":835,"line":1336},38,[405,1338,1339],{"class":838},"    \u002F>\n",[405,1341,1343,1345],{"class":835,"line":1342},39,[405,1344,1263],{"class":838},[405,1346,1266],{"class":842},[405,1348,1350,1352,1354,1356,1359],{"class":835,"line":1349},40,[405,1351,1272],{"class":846},[405,1353,853],{"class":838},[405,1355,1277],{"class":838},[405,1357,1358],{"class":838},"city",[405,1360,1283],{"class":838},[405,1362,1364,1366,1368],{"class":835,"line":1363},41,[405,1365,1289],{"class":846},[405,1367,853],{"class":838},[405,1369,1370],{"class":856},"\"City\"\n",[405,1372,1374,1376,1378,1380,1382,1385],{"class":835,"line":1373},42,[405,1375,1300],{"class":838},[405,1377,430],{"class":846},[405,1379,853],{"class":838},[405,1381,1277],{"class":838},[405,1383,1384],{"class":838},"loadCities",[405,1386,1283],{"class":838},[405,1388,1390,1392,1394,1396,1398,1401],{"class":835,"line":1389},43,[405,1391,1300],{"class":838},[405,1393,507],{"class":846},[405,1395,853],{"class":838},[405,1397,1277],{"class":838},[405,1399,1400],{"class":838},"[region]",[405,1402,1283],{"class":838},[405,1404,1406,1408,1410,1412,1414,1417],{"class":835,"line":1405},44,[405,1407,1300],{"class":838},[405,1409,517],{"class":846},[405,1411,853],{"class":838},[405,1413,1277],{"class":838},[405,1415,1416],{"class":846},"150",[405,1418,1283],{"class":838},[405,1420,1422],{"class":835,"line":1421},45,[405,1423,1424],{"class":846},"        enforce-coherence\n",[405,1426,1428,1430,1432],{"class":835,"line":1427},46,[405,1429,1317],{"class":846},[405,1431,853],{"class":838},[405,1433,1322],{"class":856},[405,1435,1437,1439,1441],{"class":835,"line":1436},47,[405,1438,1328],{"class":846},[405,1440,853],{"class":838},[405,1442,1333],{"class":856},[405,1444,1446],{"class":835,"line":1445},48,[405,1447,1339],{"class":838},[405,1449,1451,1453,1455],{"class":835,"line":1450},49,[405,1452,1238],{"class":838},[405,1454,1255],{"class":842},[405,1456,860],{"class":838},[384,1458,1459,1460,1462,1463,1466,1467,1469,1470,1472,1473,1475],{},"A region change re-runs ",[417,1461,1384],{}," with ",[417,1464,1465],{},"reason: 'dependencies'",". If the\nselected city is not among the fetched rows (a ",[417,1468,449],{}," does not count), ",[417,1471,1358],{},"\nresets to ",[417,1474,463],{},"; a still-valid city survives untouched. In multiple mode the\nsame flow filters the array instead. The provider decides what is valid, so\nfilter both the page and the ids request by the parent.",[401,1477,1479],{"id":1478},"manual",[405,1480,1481],{},"When a watcher is right",[384,1483,1484,1485,1487,1488,1490,1491,1494,1495,1497],{},"Only for rules the ",[417,1486,430],{}," and ",[417,1489,507],{}," contract cannot express:\ncross-component business constraints, server-side revalidation. Keep such a\nwatcher ",[412,1492,1493],{},"additive",": an extra rule on top of ",[417,1496,530],{},", never a\nreplacement.",[384,1499,1500,1501,1504],{},"What it must not be is a blind reset. ",[417,1502,1503],{},"city.value = null"," on every upstream\nchange discards selections the reload would have preserved. That is the exact\nwork the prop exists to avoid.",[384,1506,1507],{},"Three more shapes that look reasonable and are not:",[422,1509,1510,1519,1531],{},[425,1511,1512,1515,1516,1518],{},[412,1513,1514],{},"Duplicating built-in cleanup across tied components",", or turning\n",[417,1517,530],{}," off and replicating it by hand.",[425,1520,1521,1527,1528,1530],{},[412,1522,1523,1524,1526],{},"Binding many ",[417,1525,264],{}," instances to one shared ref."," Each judges\nthe same value against its own options, and every instance that disagrees\nemits ",[417,1529,463],{},". The user's pick is overwritten by its neighbours. Give every row\nits own model.",[425,1532,1533,1539],{},[412,1534,1535,1536,1538],{},"Hand-rolling ",[417,1537,363],{}," selection pruning after a refetch."," The table ships\nthe prop. Reserve provider-side reconciliation for a paginated provider, where\nthe prop has to stay off.",[384,1541,1542,1543,1545,1546,1548],{},"Use the smallest flow that fits: ",[417,1544,507],{}," to refetch, then\n",[417,1547,530],{}," to prune. Move reconciliation into the provider only for\ntables whose provider pages the rows, or for a business rule that cannot be\nexpressed as option membership.",[1550,1551,1552],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html 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}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":830,"searchDepth":149,"depth":149,"links":1554},[1555,1556,1557,1558,1559,1560,1561],{"id":403,"depth":145,"text":407},{"id":474,"depth":145,"text":477},{"id":545,"depth":145,"text":548},{"id":644,"depth":145,"text":647},{"id":711,"depth":145,"text":714},{"id":817,"depth":145,"text":820},{"id":1478,"depth":145,"text":1481},"Keep a bound value valid when the options underneath it change, without writing a watcher.","md",{},[1566,1567,1568,1569,1570,1571,1572],{"id":403,"title":407},{"id":474,"title":477},{"id":545,"title":548},{"id":644,"title":647},{"id":711,"title":714},{"id":817,"title":820},{"id":1478,"title":1481},{"title":172,"description":1562},"guides\u002Fcoherence","R0o8wGEcn7sUGNwYh9touFbuThycwHmRjqvhdfEG-Vs",[1577,1583,1587,1591,1595,1601,1605],{"id":1578,"name":1579,"countryCode":1580,"timeZone":1581,"population":1582},"milan","Milan","IT","Europe\u002FRome",3140000,{"id":1584,"name":1585,"countryCode":1580,"timeZone":1581,"population":1586},"rome","Rome",4300000,{"id":1588,"name":1589,"countryCode":1580,"timeZone":1581,"population":1590},"turin","Turin",1800000,{"id":1592,"name":1593,"countryCode":1580,"timeZone":1581,"population":1594},"bologna","Bologna",1020000,{"id":1596,"name":1597,"countryCode":1598,"timeZone":1599,"population":1600},"paris","Paris","FR","Europe\u002FParis",11200000,{"id":1602,"name":1603,"countryCode":1598,"timeZone":1599,"population":1604},"lyon","Lyon",1720000,{"id":1606,"name":1607,"countryCode":1598,"timeZone":1599,"population":1608},"marseille","Marseille",1600000,1793055147962]