[{"data":1,"prerenderedAt":2038},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Fdesign-language":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":157,"body":380,"component":377,"description":2024,"extension":2025,"group":151,"meta":2026,"navigation":1713,"order":145,"path":158,"sections":2027,"seo":2035,"stem":2036,"__hash__":2037},"docs_en\u002Fguides\u002Fdesign-language.md",{"type":381,"value":382,"toc":2015},"minimark",[383,401,409,485,509,555,583,589,592,606,622,639,671,680,686,689,865,871,875,878,961,977,983,1008,1048,1059,1065,1071,1074,1094,1097,1139,1147,1153,1156,1258,1278,1284,1319,1325,1331,1424,1458,1470,1473,1476,1479,1555,1561,1989,2011],[384,385,386,387,391,392,395,396,400],"p",{},"This page is about the CSS you write ",[388,389,390],"em",{},"next to"," the components.\n",[393,394,154],"a",{"href":112}," 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 ",[393,397,399],{"href":398},"\u002Fen\u002Ftheme-builder","theme builder"," before styling the\npage around it.",[402,403,405],"h2",{"id":404},"rules",[406,407,408],"span",{},"Rules for CSS next to the components",[410,411,412,425,441,459,475],"ol",{},[413,414,415,419,420,424],"li",{},[416,417,418],"strong",{},"Never hardcode a colour"," in the CSS around the components. Use the\n",[421,422,423],"code",{},"--bb-*"," properties and your surfaces follow the theme and dark mode.",[413,426,427,430,431,436,437,440],{},[416,428,429],{},"Treat an override on an inner class as a last resort",". Reach for a\nvariant, then a token, then ",[393,432,433],{"href":128},[421,434,435],{},"pt",",\nand only then CSS on a ",[421,438,439],{},".bb-*__*"," class.",[413,442,443,446,447,450,451,454,455,458],{},[416,444,445],{},"One primary action per view region",". Everything else is ",[421,448,449],{},"secondary",",\n",[421,452,453],{},"outline"," or ",[421,456,457],{},"ghost",".",[413,460,461,468,469,474],{},[416,462,463,464,467],{},"Keep ",[421,465,466],{},"destructive"," for irreversible actions",", and send a destructive flow\nthrough ",[393,470,471],{"href":32},[421,472,473],{},"useConfirm"," first.",[413,476,477,480,481,484],{},[416,478,479],{},"Respect the radius",". Use ",[421,482,483],{},"var(--bb-radius)"," for any container of your own\nthat sits next to a component. Do not invent corner radii.",[384,486,487,488,491,492,494,495,498,499,506,507,458],{},"Rule 2 is about what survives an upgrade. An inner class such as\n",[421,489,490],{},".bb-table-header__resizer"," may change in any release without a rename table,\nso an override on it is yours to maintain. Keep those in one stylesheet, each\nwith a comment saying why ",[421,493,435],{}," was not enough. A ",[421,496,497],{},":deep()"," rule in a scoped\nstyle counts too; ",[393,500,502,503,505],{"href":501},"\u002Fen\u002Fguides\u002Fpassthrough#deep","Migrating a ",[421,504,497],{}," rule","\nshows how to move one to ",[421,508,435],{},[510,511,512,528],"ul",{},[413,513,514,517,518,520,521,450,524,527],{},[416,515,516],{},"Semver covers"," tokens, variants, props and ",[421,519,435],{}," parts, plus a component's\nroot class and its documented modifiers (",[421,522,523],{},".bb-badge",[421,525,526],{},".bb-button--destructive",").",[413,529,530,536,537,540,541,543,544,547,548,550,551,554],{},[416,531,532,535],{},[421,533,534],{},"npx bitboss-ui check"," reads your stylesheets too",". It flags a selector on\na ",[421,538,539],{},".bb-*"," class the library does not render and names the real one. It also\nflags a token nothing reads, such as a retired ",[421,542,423],{}," name or ",[421,545,546],{},"--color"," on\n",[421,549,523],{},". After an upgrade, ",[421,552,553],{},"npx bitboss-ui changelog --since \u003Cversion>","\nlists what moved.",[384,556,557,558,562,563,566,567,570,571,575,576,579,580,440],{},"Some components are built to be extended visually, and each one names its\nextension point on its own page. ",[393,559,560],{"href":102},[421,561,330],{}," has you draw\nconnector lines anchored to its ",[421,564,565],{},"--indent"," and ",[421,568,569],{},"--gap",".\n",[393,572,573],{"href":86},[421,574,327],{}," exposes ",[421,577,578],{},"--list-h",". Read the component's page\nbefore you write any CSS that mentions a ",[421,581,582],{},".bb-",[402,584,586],{"id":585},"lanes",[406,587,588],{},"Four lanes",[384,590,591],{},"In order of preference. Most work never leaves the first two.",[384,593,594,597,598,601,602,605],{},[416,595,596],{},"Component look, use props",". Pick a variant, a ",[421,599,600],{},"size",", ",[421,603,604],{},"compact",". Do not write\nCSS to make a component look like something a variant already does.",[384,607,608,611,612,601,615,601,618,621],{},[416,609,610],{},"Page layout and spacing, use utilities"," on your own wrapper elements:\n",[421,613,614],{},"flex items-end gap-3",[421,616,617],{},"grid gap-6",[421,619,620],{},"max-w-3xl",". Components size themselves.\nYou only place them. On a touch screen the small controls already grow their tap\narea to 44px: close buttons, group rows, rating stars and colour swatches. Rows\nand stars spread a little to fit. Do not pad them yourself.",[384,623,624,625,628,629,631,632,635,636,458],{},"A utility class on a component that does nothing, such as ",[421,626,627],{},"px-6"," on a\n",[421,630,205],{},", is a layer problem, not a token problem. Tailwind v4 needs the\n",[421,633,634],{},"cssLayers"," plugin option; see ",[393,637,139],{"href":638},"\u002Fen\u002Fguides\u002Finstallation#runtime",[384,640,641,644,645,648,649,652,653,601,656,652,658,661,662,666,667,670],{},[416,642,643],{},"Retuning one component, set its own tokens",". Every component declares short\n",[421,646,647],{},"--*"," tokens: ",[421,650,651],{},"--cell-h"," on ",[421,654,655],{},".bb-table",[421,657,565],{},[421,659,660],{},".bb-tree",". Set them on\nthe element that declares them, for one instance or a whole scope.\n",[393,663,665],{"href":664},"\u002Fen\u002Fguides\u002Fdesign-tokens#component-tokens","Overriding a component token"," has the\nrules. A missing ",[421,668,669],{},"--bb-table-row-h"," is this lane telling you where to look, not\na reason for an inner-class override.",[384,672,673,679],{},[416,674,675,676,678],{},"Genuinely custom visuals, use ",[421,677,423],{}," 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.",[402,681,683],{"id":682},"variants",[406,684,685],{},"The variant vocabulary",[384,687,688],{},"Variant names are typed per family, so an unregistered name is a compile error\nrather than an unstyled element.",[690,691,692,705],"table",{},[693,694,695],"thead",{},[696,697,698,702],"tr",{},[699,700,701],"th",{},"Family",[699,703,704],{},"Built-in variants",[706,707,708,739,757,774,795,816,829,849],"tbody",{},[696,709,710,718],{},[711,712,713,715,716],"td",{},[421,714,205],{}," \u002F ",[421,717,294],{},[711,719,720,723,724,723,726,723,728,723,730,723,732,735,736],{},[421,721,722],{},"primary"," ",[421,725,449],{},[421,727,453],{},[421,729,457],{},[421,731,466],{},[421,733,734],{},"link",", plus ",[421,737,738],{},"none",[696,740,741,745],{},[711,742,743],{},[421,744,339],{},[711,746,747,723,749,723,751,723,753,735,755],{},[421,748,722],{},[421,750,449],{},[421,752,453],{},[421,754,466],{},[421,756,738],{},[696,758,759,763],{},[711,760,761],{},[421,762,336],{},[711,764,765,723,767,723,769,723,771],{},[421,766,722],{},[421,768,453],{},[421,770,466],{},[421,772,773],{},"warning",[696,775,776,780],{},[711,777,778],{},[421,779,342],{},[711,781,782,723,785,723,788,723,791,723,793],{},[421,783,784],{},"default",[421,786,787],{},"success",[421,789,790],{},"info",[421,792,773],{},[421,794,466],{},[696,796,797,804],{},[711,798,799,715,801],{},[421,800,351],{},[421,802,803],{},"useToast",[711,805,806,723,808,723,810,723,812,723,814],{},[421,807,784],{},[421,809,787],{},[421,811,790],{},[421,813,773],{},[421,815,466],{},[696,817,818,823],{},[711,819,820,822],{},[421,821,282],{},", dropdown items, tooltips",[711,824,825,723,827],{},[421,826,784],{},[421,828,466],{},[696,830,831,839],{},[711,832,833,834,601,836,838],{},"Text-like form controls: ",[421,835,235],{},[421,837,261],{}," and the rest",[711,840,841,723,843,723,845,735,847],{},[421,842,453],{},[421,844,449],{},[421,846,457],{},[421,848,738],{},[696,850,851,855],{},[711,852,853],{},[421,854,327],{},[711,856,857,723,860,723,863],{},[421,858,859],{},"pill",[421,861,862],{},"line",[421,864,738],{},[384,866,867,868,870],{},"The gallery renders every built-in name live, except ",[421,869,738],{},", which draws nothing\nuntil you style it. Switch the site to dark mode to see them follow the theme.\nToasts, confirms, dropdown items and tooltips live behind an interaction, so\ntheir own pages show them.",[872,873],"demo",{"name":874},"Guides\u002FVariantGallery",[384,876,877],{},"What the shared names mean:",[690,879,880,890],{},[693,881,882],{},[696,883,884,887],{},[699,885,886],{},"Variant",[699,888,889],{},"Use for",[706,891,892,901,910,919,928,937,946],{},[696,893,894,898],{},[711,895,896],{},[421,897,722],{},[711,899,900],{},"The single main action of a view region",[696,902,903,907],{},[711,904,905],{},[421,906,449],{},[711,908,909],{},"Supporting actions",[696,911,912,916],{},[711,913,914],{},[421,915,453],{},[711,917,918],{},"Neutral actions on busy surfaces",[696,920,921,925],{},[711,922,923],{},[421,924,457],{},[711,926,927],{},"Low-emphasis, inline or icon-only actions",[696,929,930,934],{},[711,931,932],{},[421,933,466],{},[711,935,936],{},"Irreversible actions, confirm first",[696,938,939,943],{},[711,940,941],{},[421,942,734],{},[711,944,945],{},"Navigation disguised as text; buttons only",[696,947,948,952],{},[711,949,950],{},[421,951,738],{},[711,953,954,955,960],{},"A blank start for a one-off look (",[393,956,958],{"href":957},"\u002Fen\u002Fcomponents\u002Fbb-button#styling",[421,959,205],{}," shows one). When it recurs, register a variant",[384,962,963,964,966,967,566,969,971,972,566,974,976],{},"The sets differ per family on purpose. ",[421,965,351],{}," carries ",[421,968,787],{},[421,970,790],{},"\nbecause transient feedback is where they belong. ",[421,973,205],{},[421,975,339],{}," do not,\nwhich is what the last section is about.",[402,978,980],{"id":979},"reskin",[406,981,982],{},"Changing a built-in variant",[384,984,985,986,988,989,450,992,601,995,601,998,601,1001,566,1004,1007],{},"A variant is not one declaration. ",[421,987,722],{}," on a button sets ",[421,990,991],{},"--bg",[421,993,994],{},"--bg-hover",[421,996,997],{},"--bg-pressed",[421,999,1000],{},"--fg",[421,1002,1003],{},"--border-color",[421,1005,1006],{},"--ring-color",". Choose\nhow far the change should reach, and start at the top:",[410,1009,1010,1023,1038],{},[413,1011,1012,1015,1016,1019,1020,1022],{},[416,1013,1014],{},"The brand colour is wrong"," (primary should be blue, not black). Change the\n",[421,1017,1018],{},"--bb-primary"," knob in your theme. Every surface, derived value and dark-mode\nvariant follows. This is the ",[393,1021,399],{"href":398},"'s path.",[413,1024,1025,1028,1029,1032,1033,1037],{},[416,1026,1027],{},"One area should differ"," (a toolbar, a marketing header). Re-point the same\nknobs on a ",[421,1030,1031],{},"bb-theme"," island, as in\n",[393,1034,1036],{"href":1035},"\u002Fen\u002Fguides\u002Fdesign-tokens#theming","Writing a theme",". Rings, hovers and radii\nre-derive for that area.",[413,1039,1040,1043,1044,1047],{},[416,1041,1042],{},"One component's take on one variant is wrong"," (badges too loud, buttons\nfine). Re-point that family's local tokens, such as\n",[421,1045,1046],{},".bb-button--primary { --bg: … }",". Rest, hover and press read the same locals,\nso all three follow.",[384,1049,1050,1051,1054,1055,1058],{},"Two quiet failures to avoid. Setting ",[421,1052,1053],{},"background-color"," alone leaves the old\nbrand in hover and focus, which only shows on interaction. Replacing a value\nderived with ",[421,1056,1057],{},"color-mix()"," hardcodes it for both schemes, and \"dark mode looks\nwrong\" surfaces months later. Override the knob instead.",[402,1060,1062],{"id":1061},"color",[406,1063,1064],{},"Using colour",[384,1066,1067,1070],{},[416,1068,1069],{},"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.",[384,1072,1073],{},"Add colour for one of three reasons, never for prettiness:",[510,1075,1076,1082,1088],{},[413,1077,1078,1081],{},[416,1079,1080],{},"Semantic status",". A build passed, a payment failed, a quota is low.",[413,1083,1084,1087],{},[416,1085,1086],{},"State",". Selected, active, dirty, pending, just changed. Colour is a fast,\npre-verbal \"this updated\".",[413,1089,1090,1093],{},[416,1091,1092],{},"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.",[384,1095,1096],{},"Then keep it soft:",[510,1098,1099,1119,1133],{},[413,1100,1101,1104,1105,450,1108,566,1111,1114,1115,1118],{},[416,1102,1103],{},"Leave the chrome neutral",". Hover, pressed and focus use ",[421,1106,1107],{},"--bb-hover",[421,1109,1110],{},"--bb-pressed",[421,1112,1113],{},"--bb-ring",", and selection uses the primary tint. Put\nsemantic colour on the ",[416,1116,1117],{},"content",": a status dot, a soft badge, a tinted alert.\nThat is what keeps colour from feeling jarring.",[413,1120,1121,1124,1125,1128,1129,1132],{},[416,1122,1123],{},"Prefer soft tints to saturated fills"," on anything bigger than a dot. The\nlibrary's own recipe is ",[421,1126,1127],{},"color-mix(in oklab, \u003Chue> 10–15%, var(--bb-panel))","\nfor the fill, with the hue itself as the text. Mixing toward ",[421,1130,1131],{},"--bb-panel"," keeps\nit theme- and dark-mode-aware. Small dots may be saturated.",[413,1134,1135,1138],{},[416,1136,1137],{},"One primary action per region still holds",". Semantic colour is not a licence\nfor five loud buttons.",[773,1140,1141],{},[384,1142,1143,1146],{},[416,1144,1145],{},"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.",[402,1148,1150],{"id":1149},"semantic",[406,1151,1152],{},"What already carries status",[384,1154,1155],{},"Reach for these before you build anything.",[690,1157,1158,1168],{},[693,1159,1160],{},[696,1161,1162,1165],{},[699,1163,1164],{},"Need",[699,1166,1167],{},"Reach for",[706,1169,1170,1192,1211,1225,1243],{},[696,1171,1172,1175],{},[711,1173,1174],{},"A status marker next to a label or row",[711,1176,1177,1181,1182,601,1184,601,1186,601,1188,601,1190],{},[393,1178,1179],{"href":52},[421,1180,342],{}," — ",[421,1183,784],{},[421,1185,787],{},[421,1187,790],{},[421,1189,773],{},[421,1191,466],{},[696,1193,1194,1197],{},[711,1195,1196],{},"A persistent message",[711,1198,1199,1181,1203,601,1205,601,1207,601,1209],{},[393,1200,1201],{"href":6},[421,1202,336],{},[421,1204,722],{},[421,1206,453],{},[421,1208,773],{},[421,1210,466],{},[696,1212,1213,1216],{},[711,1214,1215],{},"Transient feedback",[711,1217,1218,566,1222,1224],{},[393,1219,1220],{"href":98},[421,1221,351],{},[421,1223,803],{}," — the full status set",[696,1226,1227,1230],{},[711,1228,1229],{},"A removable or error tag",[711,1231,1232,723,1236,1238,1239,454,1241],{},[393,1233,1234],{"href":12},[421,1235,339],{},[421,1237,466],{},"; neutral tags use ",[421,1240,449],{},[421,1242,453],{},[696,1244,1245,1248],{},[711,1246,1247],{},"A field that needs attention but is not invalid",[711,1249,1250,1251,566,1254,1257],{},"any form control's ",[421,1252,1253],{},"warnings",[421,1255,1256],{},"hasWarnings"," props",[384,1259,1260,1261,1263,1264,1266,1267,566,1270,1273,1274,1277],{},"The warning input state has no equivalent elsewhere, so read that last row twice.\nEvery form control takes ",[421,1262,1253],{},", the messages, and ",[421,1265,1256],{},", which forces\nthe chrome. They mirror ",[421,1268,1269],{},"errors",[421,1271,1272],{},"hasErrors"," exactly, and while the messages\nshow they are referenced from the control's ",[421,1275,1276],{},"aria-describedby",". Set both and the\nerrors win: the warnings never appear.",[402,1279,1281],{"id":1280},"custom-variant",[406,1282,1283],{},"Registering your own",[384,1285,1286,566,1290,1294,1295,723,1298,601,1300,454,1302,1304,1305,566,1308,1311,1312,566,1315,1318],{},[393,1287,1288],{"href":18},[421,1289,205],{},[393,1291,1292],{"href":12},[421,1293,339],{},"\nship ",[416,1296,1297],{},"no",[421,1299,787],{},[421,1301,790],{},[421,1303,773],{}," variants. The status tokens exist for\nthe library's own states: ",[421,1306,1307],{},"--bb-success",[421,1309,1310],{},"--bb-info"," fill the toast and the\nindicator, and ",[421,1313,1314],{},"--bb-warn",[421,1316,1317],{},"--bb-text-warn"," colour the warning input state.\nThey are not a variant vocabulary, but your own variants can mix from them.",[384,1320,1321,1322,1324],{},"A first-class semantic set was considered and rejected: shadcn carries no such\nvocabulary, and neither does this library. The same goes for meters, ramps and\ngauges. Their hues are project CSS, mixed toward theme tokens with ",[421,1323,1057],{},"\nso they stay dark-mode aware, and the library will not ship a positive-end token.",[384,1326,1327,1330],{},[416,1328,1329],{},"\"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 its class in a project stylesheet kept apart from the library defaults.\nA registered name adds to the built-in ones.",[510,1332,1333,1343,1352,1361,1370,1379,1388,1397,1406,1415],{},[413,1334,1335,1338,1339,1342],{},[421,1336,1337],{},"buttonVariants",": class ",[421,1340,1341],{},".bb-button--\u003Cname>",", for BbButton and BbDropdownButton",[413,1344,1345,1338,1348,1351],{},[421,1346,1347],{},"badgeVariants",[421,1349,1350],{},".bb-badge--\u003Cname>",", for BbBadge",[413,1353,1354,1338,1357,1360],{},[421,1355,1356],{},"alertVariants",[421,1358,1359],{},".bb-alert--\u003Cname>",", for BbAlert",[413,1362,1363,1338,1366,1369],{},[421,1364,1365],{},"indicatorVariants",[421,1367,1368],{},".bb-indicator--\u003Cname>",", for BbIndicator",[413,1371,1372,1338,1375,1378],{},[421,1373,1374],{},"toastVariants",[421,1376,1377],{},".bb-toast__panel--\u003Cname>",", for useToast",[413,1380,1381,1338,1384,1387],{},[421,1382,1383],{},"confirmVariants",[421,1385,1386],{},".bb-confirm--\u003Cname>",", for useConfirm",[413,1389,1390,1338,1393,1396],{},[421,1391,1392],{},"dropdownItemVariants",[421,1394,1395],{},".bb-dropdown__item--variant-\u003Cname>",", for dropdown items",[413,1398,1399,1338,1402,1405],{},[421,1400,1401],{},"tooltipVariants",[421,1403,1404],{},".bb-tooltip--\u003Cname>",", for tooltips",[413,1407,1408,1338,1411,1414],{},[421,1409,1410],{},"inputVariants",[421,1412,1413],{},".bb-field-input--\u003Cname>",", for text-like fields",[413,1416,1417,1338,1420,1423],{},[421,1418,1419],{},"tabsVariants",[421,1421,1422],{},".bb-tabs-list--\u003Cname>",", for BbTabs",[384,1425,1426,1427,601,1429,601,1431,601,1434,566,1436,1439,1440,601,1443,566,1446,1449,1450,1454,1455,458],{},"Input and tab variants take a block of tokens, not rules. For a field, set\n",[421,1428,991],{},[421,1430,994],{},[421,1432,1433],{},"--bg-disabled",[421,1435,1003],{},[421,1437,1438],{},"--border-focus",".\nFor a tab strip, set ",[421,1441,1442],{},"--list-bg",[421,1444,1445],{},"--indicator-bg",[421,1447,1448],{},"--active-fg",";\n",[393,1451,1452],{"href":86},[421,1453,327],{}," lists the rest. The state recipe is in\n",[393,1456,154],{"href":1457},"\u002Fen\u002Fguides\u002Fdesign-tokens#ladder",[773,1459,1460],{},[384,1461,1462,1463,1466,1467,1469],{},"Do both halves. A registered name with no CSS is an unstyled pill, and CSS with\nno registration fails ",[421,1464,1465],{},"vue-tsc",". Do not fall back to ",[421,1468,449],{}," because the\npalette is missing: that drops the design intent in silence, and three statuses\nyou must tell apart at a glance become three grey pills. The plugin option and\none stylesheet block are the whole change.",[384,1471,1472],{},"The soft status palette is the one to start from. Here it is on an order list:",[872,1474],{"name":1475},"Guides\u002FSoftStatusBadges",[384,1477,1478],{},"Register the names:",[1480,1481,1486],"pre",{"className":1482,"code":1483,"language":1484,"meta":1485,"style":1485},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F vite.config.ts (Nuxt: the same array under the `bitboss` key)\nbitbossUi({\n    badgeVariants: [\n        'soft-gray',\n        'soft-blue',\n        'soft-green',\n        'soft-amber',\n        'soft-red',\n    ],\n});\n","ts","",[421,1487,1488,1494,1504,1509,1517,1524,1531,1538,1545,1550],{"__ignoreMap":1485},[406,1489,1490],{"class":862,"line":141},[406,1491,1493],{"class":1492},"sLBg1","\u002F\u002F vite.config.ts (Nuxt: the same array under the `bitboss` key)\n",[406,1495,1496,1500],{"class":862,"line":145},[406,1497,1499],{"class":1498},"sKwhi","bitbossUi",[406,1501,1503],{"class":1502},"suds8","({\n",[406,1505,1506],{"class":862,"line":149},[406,1507,1508],{"class":1502},"    badgeVariants: [\n",[406,1510,1511,1515],{"class":862,"line":177},[406,1512,1514],{"class":1513},"sT6z2","        'soft-gray'",[406,1516,450],{"class":1502},[406,1518,1519,1522],{"class":862,"line":181},[406,1520,1521],{"class":1513},"        'soft-blue'",[406,1523,450],{"class":1502},[406,1525,1526,1529],{"class":862,"line":185},[406,1527,1528],{"class":1513},"        'soft-green'",[406,1530,450],{"class":1502},[406,1532,1533,1536],{"class":862,"line":225},[406,1534,1535],{"class":1513},"        'soft-amber'",[406,1537,450],{"class":1502},[406,1539,1540,1543],{"class":862,"line":229},[406,1541,1542],{"class":1513},"        'soft-red'",[406,1544,450],{"class":1502},[406,1546,1547],{"class":862,"line":233},[406,1548,1549],{"class":1502},"    ],\n",[406,1551,1552],{"class":862,"line":237},[406,1553,1554],{"class":1502},"});\n",[384,1556,1557,1558,1560],{},"Then add one block to your project stylesheet. Each variant takes its accent\nfrom a theme token, so a theme that retunes ",[421,1559,1307],{}," retunes the badge too:",[1480,1562,1566],{"className":1563,"code":1564,"language":1565,"meta":1485,"style":1485},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-badge.bb-badge--soft-gray {\n    --accent: var(--bb-text-muted);\n}\n.bb-badge.bb-badge--soft-blue {\n    --accent: var(--bb-info);\n}\n.bb-badge.bb-badge--soft-green {\n    --accent: var(--bb-success);\n}\n.bb-badge.bb-badge--soft-amber {\n    --accent: var(--bb-warn);\n}\n.bb-badge.bb-badge--soft-red {\n    --accent: var(--bb-danger);\n}\n\n.bb-badge:is(\n    .bb-badge--soft-gray,\n    .bb-badge--soft-blue,\n    .bb-badge--soft-green,\n    .bb-badge--soft-amber,\n    .bb-badge--soft-red\n) {\n    --bg: color-mix(\n        in oklab, var(--accent) 15%, var(--bb-panel)\n    );\n    --fg: color-mix(\n        in oklab, var(--accent) 45%, var(--bb-text)\n    );\n    --bw: 1px;\n    --border-color: color-mix(\n        in oklab, var(--accent) 25%, var(--bb-panel)\n    );\n    --ring-color: color-mix(\n        in oklab, var(--accent) 45%, transparent\n    );\n}\n","css",[421,1567,1568,1577,1598,1603,1610,1624,1628,1635,1649,1653,1660,1674,1679,1687,1703,1708,1715,1724,1732,1740,1748,1756,1762,1768,1781,1820,1826,1838,1871,1876,1892,1904,1936,1941,1953,1979,1984],{"__ignoreMap":1485},[406,1569,1570,1574],{"class":862,"line":141},[406,1571,1573],{"class":1572},"s-5SL",".bb-badge.bb-badge--soft-gray",[406,1575,1576],{"class":1502}," {\n",[406,1578,1579,1583,1586,1589,1592,1595],{"class":862,"line":145},[406,1580,1582],{"class":1581},"soyes","    --accent",[406,1584,1585],{"class":1502},": ",[406,1587,1588],{"class":1572},"var",[406,1590,1591],{"class":1502},"(",[406,1593,1594],{"class":1581},"--bb-text-muted",[406,1596,1597],{"class":1502},");\n",[406,1599,1600],{"class":862,"line":149},[406,1601,1602],{"class":1502},"}\n",[406,1604,1605,1608],{"class":862,"line":177},[406,1606,1607],{"class":1572},".bb-badge.bb-badge--soft-blue",[406,1609,1576],{"class":1502},[406,1611,1612,1614,1616,1618,1620,1622],{"class":862,"line":181},[406,1613,1582],{"class":1581},[406,1615,1585],{"class":1502},[406,1617,1588],{"class":1572},[406,1619,1591],{"class":1502},[406,1621,1310],{"class":1581},[406,1623,1597],{"class":1502},[406,1625,1626],{"class":862,"line":185},[406,1627,1602],{"class":1502},[406,1629,1630,1633],{"class":862,"line":225},[406,1631,1632],{"class":1572},".bb-badge.bb-badge--soft-green",[406,1634,1576],{"class":1502},[406,1636,1637,1639,1641,1643,1645,1647],{"class":862,"line":229},[406,1638,1582],{"class":1581},[406,1640,1585],{"class":1502},[406,1642,1588],{"class":1572},[406,1644,1591],{"class":1502},[406,1646,1307],{"class":1581},[406,1648,1597],{"class":1502},[406,1650,1651],{"class":862,"line":233},[406,1652,1602],{"class":1502},[406,1654,1655,1658],{"class":862,"line":237},[406,1656,1657],{"class":1572},".bb-badge.bb-badge--soft-amber",[406,1659,1576],{"class":1502},[406,1661,1662,1664,1666,1668,1670,1672],{"class":862,"line":241},[406,1663,1582],{"class":1581},[406,1665,1585],{"class":1502},[406,1667,1588],{"class":1572},[406,1669,1591],{"class":1502},[406,1671,1314],{"class":1581},[406,1673,1597],{"class":1502},[406,1675,1677],{"class":862,"line":1676},12,[406,1678,1602],{"class":1502},[406,1680,1682,1685],{"class":862,"line":1681},13,[406,1683,1684],{"class":1572},".bb-badge.bb-badge--soft-red",[406,1686,1576],{"class":1502},[406,1688,1690,1692,1694,1696,1698,1701],{"class":862,"line":1689},14,[406,1691,1582],{"class":1581},[406,1693,1585],{"class":1502},[406,1695,1588],{"class":1572},[406,1697,1591],{"class":1502},[406,1699,1700],{"class":1581},"--bb-danger",[406,1702,1597],{"class":1502},[406,1704,1706],{"class":862,"line":1705},15,[406,1707,1602],{"class":1502},[406,1709,1711],{"class":862,"line":1710},16,[406,1712,1714],{"emptyLinePlaceholder":1713},true,"\n",[406,1716,1718,1721],{"class":862,"line":1717},17,[406,1719,1720],{"class":1572},".bb-badge:is",[406,1722,1723],{"class":1502},"(\n",[406,1725,1727,1730],{"class":862,"line":1726},18,[406,1728,1729],{"class":1572},"    .bb-badge--soft-gray",[406,1731,450],{"class":1502},[406,1733,1735,1738],{"class":862,"line":1734},19,[406,1736,1737],{"class":1572},"    .bb-badge--soft-blue",[406,1739,450],{"class":1502},[406,1741,1743,1746],{"class":862,"line":1742},20,[406,1744,1745],{"class":1572},"    .bb-badge--soft-green",[406,1747,450],{"class":1502},[406,1749,1751,1754],{"class":862,"line":1750},21,[406,1752,1753],{"class":1572},"    .bb-badge--soft-amber",[406,1755,450],{"class":1502},[406,1757,1759],{"class":862,"line":1758},22,[406,1760,1761],{"class":1572},"    .bb-badge--soft-red\n",[406,1763,1765],{"class":862,"line":1764},23,[406,1766,1767],{"class":1502},") {\n",[406,1769,1771,1774,1776,1779],{"class":862,"line":1770},24,[406,1772,1773],{"class":1581},"    --bg",[406,1775,1585],{"class":1502},[406,1777,1778],{"class":1572},"color-mix",[406,1780,1723],{"class":1502},[406,1782,1784,1787,1790,1792,1794,1796,1799,1802,1805,1809,1811,1813,1815,1817],{"class":862,"line":1783},25,[406,1785,1786],{"class":1581},"        in",[406,1788,1789],{"class":1581}," oklab",[406,1791,601],{"class":1502},[406,1793,1588],{"class":1572},[406,1795,1591],{"class":1502},[406,1797,1798],{"class":1581},"--accent",[406,1800,1801],{"class":1502},") ",[406,1803,1804],{"class":1572},"15",[406,1806,1808],{"class":1807},"sHUrx","%",[406,1810,601],{"class":1502},[406,1812,1588],{"class":1572},[406,1814,1591],{"class":1502},[406,1816,1131],{"class":1581},[406,1818,1819],{"class":1502},")\n",[406,1821,1823],{"class":862,"line":1822},26,[406,1824,1825],{"class":1502},"    );\n",[406,1827,1829,1832,1834,1836],{"class":862,"line":1828},27,[406,1830,1831],{"class":1581},"    --fg",[406,1833,1585],{"class":1502},[406,1835,1778],{"class":1572},[406,1837,1723],{"class":1502},[406,1839,1841,1843,1845,1847,1849,1851,1853,1855,1858,1860,1862,1864,1866,1869],{"class":862,"line":1840},28,[406,1842,1786],{"class":1581},[406,1844,1789],{"class":1581},[406,1846,601],{"class":1502},[406,1848,1588],{"class":1572},[406,1850,1591],{"class":1502},[406,1852,1798],{"class":1581},[406,1854,1801],{"class":1502},[406,1856,1857],{"class":1572},"45",[406,1859,1808],{"class":1807},[406,1861,601],{"class":1502},[406,1863,1588],{"class":1572},[406,1865,1591],{"class":1502},[406,1867,1868],{"class":1581},"--bb-text",[406,1870,1819],{"class":1502},[406,1872,1874],{"class":862,"line":1873},29,[406,1875,1825],{"class":1502},[406,1877,1879,1882,1884,1887,1890],{"class":862,"line":1878},30,[406,1880,1881],{"class":1581},"    --bw",[406,1883,1585],{"class":1502},[406,1885,1886],{"class":1572},"1",[406,1888,1889],{"class":1807},"px",[406,1891,1449],{"class":1502},[406,1893,1895,1898,1900,1902],{"class":862,"line":1894},31,[406,1896,1897],{"class":1581},"    --border-color",[406,1899,1585],{"class":1502},[406,1901,1778],{"class":1572},[406,1903,1723],{"class":1502},[406,1905,1907,1909,1911,1913,1915,1917,1919,1921,1924,1926,1928,1930,1932,1934],{"class":862,"line":1906},32,[406,1908,1786],{"class":1581},[406,1910,1789],{"class":1581},[406,1912,601],{"class":1502},[406,1914,1588],{"class":1572},[406,1916,1591],{"class":1502},[406,1918,1798],{"class":1581},[406,1920,1801],{"class":1502},[406,1922,1923],{"class":1572},"25",[406,1925,1808],{"class":1807},[406,1927,601],{"class":1502},[406,1929,1588],{"class":1572},[406,1931,1591],{"class":1502},[406,1933,1131],{"class":1581},[406,1935,1819],{"class":1502},[406,1937,1939],{"class":862,"line":1938},33,[406,1940,1825],{"class":1502},[406,1942,1944,1947,1949,1951],{"class":862,"line":1943},34,[406,1945,1946],{"class":1581},"    --ring-color",[406,1948,1585],{"class":1502},[406,1950,1778],{"class":1572},[406,1952,1723],{"class":1502},[406,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976],{"class":862,"line":1955},35,[406,1957,1786],{"class":1581},[406,1959,1789],{"class":1581},[406,1961,601],{"class":1502},[406,1963,1588],{"class":1572},[406,1965,1591],{"class":1502},[406,1967,1798],{"class":1581},[406,1969,1801],{"class":1502},[406,1971,1857],{"class":1572},[406,1973,1808],{"class":1807},[406,1975,601],{"class":1502},[406,1977,1978],{"class":1572},"transparent\n",[406,1980,1982],{"class":862,"line":1981},36,[406,1983,1825],{"class":1502},[406,1985,1987],{"class":862,"line":1986},37,[406,1988,1602],{"class":1502},[384,1990,1991,1992,601,1994,566,1996,1998,1999,566,2002,2004,2005,2007,2008,2010],{},"The badge paints from ",[421,1993,991],{},[421,1995,1000],{},[421,1997,1003],{},", so set those rather\nthan ",[421,2000,2001],{},"background",[421,2003,1061],{},". The text mix stops at 45% because every accent\nclears 4.5:1 on its 15% tint there, in both schemes. At 60% blue and green fall\nto 4.4:1 in dark, and at 80% to about 3:1. Mixing toward ",[421,2006,1131],{}," and\n",[421,2009,1868],{}," rather than a hex carries the variant through dark mode without a\nsecond rule.",[2012,2013,2014],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}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 .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}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}",{"title":1485,"searchDepth":149,"depth":149,"links":2016},[2017,2018,2019,2020,2021,2022,2023],{"id":404,"depth":145,"text":408},{"id":585,"depth":145,"text":588},{"id":682,"depth":145,"text":685},{"id":979,"depth":145,"text":982},{"id":1061,"depth":145,"text":1064},{"id":1149,"depth":145,"text":1152},{"id":1280,"depth":145,"text":1283},"Style the screen around the components so what you build looks like part of the same product.","md",{},[2028,2029,2030,2031,2032,2033,2034],{"id":404,"title":408},{"id":585,"title":588},{"id":682,"title":685},{"id":979,"title":982},{"id":1061,"title":1064},{"id":1149,"title":1152},{"id":1280,"title":1283},{"title":157,"description":2024},"guides\u002Fdesign-language","tIjkrp-gK6W2u_SnwhbbBgrxGEPKs-v5TNkGAqh9cNY",1793055148044]