[{"data":1,"prerenderedAt":1281},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fguides\u002Fdesign-language":353},{"\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-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\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-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-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\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\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":354,"title":143,"body":355,"component":352,"description":1267,"extension":1268,"group":137,"meta":1269,"navigation":1270,"order":135,"path":144,"sections":1271,"seo":1278,"stem":1279,"__hash__":1280},"docs_en\u002Fguides\u002Fdesign-language.md",{"type":356,"value":357,"toc":1259},"minimark",[358,376,384,454,457,486,492,495,509,525,534,540,543,665,668,745,761,767,773,776,797,800,842,850,856,859,961,981,987,1026,1029,1065,1077,1080,1233,1255],[359,360,361,362,366,367,370,371,375],"p",{},"This page is about the CSS you write ",[363,364,365],"em",{},"next to"," the components.\n",[368,369,140],"a",{"href":106}," is the architecture underneath it. This\nis the part you apply while building a screen. If you do not have a theme block\nyet, generate one in the ",[368,372,374],{"href":373},"\u002Fen\u002Ftheme-builder","theme builder"," before styling the\npage around it.",[377,378,380],"h2",{"id":379},"rules",[381,382,383],"span",{},"Five hard rules",[385,386,387,400,410,428,444],"ol",{},[388,389,390,394,395,399],"li",{},[391,392,393],"strong",{},"Never hardcode a colour"," in the CSS around the components. Use the\n",[396,397,398],"code",{},"--bb-*"," properties and your surfaces follow the theme and dark mode.",[388,401,402,405,406,409],{},[391,403,404],{},"Never override component internals",", the ",[396,407,408],{},".bb-*__*"," element classes, from\nyour own code. Restyle through tokens, variants or documented props.",[388,411,412,415,416,419,420,423,424,427],{},[391,413,414],{},"One primary action per view region",". Everything else is ",[396,417,418],{},"secondary",",\n",[396,421,422],{},"outline"," or ",[396,425,426],{},"ghost",".",[388,429,430,437,438,443],{},[391,431,432,433,436],{},"Keep ",[396,434,435],{},"destructive"," for irreversible actions",", and send a destructive flow\nthrough ",[368,439,440],{"href":30},[396,441,442],{},"useConfirm"," first.",[388,445,446,449,450,453],{},[391,447,448],{},"Respect the radius",". Use ",[396,451,452],{},"var(--bb-radius)"," for any container of your own\nthat sits next to a component. Do not invent corner radii.",[359,455,456],{},"Rule 2 costs the most when you break it, because nothing tells you. Treat\neverything inside a component as private API.",[359,458,459,460,464,465,468,469,472,473,477,478,481,482,485],{},"Some components are built to be extended visually, and each one names its\nextension point on its own page. ",[368,461,462],{"href":98},[396,463,305],{}," has you draw\nconnector lines anchored to its ",[396,466,467],{},"--indent"," and ",[396,470,471],{},"--gap",".\n",[368,474,475],{"href":82},[396,476,302],{}," exposes ",[396,479,480],{},"--list-h",". Read the component's page\nbefore you write any CSS that mentions a ",[396,483,484],{},".bb-"," class.",[377,487,489],{"id":488},"lanes",[381,490,491],{},"Three lanes",[359,493,494],{},"In order of preference. Most work never leaves the first two.",[359,496,497,500,501,504,505,508],{},[391,498,499],{},"Component look, use props",". Pick a variant, a ",[396,502,503],{},"size",", ",[396,506,507],{},"compact",". Never write\nCSS to make a component look different.",[359,510,511,514,515,504,518,504,521,524],{},[391,512,513],{},"Page layout and spacing, use utilities"," on your own wrapper elements:\n",[396,516,517],{},"flex items-end gap-3",[396,519,520],{},"grid gap-6",[396,522,523],{},"max-w-3xl",". Components size themselves.\nYou only place them.",[359,526,527,533],{},[391,528,529,530,532],{},"Genuinely custom visuals, use ",[396,531,398],{}," tokens",". The few rules left over are\nthings like a panel of your own or a status dot. Build them from theme tokens and\nthey follow theming and dark mode with nothing extra written.",[377,535,537],{"id":536},"variants",[381,538,539],{},"The variant vocabulary",[359,541,542],{},"Variant names are typed per family, so an unregistered name is a compile error\nrather than an unstyled element.",[544,545,546,559],"table",{},[547,548,549],"thead",{},[550,551,552,556],"tr",{},[553,554,555],"th",{},"Family",[553,557,558],{},"Built-in variants",[560,561,562,593,611,628,652],"tbody",{},[550,563,564,572],{},[565,566,567,569,570],"td",{},[396,568,185],{}," \u002F ",[396,571,272],{},[565,573,574,577,578,577,580,577,582,577,584,577,586,589,590],{},[396,575,576],{},"primary"," ",[396,579,418],{},[396,581,422],{},[396,583,426],{},[396,585,435],{},[396,587,588],{},"link",", plus ",[396,591,592],{},"none",[550,594,595,599],{},[565,596,597],{},[396,598,314],{},[565,600,601,577,603,577,605,577,607,577,609],{},[396,602,576],{},[396,604,418],{},[396,606,422],{},[396,608,426],{},[396,610,435],{},[550,612,613,617],{},[565,614,615],{},[396,616,311],{},[565,618,619,577,621,577,623,577,625],{},[396,620,576],{},[396,622,422],{},[396,624,435],{},[396,626,627],{},"warning",[550,629,630,637],{},[565,631,632,569,634],{},[396,633,326],{},[396,635,636],{},"useToast",[565,638,639,577,642,577,645,577,648,577,650],{},[396,640,641],{},"default",[396,643,644],{},"success",[396,646,647],{},"info",[396,649,627],{},[396,651,435],{},[550,653,654,659],{},[565,655,656,658],{},[396,657,260],{},", dropdown items, tooltips",[565,660,661,577,663],{},[396,662,641],{},[396,664,435],{},[359,666,667],{},"What the shared names mean:",[544,669,670,680],{},[547,671,672],{},[550,673,674,677],{},[553,675,676],{},"Variant",[553,678,679],{},"Use for",[560,681,682,691,700,709,718,727,736],{},[550,683,684,688],{},[565,685,686],{},[396,687,576],{},[565,689,690],{},"The single main action of a view region",[550,692,693,697],{},[565,694,695],{},[396,696,418],{},[565,698,699],{},"Supporting actions",[550,701,702,706],{},[565,703,704],{},[396,705,422],{},[565,707,708],{},"Neutral actions on busy surfaces",[550,710,711,715],{},[565,712,713],{},[396,714,426],{},[565,716,717],{},"Low-emphasis, inline or icon-only actions",[550,719,720,724],{},[565,721,722],{},[396,723,435],{},[565,725,726],{},"Irreversible actions, confirm first",[550,728,729,733],{},[565,730,731],{},[396,732,588],{},[565,734,735],{},"Navigation disguised as text; buttons only",[550,737,738,742],{},[565,739,740],{},[396,741,592],{},[565,743,744],{},"Unstyled escape hatch. Avoid",[359,746,747,748,750,751,468,753,755,756,468,758,760],{},"The sets differ per family on purpose. ",[396,749,326],{}," carries ",[396,752,644],{},[396,754,647],{},"\nbecause transient feedback is where they belong. ",[396,757,185],{},[396,759,314],{}," do not,\nwhich is what the last section is about.",[377,762,764],{"id":763},"color",[381,765,766],{},"Using colour",[359,768,769,772],{},[391,770,771],{},"Reach for colour"," more than the monochrome default suggests, and make it mean\nsomething. A calm, mostly neutral surface with a few deliberate spots of colour\nreads as confident. Colour sprinkled for decoration reads as noise.",[359,774,775],{},"Add colour for one of three reasons, never for prettiness:",[777,778,779,785,791],"ul",{},[388,780,781,784],{},[391,782,783],{},"Semantic status",". A build passed, a payment failed, a quota is low.",[388,786,787,790],{},[391,788,789],{},"State",". Selected, active, dirty, pending, just changed. Colour is a fast,\npre-verbal \"this updated\".",[388,792,793,796],{},[391,794,795],{},"Telling apart a small, closed set",". A few statuses or priorities the eye\nshould separate at a glance. Keep the set small and fixed; a per-row rainbow is\nnoise, not signal.",[359,798,799],{},"Then keep it soft:",[777,801,802,822,836],{},[388,803,804,807,808,419,811,468,814,817,818,821],{},[391,805,806],{},"Leave the chrome neutral",". Hover, pressed and focus use ",[396,809,810],{},"--bb-hover",[396,812,813],{},"--bb-pressed",[396,815,816],{},"--bb-ring",", and selection uses the primary tint. Put\nsemantic colour on the ",[391,819,820],{},"content",": a status dot, a soft badge, a tinted alert.\nThat is what keeps colour from feeling jarring.",[388,823,824,827,828,831,832,835],{},[391,825,826],{},"Prefer soft tints to saturated fills"," on anything bigger than a dot. The\nlibrary's own recipe is ",[396,829,830],{},"color-mix(in oklab, \u003Chue> 10–15%, var(--bb-panel))","\nfor the fill, with the hue itself as the text. Mixing toward ",[396,833,834],{},"--bb-panel"," keeps\nit theme- and dark-mode-aware. Small dots may be saturated.",[388,837,838,841],{},[391,839,840],{},"One primary action per region still holds",". Semantic colour is not a licence\nfor five loud buttons.",[627,843,844],{},[359,845,846,849],{},[391,847,848],{},"Never use colour as the only signal",". Pair it with text or an icon. Colour\nalone fails colour-blind users, and this is the rule that turns a design review\ninto an accessibility bug.",[377,851,853],{"id":852},"semantic",[381,854,855],{},"What already carries status",[359,857,858],{},"Reach for these before you build anything.",[544,860,861,871],{},[547,862,863],{},[550,864,865,868],{},[553,866,867],{},"Need",[553,869,870],{},"Reach for",[560,872,873,895,914,928,946],{},[550,874,875,878],{},[565,876,877],{},"A status marker next to a label or row",[565,879,880,884,885,504,887,504,889,504,891,504,893],{},[368,881,882],{"href":48},[396,883,317],{}," — ",[396,886,641],{},[396,888,644],{},[396,890,647],{},[396,892,627],{},[396,894,435],{},[550,896,897,900],{},[565,898,899],{},"A persistent message",[565,901,902,884,906,504,908,504,910,504,912],{},[368,903,904],{"href":6},[396,905,311],{},[396,907,576],{},[396,909,422],{},[396,911,627],{},[396,913,435],{},[550,915,916,919],{},[565,917,918],{},"Transient feedback",[565,920,921,468,925,927],{},[368,922,923],{"href":94},[396,924,326],{},[396,926,636],{}," — the full status set",[550,929,930,933],{},[565,931,932],{},"A removable or error tag",[565,934,935,577,939,941,942,423,944],{},[368,936,937],{"href":12},[396,938,314],{},[396,940,435],{},"; neutral tags use ",[396,943,418],{},[396,945,422],{},[550,947,948,951],{},[565,949,950],{},"A field that needs attention but is not invalid",[565,952,953,954,468,957,960],{},"any form control's ",[396,955,956],{},"warnings",[396,958,959],{},"hasWarnings"," props",[359,962,963,964,966,967,969,970,468,973,976,977,980],{},"The warning input state has no equivalent elsewhere, so read that last row twice.\nEvery form control takes ",[396,965,956],{},", the messages, and ",[396,968,959],{},", which forces\nthe chrome. They mirror ",[396,971,972],{},"errors",[396,974,975],{},"hasErrors"," exactly, and while the messages\nshow they are referenced from the control's ",[396,978,979],{},"aria-describedby",". Set both and the\nerrors win: the warnings never appear.",[377,982,984],{"id":983},"custom-variant",[381,985,986],{},"Registering your own",[359,988,989,468,993,997,998,577,1001,504,1003,423,1005,1007,1008,423,1011,1014,1015,468,1018,1021,1022,1025],{},[368,990,991],{"href":18},[396,992,185],{},[368,994,995],{"href":12},[396,996,314],{},"\nship ",[391,999,1000],{},"no",[396,1002,644],{},[396,1004,647],{},[396,1006,627],{}," variants, and there is no\n",[396,1009,1010],{},"--bb-success",[396,1012,1013],{},"--bb-info"," token. ",[396,1016,1017],{},"--bb-warn",[396,1019,1020],{},"--bb-text-warn"," colour the\nwarning ",[363,1023,1024],{},"input state"," and nothing else. They are not a variant vocabulary.",[359,1027,1028],{},"A first-class semantic set was considered and rejected. shadcn carries no such\nvocabulary, and neither does this library.",[359,1030,1031,1034,1035,1038,1039,504,1042,504,1045,419,1048,504,1051,504,1054,1057,1058,1061,1062,427],{},[391,1032,1033],{},"\"Locked\" means typed, not closed",". The registries are open by design, so each\napp owns its own tones. Register the name through the Vite or Nuxt plugin, then\nstyle ",[396,1036,1037],{},".bb-button--\u003Cname>"," in a project stylesheet kept apart from the library\ndefaults. The registries are ",[396,1040,1041],{},"buttonVariants",[396,1043,1044],{},"badgeVariants",[396,1046,1047],{},"alertVariants",[396,1049,1050],{},"confirmVariants",[396,1052,1053],{},"dropdownItemVariants",[396,1055,1056],{},"tooltipVariants"," and\n",[396,1059,1060],{},"toastVariants",". The state recipe is in\n",[368,1063,140],{"href":1064},"\u002Fen\u002Fguides\u002Fdesign-tokens#ladder",[627,1066,1067],{},[359,1068,1069,1070,1073,1074,1076],{},"Do both halves. A registered name with no CSS is an unstyled pill, and CSS with\nno registration fails ",[396,1071,1072],{},"vue-tsc",". Do not settle for ",[396,1075,418],{}," because \"the\npalette isn't available\" either: that drops the design intent in silence, and\nthree statuses you must tell apart at a glance become three grey pills. The\nplugin option and one stylesheet block are the whole change.",[359,1078,1079],{},"The soft treatment to follow, one accent per status:",[1081,1082,1087],"pre",{"className":1083,"code":1084,"language":1085,"meta":1086,"style":1086},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-badge--success {\n    --accent: oklch(0.65 0.15 150);\n    background: color-mix(in oklab, var(--accent) 12%, var(--bb-panel));\n    color: var(--accent);\n    border-color: color-mix(in oklab, var(--accent) 25%, transparent);\n}\n","css","",[396,1088,1089,1100,1127,1176,1191,1228],{"__ignoreMap":1086},[381,1090,1092,1096],{"class":1091,"line":131},"line",[381,1093,1095],{"class":1094},"s-5SL",".bb-badge--success",[381,1097,1099],{"class":1098},"suds8"," {\n",[381,1101,1102,1106,1109,1112,1115,1118,1121,1124],{"class":1091,"line":135},[381,1103,1105],{"class":1104},"soyes","    --accent",[381,1107,1108],{"class":1098},": ",[381,1110,1111],{"class":1094},"oklch",[381,1113,1114],{"class":1098},"(",[381,1116,1117],{"class":1094},"0.65",[381,1119,1120],{"class":1094}," 0.15",[381,1122,1123],{"class":1094}," 150",[381,1125,1126],{"class":1098},");\n",[381,1128,1129,1132,1134,1137,1139,1142,1145,1147,1150,1152,1155,1158,1161,1165,1167,1169,1171,1173],{"class":1091,"line":157},[381,1130,1131],{"class":1094},"    background",[381,1133,1108],{"class":1098},[381,1135,1136],{"class":1094},"color-mix",[381,1138,1114],{"class":1098},[381,1140,1141],{"class":1104},"in",[381,1143,1144],{"class":1104}," oklab",[381,1146,504],{"class":1098},[381,1148,1149],{"class":1094},"var",[381,1151,1114],{"class":1098},[381,1153,1154],{"class":1104},"--accent",[381,1156,1157],{"class":1098},") ",[381,1159,1160],{"class":1094},"12",[381,1162,1164],{"class":1163},"sHUrx","%",[381,1166,504],{"class":1098},[381,1168,1149],{"class":1094},[381,1170,1114],{"class":1098},[381,1172,834],{"class":1104},[381,1174,1175],{"class":1098},"));\n",[381,1177,1178,1181,1183,1185,1187,1189],{"class":1091,"line":161},[381,1179,1180],{"class":1094},"    color",[381,1182,1108],{"class":1098},[381,1184,1149],{"class":1094},[381,1186,1114],{"class":1098},[381,1188,1154],{"class":1104},[381,1190,1126],{"class":1098},[381,1192,1193,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1216,1219,1221,1223,1226],{"class":1091,"line":165},[381,1194,1195],{"class":1094},"    border-color",[381,1197,1108],{"class":1098},[381,1199,1136],{"class":1094},[381,1201,1114],{"class":1098},[381,1203,1141],{"class":1104},[381,1205,1144],{"class":1104},[381,1207,504],{"class":1098},[381,1209,1149],{"class":1094},[381,1211,1114],{"class":1098},[381,1213,1154],{"class":1104},[381,1215,1157],{"class":1098},[381,1217,1218],{"class":1094},"25",[381,1220,1164],{"class":1163},[381,1222,504],{"class":1098},[381,1224,1225],{"class":1094},"transparent",[381,1227,1126],{"class":1098},[381,1229,1230],{"class":1091,"line":199},[381,1231,1232],{"class":1098},"}\n",[359,1234,1235,1236,1239,1240,1243,1244,1247,1248,1251,1252,1254],{},"The percentages come from the emphasis ladder, so a variant you register behaves\nlike one the library shipped. ",[396,1237,1238],{},"12%"," sits between the resting ",[396,1241,1242],{},"8%"," and hover ",[396,1245,1246],{},"15%","\nstops, and ",[396,1249,1250],{},"25%"," is the tinted-border stop. Mixing toward ",[396,1253,834],{}," rather\nthan a hex is what carries it through the dark theme without a second rule.",[1256,1257,1258],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html .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":1086,"searchDepth":157,"depth":157,"links":1260},[1261,1262,1263,1264,1265,1266],{"id":379,"depth":135,"text":383},{"id":488,"depth":135,"text":491},{"id":536,"depth":135,"text":539},{"id":763,"depth":135,"text":766},{"id":852,"depth":135,"text":855},{"id":983,"depth":135,"text":986},"Style the screen around the components so what you build looks like part of the same product.","md",{},true,[1272,1273,1274,1275,1276,1277],{"id":379,"title":383},{"id":488,"title":491},{"id":536,"title":539},{"id":763,"title":766},{"id":852,"title":855},{"id":983,"title":986},{"title":143,"description":1267},"guides\u002Fdesign-language","1c4DkSSfK-CLl-P79r_kyiGVEVsDOXqxsbcu4Mgsfvo",1790005167841]