[{"data":1,"prerenderedAt":3553},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Fpassthrough":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":160,"body":380,"component":377,"description":3536,"extension":3537,"group":151,"meta":3538,"navigation":917,"order":149,"path":161,"sections":3539,"seo":3550,"stem":3551,"__hash__":3552},"docs_en\u002Fguides\u002Fpassthrough.md",{"type":381,"value":382,"toc":3523},"minimark",[383,425,488,491,512,519,530,534,556,576,598,606,612,621,872,878,884,887,1040,1057,1230,1274,1299,1305,1320,1354,1357,1430,1433,1439,1442,1483,1502,1508,1514,1517,1536,1559,1578,1581,1703,1721,1728,1734,1746,1749,1759,1812,1826,1841,1919,1931,1945,1951,1961,2065,2144,2161,2198,2221,2236,2242,2255,2359,2478,2568,2574,2585,2598,2806,2817,3074,3086,3095,3221,3231,3251,3293,3490,3508,3520],[384,385,386,387,391,392,396,397,400,401,400,404,407,408,411,412,396,415,400,418,400,421,424],"p",{},"A variant or a token covers most looks. When neither does, ",[388,389,390],"code",{},"pt"," reaches inside\nthe component. Every component names its ",[393,394,395],"strong",{},"parts"," (",[388,398,399],{},"root",", ",[388,402,403],{},"icon",[388,405,406],{},"box",",\n",[388,409,410],{},"row",", …) and its ",[393,413,414],{},"states",[388,416,417],{},"loading",[388,419,420],{},"errors",[388,422,423],{},"selected",", …). You bind a\nclass list to a part with a prop:",[426,427,432],"pre",{"className":428,"code":429,"language":430,"meta":431,"style":431},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbButton\n    prepend:icon=\"lucide:save\"\n    pt:icon=\"text-emerald-600\"\n>\n    Save\n\u003C\u002FBbButton>\n","vue","",[388,433,434,446,459,469,474,479],{"__ignoreMap":431},[435,436,438,442],"span",{"class":437,"line":141},"line",[435,439,441],{"class":440},"suds8","\u003C",[435,443,445],{"class":444},"sne4z","BbButton\n",[435,447,448,452,455],{"class":437,"line":145},[435,449,451],{"class":450},"s-5SL","    prepend:icon",[435,453,454],{"class":440},"=",[435,456,458],{"class":457},"sT6z2","\"lucide:save\"\n",[435,460,461,464,466],{"class":437,"line":149},[435,462,463],{"class":450},"    pt:icon",[435,465,454],{"class":440},[435,467,468],{"class":457},"\"text-emerald-600\"\n",[435,470,471],{"class":437,"line":177},[435,472,473],{"class":440},">\n",[435,475,476],{"class":437,"line":181},[435,477,478],{"class":440},"    Save\n",[435,480,481,484,486],{"class":437,"line":185},[435,482,483],{"class":440},"\u003C\u002F",[435,485,205],{"class":444},[435,487,473],{"class":440},[384,489,490],{},"The grammar is the same on every component, and it is typed and linted.",[492,493,494],"warning",{},[384,495,496,503,504,506,507,511],{},[393,497,498,499,502],{},"On Tailwind v4, set ",[388,500,501],{},"cssLayers"," first."," Without it the library's CSS is\nunlayered and beats your utilities, so most ",[388,505,390],{}," class lists paint nothing, and\nnothing tells you. See ",[508,509,139],"a",{"href":510},"\u002Fen\u002Fguides\u002Finstallation#runtime",".",[513,514,516],"h2",{"id":515},"reach",[435,517,518],{},"Reach a part",[384,520,521,522,525,526,529],{},"Write ",[388,523,524],{},"pt:\u003Cpart>"," for the resting look and ",[388,527,528],{},"pt:\u003Cpart>:\u003Cstate>"," for what changes\nwhile a state is on. Edit the address below. The icon is faint while the field\nis empty and turns full ink, the primary colour on this site, once it holds a\nvalue. Break the address and leave the field: the icon turns red.",[531,532],"demo",{"name":533},"GuidesPassthrough\u002FPartsAndStates",[384,535,536,537,540,541,543,544,546,547,551,552,555],{},"An incomplete address switches on both ",[388,538,539],{},"hasValue"," and ",[388,542,420],{},". The red wins\nbecause ",[388,545,420],{}," comes later in the library's ",[508,548,550],{"href":549},"#merge","state order",". The button\nuses the same grammar: ",[388,553,554],{},"pt:text:loading"," dims its label while the invite sends.",[384,557,558,559,561,562,567,568,570,571,511],{},"To see a component's parts, open its page. The ",[393,560,160],{}," panel near the\ntop outlines each part when you point at its name, as on\n",[508,563,565],{"href":564},"\u002Fen\u002Fcomponents\u002Fbb-select#passthrough",[388,566,261],{},". The API page lists the parts\nand the component's states on one ",[388,569,524],{}," row, as on\n",[508,572,574],{"href":573},"\u002Fen\u002Fcomponents\u002Fbb-button\u002Fapi#prop-pt:%3Cpart%3E",[388,575,205],{},[384,577,578,579,582,583,586,587,590,591,593,594,597],{},"A misspelt part in a template attribute is an ESLint error\n(",[388,580,581],{},"bitboss-ui\u002Fno-unknown-attributes","), and a type error with\n",[388,584,585],{},"vueCompilerOptions.strictTemplates"," on. An inline ",[388,588,589],{},":pt=\"{ … }\""," is type-checked\ntoo. A ",[388,592,390],{}," object built in a ",[388,595,596],{},"const"," escapes both, so in dev a key that names\nnothing logs one warning with the component's vocabulary:",[426,599,604],{"className":600,"code":602,"language":603,"meta":431},[601],"language-text","bitboss-ui | BbButton: passthrough key \"icno\" in the `pt` object\nmatches nothing and is ignored. \"icno\" is not a part of BbButton.\nParts: root, icon, spinner, text.\n","text",[388,605,602],{"__ignoreMap":431},[513,607,609],{"id":608},"wrong-tool",[435,610,611],{},"When pt is the wrong tool",[384,613,614,615,617,618,511],{},"Reach for ",[388,616,390],{}," after a variant and a token, not before. That is rule 2 in\n",[508,619,157],{"href":620},"\u002Fen\u002Fguides\u002Fdesign-language#rules",[622,623,624,691,746,797,833,855],"ul",{},[625,626,627,630,631,634,635,638,639,641,642],"li",{},[393,628,629],{},"A look several places share is a variant."," Pick the closest one first\n(",[388,632,633],{},"ghost"," for no field chrome, ",[388,636,637],{},"none"," for a blank base), then use ",[388,640,390],{}," for what\nis left. A rebuilt ghost loses the specificity fight the variant exists to\nwin:",[426,643,645],{"className":428,"code":644,"language":430,"meta":431,"style":431},"\u003C!-- Don't -->\n\u003CBbTextInput pt:box=\"bg-transparent border-transparent\" \u002F>\n\u003C!-- Do -->\n\u003CBbTextInput variant=\"ghost\" \u002F>\n",[388,646,647,653,670,675],{"__ignoreMap":431},[435,648,649],{"class":437,"line":141},[435,650,652],{"class":651},"sLBg1","\u003C!-- Don't -->\n",[435,654,655,657,659,662,664,667],{"class":437,"line":145},[435,656,441],{"class":440},[435,658,235],{"class":444},[435,660,661],{"class":450}," pt:box",[435,663,454],{"class":440},[435,665,666],{"class":457},"\"bg-transparent border-transparent\"",[435,668,669],{"class":440}," \u002F>\n",[435,671,672],{"class":437,"line":149},[435,673,674],{"class":651},"\u003C!-- Do -->\n",[435,676,677,679,681,684,686,689],{"class":437,"line":177},[435,678,441],{"class":440},[435,680,235],{"class":444},[435,682,683],{"class":450}," variant",[435,685,454],{"class":440},[435,687,688],{"class":457},"\"ghost\"",[435,690,669],{"class":440},[625,692,693,696,697,700,701],{},[393,694,695],{},"A size is a token."," ",[388,698,699],{},"pt:icon=\"size-6\""," on a button resizes the icon but\nnot the spinner parked over it. Set the token on the root instead:",[426,702,704],{"className":428,"code":703,"language":430,"meta":431,"style":431},"\u003CBbButton :pt:root=\"{ style: { '--icon-size': '22px' } }\" \u002F>\n",[388,705,706],{"__ignoreMap":431},[435,707,708,710,712,715,717,720,722,724,727,730,733,736,739,742,744],{"class":437,"line":141},[435,709,441],{"class":440},[435,711,205],{"class":444},[435,713,714],{"class":440}," :",[435,716,390],{"class":450},[435,718,719],{"class":440},":",[435,721,399],{"class":450},[435,723,454],{"class":440},[435,725,726],{"class":440},"\"",[435,728,729],{"class":440},"{ style: { ",[435,731,732],{"class":457},"'--icon-size'",[435,734,735],{"class":440},": ",[435,737,738],{"class":457},"'22px'",[435,740,741],{"class":440}," } }",[435,743,726],{"class":440},[435,745,669],{"class":440},[625,747,748,751,752,755,756,759,760],{},[393,749,750],{},"A field's resting border is a token."," Set its variable and the error frame\nstill paints over it. A plain ",[388,753,754],{},"border-emerald-600"," hides the error frame, and\nthe ESLint rule ",[388,757,758],{},"bitboss-ui\u002Fno-box-border-color"," flags it. The state borders\nare classes:",[426,761,763],{"className":428,"code":762,"language":430,"meta":431,"style":431},"\u003CBbTextInput\n    pt:box=\"[--border-color:var(--color-emerald-600)]\"\n    pt:box:errors=\"border-red-800\"\n\u002F>\n",[388,764,765,772,782,792],{"__ignoreMap":431},[435,766,767,769],{"class":437,"line":141},[435,768,441],{"class":440},[435,770,771],{"class":444},"BbTextInput\n",[435,773,774,777,779],{"class":437,"line":145},[435,775,776],{"class":450},"    pt:box",[435,778,454],{"class":440},[435,780,781],{"class":457},"\"[--border-color:var(--color-emerald-600)]\"\n",[435,783,784,787,789],{"class":437,"line":149},[435,785,786],{"class":450},"    pt:box:errors",[435,788,454],{"class":440},[435,790,791],{"class":457},"\"border-red-800\"\n",[435,793,794],{"class":437,"line":177},[435,795,796],{"class":440},"\u002F>\n",[625,798,799,802,803,807,808,811,812],{},[393,800,801],{},"A colour that changes on hover or validation is a variable."," A class on\n",[508,804,805],{"href":68},[388,806,258],{},"'s stars, ",[388,809,810],{},"pt:item=\"text-amber-500\"",",\nfreezes them: no hover preview, no error tint. Set the accent on the root and\nthe rating keeps choosing which colour to show:",[426,813,815],{"className":428,"code":814,"language":430,"meta":431,"style":431},"\u003CBbRating pt:root=\"[--accent:var(--color-amber-500)]\" \u002F>\n",[388,816,817],{"__ignoreMap":431},[435,818,819,821,823,826,828,831],{"class":437,"line":141},[435,820,441],{"class":440},[435,822,258],{"class":444},[435,824,825],{"class":450}," pt:root",[435,827,454],{"class":440},[435,829,830],{"class":457},"\"[--accent:var(--color-amber-500)]\"",[435,832,669],{"class":440},[625,834,835,396,840,400,842,407,844,400,846,848,849,540,852,511],{},[393,836,837,838],{},"A component whose only part is ",[388,839,399],{},[388,841,375],{},[388,843,360],{},[388,845,369],{},[388,847,348],{},") takes plain ",[388,850,851],{},"class",[388,853,854],{},"style",[625,856,857,860,861,863,864,867,868,871],{},[393,858,859],{},"Behaviour goes through props and events."," A listener in ",[388,862,390],{}," runs after the\ncomponent's own and cannot cancel it. Icons and spinners ignore the pointer,\nso an ",[388,865,866],{},"onClick"," on ",[388,869,870],{},"pt:icon"," never fires.",[384,873,874,875,877],{},"Accessibility needs nothing from ",[388,876,390],{},". Names, roles, live regions and focus\norder are wired inside every component.",[513,879,881],{"id":880},"grammar",[435,882,883],{},"Every form a pt value takes",[384,885,886],{},"The name says where, the value says what. These are the forms on an instance:",[426,888,890],{"className":428,"code":889,"language":430,"meta":431,"style":431},"\u003C!-- A part -->\n\u003CBbButton pt:icon=\"text-red-500\" \u002F>\n\n\u003C!-- A part and a state -->\n\u003CBbButton pt:icon:loading=\"opacity-50\" \u002F>\n\n\u003C!-- An object value: class, style and attrs -->\n\u003CBbButton\n    :pt:icon=\"{ class: 'shrink-0', attrs: { 'data-test': 'icon' } }\"\n\u002F>\n\n\u003C!-- The object prop: the same keys without the prefix -->\n\u003CBbButton\n    :pt=\"{ icon: 'text-red-500', 'icon:loading': 'opacity-50' }\"\n\u002F>\n\n\u003C!-- A function of the row, on row parts only -->\n\u003CBbTable :pt:row=\"({ item }) => item.overdue && 'bg-red-50'\" \u002F>\n",[388,891,892,897,913,919,924,940,944,949,955,992,996,1000,1006,1012,1018,1023,1028,1034],{"__ignoreMap":431},[435,893,894],{"class":437,"line":141},[435,895,896],{"class":651},"\u003C!-- A part -->\n",[435,898,899,901,903,906,908,911],{"class":437,"line":145},[435,900,441],{"class":440},[435,902,205],{"class":444},[435,904,905],{"class":450}," pt:icon",[435,907,454],{"class":440},[435,909,910],{"class":457},"\"text-red-500\"",[435,912,669],{"class":440},[435,914,915],{"class":437,"line":149},[435,916,918],{"emptyLinePlaceholder":917},true,"\n",[435,920,921],{"class":437,"line":177},[435,922,923],{"class":651},"\u003C!-- A part and a state -->\n",[435,925,926,928,930,933,935,938],{"class":437,"line":181},[435,927,441],{"class":440},[435,929,205],{"class":444},[435,931,932],{"class":450}," pt:icon:loading",[435,934,454],{"class":440},[435,936,937],{"class":457},"\"opacity-50\"",[435,939,669],{"class":440},[435,941,942],{"class":437,"line":185},[435,943,918],{"emptyLinePlaceholder":917},[435,945,946],{"class":437,"line":225},[435,947,948],{"class":651},"\u003C!-- An object value: class, style and attrs -->\n",[435,950,951,953],{"class":437,"line":229},[435,952,441],{"class":440},[435,954,445],{"class":444},[435,956,957,960,962,964,966,968,970,973,976,979,982,984,987,989],{"class":437,"line":233},[435,958,959],{"class":440},"    :",[435,961,390],{"class":450},[435,963,719],{"class":440},[435,965,403],{"class":450},[435,967,454],{"class":440},[435,969,726],{"class":440},[435,971,972],{"class":440},"{ class: ",[435,974,975],{"class":457},"'shrink-0'",[435,977,978],{"class":440},", attrs: { ",[435,980,981],{"class":457},"'data-test'",[435,983,735],{"class":440},[435,985,986],{"class":457},"'icon'",[435,988,741],{"class":440},[435,990,991],{"class":440},"\"\n",[435,993,994],{"class":437,"line":237},[435,995,796],{"class":440},[435,997,998],{"class":437,"line":241},[435,999,918],{"emptyLinePlaceholder":917},[435,1001,1003],{"class":437,"line":1002},12,[435,1004,1005],{"class":440},"\u003C!-- The object prop: the same keys without the prefix -->\n",[435,1007,1009],{"class":437,"line":1008},13,[435,1010,1011],{"class":440},"\u003CBbButton\n",[435,1013,1015],{"class":437,"line":1014},14,[435,1016,1017],{"class":440},"    :pt=\"{ icon: 'text-red-500', 'icon:loading': 'opacity-50' }\"\n",[435,1019,1021],{"class":437,"line":1020},15,[435,1022,796],{"class":440},[435,1024,1026],{"class":437,"line":1025},16,[435,1027,918],{"emptyLinePlaceholder":917},[435,1029,1031],{"class":437,"line":1030},17,[435,1032,1033],{"class":440},"\u003C!-- A function of the row, on row parts only -->\n",[435,1035,1037],{"class":437,"line":1036},18,[435,1038,1039],{"class":440},"\u003CBbTable :pt:row=\"({ item }) => item.overdue && 'bg-red-50'\" \u002F>\n",[384,1041,1042,1043,1047,1048,1052,1053,511],{},"Functions have ",[508,1044,1046],{"href":1045},"#per-item","their own section",". The app-wide map and named scopes\ntake the object prop's keys: see ",[508,1049,1051],{"href":1050},"#global","every instance in the app"," and\n",[508,1054,1056],{"href":1055},"#scopes","an area's own look",[622,1058,1059,1072,1118,1134,1155,1184,1203],{},[625,1060,1061,696,1064,1067,1068,1071],{},[393,1062,1063],{},"One part, at most one state.",[388,1065,1066],{},"pt:icon:loading:disabled"," does not exist. To\ncombine two states, write CSS on the modifier classes\n(",[388,1069,1070],{},".bb-button--loading.bb-base-button--disabled",").",[625,1073,1074,1077,1078,540,1080,1083,1084,1086,1087,1090,1091,400,1094,1097,1098,1101,1102,1105,1106,1109,1110,1113,1114,1117],{},[393,1075,1076],{},"A string is a class list."," The object adds ",[388,1079,854],{},[388,1081,1082],{},"attrs",". ",[388,1085,1082],{}," is\n",[388,1088,1089],{},"v-bind"," on the part: ",[388,1092,1093],{},"data-*",[388,1095,1096],{},"inputmode"," or ",[388,1099,1100],{},"spellcheck"," on a text field's\n",[388,1103,1104],{},"pt:input",", a ",[388,1107,1108],{},"viewBox"," on an icon. The object is not a Vue ",[388,1111,1112],{},":class"," object:\n",[388,1115,1116],{},"{ 'text-red-500': overdue }"," applies nothing and only warns in dev, so write\na ternary instead.",[625,1119,1120,696,1123,1126,1127,1129,1130,1133],{},[393,1121,1122],{},"A broadcast part lands on every node it names.",[388,1124,1125],{},"pt:row"," reaches every data\nrow, ",[388,1128,870],{}," both icons of a button. An ",[388,1131,1132],{},"id"," on a broadcast part duplicates.",[625,1135,1136,696,1139,1142,1143,1146,1147,400,1149,400,1151,1154],{},[393,1137,1138],{},"A row's own state stays on that row.",[388,1140,1141],{},"pt:option:selected"," reaches only the\nchosen options and ",[388,1144,1145],{},"pt:row:highlighted"," only the open row, and both follow the\nselection. A state of the whole control (",[388,1148,417],{},[388,1150,420],{},[388,1152,1153],{},"open",") reaches\nevery node at once.",[625,1156,1157,1163,1164,400,1167,400,1170,867,1173,540,1175,1177,1178,1180,1181,1183],{},[393,1158,1159,1160,1162],{},"A slot replaces the node, and its ",[388,1161,390],{}," with it."," When you render your own\nmarkup, put the class on it. The icon slots named after a prop\n(",[388,1165,1166],{},"#icon",[388,1168,1169],{},"#prepend:icon",[388,1171,1172],{},"#append:icon",[388,1174,205],{},[388,1176,339],{},") are\nthe exception: they render inside the ",[388,1179,403],{}," part, so ",[388,1182,870],{}," still lands.",[625,1185,1186,696,1189,1052,1192,1195,1196,540,1199,1202],{},[393,1187,1188],{},"Templates take either case, objects take camelCase.",[388,1190,1191],{},"pt:item-icon",[388,1193,1194],{},"pt:box:has-value"," work in a template. In an object, a global map or a scope\nwrite ",[388,1197,1198],{},"itemIcon",[388,1200,1201],{},"'box:hasValue'",": a kebab key there matches nothing.",[625,1204,1205,696,1212,407,1215,400,1218,1221,1222,1225,1226,1229],{},[393,1206,1207,1208,1211],{},"A component's ",[388,1209,1210],{},"variant"," is a state.",[388,1213,1214],{},"pt:root:destructive",[388,1216,1217],{},"pt:box:ghost",[388,1219,1220],{},"{ 'item:destructive': '…' }"," apply on the parts the variant\nstyles while that variant is on (per entry on a dropdown). A name your app\nregisters in the build plugin (",[388,1223,1224],{},"dropdownItemVariants: ['warning']",") works the\nsame way: ",[388,1227,1228],{},"pt:item:warning",". A registered name that is already one of the\ncomponent's states fails the build. Sizes, placements and label modes are not\nstates.",[384,1231,1232,1233,1235,1236,1239,1240,540,1242,1244,1245,1247,1248,1251,1252,1255,1256,1259,1260,1083,1263,1266,1267,1270,1271,1273],{},"A part word means the same thing on every component. ",[388,1234,406],{}," is a field's\nbordered box, and ",[388,1237,1238],{},"panel"," the visible surface of anything that floats (on\n",[388,1241,327],{},[388,1243,315],{},", the content pane). A row is ",[388,1246,410],{}," on a table,\n",[388,1249,1250],{},"option"," on a select, ",[388,1253,1254],{},"day"," on a date picker and ",[388,1257,1258],{},"swatch"," on a colour palette;\nelsewhere it is ",[388,1261,1262],{},"item",[388,1264,1265],{},"close"," dismisses a surface, ",[388,1268,1269],{},"clear"," empties a control.\n",[388,1272,403],{}," is always a content icon, never a chevron or a status symbol.",[384,1275,1276,1277,1280,1281,1284,1285,1291,1292,1295,1296,511],{},"Tailwind autocomplete works inside ",[388,1278,1279],{},"pt:*"," values and ",[388,1282,1283],{},":pt"," objects. The build\nplugin's ",[508,1286,1288],{"href":1287},"\u002Fen\u002Fguides\u002Finstallation#options",[388,1289,1290],{},"vscodeSettings"," option teaches the\nTailwind CSS IntelliSense extension those attributes when the dev server boots.\nReload the editor window once after that first boot. With\n",[388,1293,1294],{},"vscodeSettings: false",", add the settings yourself: the package lists them in\n",[388,1297,1298],{},"dist\u002Fai\u002Fguides\u002Finstallation-and-plugin-setup.md",[513,1300,1302],{"id":1301},"merge",[435,1303,1304],{},"How the sources merge",[384,1306,1307,1308,1311,1312,400,1315,1097,1317,1319],{},"A part starts from its base entry, then its variant's entry (",[388,1309,1310],{},"root:destructive","),\nthen each active state's entry merges on top: a variant beats the base, and\n",[388,1313,1314],{},"disabled",[388,1316,423],{},[388,1318,417],{}," still beat the variant.\nInside one entry the sources merge in this order, and the last one wins a\nconflict:",[1321,1322,1323,1329,1336,1348],"ol",{},[625,1324,1325,1326],{},"the global map, ",[388,1327,1328],{},"bitbossUi({ pt })",[625,1330,1331,1332,1335],{},"the named scopes, outermost ",[388,1333,1334],{},"\u003CBbPtScope>"," first",[625,1337,1338,1339,1341,1342,1344,1345,1347],{},"the instance's ",[388,1340,851],{}," (on ",[388,1343,399],{},"), then its ",[388,1346,390],{}," object prop",[625,1349,1350,1351,1353],{},"the ",[388,1352,524],{}," attribute",[384,1355,1356],{},"So a state entry from the global map still beats a base entry on the instance,\nwhile that state is on.",[1358,1359,1360,1373],"table",{},[1361,1362,1363],"thead",{},[1364,1365,1366,1370],"tr",{},[1367,1368,1369],"th",{},"What you pass",[1367,1371,1372],{},"What happens",[1374,1375,1376,1400,1409,1422],"tbody",{},[1364,1377,1378,1383],{},[1379,1380,1381],"td",{},[388,1382,851],{},[1379,1384,1385,1386,1389,1390,1393,1394,1397,1398],{},"Adds to the component's classes and never removes a ",[388,1387,1388],{},"bb-*"," one. A conflicting utility from an earlier source is dropped: ",[388,1391,1392],{},"text-slate-400"," then ",[388,1395,1396],{},"text-red-500"," leaves only ",[388,1399,1396],{},[1364,1401,1402,1406],{},[1379,1403,1404],{},[388,1405,854],{},[1379,1407,1408],{},"Merges property by property",[1364,1410,1411,1414],{},[1379,1412,1413],{},"A plain attribute",[1379,1415,1416,1417,1097,1419],{},"Wins, even over one the component manages, such as ",[388,1418,1314],{},[388,1420,1421],{},"placeholder",[1364,1423,1424,1427],{},[1379,1425,1426],{},"A listener",[1379,1428,1429],{},"Runs after the component's own handler and cannot cancel it",[384,1431,1432],{},"When two states are on at once, the later one in this list wins, on every\ncomponent:",[426,1434,1437],{"className":1435,"code":1436,"language":603,"meta":431},[601],"hasValue → value → placeholder → nearLimit → atLimit → empty → outside → today\n→ inRange → activeLink → exactActiveLink → sorted → sortedDesc → selected → rangeStart → rangeEnd → checked\n→ indeterminate → pressed → readonly → disabled → warnings → errors → active → expanded\n→ open → fullscreen → focused → focusVisible → highlighted → loading\n",[388,1438,1436],{"__ignoreMap":431},[384,1440,1441],{},"The more temporary state wins: a spinner replaces a warning icon, and an error\nshows red on a disabled field.",[384,1443,1444,1445,1448,1449,1452,1453,1456,1457,1460,1461,1464,1465,1467,1468,1471,1472,1475,1476,1479,1480,1482],{},"Conflicting utilities are settled by the bundled ",[388,1446,1447],{},"tailwind-merge"," v3. On\nTailwind v3, point the ",[388,1450,1451],{},"passthroughDeduper"," plugin option at a module of your\nown that uses ",[388,1454,1455],{},"tailwind-merge@2",", or set it to ",[388,1458,1459],{},"false",". Your own ",[388,1462,1463],{},"@theme","\ntokens dedupe by the property they set: the build plugin reads the ",[388,1466,1463],{},"\nblocks in your CSS, so ",[388,1469,1470],{},"text-h2"," (a font size) and ",[388,1473,1474],{},"text-ink"," (a colour) both\nstay, while two sizes still dedupe. In dev it follows your CSS as you edit it,\na token or a file added or deleted. A token defined elsewhere (a plugin, a package) is\nnot seen: configure it with ",[388,1477,1478],{},"extendTailwindMerge"," and point\n",[388,1481,1451],{}," at that module.",[384,1484,1485,1486,1488,1489,407,1491,1494,1495,1498,1499,511],{},"The deduper settles your classes against each other, not against the library's\nstylesheet. Where a part's own rule sets a property, your utility wins only in\nthe layered build. ",[388,1487,205],{}," is the usual case: without ",[388,1490,501],{},[388,1492,1493],{},"pt:root=\"px-6 rounded-lg\""," does nothing. Use ",[388,1496,1497],{},"size",", or set the button's own\nvariables: ",[388,1500,1501],{},":pt:root=\"{ style: { '--px': '20px', '--r': '9999px' } }\"",[513,1503,1505],{"id":1504},"per-item",[435,1506,1507],{},"Per-item functions",[384,1509,1510,1511,1513],{},"A state says which rows are on, and a function says what a row holds. On row\nparts, ",[388,1512,390],{}," takes a function of the item and its states. Here cancelled and\nrefunded orders fade, and the open one is tinted. Click a row to open it.",[531,1515],{"name":1516},"GuidesPassthrough\u002FOrderRows",[384,1518,1519,1521,1522,1525,1526,1528,1529,1532,1533,1535],{},[388,1520,1262],{}," is the row as you passed it in ",[388,1523,1524],{},"items",", typed from them. On the dropdowns\nand on ",[388,1527,327],{}," it is the library's entry type instead, so a field of your own\n(",[388,1530,1531],{},"danger",") needs a cast. Every state is a boolean beside it. Return a class\nlist, an object, or ",[388,1534,1459],{}," to leave the row alone. The result merges after\nevery state entry, which is why the function above skips the highlighted row.",[384,1537,1538,1539,1542,1543,540,1545,1548,1549,1551,1552,1554,1555,1558],{},"The same function fits inline, ",[388,1540,1541],{},":pt:row=\"({ item }) => item.overdue && 'bg-red-50'\"",".\n",[388,1544,1125],{},[388,1546,1547],{},":pt:row"," are one prop, so a static class list beside a function\ngoes in the object form. The demo keeps the function in ",[388,1550,1283],{}," and the state in\n",[388,1553,1145],{},", which are different keys. The state's tint brings its own\n",[388,1556,1557],{},"hover:"," shade, because a background class replaces the one the library's hover\nchanges.",[384,1560,1561,1562,1565,1566,1569,1570,1573,1574,1577],{},"A table row's text colour never reaches its cells, because each cell paints\n",[388,1563,1564],{},"color: var(--bb-text)"," itself. Set the token on the row, ",[388,1567,1568],{},"[--bb-text:…]",",\ninstead of a ",[388,1571,1572],{},"text-*"," class. A fill (",[388,1575,1576],{},"bg-*",") does show through.",[384,1579,1580],{},"Only row parts take a function:",[1358,1582,1583,1593],{},[1361,1584,1585],{},[1364,1586,1587,1590],{},[1367,1588,1589],{},"Component",[1367,1591,1592],{},"Parts",[1374,1594,1595,1610,1641,1659,1680,1690],{},[1364,1596,1597,1601],{},[1379,1598,1599],{},[388,1600,363],{},[1379,1602,1603,1605,1606,1609],{},[388,1604,410],{}," (for one cell, use the column's ",[388,1607,1608],{},"tdClass",")",[1364,1611,1612,1618],{},[1379,1613,1614,400,1616],{},[388,1615,261],{},[388,1617,264],{},[1379,1619,1620,400,1622,400,1625,400,1627,1630,1631,1633,1634,540,1637,1640],{},[388,1621,1250],{},[388,1623,1624],{},"itemText",[388,1626,1198],{},[388,1628,1629],{},"itemDescription","; on ",[388,1632,261],{}," also ",[388,1635,1636],{},"badge",[388,1638,1639],{},"comma",", one per selected value",[1364,1642,1643,1649],{},[1379,1644,1645,400,1647],{},[388,1646,291],{},[388,1648,294],{},[1379,1650,1651,400,1653,400,1655,400,1657],{},[388,1652,1262],{},[388,1654,1624],{},[388,1656,1198],{},[388,1658,1629],{},[1364,1660,1661,1669],{},[1379,1662,1663,400,1665,400,1667],{},[388,1664,249],{},[388,1666,255],{},[388,1668,273],{},[1379,1670,1671,400,1673,400,1675,400,1678],{},[388,1672,1262],{},[388,1674,403],{},[388,1676,1677],{},"label",[388,1679,1629],{},[1364,1681,1682,1686],{},[1379,1683,1684],{},[388,1685,327],{},[1379,1687,1688],{},[388,1689,1262],{},[1364,1691,1692,1696],{},[1379,1693,1694],{},[388,1695,227],{},[1379,1697,1698,400,1700,1702],{},[388,1699,1636],{},[388,1701,1639],{}," (the item is the tag string)",[384,1704,1705,1706,400,1708,1714,1715,1717,1718,511],{},"On ",[388,1707,363],{},[508,1709,1711],{"href":1710},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-rowClass",[388,1712,1713],{},"row-class"," does the\nsame from the item alone. Use a ",[388,1716,1125],{}," function when you need the row's\nstates, as the demo does with ",[388,1719,1720],{},"highlighted",[384,1722,1723,1724,1727],{},"A function goes on the base key only, never on ",[388,1725,1726],{},"row:selected",", and never in the\nglobal map or a scope. It runs for every rendered row on every render, so keep\nit a cheap read of the item.",[513,1729,1731],{"id":1730},"nested",[435,1732,1733],{},"Parts inside a popover or sheet",[384,1735,1736,1737,540,1740,1742,1743,1745],{},"A select's options live in the popover it opens, and on a phone in a bottom\nsheet. The select still owns the words: ",[388,1738,1739],{},"pt:option",[388,1741,1191],{}," on\n",[388,1744,261],{}," land wherever the rows render, in the popover or in the sheet. Open\nthe select below: the chosen method's icon turns full ink, the primary colour\nhere.",[531,1747],{"name":1748},"GuidesPassthrough\u002FNestedSelect",[384,1750,1751,1752,400,1754,407,1756,1758],{},"Every floating surface splits the same way: ",[388,1753,303],{},[388,1755,291],{},[388,1757,264],{},", and the date, time and colour pickers.",[622,1760,1761,1770,1779],{},[625,1762,1763,1769],{},[393,1764,1765,1768],{},[388,1766,1767],{},"pt:panel"," is the surface you see",": the bubble on desktop, the sheet on a\nphone. Background, padding, border and radius go here.",[625,1771,1772,1778],{},[393,1773,1774,1777],{},[388,1775,1776],{},"pt:root"," is an invisible positioning wrapper",", with no node on a phone.\nPadding or a border on it draws a frame around the surface, and a click on\nthat frame closes it.",[625,1780,1781,1787,1788,1790,1791,1097,1794,867,1797,1799,1800,1803,1804,1807,1808,1811],{},[393,1782,1783,1786],{},[388,1784,1785],{},"pt:sheet"," reaches only the phone sheet"," and wins over ",[388,1789,1238],{}," there. Use\nit when a desktop ",[388,1792,1793],{},"w-64",[388,1795,1796],{},"rounded-md",[388,1798,1238],{}," would reshape the sheet:\n",[388,1801,1802],{},"pt:sheet=\"w-full rounded-t-(--bb-radius-surface)\"",". Leave ",[388,1805,1806],{},"overflow-hidden","\noff a panel that can become a sheet: the clip shows a gap under the sheet\nwhile it is dragged. Pin ",[388,1809,1810],{},":adaptive=\"false\""," where you need the clip.",[384,1813,1814,1815,1817,1818,1820,1821,540,1823,1825],{},"The inputs that open one (",[388,1816,261],{},", the date, time and colour inputs) keep\n",[388,1819,1776],{}," on the field and forward ",[388,1822,1767],{},[388,1824,1785],{}," to the surface.",[384,1827,1828,1829,1831,1832,1835,1836,1840],{},"To style what is inside the sheet on a phone only, such as its header, footer\nor close button, put ",[388,1830,390],{}," in ",[388,1833,1834],{},"offCanvasProps",". It takes\n",[508,1837,1838],{"href":56},[388,1839,300],{},"'s own parts and never touches the\ndesktop surface:",[426,1842,1844],{"className":428,"code":1843,"language":430,"meta":431,"style":431},"\u003C!-- A muted header on both, with more room above it on a phone. -->\n\u003CBbDialog\n    id=\"record-payment\"\n    title=\"Record payment\"\n    pt:header=\"bg-(--bb-muted) pt-1\"\n    :off-canvas-props=\"{ 'pt:header': 'pt-10' }\"\n\u002F>\n",[388,1845,1846,1851,1858,1868,1878,1888,1915],{"__ignoreMap":431},[435,1847,1848],{"class":437,"line":141},[435,1849,1850],{"class":651},"\u003C!-- A muted header on both, with more room above it on a phone. -->\n",[435,1852,1853,1855],{"class":437,"line":145},[435,1854,441],{"class":440},[435,1856,1857],{"class":444},"BbDialog\n",[435,1859,1860,1863,1865],{"class":437,"line":149},[435,1861,1862],{"class":450},"    id",[435,1864,454],{"class":440},[435,1866,1867],{"class":457},"\"record-payment\"\n",[435,1869,1870,1873,1875],{"class":437,"line":177},[435,1871,1872],{"class":450},"    title",[435,1874,454],{"class":440},[435,1876,1877],{"class":457},"\"Record payment\"\n",[435,1879,1880,1883,1885],{"class":437,"line":181},[435,1881,1882],{"class":450},"    pt:header",[435,1884,454],{"class":440},[435,1886,1887],{"class":457},"\"bg-(--bb-muted) pt-1\"\n",[435,1889,1890,1892,1895,1897,1899,1902,1905,1907,1910,1913],{"class":437,"line":185},[435,1891,959],{"class":440},[435,1893,1894],{"class":450},"off-canvas-props",[435,1896,454],{"class":440},[435,1898,726],{"class":440},[435,1900,1901],{"class":440},"{ ",[435,1903,1904],{"class":457},"'pt:header'",[435,1906,735],{"class":440},[435,1908,1909],{"class":457},"'pt-10'",[435,1911,1912],{"class":440}," }",[435,1914,991],{"class":440},[435,1916,1917],{"class":437,"line":225},[435,1918,796],{"class":440},[384,1920,1921,1922,1831,1925,1927,1928,511],{},"On the date, time and colour pickers this is the only way into the sheet's\nheader, body and close button. Their sheet hides its close button, so set\n",[388,1923,1924],{},"hideClose: false",[388,1926,1834],{}," before styling ",[388,1929,1930],{},"pt:close",[384,1932,1933,1934,1937,1938,1940,1941,1944],{},"A dialog's backdrop is the ",[388,1935,1936],{},"::backdrop"," pseudo-element, which ",[388,1939,390],{}," cannot reach.\nStyle ",[388,1942,1943],{},".bb-dialog::backdrop"," in CSS.",[513,1946,1948],{"id":1947},"global",[435,1949,1950],{},"Style every instance in the app",[384,1952,1953,1954,1956,1957,1960],{},"To style every instance in the app, key the plugin's ",[388,1955,390],{}," option by component,\nthen by part. Keep the map in its own file and wrap it in ",[388,1958,1959],{},"definePt",", which\nchecks component names, keys and values where you write them:",[426,1962,1967],{"className":1963,"code":1964,"filename":1965,"language":1966,"meta":431,"style":431},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F In a Nuxt app, import definePt from 'bitboss-ui\u002Fnuxt'.\nimport { definePt } from 'bitboss-ui\u002Fvite';\n\nexport const pt = definePt({\n    BbTextInput: { label: 'text-xs font-medium' },\n    BbTable: {\n        row: 'h-9',\n        'row:highlighted': 'bg-(--bb-info)\u002F10 hover:bg-(--bb-info)\u002F15',\n    },\n});\n","bitboss-ui.pt.ts","ts",[388,1968,1969,1974,1992,1996,2017,2028,2033,2043,2055,2060],{"__ignoreMap":431},[435,1970,1971],{"class":437,"line":141},[435,1972,1973],{"class":651},"\u002F\u002F In a Nuxt app, import definePt from 'bitboss-ui\u002Fnuxt'.\n",[435,1975,1976,1980,1983,1986,1989],{"class":437,"line":145},[435,1977,1979],{"class":1978},"sHUrx","import",[435,1981,1982],{"class":440}," { definePt } ",[435,1984,1985],{"class":1978},"from",[435,1987,1988],{"class":457}," 'bitboss-ui\u002Fvite'",[435,1990,1991],{"class":440},";\n",[435,1993,1994],{"class":437,"line":149},[435,1995,918],{"emptyLinePlaceholder":917},[435,1997,1998,2001,2004,2007,2010,2014],{"class":437,"line":177},[435,1999,2000],{"class":1978},"export",[435,2002,2003],{"class":1978}," const",[435,2005,2006],{"class":450}," pt",[435,2008,2009],{"class":1978}," =",[435,2011,2013],{"class":2012},"sKwhi"," definePt",[435,2015,2016],{"class":440},"({\n",[435,2018,2019,2022,2025],{"class":437,"line":181},[435,2020,2021],{"class":440},"    BbTextInput: { label: ",[435,2023,2024],{"class":457},"'text-xs font-medium'",[435,2026,2027],{"class":440}," },\n",[435,2029,2030],{"class":437,"line":185},[435,2031,2032],{"class":440},"    BbTable: {\n",[435,2034,2035,2038,2041],{"class":437,"line":225},[435,2036,2037],{"class":440},"        row: ",[435,2039,2040],{"class":457},"'h-9'",[435,2042,407],{"class":440},[435,2044,2045,2048,2050,2053],{"class":437,"line":229},[435,2046,2047],{"class":457},"        'row:highlighted'",[435,2049,735],{"class":440},[435,2051,2052],{"class":457},"'bg-(--bb-info)\u002F10 hover:bg-(--bb-info)\u002F15'",[435,2054,407],{"class":440},[435,2056,2057],{"class":437,"line":233},[435,2058,2059],{"class":440},"    },\n",[435,2061,2062],{"class":437,"line":237},[435,2063,2064],{"class":440},"});\n",[426,2066,2069],{"className":1963,"code":2067,"filename":2068,"language":1966,"meta":431,"style":431},"import { defineConfig } from 'vite';\nimport { bitbossUi } from 'bitboss-ui\u002Fvite';\nimport { pt } from '.\u002Fbitboss-ui.pt';\n\nexport default defineConfig({ plugins: [bitbossUi({ pt })] });\n","vite.config.ts",[388,2070,2071,2085,2098,2112,2116],{"__ignoreMap":431},[435,2072,2073,2075,2078,2080,2083],{"class":437,"line":141},[435,2074,1979],{"class":1978},[435,2076,2077],{"class":440}," { defineConfig } ",[435,2079,1985],{"class":1978},[435,2081,2082],{"class":457}," 'vite'",[435,2084,1991],{"class":440},[435,2086,2087,2089,2092,2094,2096],{"class":437,"line":145},[435,2088,1979],{"class":1978},[435,2090,2091],{"class":440}," { bitbossUi } ",[435,2093,1985],{"class":1978},[435,2095,1988],{"class":457},[435,2097,1991],{"class":440},[435,2099,2100,2102,2105,2107,2110],{"class":437,"line":149},[435,2101,1979],{"class":1978},[435,2103,2104],{"class":440}," { pt } ",[435,2106,1985],{"class":1978},[435,2108,2109],{"class":457}," '.\u002Fbitboss-ui.pt'",[435,2111,1991],{"class":440},[435,2113,2114],{"class":437,"line":177},[435,2115,918],{"emptyLinePlaceholder":917},[435,2117,2118,2120,2123,2126,2130,2133,2136,2139,2142],{"class":437,"line":181},[435,2119,2000],{"class":1978},[435,2121,2122],{"class":1978}," default",[435,2124,2125],{"class":2012}," defineConfig",[435,2127,2129],{"class":2128},"soyes","({ ",[435,2131,2132],{"class":440},"plugins: [",[435,2134,2135],{"class":2012},"bitbossUi",[435,2137,2138],{"class":440},"({ pt })] ",[435,2140,2141],{"class":2128},"})",[435,2143,1991],{"class":440},[384,2145,2146,2147,1831,2150,2153,2154,1097,2157,2160],{},"In Nuxt, pass the same map as ",[388,2148,2149],{},"bitboss: { pt }",[388,2151,2152],{},"nuxt.config.ts",". Import\nonly from ",[388,2155,2156],{},"bitboss-ui\u002Fvite",[388,2158,2159],{},"bitboss-ui\u002Fnuxt"," in that file, since the config\nloads in Node.",[622,2162,2163,2171,2185],{},[625,2164,2165,2168,2169,511],{},[393,2166,2167],{},"It is data only."," The map ships as JSON, so a listener or a per-item\nfunction fails the build, and is already a type error inside ",[388,2170,1959],{},[625,2172,2173,2176,2177,2180,2181,2184],{},[393,2174,2175],{},"It is checked at build time."," A misspelt component (",[388,2178,2179],{},"BbButon",") or key\n(",[388,2182,2183],{},"icno",") fails the build, and the message lists the right words.",[625,2186,2187,2190,2191,2193,2194,2197],{},[393,2188,2189],{},"It is build-time only."," There is no runtime ",[388,2192,390],{}," option, and\n",[388,2195,2196],{},"setConfig({ pt })"," does not exist.",[384,2199,2200,2201,2204,2205,2208,2209,2211,2212,540,2214,2216,2217,2220],{},"An instance still beats the map within one key, as in ",[508,2202,2203],{"href":549},"the merge order",".\nConfirms and toasts have no instance to style: ",[388,2206,2207],{},"\u003CBbHost \u002F>"," takes no ",[388,2210,390],{},", so\ntheir ",[388,2213,282],{},[388,2215,351],{}," entries in this map, or in a ",[508,2218,2219],{"href":1055},"scope","\naround the host, are the only way in.",[384,2222,2223,540,2226,2229,2230,2232,2233,2235],{},[388,2224,2225],{},"BbTabsList",[388,2227,2228],{},"BbTabsPanels",", the pieces of a split tabs layout, take their\nown entries too. A piece's entry lands after the ",[388,2231,327],{}," one beside it, so a\ntheme written once for ",[388,2234,327],{}," covers both layouts.",[513,2237,2239],{"id":2238},"scopes",[435,2240,2241],{},"Give an area its own look",[384,2243,2244,2245,2248,2249,2251,2252,719],{},"Some apps have areas with different looks: a backoffice beside a member area,\nor one area per tenant. Give each area a map in ",[388,2246,2247],{},"ptScopes",", the same shape as\n",[388,2250,390],{},", and wrap the area in ",[388,2253,2254],{},"\u003CBbPtScope name>",[426,2256,2258],{"className":1963,"code":2257,"filename":1965,"language":1966,"meta":431,"style":431},"import { definePt } from 'bitboss-ui\u002Fvite';\n\nexport const ptScopes = {\n    webapp: definePt({\n        BbTextInput: { label: 'text-(--bb-text-muted)' },\n        BbButton: { root: 'rounded-full' },\n    }),\n    backoffice: definePt({ BbButton: { root: 'rounded-md' } }),\n};\n\n\u002F\u002F vite.config.ts: bitbossUi({ pt, ptScopes })\n\u002F\u002F nuxt.config.ts: bitboss: { pt, ptScopes }\n",[388,2259,2260,2272,2276,2290,2299,2309,2319,2324,2340,2345,2349,2354],{"__ignoreMap":431},[435,2261,2262,2264,2266,2268,2270],{"class":437,"line":141},[435,2263,1979],{"class":1978},[435,2265,1982],{"class":440},[435,2267,1985],{"class":1978},[435,2269,1988],{"class":457},[435,2271,1991],{"class":440},[435,2273,2274],{"class":437,"line":145},[435,2275,918],{"emptyLinePlaceholder":917},[435,2277,2278,2280,2282,2285,2287],{"class":437,"line":149},[435,2279,2000],{"class":1978},[435,2281,2003],{"class":1978},[435,2283,2284],{"class":450}," ptScopes",[435,2286,2009],{"class":1978},[435,2288,2289],{"class":440}," {\n",[435,2291,2292,2295,2297],{"class":437,"line":177},[435,2293,2294],{"class":440},"    webapp: ",[435,2296,1959],{"class":2012},[435,2298,2016],{"class":440},[435,2300,2301,2304,2307],{"class":437,"line":181},[435,2302,2303],{"class":440},"        BbTextInput: { label: ",[435,2305,2306],{"class":457},"'text-(--bb-text-muted)'",[435,2308,2027],{"class":440},[435,2310,2311,2314,2317],{"class":437,"line":185},[435,2312,2313],{"class":440},"        BbButton: { root: ",[435,2315,2316],{"class":457},"'rounded-full'",[435,2318,2027],{"class":440},[435,2320,2321],{"class":437,"line":225},[435,2322,2323],{"class":440},"    }),\n",[435,2325,2326,2329,2331,2334,2337],{"class":437,"line":229},[435,2327,2328],{"class":440},"    backoffice: ",[435,2330,1959],{"class":2012},[435,2332,2333],{"class":440},"({ BbButton: { root: ",[435,2335,2336],{"class":457},"'rounded-md'",[435,2338,2339],{"class":440}," } }),\n",[435,2341,2342],{"class":437,"line":233},[435,2343,2344],{"class":440},"};\n",[435,2346,2347],{"class":437,"line":237},[435,2348,918],{"emptyLinePlaceholder":917},[435,2350,2351],{"class":437,"line":241},[435,2352,2353],{"class":651},"\u002F\u002F vite.config.ts: bitbossUi({ pt, ptScopes })\n",[435,2355,2356],{"class":437,"line":1002},[435,2357,2358],{"class":651},"\u002F\u002F nuxt.config.ts: bitboss: { pt, ptScopes }\n",[426,2360,2363],{"className":428,"code":2361,"filename":2362,"language":430,"meta":431,"style":431},"\u003Ctemplate>\n    \u003CBbPtScope name=\"webapp\">\n        \u003Cslot \u002F>\n        \u003CBbHost \u002F>\n    \u003C\u002FBbPtScope>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { BbHost, BbPtScope } from 'bitboss-ui';\n\u003C\u002Fscript>\n","WebappLayout.vue",[388,2364,2365,2374,2392,2406,2415,2424,2432,2436,2456,2470],{"__ignoreMap":431},[435,2366,2367,2369,2372],{"class":437,"line":141},[435,2368,441],{"class":440},[435,2370,2371],{"class":444},"template",[435,2373,473],{"class":440},[435,2375,2376,2379,2382,2385,2387,2390],{"class":437,"line":145},[435,2377,2378],{"class":440},"    \u003C",[435,2380,2381],{"class":444},"BbPtScope",[435,2383,2384],{"class":450}," name",[435,2386,454],{"class":440},[435,2388,2389],{"class":457},"\"webapp\"",[435,2391,473],{"class":440},[435,2393,2394,2397,2400,2404],{"class":437,"line":149},[435,2395,2396],{"class":440},"        \u003C",[435,2398,2399],{"class":444},"slot",[435,2401,2403],{"class":2402},"sh5d0"," \u002F",[435,2405,473],{"class":440},[435,2407,2408,2410,2413],{"class":437,"line":177},[435,2409,2396],{"class":440},[435,2411,2412],{"class":444},"BbHost",[435,2414,669],{"class":440},[435,2416,2417,2420,2422],{"class":437,"line":181},[435,2418,2419],{"class":440},"    \u003C\u002F",[435,2421,2381],{"class":444},[435,2423,473],{"class":440},[435,2425,2426,2428,2430],{"class":437,"line":185},[435,2427,483],{"class":440},[435,2429,2371],{"class":444},[435,2431,473],{"class":440},[435,2433,2434],{"class":437,"line":225},[435,2435,918],{"emptyLinePlaceholder":917},[435,2437,2438,2440,2443,2446,2449,2451,2454],{"class":437,"line":229},[435,2439,441],{"class":440},[435,2441,2442],{"class":444},"script",[435,2444,2445],{"class":450}," setup",[435,2447,2448],{"class":450}," lang",[435,2450,454],{"class":440},[435,2452,2453],{"class":457},"\"ts\"",[435,2455,473],{"class":440},[435,2457,2458,2460,2463,2465,2468],{"class":437,"line":233},[435,2459,1979],{"class":1978},[435,2461,2462],{"class":440}," { BbHost, BbPtScope } ",[435,2464,1985],{"class":1978},[435,2466,2467],{"class":457}," 'bitboss-ui'",[435,2469,1991],{"class":440},[435,2471,2472,2474,2476],{"class":437,"line":237},[435,2473,483],{"class":440},[435,2475,2442],{"class":444},[435,2477,473],{"class":440},[622,2479,2480,2489,2498,2522,2532,2554],{},[625,2481,2482,696,2485,2488],{},[393,2483,2484],{},"It renders no element.",[388,2486,2487],{},"name"," is reactive: change it and the subtree\nrestyles.",[625,2490,2491,2494,2495,2497],{},[393,2492,2493],{},"Scopes add up."," An inner scope merges after the outer one and never hides\nit. An instance's own ",[388,2496,390],{}," still beats both.",[625,2499,2500,2503,2504,2507,2508,2511,2512,2515,2516,2518,2519,2521],{},[393,2501,2502],{},"The name is typed."," The plugin writes the scope names into\n",[388,2505,2506],{},"bitboss-ui.d.ts",", so ",[388,2509,2510],{},"name=\"webap\""," fails ",[388,2513,2514],{},"vue-tsc"," once the dev server or a\nbuild has run. Commit that file. With no ",[388,2517,2247],{}," configured, ",[388,2520,2487],{},"\naccepts nothing, and the type error says so.",[625,2523,2524,2527,2528,2531],{},[393,2525,2526],{},"It follows the component tree, not the DOM."," A dialog, popover or picker\nopened inside the scope uses it wherever it paints. A directive such as\n",[388,2529,2530],{},"v-bb-tooltip"," reads the scope around the component whose template it is\nwritten in. Put the scope in a layout, not in the same template.",[625,2533,2534,2537,2538,396,2540,407,2545,2550,2551,2553],{},[393,2535,2536],{},"Toasts and confirms paint where the host is mounted."," Mount one\n",[388,2539,2207],{},[508,2541,2543],{"href":2542},"\u002Fen\u002Fcomponents\u002Fbb-toast#setup",[388,2544,351],{},[508,2546,2548],{"href":2547},"\u002Fen\u002Fcomponents\u002Fbb-confirm#setup",[388,2549,282],{},") inside each area's layout,\nwithin its scope, and none at the app root. This holds only when every page\nrenders inside exactly one of those layouts: a page outside them has no host,\nand a confirm there resolves ",[388,2552,1459],{}," after a second. A confirm or toast fired\nwhile you switch areas renders in the next host.",[625,2555,2556,2559,2560,2567],{},[393,2557,2558],{},"A scope restyles parts, not tokens."," An area's colours and radius go on a\n",[508,2561,2563,2566],{"href":2562},"\u002Fen\u002Fguides\u002Fdesign-tokens#theming",[388,2564,2565],{},"bb-theme"," island",". Most areas want both.",[513,2569,2571],{"id":2570},"typing",[435,2572,2573],{},"Typing pt in script",[384,2575,2576,2577,2580,2581,2584],{},"The ",[388,2578,2579],{},"Pt*"," types are not exported. Use the component's own instead:\n",[388,2582,2583],{},"\u003CComponent>Props['pt']"," carries its parts, its states and its row type.",[384,2586,2587,2590,2591,2594,2595,2597],{},[393,2588,2589],{},"A preset or a per-item function"," takes ",[388,2592,2593],{},"satisfies",", which types ",[388,2596,1262],{}," and\nthe states and still catches a misspelt field:",[426,2599,2601],{"className":1963,"code":2600,"language":1966,"meta":431,"style":431},"import type { BbTableProps } from 'bitboss-ui';\n\ntype Invoice = { id: number; status: 'paid' | 'overdue' };\n\n\u002F\u002F Any table: leave the row type out.\n\u002F\u002F `BbTableProps\u003Cany>` turns the checks off.\nexport const compactTable = {\n    root: 'text-sm',\n    row: 'h-8',\n} satisfies BbTableProps['pt'];\n\nexport const invoiceTable = {\n    ...compactTable,\n    row: ({ item }) => item.status === 'overdue' && 'bg-red-50',\n} satisfies BbTableProps\u003CInvoice>['pt'];\n",[388,2602,2603,2619,2623,2663,2667,2672,2677,2690,2700,2710,2729,2733,2746,2754,2786],{"__ignoreMap":431},[435,2604,2605,2607,2610,2613,2615,2617],{"class":437,"line":141},[435,2606,1979],{"class":1978},[435,2608,2609],{"class":1978}," type",[435,2611,2612],{"class":440}," { BbTableProps } ",[435,2614,1985],{"class":1978},[435,2616,2467],{"class":457},[435,2618,1991],{"class":440},[435,2620,2621],{"class":437,"line":145},[435,2622,918],{"emptyLinePlaceholder":917},[435,2624,2625,2628,2631,2633,2636,2638,2640,2643,2646,2649,2651,2654,2657,2660],{"class":437,"line":149},[435,2626,2627],{"class":1978},"type",[435,2629,2630],{"class":2128}," Invoice",[435,2632,2009],{"class":1978},[435,2634,2635],{"class":440}," { ",[435,2637,1132],{"class":2128},[435,2639,719],{"class":1978},[435,2641,2642],{"class":450}," number",[435,2644,2645],{"class":440},"; ",[435,2647,2648],{"class":2128},"status",[435,2650,719],{"class":1978},[435,2652,2653],{"class":457}," 'paid'",[435,2655,2656],{"class":1978}," |",[435,2658,2659],{"class":457}," 'overdue'",[435,2661,2662],{"class":440}," };\n",[435,2664,2665],{"class":437,"line":177},[435,2666,918],{"emptyLinePlaceholder":917},[435,2668,2669],{"class":437,"line":181},[435,2670,2671],{"class":651},"\u002F\u002F Any table: leave the row type out.\n",[435,2673,2674],{"class":437,"line":185},[435,2675,2676],{"class":651},"\u002F\u002F `BbTableProps\u003Cany>` turns the checks off.\n",[435,2678,2679,2681,2683,2686,2688],{"class":437,"line":225},[435,2680,2000],{"class":1978},[435,2682,2003],{"class":1978},[435,2684,2685],{"class":450}," compactTable",[435,2687,2009],{"class":1978},[435,2689,2289],{"class":440},[435,2691,2692,2695,2698],{"class":437,"line":229},[435,2693,2694],{"class":440},"    root: ",[435,2696,2697],{"class":457},"'text-sm'",[435,2699,407],{"class":440},[435,2701,2702,2705,2708],{"class":437,"line":233},[435,2703,2704],{"class":440},"    row: ",[435,2706,2707],{"class":457},"'h-8'",[435,2709,407],{"class":440},[435,2711,2712,2715,2717,2720,2723,2726],{"class":437,"line":237},[435,2713,2714],{"class":440},"} ",[435,2716,2593],{"class":1978},[435,2718,2719],{"class":2128}," BbTableProps",[435,2721,2722],{"class":440},"[",[435,2724,2725],{"class":457},"'pt'",[435,2727,2728],{"class":440},"];\n",[435,2730,2731],{"class":437,"line":241},[435,2732,918],{"emptyLinePlaceholder":917},[435,2734,2735,2737,2739,2742,2744],{"class":437,"line":1002},[435,2736,2000],{"class":1978},[435,2738,2003],{"class":1978},[435,2740,2741],{"class":450}," invoiceTable",[435,2743,2009],{"class":1978},[435,2745,2289],{"class":440},[435,2747,2748,2751],{"class":437,"line":1008},[435,2749,2750],{"class":1978},"    ...",[435,2752,2753],{"class":440},"compactTable,\n",[435,2755,2756,2759,2762,2764,2767,2770,2773,2776,2778,2781,2784],{"class":437,"line":1014},[435,2757,2758],{"class":2012},"    row",[435,2760,2761],{"class":440},": ({ ",[435,2763,1262],{"class":2128},[435,2765,2766],{"class":440}," }) ",[435,2768,2769],{"class":1978},"=>",[435,2771,2772],{"class":440}," item.status ",[435,2774,2775],{"class":1978},"===",[435,2777,2659],{"class":457},[435,2779,2780],{"class":1978}," &&",[435,2782,2783],{"class":457}," 'bg-red-50'",[435,2785,407],{"class":440},[435,2787,2788,2790,2792,2794,2796,2799,2802,2804],{"class":437,"line":1020},[435,2789,2714],{"class":440},[435,2791,2593],{"class":1978},[435,2793,2719],{"class":2128},[435,2795,441],{"class":440},[435,2797,2798],{"class":2128},"Invoice",[435,2800,2801],{"class":440},">[",[435,2803,2725],{"class":457},[435,2805,2728],{"class":440},[384,2807,2808,2813,2814,2816],{},[393,2809,2810,2811],{},"A wrapper that forwards ",[388,2812,390],{}," types the prop with the wrapped component's\n",[388,2815,390],{},", so callers get its parts and its row type:",[426,2818,2820],{"className":428,"code":2819,"language":430,"meta":431,"style":431},"\u003Ctemplate>\n    \u003CBbSelect\n        v-model=\"model\"\n        item-text=\"name\"\n        item-value=\"id\"\n        :items=\"items\"\n        label=\"Member\"\n        :pt=\"pt\"\n    \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { BbSelect, type BbSelectProps } from 'bitboss-ui';\n\ntype Member = { id: number; name: string };\n\ndefineProps\u003C{ items: Member[]; pt?: BbSelectProps\u003CMember>['pt'] }>();\nconst model = defineModel\u003Cnumber | null>({ default: null });\n\u003C\u002Fscript>\n",[388,2821,2822,2830,2837,2851,2861,2871,2886,2896,2910,2915,2923,2927,2943,2961,2965,2993,2997,3034,3065],{"__ignoreMap":431},[435,2823,2824,2826,2828],{"class":437,"line":141},[435,2825,441],{"class":440},[435,2827,2371],{"class":444},[435,2829,473],{"class":440},[435,2831,2832,2834],{"class":437,"line":145},[435,2833,2378],{"class":440},[435,2835,2836],{"class":444},"BbSelect\n",[435,2838,2839,2842,2844,2846,2849],{"class":437,"line":149},[435,2840,2841],{"class":450},"        v-model",[435,2843,454],{"class":440},[435,2845,726],{"class":440},[435,2847,2848],{"class":440},"model",[435,2850,991],{"class":440},[435,2852,2853,2856,2858],{"class":437,"line":177},[435,2854,2855],{"class":450},"        item-text",[435,2857,454],{"class":440},[435,2859,2860],{"class":457},"\"name\"\n",[435,2862,2863,2866,2868],{"class":437,"line":181},[435,2864,2865],{"class":450},"        item-value",[435,2867,454],{"class":440},[435,2869,2870],{"class":457},"\"id\"\n",[435,2872,2873,2876,2878,2880,2882,2884],{"class":437,"line":185},[435,2874,2875],{"class":440},"        :",[435,2877,1524],{"class":450},[435,2879,454],{"class":440},[435,2881,726],{"class":440},[435,2883,1524],{"class":440},[435,2885,991],{"class":440},[435,2887,2888,2891,2893],{"class":437,"line":225},[435,2889,2890],{"class":450},"        label",[435,2892,454],{"class":440},[435,2894,2895],{"class":457},"\"Member\"\n",[435,2897,2898,2900,2902,2904,2906,2908],{"class":437,"line":229},[435,2899,2875],{"class":440},[435,2901,390],{"class":450},[435,2903,454],{"class":440},[435,2905,726],{"class":440},[435,2907,390],{"class":440},[435,2909,991],{"class":440},[435,2911,2912],{"class":437,"line":233},[435,2913,2914],{"class":440},"    \u002F>\n",[435,2916,2917,2919,2921],{"class":437,"line":237},[435,2918,483],{"class":440},[435,2920,2371],{"class":444},[435,2922,473],{"class":440},[435,2924,2925],{"class":437,"line":241},[435,2926,918],{"emptyLinePlaceholder":917},[435,2928,2929,2931,2933,2935,2937,2939,2941],{"class":437,"line":1002},[435,2930,441],{"class":440},[435,2932,2442],{"class":444},[435,2934,2445],{"class":450},[435,2936,2448],{"class":450},[435,2938,454],{"class":440},[435,2940,2453],{"class":457},[435,2942,473],{"class":440},[435,2944,2945,2947,2950,2952,2955,2957,2959],{"class":437,"line":1008},[435,2946,1979],{"class":1978},[435,2948,2949],{"class":440}," { BbSelect, ",[435,2951,2627],{"class":1978},[435,2953,2954],{"class":440}," BbSelectProps } ",[435,2956,1985],{"class":1978},[435,2958,2467],{"class":457},[435,2960,1991],{"class":440},[435,2962,2963],{"class":437,"line":1014},[435,2964,918],{"emptyLinePlaceholder":917},[435,2966,2967,2969,2972,2974,2976,2978,2980,2982,2984,2986,2988,2991],{"class":437,"line":1020},[435,2968,2627],{"class":1978},[435,2970,2971],{"class":2128}," Member",[435,2973,2009],{"class":1978},[435,2975,2635],{"class":440},[435,2977,1132],{"class":2128},[435,2979,719],{"class":1978},[435,2981,2642],{"class":450},[435,2983,2645],{"class":440},[435,2985,2487],{"class":2128},[435,2987,719],{"class":1978},[435,2989,2990],{"class":450}," string",[435,2992,2662],{"class":440},[435,2994,2995],{"class":437,"line":1025},[435,2996,918],{"emptyLinePlaceholder":917},[435,2998,2999,3002,3005,3007,3009,3011,3014,3016,3019,3022,3024,3027,3029,3031],{"class":437,"line":1030},[435,3000,3001],{"class":2012},"defineProps",[435,3003,3004],{"class":440},"\u003C{ ",[435,3006,1524],{"class":2128},[435,3008,719],{"class":1978},[435,3010,2971],{"class":2128},[435,3012,3013],{"class":440},"[]; ",[435,3015,390],{"class":2128},[435,3017,3018],{"class":1978},"?:",[435,3020,3021],{"class":2128}," BbSelectProps",[435,3023,441],{"class":440},[435,3025,3026],{"class":2128},"Member",[435,3028,2801],{"class":440},[435,3030,2725],{"class":457},[435,3032,3033],{"class":440},"] }>();\n",[435,3035,3036,3038,3041,3043,3046,3048,3051,3053,3056,3059,3062],{"class":437,"line":1036},[435,3037,596],{"class":1978},[435,3039,3040],{"class":450}," model",[435,3042,2009],{"class":1978},[435,3044,3045],{"class":2012}," defineModel",[435,3047,441],{"class":440},[435,3049,3050],{"class":450},"number",[435,3052,2656],{"class":1978},[435,3054,3055],{"class":450}," null",[435,3057,3058],{"class":440},">({ default: ",[435,3060,3061],{"class":450},"null",[435,3063,3064],{"class":440}," });\n",[435,3066,3068,3070,3072],{"class":437,"line":3067},19,[435,3069,483],{"class":440},[435,3071,2442],{"class":444},[435,3073,473],{"class":440},[384,3075,3076,3077,3080,3081,3083,3084,511],{},"The other wrapper rules are in\n",[508,3078,166],{"href":3079},"\u002Fen\u002Fguides\u002Foptions-and-items#wrapping",". A component that\nonly presets props, ",[388,3082,390],{}," included, needs no wrapper: see\n",[508,3085,183],{"href":130},[384,3087,3088,3091,3092,3094],{},[393,3089,3090],{},"A global map split across files"," wraps each fragment in ",[388,3093,1959],{}," where it\nis written, then spreads them. Fragments merge per component, so a component in\ntwo fragments keeps only the later one: give each component one home.",[426,3096,3098],{"className":1963,"code":3097,"language":1966,"meta":431,"style":431},"\u002F\u002F forms.pt.ts\nimport { definePt } from 'bitboss-ui\u002Fvite';\n\nexport const formsPt = definePt({\n    BbTextInput: { label: 'text-xs font-medium' },\n});\n\n\u002F\u002F tables.pt.ts\nimport { definePt } from 'bitboss-ui\u002Fvite';\n\nexport const tablesPt = definePt({ BbTable: { row: 'h-8' } });\n\n\u002F\u002F vite.config.ts\nbitbossUi({ pt: { ...formsPt, ...tablesPt } });\n",[388,3099,3100,3105,3117,3121,3136,3144,3148,3152,3157,3169,3173,3194,3198,3203],{"__ignoreMap":431},[435,3101,3102],{"class":437,"line":141},[435,3103,3104],{"class":651},"\u002F\u002F forms.pt.ts\n",[435,3106,3107,3109,3111,3113,3115],{"class":437,"line":145},[435,3108,1979],{"class":1978},[435,3110,1982],{"class":440},[435,3112,1985],{"class":1978},[435,3114,1988],{"class":457},[435,3116,1991],{"class":440},[435,3118,3119],{"class":437,"line":149},[435,3120,918],{"emptyLinePlaceholder":917},[435,3122,3123,3125,3127,3130,3132,3134],{"class":437,"line":177},[435,3124,2000],{"class":1978},[435,3126,2003],{"class":1978},[435,3128,3129],{"class":450}," formsPt",[435,3131,2009],{"class":1978},[435,3133,2013],{"class":2012},[435,3135,2016],{"class":440},[435,3137,3138,3140,3142],{"class":437,"line":181},[435,3139,2021],{"class":440},[435,3141,2024],{"class":457},[435,3143,2027],{"class":440},[435,3145,3146],{"class":437,"line":185},[435,3147,2064],{"class":440},[435,3149,3150],{"class":437,"line":225},[435,3151,918],{"emptyLinePlaceholder":917},[435,3153,3154],{"class":437,"line":229},[435,3155,3156],{"class":651},"\u002F\u002F tables.pt.ts\n",[435,3158,3159,3161,3163,3165,3167],{"class":437,"line":233},[435,3160,1979],{"class":1978},[435,3162,1982],{"class":440},[435,3164,1985],{"class":1978},[435,3166,1988],{"class":457},[435,3168,1991],{"class":440},[435,3170,3171],{"class":437,"line":237},[435,3172,918],{"emptyLinePlaceholder":917},[435,3174,3175,3177,3179,3182,3184,3186,3189,3191],{"class":437,"line":241},[435,3176,2000],{"class":1978},[435,3178,2003],{"class":1978},[435,3180,3181],{"class":450}," tablesPt",[435,3183,2009],{"class":1978},[435,3185,2013],{"class":2012},[435,3187,3188],{"class":440},"({ BbTable: { row: ",[435,3190,2707],{"class":457},[435,3192,3193],{"class":440}," } });\n",[435,3195,3196],{"class":437,"line":1002},[435,3197,918],{"emptyLinePlaceholder":917},[435,3199,3200],{"class":437,"line":1008},[435,3201,3202],{"class":651},"\u002F\u002F vite.config.ts\n",[435,3204,3205,3207,3210,3213,3216,3218],{"class":437,"line":1014},[435,3206,2135],{"class":2012},[435,3208,3209],{"class":440},"({ pt: { ",[435,3211,3212],{"class":1978},"...",[435,3214,3215],{"class":440},"formsPt, ",[435,3217,3212],{"class":1978},[435,3219,3220],{"class":440},"tablesPt } });\n",[513,3222,3224],{"id":3223},"deep",[435,3225,3226,3227,3230],{},"Migrating a ",[388,3228,3229],{},":deep()"," rule",[384,3232,3233,3234,3236,3237,540,3240,3243,3244,3247,3248,3250],{},"A ",[388,3235,3229],{}," rule on a library class keeps working. Part and state classes, such\nas ",[388,3238,3239],{},".bb-table__row",[388,3241,3242],{},".bb-table__row--highlighted",", change only with a\nmigration entry. Every other ",[388,3245,3246],{},".bb-*"," class is internal and can change in any\nrelease. A ",[388,3249,390],{}," part is also typed and linted, which no selector is. To move a\nrule onto a part:",[1321,3252,3253,3276,3282,3288],{},[625,3254,3255,696,3258,3261,3262,400,3264,1086,3266,3268,3269,3261,3272,3275],{},[393,3256,3257],{},"Find the part.",[388,3259,3260],{},".bb-field-input__box"," is ",[388,3263,406],{},[388,3265,3239],{},[388,3267,410],{},", and ",[388,3270,3271],{},".bb-listbox__option--selected",[388,3273,3274],{},"option:selected",". If there is\nno part, keep the rule: it targets structure the library does not promise.",[625,3277,3278,3281],{},[393,3279,3280],{},"Ask whether several places share it."," If they do, it is a variant or a\ntoken.",[625,3283,3284,3287],{},[393,3285,3286],{},"Give the part the utilities",", or a class of your own that keeps the rule.",[625,3289,3290],{},[393,3291,3292],{},"Replace a modifier selector with a state.",[426,3294,3296],{"className":428,"code":3295,"language":430,"meta":431,"style":431},"\u003C!-- Before -->\n\u003CBbTable class=\"orders\" :columns=\"columns\" :items=\"orders\" \u002F>\n\n\u003Cstyle scoped>\n.orders :deep(.bb-table__row--highlighted) {\n    background: color-mix(in oklab, var(--bb-info) 10%, transparent);\n}\n\u003C\u002Fstyle>\n\n\u003C!-- After -->\n\u003CBbTable\n    :columns=\"columns\"\n    :items=\"orders\"\n    pt:row:highlighted=\"bg-(--bb-info)\u002F10 hover:bg-(--bb-info)\u002F15\"\n\u002F>\n",[388,3297,3298,3303,3345,3349,3360,3373,3419,3424,3432,3436,3441,3448,3462,3476,3486],{"__ignoreMap":431},[435,3299,3300],{"class":437,"line":141},[435,3301,3302],{"class":651},"\u003C!-- Before -->\n",[435,3304,3305,3307,3309,3312,3314,3317,3319,3322,3324,3326,3328,3330,3332,3334,3336,3338,3341,3343],{"class":437,"line":145},[435,3306,441],{"class":440},[435,3308,363],{"class":444},[435,3310,3311],{"class":450}," class",[435,3313,454],{"class":440},[435,3315,3316],{"class":457},"\"orders\"",[435,3318,714],{"class":440},[435,3320,3321],{"class":450},"columns",[435,3323,454],{"class":440},[435,3325,726],{"class":440},[435,3327,3321],{"class":440},[435,3329,726],{"class":440},[435,3331,714],{"class":440},[435,3333,1524],{"class":450},[435,3335,454],{"class":440},[435,3337,726],{"class":440},[435,3339,3340],{"class":440},"orders",[435,3342,726],{"class":440},[435,3344,669],{"class":440},[435,3346,3347],{"class":437,"line":149},[435,3348,918],{"emptyLinePlaceholder":917},[435,3350,3351,3353,3355,3358],{"class":437,"line":177},[435,3352,441],{"class":440},[435,3354,854],{"class":444},[435,3356,3357],{"class":450}," scoped",[435,3359,473],{"class":440},[435,3361,3362,3365,3368,3370],{"class":437,"line":181},[435,3363,3364],{"class":450},".orders",[435,3366,3367],{"class":440}," :deep(",[435,3369,3242],{"class":450},[435,3371,3372],{"class":440},") {\n",[435,3374,3375,3378,3380,3383,3386,3389,3392,3394,3397,3399,3402,3405,3408,3411,3413,3416],{"class":437,"line":185},[435,3376,3377],{"class":450},"    background",[435,3379,735],{"class":440},[435,3381,3382],{"class":450},"color-mix",[435,3384,3385],{"class":440},"(",[435,3387,3388],{"class":2128},"in",[435,3390,3391],{"class":2128}," oklab",[435,3393,400],{"class":440},[435,3395,3396],{"class":450},"var",[435,3398,3385],{"class":440},[435,3400,3401],{"class":2128},"--bb-info",[435,3403,3404],{"class":440},") ",[435,3406,3407],{"class":450},"10",[435,3409,3410],{"class":1978},"%",[435,3412,400],{"class":440},[435,3414,3415],{"class":450},"transparent",[435,3417,3418],{"class":440},");\n",[435,3420,3421],{"class":437,"line":225},[435,3422,3423],{"class":440},"}\n",[435,3425,3426,3428,3430],{"class":437,"line":229},[435,3427,483],{"class":440},[435,3429,854],{"class":444},[435,3431,473],{"class":440},[435,3433,3434],{"class":437,"line":233},[435,3435,918],{"emptyLinePlaceholder":917},[435,3437,3438],{"class":437,"line":237},[435,3439,3440],{"class":651},"\u003C!-- After -->\n",[435,3442,3443,3445],{"class":437,"line":241},[435,3444,441],{"class":440},[435,3446,3447],{"class":444},"BbTable\n",[435,3449,3450,3452,3454,3456,3458,3460],{"class":437,"line":1002},[435,3451,959],{"class":440},[435,3453,3321],{"class":450},[435,3455,454],{"class":440},[435,3457,726],{"class":440},[435,3459,3321],{"class":440},[435,3461,991],{"class":440},[435,3463,3464,3466,3468,3470,3472,3474],{"class":437,"line":1008},[435,3465,959],{"class":440},[435,3467,1524],{"class":450},[435,3469,454],{"class":440},[435,3471,726],{"class":440},[435,3473,3340],{"class":440},[435,3475,991],{"class":440},[435,3477,3478,3481,3483],{"class":437,"line":1014},[435,3479,3480],{"class":450},"    pt:row:highlighted",[435,3482,454],{"class":440},[435,3484,3485],{"class":457},"\"bg-(--bb-info)\u002F10 hover:bg-(--bb-info)\u002F15\"\n",[435,3487,3488],{"class":437,"line":1020},[435,3489,796],{"class":440},[384,3491,3492,3493,3496,3497,1831,3500,3503,3504,3507],{},"Scoped styles do not reach a forwarded part: ",[388,3494,3495],{},"pt:row=\"order-row\""," with\n",[388,3498,3499],{},".order-row",[388,3501,3502],{},"\u003Cstyle scoped>"," matches nothing. Write ",[388,3505,3506],{},":deep(.order-row)"," or\nuse an unscoped block. The class is yours, so no library rename can break it.",[384,3509,3510,3516,3517,3519],{},[508,3511,3513],{"href":3512},"\u002Fen\u002Fguides\u002Fai-agents#check",[388,3514,3515],{},"npx bitboss-ui check"," reads your stylesheets and\nflags a selector on a ",[388,3518,3246],{}," class the library no longer renders, with the part\nto use instead.",[854,3521,3522],{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sh5d0, html code.shiki .sh5d0{--shiki-default:#6E011A;--shiki-default-font-style:italic;--shiki-dark:#FFB1AF;--shiki-dark-font-style:italic}",{"title":431,"searchDepth":149,"depth":149,"links":3524},[3525,3526,3527,3528,3529,3530,3531,3532,3533,3534],{"id":515,"depth":145,"text":518},{"id":608,"depth":145,"text":611},{"id":880,"depth":145,"text":883},{"id":1301,"depth":145,"text":1304},{"id":1504,"depth":145,"text":1507},{"id":1730,"depth":145,"text":1733},{"id":1947,"depth":145,"text":1950},{"id":2238,"depth":145,"text":2241},{"id":2570,"depth":145,"text":2573},{"id":3223,"depth":145,"text":3535},"Migrating a :deep() rule","Reach a part inside any component, such as its icon, its field box or a table row, with classes, styles or attributes.","md",{},[3540,3541,3542,3543,3544,3545,3546,3547,3548,3549],{"id":515,"title":518},{"id":608,"title":611},{"id":880,"title":883},{"id":1301,"title":1304},{"id":1504,"title":1507},{"id":1730,"title":1733},{"id":1947,"title":1950},{"id":2238,"title":2241},{"id":2570,"title":2573},{"id":3223,"title":3535},{"title":160,"description":3536},"guides\u002Fpassthrough","MChaGkzZJOf0-QXJuAY4Sm9IaSulGxCCM_Y5hxpk0lI",1793055150632]