[{"data":1,"prerenderedAt":1686},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Foverview\u002Fgetting-started\u002Fintroduction":682},[4,11,128,525,584,626],{"title":5,"path":6,"stem":7,"order":8,"icon":9,"collapse":10,"navBadges":9},"Selaras","\u002F","index",1,null,false,{"title":12,"order":13,"icon":9,"collapse":10,"navBadges":9,"path":14,"stem":15,"children":16,"page":10},"Overview",10,"\u002Foverview","overview",[17,70,107],{"title":18,"order":13,"icon":9,"collapse":10,"navBadges":9,"path":19,"stem":20,"children":21,"page":10},"Getting Started","\u002Foverview\u002Fgetting-started","overview\u002Fgetting-started",[22,26,31,36,41,46,51,56,61,66],{"title":23,"path":24,"stem":25,"order":13,"icon":9,"collapse":10,"navBadges":9},"Introduction","\u002Foverview\u002Fgetting-started\u002Fintroduction","overview\u002Fgetting-started\u002Fintroduction",{"title":27,"path":28,"stem":29,"order":30,"icon":9,"collapse":10,"navBadges":9},"Installation","\u002Foverview\u002Fgetting-started\u002Finstallation","overview\u002Fgetting-started\u002Finstallation",20,{"title":32,"path":33,"stem":34,"order":35,"icon":9,"collapse":10,"navBadges":9},"Component usage","\u002Foverview\u002Fgetting-started\u002Fcomponent-usage","overview\u002Fgetting-started\u002Fcomponent-usage",30,{"title":37,"path":38,"stem":39,"order":40,"icon":9,"collapse":10,"navBadges":9},"Nuxt configuration","\u002Foverview\u002Fgetting-started\u002Fnuxt-configuration","overview\u002Fgetting-started\u002Fnuxt-configuration",40,{"title":42,"path":43,"stem":44,"order":45,"icon":9,"collapse":10,"navBadges":9},"Icons","\u002Foverview\u002Fgetting-started\u002Ficons","overview\u002Fgetting-started\u002Ficons",50,{"title":47,"path":48,"stem":49,"order":50,"icon":9,"collapse":10,"navBadges":9},"Messages and localization","\u002Foverview\u002Fgetting-started\u002Fmessages","overview\u002Fgetting-started\u002Fmessages",60,{"title":52,"path":53,"stem":54,"order":55,"icon":9,"collapse":10,"navBadges":9},"Adaptive interfaces","\u002Foverview\u002Fgetting-started\u002Fadaptive-interfaces","overview\u002Fgetting-started\u002Fadaptive-interfaces",70,{"title":57,"path":58,"stem":59,"order":60,"icon":9,"collapse":10,"navBadges":9},"TypeScript","\u002Foverview\u002Fgetting-started\u002Ftypescript","overview\u002Fgetting-started\u002Ftypescript",80,{"title":62,"path":63,"stem":64,"order":65,"icon":9,"collapse":10,"navBadges":9},"Accessibility","\u002Foverview\u002Fgetting-started\u002Faccessibility","overview\u002Fgetting-started\u002Faccessibility",90,{"title":67,"path":68,"stem":69,"order":65,"icon":9,"collapse":10,"navBadges":9},"Migrating to 1.0","\u002Foverview\u002Fgetting-started\u002Fmigrating-to-1","overview\u002Fgetting-started\u002Fmigrating-to-1",{"title":71,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":72,"stem":73,"children":74,"page":10},"Theming","\u002Foverview\u002Ftheming","overview\u002Ftheming",[75,78,82,86,90,94,99,103],{"title":71,"path":76,"stem":77,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Foverview\u002Ftheming\u002Foverview","overview\u002Ftheming\u002Foverview",{"title":79,"path":80,"stem":81,"order":30,"icon":9,"collapse":10,"navBadges":9},"CSS tokens","\u002Foverview\u002Ftheming\u002Fcss-tokens","overview\u002Ftheming\u002Fcss-tokens",{"title":83,"path":84,"stem":85,"order":35,"icon":9,"collapse":10,"navBadges":9},"Color roles","\u002Foverview\u002Ftheming\u002Fcolor-roles","overview\u002Ftheming\u002Fcolor-roles",{"title":87,"path":88,"stem":89,"order":40,"icon":9,"collapse":10,"navBadges":9},"Color modes","\u002Foverview\u002Ftheming\u002Fcolor-modes","overview\u002Ftheming\u002Fcolor-modes",{"title":91,"path":92,"stem":93,"order":45,"icon":9,"collapse":10,"navBadges":9},"Component styling","\u002Foverview\u002Ftheming\u002Fcomponent-styling","overview\u002Ftheming\u002Fcomponent-styling",{"title":95,"path":96,"stem":97,"order":98,"icon":9,"collapse":10,"navBadges":9},"Global configuration","\u002Foverview\u002Ftheming\u002Fglobal-configuration","overview\u002Ftheming\u002Fglobal-configuration",55,{"title":100,"path":101,"stem":102,"order":50,"icon":9,"collapse":10,"navBadges":9},"Scoped themes","\u002Foverview\u002Ftheming\u002Fscoped-themes","overview\u002Ftheming\u002Fscoped-themes",{"title":104,"path":105,"stem":106,"order":55,"icon":9,"collapse":10,"navBadges":9},"Complete themes","\u002Foverview\u002Ftheming\u002Fcomplete-themes","overview\u002Ftheming\u002Fcomplete-themes",{"title":108,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":109,"stem":110,"children":111,"page":10},"Agent Support","\u002Foverview\u002Fagent-support","overview\u002Fagent-support",[112,116,120,124],{"title":113,"path":114,"stem":115,"order":13,"icon":9,"collapse":10,"navBadges":9},"Agent support","\u002Foverview\u002Fagent-support\u002Foverview","overview\u002Fagent-support\u002Foverview",{"title":117,"path":118,"stem":119,"order":30,"icon":9,"collapse":10,"navBadges":9},"Documentation exports","\u002Foverview\u002Fagent-support\u002Fdocumentation","overview\u002Fagent-support\u002Fdocumentation",{"title":121,"path":122,"stem":123,"order":35,"icon":9,"collapse":10,"navBadges":9},"Skills","\u002Foverview\u002Fagent-support\u002Fskills","overview\u002Fagent-support\u002Fskills",{"title":125,"path":126,"stem":127,"order":40,"icon":9,"collapse":10,"navBadges":9},"MCP","\u002Foverview\u002Fagent-support\u002Fmcp","overview\u002Fagent-support\u002Fmcp",{"title":129,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":130,"stem":131,"children":132,"page":10},"Components","\u002Fcomponents","components",[133,210,313,336,380,433,486],{"title":134,"path":135,"stem":136,"children":137,"page":10},"Elements","\u002Fcomponents\u002Felements","components\u002Felements",[138,142,147,152,157,162,166,171,176,181,186,191,196,201,205],{"title":139,"path":140,"stem":141,"order":13,"icon":9,"collapse":10,"navBadges":9},"Button","\u002Fcomponents\u002Felements\u002Fbutton","components\u002Felements\u002Fbutton",{"title":143,"path":144,"stem":145,"order":146,"icon":9,"collapse":10,"navBadges":9},"ButtonGroup","\u002Fcomponents\u002Felements\u002Fbutton-group","components\u002Felements\u002Fbutton-group",10.5,{"title":148,"path":149,"stem":150,"order":151,"icon":9,"collapse":10,"navBadges":9},"Badge","\u002Fcomponents\u002Felements\u002Fbadge","components\u002Felements\u002Fbadge",11,{"title":153,"path":154,"stem":155,"order":156,"icon":9,"collapse":10,"navBadges":9},"Avatar","\u002Fcomponents\u002Felements\u002Favatar","components\u002Felements\u002Favatar",11.25,{"title":158,"path":159,"stem":160,"order":161,"icon":9,"collapse":10,"navBadges":9},"AvatarGroup","\u002Fcomponents\u002Felements\u002Favatar-group","components\u002Felements\u002Favatar-group",11.5,{"title":163,"path":164,"stem":165,"order":161,"icon":9,"collapse":10,"navBadges":9},"Chip","\u002Fcomponents\u002Felements\u002Fchip","components\u002Felements\u002Fchip",{"title":167,"path":168,"stem":169,"order":170,"icon":9,"collapse":10,"navBadges":9},"Icon","\u002Fcomponents\u002Felements\u002Ficon","components\u002Felements\u002Ficon",12,{"title":172,"path":173,"stem":174,"order":175,"icon":9,"collapse":10,"navBadges":9},"Skeleton","\u002Fcomponents\u002Felements\u002Fskeleton","components\u002Felements\u002Fskeleton",12.5,{"title":177,"path":178,"stem":179,"order":180,"icon":9,"collapse":10,"navBadges":9},"Separator","\u002Fcomponents\u002Felements\u002Fseparator","components\u002Felements\u002Fseparator",12.75,{"title":182,"path":183,"stem":184,"order":185,"icon":9,"collapse":10,"navBadges":9},"Alert","\u002Fcomponents\u002Felements\u002Falert","components\u002Felements\u002Falert",12.9,{"title":187,"path":188,"stem":189,"order":190,"icon":9,"collapse":10,"navBadges":9},"Toggle","\u002Fcomponents\u002Felements\u002Ftoggle","components\u002Felements\u002Ftoggle",12.92,{"title":192,"path":193,"stem":194,"order":195,"icon":9,"collapse":10,"navBadges":9},"Toggle Group","\u002Fcomponents\u002Felements\u002Ftoggle-group","components\u002Felements\u002Ftoggle-group",12.94,{"title":197,"path":198,"stem":199,"order":200,"icon":9,"collapse":10,"navBadges":9},"Kbd","\u002Fcomponents\u002Felements\u002Fkbd","components\u002Felements\u002Fkbd",12.95,{"title":202,"path":203,"stem":204,"order":200,"icon":9,"collapse":10,"navBadges":9},"Toolbar","\u002Fcomponents\u002Felements\u002Ftoolbar","components\u002Felements\u002Ftoolbar",{"title":206,"path":207,"stem":208,"order":209,"icon":9,"collapse":10,"navBadges":9},"Progress","\u002Fcomponents\u002Felements\u002Fprogress","components\u002Felements\u002Fprogress",12.97,{"title":211,"path":212,"stem":213,"children":214,"page":10},"Forms","\u002Fcomponents\u002Fforms","components\u002Fforms",[215,219,224,229,233,238,243,248,253,258,263,268,273,278,283,288,293,298,303,308],{"title":216,"path":217,"stem":218,"order":30,"icon":9,"collapse":10,"navBadges":9},"Input","\u002Fcomponents\u002Fforms\u002Finput","components\u002Fforms\u002Finput",{"title":220,"path":221,"stem":222,"order":223,"icon":9,"collapse":10,"navBadges":9},"InputGroup","\u002Fcomponents\u002Fforms\u002Finput-group","components\u002Fforms\u002Finput-group",20.25,{"title":225,"path":226,"stem":227,"order":228,"icon":9,"collapse":10,"navBadges":9},"Editable","\u002Fcomponents\u002Fforms\u002Feditable","components\u002Fforms\u002Feditable",20.5,{"title":230,"path":231,"stem":232,"order":228,"icon":9,"collapse":10,"navBadges":9},"InputNumber","\u002Fcomponents\u002Fforms\u002Finput-number","components\u002Fforms\u002Finput-number",{"title":234,"path":235,"stem":236,"order":237,"icon":9,"collapse":10,"navBadges":9},"Slider","\u002Fcomponents\u002Fforms\u002Fslider","components\u002Fforms\u002Fslider",20.75,{"title":239,"path":240,"stem":241,"order":242,"icon":9,"collapse":10,"navBadges":9},"PinInput","\u002Fcomponents\u002Fforms\u002Fpin-input","components\u002Fforms\u002Fpin-input",20.9,{"title":244,"path":245,"stem":246,"order":247,"icon":9,"collapse":10,"navBadges":9},"Textarea","\u002Fcomponents\u002Fforms\u002Ftextarea","components\u002Fforms\u002Ftextarea",21,{"title":249,"path":250,"stem":251,"order":252,"icon":9,"collapse":10,"navBadges":9},"FileUpload","\u002Fcomponents\u002Fforms\u002Ffile-upload","components\u002Fforms\u002Ffile-upload",21.5,{"title":254,"path":255,"stem":256,"order":257,"icon":9,"collapse":10,"navBadges":9},"Select","\u002Fcomponents\u002Fforms\u002Fselect","components\u002Fforms\u002Fselect",22,{"title":259,"path":260,"stem":261,"order":262,"icon":9,"collapse":10,"navBadges":9},"Listbox","\u002Fcomponents\u002Fforms\u002Flistbox","components\u002Fforms\u002Flistbox",22.5,{"title":264,"path":265,"stem":266,"order":267,"icon":9,"collapse":10,"navBadges":9},"TransferList","\u002Fcomponents\u002Fforms\u002Ftransfer-list","components\u002Fforms\u002Ftransfer-list",22.75,{"title":269,"path":270,"stem":271,"order":272,"icon":9,"collapse":10,"navBadges":9},"Autocomplete","\u002Fcomponents\u002Fforms\u002Fautocomplete","components\u002Fforms\u002Fautocomplete",23,{"title":274,"path":275,"stem":276,"order":277,"icon":9,"collapse":10,"navBadges":9},"DatePicker","\u002Fcomponents\u002Fforms\u002Fdate-picker","components\u002Fforms\u002Fdate-picker",23.5,{"title":279,"path":280,"stem":281,"order":282,"icon":9,"collapse":10,"navBadges":9},"ColorPicker","\u002Fcomponents\u002Fforms\u002Fcolor-picker","components\u002Fforms\u002Fcolor-picker",23.75,{"title":284,"path":285,"stem":286,"order":287,"icon":9,"collapse":10,"navBadges":9},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","components\u002Fforms\u002Fcheckbox",24,{"title":289,"path":290,"stem":291,"order":292,"icon":9,"collapse":10,"navBadges":9},"RadioGroup","\u002Fcomponents\u002Fforms\u002Fradio-group","components\u002Fforms\u002Fradio-group",25,{"title":294,"path":295,"stem":296,"order":297,"icon":9,"collapse":10,"navBadges":9},"Rating","\u002Fcomponents\u002Fforms\u002Frating","components\u002Fforms\u002Frating",25.5,{"title":299,"path":300,"stem":301,"order":302,"icon":9,"collapse":10,"navBadges":9},"Switch","\u002Fcomponents\u002Fforms\u002Fswitch","components\u002Fforms\u002Fswitch",26,{"title":304,"path":305,"stem":306,"order":307,"icon":9,"collapse":10,"navBadges":9},"FormField","\u002Fcomponents\u002Fforms\u002Fform-field","components\u002Fforms\u002Fform-field",27,{"title":309,"path":310,"stem":311,"order":312,"icon":9,"collapse":10,"navBadges":9},"Form Validation","\u002Fcomponents\u002Fforms\u002Fvalidation","components\u002Fforms\u002Fvalidation",28,{"title":314,"path":315,"stem":316,"children":317,"page":10},"Data","\u002Fcomponents\u002Fdata","components\u002Fdata",[318,322,327,331],{"title":319,"path":320,"stem":321,"order":312,"icon":9,"collapse":10,"navBadges":9},"EmptyState","\u002Fcomponents\u002Fdata\u002Fempty-state","components\u002Fdata\u002Fempty-state",{"title":323,"path":324,"stem":325,"order":326,"icon":9,"collapse":10,"navBadges":9},"Calendar","\u002Fcomponents\u002Fdata\u002Fcalendar","components\u002Fdata\u002Fcalendar",29,{"title":328,"path":329,"stem":330,"order":35,"icon":9,"collapse":10,"navBadges":9},"Table","\u002Fcomponents\u002Fdata\u002Ftable","components\u002Fdata\u002Ftable",{"title":332,"path":333,"stem":334,"order":335,"icon":9,"collapse":10,"navBadges":9},"Timeline","\u002Fcomponents\u002Fdata\u002Ftimeline","components\u002Fdata\u002Ftimeline",31,{"title":337,"path":338,"stem":339,"children":340,"page":10},"Navigation","\u002Fcomponents\u002Fnavigation","components\u002Fnavigation",[341,346,350,355,360,365,370,375],{"title":342,"path":343,"stem":344,"order":345,"icon":9,"collapse":10,"navBadges":9},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","components\u002Fnavigation\u002Fbreadcrumb",39,{"title":347,"path":348,"stem":349,"order":40,"icon":9,"collapse":10,"navBadges":9},"Tabs","\u002Fcomponents\u002Fnavigation\u002Ftabs","components\u002Fnavigation\u002Ftabs",{"title":351,"path":352,"stem":353,"order":354,"icon":9,"collapse":10,"navBadges":9},"Stepper","\u002Fcomponents\u002Fnavigation\u002Fstepper","components\u002Fnavigation\u002Fstepper",40.5,{"title":356,"path":357,"stem":358,"order":359,"icon":9,"collapse":10,"navBadges":9},"Accordion","\u002Fcomponents\u002Fnavigation\u002Faccordion","components\u002Fnavigation\u002Faccordion",41,{"title":361,"path":362,"stem":363,"order":364,"icon":9,"collapse":10,"navBadges":9},"Collapsible","\u002Fcomponents\u002Fnavigation\u002Fcollapsible","components\u002Fnavigation\u002Fcollapsible",41.5,{"title":366,"path":367,"stem":368,"order":369,"icon":9,"collapse":10,"navBadges":9},"Tree","\u002Fcomponents\u002Fnavigation\u002Ftree","components\u002Fnavigation\u002Ftree",41.75,{"title":371,"path":372,"stem":373,"order":374,"icon":9,"collapse":10,"navBadges":9},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","components\u002Fnavigation\u002Fpagination",44,{"title":376,"path":377,"stem":378,"order":379,"icon":9,"collapse":10,"navBadges":9},"NavigationMenu","\u002Fcomponents\u002Fnavigation\u002Fnavigation-menu","components\u002Fnavigation\u002Fnavigation-menu",45,{"title":381,"path":382,"stem":383,"children":384,"page":10},"Overlays","\u002Fcomponents\u002Foverlays","components\u002Foverlays",[385,389,394,399,404,409,414,419,424,428],{"title":386,"path":387,"stem":388,"order":45,"icon":9,"collapse":10,"navBadges":9},"Modal","\u002Fcomponents\u002Foverlays\u002Fmodal","components\u002Foverlays\u002Fmodal",{"title":390,"path":391,"stem":392,"order":393,"icon":9,"collapse":10,"navBadges":9},"AlertDialog","\u002Fcomponents\u002Foverlays\u002Falert-dialog","components\u002Foverlays\u002Falert-dialog",50.5,{"title":395,"path":396,"stem":397,"order":398,"icon":9,"collapse":10,"navBadges":9},"Dropdown","\u002Fcomponents\u002Foverlays\u002Fdropdown","components\u002Foverlays\u002Fdropdown",51,{"title":400,"path":401,"stem":402,"order":403,"icon":9,"collapse":10,"navBadges":9},"Context Menu","\u002Fcomponents\u002Foverlays\u002Fcontext-menu","components\u002Foverlays\u002Fcontext-menu",51.5,{"title":405,"path":406,"stem":407,"order":408,"icon":9,"collapse":10,"navBadges":9},"Tooltip","\u002Fcomponents\u002Foverlays\u002Ftooltip","components\u002Foverlays\u002Ftooltip",52,{"title":410,"path":411,"stem":412,"order":413,"icon":9,"collapse":10,"navBadges":9},"Toast","\u002Fcomponents\u002Foverlays\u002Ftoast","components\u002Foverlays\u002Ftoast",53,{"title":415,"path":416,"stem":417,"order":418,"icon":9,"collapse":10,"navBadges":9},"Slideover","\u002Fcomponents\u002Foverlays\u002Fslideover","components\u002Foverlays\u002Fslideover",54,{"title":420,"path":421,"stem":422,"order":423,"icon":9,"collapse":10,"navBadges":9},"Command Palette","\u002Fcomponents\u002Foverlays\u002Fcommand-palette","components\u002Foverlays\u002Fcommand-palette",54.5,{"title":425,"path":426,"stem":427,"order":98,"icon":9,"collapse":10,"navBadges":9},"Popover","\u002Fcomponents\u002Foverlays\u002Fpopover","components\u002Foverlays\u002Fpopover",{"title":429,"path":430,"stem":431,"order":432,"icon":9,"collapse":10,"navBadges":9},"Drawer","\u002Fcomponents\u002Foverlays\u002Fdrawer","components\u002Foverlays\u002Fdrawer",56,{"title":434,"path":435,"stem":436,"children":437,"page":10},"Layout","\u002Fcomponents\u002Flayout","components\u002Flayout",[438,443,447,452,457,462,466,471,476,481],{"title":439,"path":440,"stem":441,"order":442,"icon":9,"collapse":10,"navBadges":9},"App","\u002Fcomponents\u002Flayout\u002Fapp","components\u002Flayout\u002Fapp",59,{"title":444,"path":445,"stem":446,"order":50,"icon":9,"collapse":10,"navBadges":9},"Container","\u002Fcomponents\u002Flayout\u002Fcontainer","components\u002Flayout\u002Fcontainer",{"title":448,"path":449,"stem":450,"order":451,"icon":9,"collapse":10,"navBadges":9},"Header","\u002Fcomponents\u002Flayout\u002Fheader","components\u002Flayout\u002Fheader",63,{"title":453,"path":454,"stem":455,"order":456,"icon":9,"collapse":10,"navBadges":9},"ColorModeToggle","\u002Fcomponents\u002Flayout\u002Fcolor-mode-toggle","components\u002Flayout\u002Fcolor-mode-toggle",64,{"title":458,"path":459,"stem":460,"order":461,"icon":9,"collapse":10,"navBadges":9},"ColorModeSwitch","\u002Fcomponents\u002Flayout\u002Fcolor-mode-switch","components\u002Flayout\u002Fcolor-mode-switch",65,{"title":463,"path":464,"stem":465,"order":461,"icon":9,"collapse":10,"navBadges":9},"ScrollArea","\u002Fcomponents\u002Flayout\u002Fscroll-area","components\u002Flayout\u002Fscroll-area",{"title":467,"path":468,"stem":469,"order":470,"icon":9,"collapse":10,"navBadges":9},"Card","\u002Fcomponents\u002Flayout\u002Fcard","components\u002Flayout\u002Fcard",66,{"title":472,"path":473,"stem":474,"order":475,"icon":9,"collapse":10,"navBadges":9},"CardGroup","\u002Fcomponents\u002Flayout\u002Fcard-group","components\u002Flayout\u002Fcard-group",67,{"title":477,"path":478,"stem":479,"order":480,"icon":9,"collapse":10,"navBadges":9},"Splitter","\u002Fcomponents\u002Flayout\u002Fsplitter","components\u002Flayout\u002Fsplitter",68,{"title":482,"path":483,"stem":484,"order":485,"icon":9,"collapse":10,"navBadges":9},"Theme","\u002Fcomponents\u002Flayout\u002Ftheme","components\u002Flayout\u002Ftheme",69,{"title":487,"path":488,"stem":489,"children":490,"page":10},"Typography","\u002Fcomponents\u002Ftypography","components\u002Ftypography",[491,495,500,505,510,515,520],{"title":492,"path":493,"stem":494,"order":55,"icon":9,"collapse":10,"navBadges":9},"Prose","\u002Fcomponents\u002Ftypography\u002Fprose","components\u002Ftypography\u002Fprose",{"title":496,"path":497,"stem":498,"order":499,"icon":9,"collapse":10,"navBadges":9},"CodeGroup","\u002Fcomponents\u002Ftypography\u002Fcode-group","components\u002Ftypography\u002Fcode-group",71,{"title":501,"path":502,"stem":503,"order":504,"icon":9,"collapse":10,"navBadges":9},"Callout","\u002Fcomponents\u002Ftypography\u002Fcallout","components\u002Ftypography\u002Fcallout",72,{"title":506,"path":507,"stem":508,"order":509,"icon":9,"collapse":10,"navBadges":9},"CodeButton","\u002Fcomponents\u002Ftypography\u002Fcode-button","components\u002Ftypography\u002Fcode-button",73,{"title":511,"path":512,"stem":513,"order":514,"icon":9,"collapse":10,"navBadges":9},"ReadMore","\u002Fcomponents\u002Ftypography\u002Fread-more","components\u002Ftypography\u002Fread-more",74,{"title":516,"path":517,"stem":518,"order":519,"icon":9,"collapse":10,"navBadges":9},"FileTree","\u002Fcomponents\u002Ftypography\u002Ffile-tree","components\u002Ftypography\u002Ffile-tree",75,{"title":521,"path":522,"stem":523,"order":524,"icon":9,"collapse":10,"navBadges":9},"CodeTree","\u002Fcomponents\u002Ftypography\u002Fcode-tree","components\u002Ftypography\u002Fcode-tree",76,{"title":526,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":527,"stem":528,"children":529,"page":10},"Composites","\u002Fcomposites","composites",[530,559],{"title":531,"path":532,"stem":533,"children":534,"page":10},"Dashboard","\u002Fcomposites\u002Fdashboard","composites\u002Fdashboard",[535,539,543,547,551,555],{"title":536,"path":537,"stem":538,"order":13,"icon":9,"collapse":10,"navBadges":9},"DashboardGroup","\u002Fcomposites\u002Fdashboard\u002Fdashboard-group","composites\u002Fdashboard\u002Fdashboard-group",{"title":540,"path":541,"stem":542,"order":30,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar","composites\u002Fdashboard\u002Fdashboard-sidebar",{"title":544,"path":545,"stem":546,"order":35,"icon":9,"collapse":10,"navBadges":9},"DashboardPanel","\u002Fcomposites\u002Fdashboard\u002Fdashboard-panel","composites\u002Fdashboard\u002Fdashboard-panel",{"title":548,"path":549,"stem":550,"order":40,"icon":9,"collapse":10,"navBadges":9},"DashboardResizeHandle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-resize-handle","composites\u002Fdashboard\u002Fdashboard-resize-handle",{"title":552,"path":553,"stem":554,"order":45,"icon":9,"collapse":10,"navBadges":9},"DashboardNavbar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-navbar","composites\u002Fdashboard\u002Fdashboard-navbar",{"title":556,"path":557,"stem":558,"order":50,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebarToggle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar-toggle","composites\u002Fdashboard\u002Fdashboard-sidebar-toggle",{"title":560,"path":561,"stem":562,"children":563,"page":10},"Documentation","\u002Fcomposites\u002Fdocumentation","composites\u002Fdocumentation",[564,568,572,576,580],{"title":565,"path":566,"stem":567,"order":13,"icon":9,"collapse":10,"navBadges":9},"PageHeader","\u002Fcomposites\u002Fdocumentation\u002Fpage-header","composites\u002Fdocumentation\u002Fpage-header",{"title":569,"path":570,"stem":571,"order":30,"icon":9,"collapse":10,"navBadges":9},"PageAside","\u002Fcomposites\u002Fdocumentation\u002Fpage-aside","composites\u002Fdocumentation\u002Fpage-aside",{"title":573,"path":574,"stem":575,"order":35,"icon":9,"collapse":10,"navBadges":9},"ContentNavigation","\u002Fcomposites\u002Fdocumentation\u002Fcontent-navigation","composites\u002Fdocumentation\u002Fcontent-navigation",{"title":577,"path":578,"stem":579,"order":40,"icon":9,"collapse":10,"navBadges":9},"ContentToc","\u002Fcomposites\u002Fdocumentation\u002Fcontent-toc","composites\u002Fdocumentation\u002Fcontent-toc",{"title":581,"path":582,"stem":583,"order":45,"icon":9,"collapse":10,"navBadges":9},"ContentSurround","\u002Fcomposites\u002Fdocumentation\u002Fcontent-surround","composites\u002Fdocumentation\u002Fcontent-surround",{"title":585,"order":586,"icon":9,"collapse":10,"navBadges":9,"path":587,"stem":588,"children":589,"page":10},"Blocks",35,"\u002Fblocks","blocks",[590,593,597,601,605,609],{"title":585,"path":591,"stem":592,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Fblocks\u002Foverview","blocks\u002Foverview",{"title":594,"path":595,"stem":596,"order":30,"icon":9,"collapse":10,"navBadges":9},"Sign in","\u002Fblocks\u002Fsign-in","blocks\u002Fsign-in",{"title":598,"path":599,"stem":600,"order":35,"icon":9,"collapse":10,"navBadges":9},"Dashboard overview","\u002Fblocks\u002Fdashboard-overview","blocks\u002Fdashboard-overview",{"title":602,"path":603,"stem":604,"order":40,"icon":9,"collapse":10,"navBadges":9},"Profile settings","\u002Fblocks\u002Fprofile-settings","blocks\u002Fprofile-settings",{"title":606,"path":607,"stem":608,"order":45,"icon":9,"collapse":10,"navBadges":9},"Data management","\u002Fblocks\u002Fdata-management","blocks\u002Fdata-management",{"title":610,"order":50,"icon":9,"collapse":10,"navBadges":9,"path":611,"stem":612,"children":613,"page":10},"Editors","\u002Fblocks\u002Feditors","blocks\u002Feditors",[614,618,622],{"title":615,"path":616,"stem":617,"order":13,"icon":9,"collapse":10,"navBadges":9},"Tiptap editor","\u002Fblocks\u002Feditors\u002Ftiptap","blocks\u002Feditors\u002Ftiptap",{"title":619,"path":620,"stem":621,"order":30,"icon":9,"collapse":10,"navBadges":9},"Lexical editor","\u002Fblocks\u002Feditors\u002Flexical","blocks\u002Feditors\u002Flexical",{"title":623,"path":624,"stem":625,"order":35,"icon":9,"collapse":10,"navBadges":9},"Quill editor","\u002Fblocks\u002Feditors\u002Fquill","blocks\u002Feditors\u002Fquill",{"title":627,"order":40,"icon":9,"collapse":10,"navBadges":9,"path":628,"stem":629,"children":630,"page":10},"Utilities","\u002Futilities","utilities",[631,665],{"title":632,"path":633,"stem":634,"children":635,"page":10},"Composables","\u002Futilities\u002Fcomposables","utilities\u002Fcomposables",[636,640,644,649,653,657,661],{"title":637,"path":638,"stem":639,"order":13,"icon":9,"collapse":10,"navBadges":9},"useModal","\u002Futilities\u002Fcomposables\u002Fuse-modal","utilities\u002Fcomposables\u002Fuse-modal",{"title":641,"path":642,"stem":643,"order":170,"icon":9,"collapse":10,"navBadges":9},"useConfirm","\u002Futilities\u002Fcomposables\u002Fuse-confirm","utilities\u002Fcomposables\u002Fuse-confirm",{"title":645,"path":646,"stem":647,"order":648,"icon":9,"collapse":10,"navBadges":9},"useDrawer","\u002Futilities\u002Fcomposables\u002Fuse-drawer","utilities\u002Fcomposables\u002Fuse-drawer",15,{"title":650,"path":651,"stem":652,"order":30,"icon":9,"collapse":10,"navBadges":9},"useSlideover","\u002Futilities\u002Fcomposables\u002Fuse-slideover","utilities\u002Fcomposables\u002Fuse-slideover",{"title":654,"path":655,"stem":656,"order":35,"icon":9,"collapse":10,"navBadges":9},"useIcons","\u002Futilities\u002Fcomposables\u002Fuse-icons","utilities\u002Fcomposables\u002Fuse-icons",{"title":658,"path":659,"stem":660,"order":40,"icon":9,"collapse":10,"navBadges":9},"useMessages","\u002Futilities\u002Fcomposables\u002Fuse-messages","utilities\u002Fcomposables\u002Fuse-messages",{"title":662,"path":663,"stem":664,"order":45,"icon":9,"collapse":10,"navBadges":9},"useLocale","\u002Futilities\u002Fcomposables\u002Fuse-locale","utilities\u002Fcomposables\u002Fuse-locale",{"title":666,"path":667,"stem":668,"children":669,"page":10},"Directives","\u002Futilities\u002Fdirectives","utilities\u002Fdirectives",[670,674,678],{"title":671,"path":672,"stem":673,"order":13,"icon":9,"collapse":10,"navBadges":9},"v-ripple","\u002Futilities\u002Fdirectives\u002Fripple","utilities\u002Fdirectives\u002Fripple",{"title":675,"path":676,"stem":677,"order":648,"icon":9,"collapse":10,"navBadges":9},"v-hotkey","\u002Futilities\u002Fdirectives\u002Fhotkey","utilities\u002Fdirectives\u002Fhotkey",{"title":679,"path":680,"stem":681,"order":30,"icon":9,"collapse":10,"navBadges":9},"v-mask","\u002Futilities\u002Fdirectives\u002Fmask","utilities\u002Fdirectives\u002Fmask",{"byLocale":683,"defaultPath":24},{"en":684,"id":1234},{"id":685,"title":23,"aside":686,"body":687,"collapse":10,"description":1229,"editLink":686,"extension":1230,"icon":9,"issueLink":686,"meta":1231,"navBadges":9,"navigation":9,"order":13,"path":24,"prevNext":686,"seo":1232,"stem":25,"toc":686,"__hash__":1233},"docs\u002Foverview\u002Fgetting-started\u002Fintroduction.md",true,{"type":688,"value":689,"toc":1217},"minimark",[690,694,711,714,719,724,727,730,733,821,824,831,837,841,848,854,911,914,924,928,931,934,937,940,943,946,949,953,956,959,962,966,973,975,1025,1028,1068,1071,1128,1132,1137,1143,1149,1157,1161,1168,1171,1210,1213],[691,692,693],"p",{},"Selaras is a UI component library for Nuxt.",[691,695,696,697,704,705,710],{},"It uses ",[698,699,703],"a",{"href":700,"rel":701},"https:\u002F\u002Freka-ui.com",[702],"nofollow","Reka UI"," for accessible UI primitives. It uses Tailwind CSS v4 for styling and ",[698,706,709],{"href":707,"rel":708},"https:\u002F\u002Fwww.tailwind-variants.org",[702],"tailwind-variants"," for component variants.",[691,712,713],{},"Selaras provides ready-to-use components for forms, navigation, data display, overlays, content, and application layouts.",[715,716,718],"h2",{"id":717},"design-goals","Design goals",[720,721,723],"h3",{"id":722},"css-first-theming","CSS-first theming",[691,725,726],{},"Selaras uses CSS custom properties for design values.",[691,728,729],{},"You can change colors, surfaces, text, borders, radius, shadows, and other theme values with CSS.",[691,731,732],{},"For example:",[734,735,740],"pre",{"className":736,"code":737,"language":738,"meta":739,"style":739},"language-css shiki shiki-themes github-light github-dark",":root {\n  --selaras-color-primary-fill: #6d4aff;\n  --selaras-surface-canvas: #f9f9f9;\n  --selaras-surface-default: #ffffff;\n  --selaras-radius-base: 0.5rem;\n}\n","css","",[741,742,743,755,772,785,798,815],"code",{"__ignoreMap":739},[744,745,747,751],"span",{"class":746,"line":8},"line",[744,748,750],{"class":749},"sScJk",":root",[744,752,754],{"class":753},"sVt8B"," {\n",[744,756,758,762,765,769],{"class":746,"line":757},2,[744,759,761],{"class":760},"s4XuR","  --selaras-color-primary-fill",[744,763,764],{"class":753},": ",[744,766,768],{"class":767},"sj4cs","#6d4aff",[744,770,771],{"class":753},";\n",[744,773,775,778,780,783],{"class":746,"line":774},3,[744,776,777],{"class":760},"  --selaras-surface-canvas",[744,779,764],{"class":753},[744,781,782],{"class":767},"#f9f9f9",[744,784,771],{"class":753},[744,786,788,791,793,796],{"class":746,"line":787},4,[744,789,790],{"class":760},"  --selaras-surface-default",[744,792,764],{"class":753},[744,794,795],{"class":767},"#ffffff",[744,797,771],{"class":753},[744,799,801,804,806,809,813],{"class":746,"line":800},5,[744,802,803],{"class":760},"  --selaras-radius-base",[744,805,764],{"class":753},[744,807,808],{"class":767},"0.5",[744,810,812],{"class":811},"szBVR","rem",[744,814,771],{"class":753},[744,816,818],{"class":746,"line":817},6,[744,819,820],{"class":753},"}\n",[691,822,823],{},"You do not need JavaScript or Nuxt configuration for normal theme changes.",[691,825,826,827,830],{},"Use Nuxt configuration only when Selaras needs build-time information. For example, use it when you add a new color role such as ",[741,828,829],{},"tertiary",".",[691,832,833,834,836],{},"See ",[698,835,71],{"href":76}," for all theme options.",[720,838,840],{"id":839},"predictable-component-customization","Predictable component customization",[691,842,843,844,847],{},"Each component has one ",[741,845,846],{},":ui"," prop for instance-level customization.",[691,849,850,851,853],{},"Use ",[741,852,846],{}," when you want to change the classes or attributes of one component.",[734,855,859],{"className":856,"code":857,"language":858,"meta":739,"style":739},"language-vue-html shiki shiki-themes github-light github-dark","\u003CSButton :ui=\"{ base: 'font-mono' }\">\n  Save\n\u003C\u002FSButton>\n","vue-html",[741,860,861,897,902],{"__ignoreMap":739},[744,862,863,866,870,873,876,879,883,886,889,892,894],{"class":746,"line":8},[744,864,865],{"class":753},"\u003C",[744,867,869],{"class":868},"s9eBZ","SButton",[744,871,872],{"class":753}," :",[744,874,875],{"class":749},"ui",[744,877,878],{"class":753},"=",[744,880,882],{"class":881},"sZZnC","\"",[744,884,885],{"class":753},"{ base: ",[744,887,888],{"class":881},"'font-mono'",[744,890,891],{"class":753}," }",[744,893,882],{"class":881},[744,895,896],{"class":753},">\n",[744,898,899],{"class":746,"line":757},[744,900,901],{"class":753},"  Save\n",[744,903,904,907,909],{"class":746,"line":774},[744,905,906],{"class":753},"\u003C\u002F",[744,908,869],{"class":868},[744,910,896],{"class":753},[691,912,913],{},"Use CSS theme tokens when you want to change design values across many components.",[691,915,850,916,919,920,923],{},[741,917,918],{},"app.config.ts"," or ",[741,921,922],{},"STheme"," when you want to change component configuration across an application or a subtree.",[720,925,927],{"id":926},"accessible-primitives","Accessible primitives",[691,929,930],{},"Selaras uses Reka UI for many interactive primitives.",[691,932,933],{},"Reka UI provides keyboard interaction, focus management, ARIA behavior, and other accessibility features for these primitives.",[691,935,936],{},"Selaras adds its own components and styling on top of this foundation.",[720,938,52],{"id":939},"adaptive-interfaces",[691,941,942],{},"Some Selaras components can use a different presentation when the available screen space changes.",[691,944,945],{},"For example, a component can use a popover on a larger screen and a modal or drawer on a smaller screen.",[691,947,948],{},"The component keeps one public API while Selaras changes the presentation.",[720,950,952],{"id":951},"css-based-motion","CSS-based motion",[691,954,955],{},"Selaras uses CSS for component transitions and interaction states.",[691,957,958],{},"It does not require a JavaScript animation library for its standard motion.",[691,960,961],{},"Selaras also respects the user's reduced-motion preference.",[715,963,965],{"id":964},"what-you-get","What you get",[691,967,968,969,972],{},"When you install Selaras, Nuxt automatically imports the components with an ",[741,970,971],{},"S"," prefix.",[691,974,732],{},[734,976,978],{"className":856,"code":977,"language":858,"meta":739,"style":739},"\u003CSButton \u002F>\n\u003CSInput \u002F>\n\u003CSSelect \u002F>\n\u003CSModal \u002F>\n\u003CSTable \u002F>\n",[741,979,980,989,998,1007,1016],{"__ignoreMap":739},[744,981,982,984,986],{"class":746,"line":8},[744,983,865],{"class":753},[744,985,869],{"class":868},[744,987,988],{"class":753}," \u002F>\n",[744,990,991,993,996],{"class":746,"line":757},[744,992,865],{"class":753},[744,994,995],{"class":868},"SInput",[744,997,988],{"class":753},[744,999,1000,1002,1005],{"class":746,"line":774},[744,1001,865],{"class":753},[744,1003,1004],{"class":868},"SSelect",[744,1006,988],{"class":753},[744,1008,1009,1011,1014],{"class":746,"line":787},[744,1010,865],{"class":753},[744,1012,1013],{"class":868},"SModal",[744,1015,988],{"class":753},[744,1017,1018,1020,1023],{"class":746,"line":800},[744,1019,865],{"class":753},[744,1021,1022],{"class":868},"STable",[744,1024,988],{"class":753},[691,1026,1027],{},"Selaras also provides composables for application-level UI:",[734,1029,1033],{"className":1030,"code":1031,"language":1032,"meta":739,"style":739},"language-ts shiki shiki-themes github-light github-dark","useModal()\nuseDrawer()\nuseSlideover()\nuseToast()\nuseCommandPalette()\n","ts",[741,1034,1035,1042,1048,1054,1061],{"__ignoreMap":739},[744,1036,1037,1039],{"class":746,"line":8},[744,1038,637],{"class":749},[744,1040,1041],{"class":753},"()\n",[744,1043,1044,1046],{"class":746,"line":757},[744,1045,645],{"class":749},[744,1047,1041],{"class":753},[744,1049,1050,1052],{"class":746,"line":774},[744,1051,650],{"class":749},[744,1053,1041],{"class":753},[744,1055,1056,1059],{"class":746,"line":787},[744,1057,1058],{"class":749},"useToast",[744,1060,1041],{"class":753},[744,1062,1063,1066],{"class":746,"line":800},[744,1064,1065],{"class":749},"useCommandPalette",[744,1067,1041],{"class":753},[691,1069,1070],{},"Selaras can also provide small DOM behaviors through directives, such as:",[734,1072,1074],{"className":856,"code":1073,"language":858,"meta":739,"style":739},"\u003CSButton v-ripple>\n  Save\n\u003C\u002FSButton>\n\n\u003CSInput v-mask=\"'(###) ###-####'\" inputmode=\"tel\" \u002F>\n",[741,1075,1076,1087,1091,1099,1104],{"__ignoreMap":739},[744,1077,1078,1080,1082,1085],{"class":746,"line":8},[744,1079,865],{"class":753},[744,1081,869],{"class":868},[744,1083,1084],{"class":749}," v-ripple",[744,1086,896],{"class":753},[744,1088,1089],{"class":746,"line":757},[744,1090,901],{"class":753},[744,1092,1093,1095,1097],{"class":746,"line":774},[744,1094,906],{"class":753},[744,1096,869],{"class":868},[744,1098,896],{"class":753},[744,1100,1101],{"class":746,"line":787},[744,1102,1103],{"emptyLinePlaceholder":686},"\n",[744,1105,1106,1108,1110,1113,1115,1118,1121,1123,1126],{"class":746,"line":800},[744,1107,865],{"class":753},[744,1109,995],{"class":868},[744,1111,1112],{"class":749}," v-mask",[744,1114,878],{"class":753},[744,1116,1117],{"class":881},"\"'(###) ###-####'\"",[744,1119,1120],{"class":749}," inputmode",[744,1122,878],{"class":753},[744,1124,1125],{"class":881},"\"tel\"",[744,1127,988],{"class":753},[715,1129,1131],{"id":1130},"where-to-start","Where to start",[691,1133,1134,1135,830],{},"Start with ",[698,1136,27],{"href":28},[691,1138,1139,1140,1142],{},"Then read ",[698,1141,71],{"href":76}," to learn how to customize Selaras with CSS.",[691,1144,1145,1146,1148],{},"Use the component documentation when you need the props, slots, events, variants, and ",[741,1147,846],{}," options for a specific component.",[691,1150,1151,1152,1156],{},"Read the ",[698,1153,1155],{"href":1154},"\u002Fchangelog","changelog"," for new features, fixes, and upgrade guidance.",[715,1158,1160],{"id":1159},"acknowledgments","Acknowledgments",[691,1162,1163,1164,1167],{},"Selaras uses ",[698,1165,703],{"href":700,"rel":1166},[702]," as its primitive foundation.",[691,1169,1170],{},"We appreciate the following projects for their contributions to the Vue ecosystem and the inspiration they provide for thoughtful component design:",[1172,1173,1174,1182,1189,1196,1203],"ul",{},[1175,1176,1177],"li",{},[698,1178,1181],{"href":1179,"rel":1180},"https:\u002F\u002Fui.nuxt.com",[702],"Nuxt UI",[1175,1183,1184],{},[698,1185,1188],{"href":1186,"rel":1187},"https:\u002F\u002Fprimevue.org",[702],"PrimeVue",[1175,1190,1191],{},[698,1192,1195],{"href":1193,"rel":1194},"https:\u002F\u002Fwww.shadcn-vue.com",[702],"shadcn-vue",[1175,1197,1198],{},[698,1199,1202],{"href":1200,"rel":1201},"https:\u002F\u002Fui-thing.behonbaker.com",[702],"UI Thing",[1175,1204,1205],{},[698,1206,1209],{"href":1207,"rel":1208},"https:\u002F\u002Fquasar.dev",[702],"Quasar",[691,1211,1212],{},"Their work has helped shape our thinking about usability, customization, and developer experience as we develop Selaras.",[1214,1215,1216],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":739,"searchDepth":774,"depth":774,"links":1218},[1219,1226,1227,1228],{"id":717,"depth":757,"text":718,"children":1220},[1221,1222,1223,1224,1225],{"id":722,"depth":774,"text":723},{"id":839,"depth":774,"text":840},{"id":926,"depth":774,"text":927},{"id":939,"depth":774,"text":52},{"id":951,"depth":774,"text":952},{"id":964,"depth":757,"text":965},{"id":1130,"depth":757,"text":1131},{"id":1159,"depth":757,"text":1160},"Learn what Selaras is, what it provides, and how you can customize it.","md",{},{"title":23,"description":1229},"iCf8eev1JRl8sddZdjPnjunTiOR-QXxv5EBmCTo72zQ",{"id":1235,"title":1236,"aside":686,"body":1237,"collapse":10,"description":1680,"editLink":686,"extension":1230,"icon":9,"issueLink":686,"meta":1681,"navBadges":9,"navigation":9,"order":13,"path":1682,"prevNext":686,"seo":1683,"stem":1684,"toc":686,"__hash__":1685},"docs\u002Fid\u002Foverview\u002Fgetting-started\u002Fintroduction.md","Pengenalan",{"type":688,"value":1238,"toc":1668},[1239,1242,1253,1256,1260,1264,1267,1270,1273,1329,1332,1337,1344,1348,1354,1360,1400,1403,1411,1415,1418,1421,1424,1428,1431,1434,1437,1441,1444,1447,1450,1454,1459,1461,1505,1508,1542,1545,1595,1599,1605,1611,1617,1623,1627,1633,1636,1663,1666],[691,1240,1241],{},"Selaras adalah pustaka komponen UI untuk Nuxt.",[691,1243,1244,1245,1248,1249,1252],{},"Selaras menggunakan ",[698,1246,703],{"href":700,"rel":1247},[702]," untuk primitif UI yang dapat diakses. Selaras menggunakan Tailwind CSS v4 untuk styling dan ",[698,1250,709],{"href":707,"rel":1251},[702]," untuk varian komponen.",[691,1254,1255],{},"Selaras menyediakan komponen siap pakai untuk formulir, navigasi, tampilan data, overlay, konten, dan tata letak aplikasi.",[715,1257,1259],{"id":1258},"tujuan-desain","Tujuan desain",[720,1261,1263],{"id":1262},"tema-css-first","Tema CSS-first",[691,1265,1266],{},"Selaras menggunakan properti kustom CSS untuk nilai desain.",[691,1268,1269],{},"Anda dapat mengubah warna, permukaan, teks, border, radius, bayangan, dan nilai tema lainnya dengan CSS.",[691,1271,1272],{},"Contohnya:",[734,1274,1275],{"className":736,"code":737,"language":738,"meta":739,"style":739},[741,1276,1277,1283,1293,1303,1313,1325],{"__ignoreMap":739},[744,1278,1279,1281],{"class":746,"line":8},[744,1280,750],{"class":749},[744,1282,754],{"class":753},[744,1284,1285,1287,1289,1291],{"class":746,"line":757},[744,1286,761],{"class":760},[744,1288,764],{"class":753},[744,1290,768],{"class":767},[744,1292,771],{"class":753},[744,1294,1295,1297,1299,1301],{"class":746,"line":774},[744,1296,777],{"class":760},[744,1298,764],{"class":753},[744,1300,782],{"class":767},[744,1302,771],{"class":753},[744,1304,1305,1307,1309,1311],{"class":746,"line":787},[744,1306,790],{"class":760},[744,1308,764],{"class":753},[744,1310,795],{"class":767},[744,1312,771],{"class":753},[744,1314,1315,1317,1319,1321,1323],{"class":746,"line":800},[744,1316,803],{"class":760},[744,1318,764],{"class":753},[744,1320,808],{"class":767},[744,1322,812],{"class":811},[744,1324,771],{"class":753},[744,1326,1327],{"class":746,"line":817},[744,1328,820],{"class":753},[691,1330,1331],{},"Anda tidak memerlukan JavaScript atau konfigurasi Nuxt untuk perubahan tema normal.",[691,1333,1334,1335,830],{},"Gunakan konfigurasi Nuxt hanya ketika Selaras membutuhkan informasi pada waktu build. Misalnya, gunakan ketika Anda menambahkan role warna baru seperti ",[741,1336,829],{},[691,1338,1339,1340,1343],{},"Lihat ",[698,1341,1342],{"href":76},"Tema"," untuk semua opsi tema.",[720,1345,1347],{"id":1346},"penyesuaian-komponen-yang-dapat-diprediksi","Penyesuaian komponen yang dapat diprediksi",[691,1349,1350,1351,1353],{},"Setiap komponen memiliki satu prop ",[741,1352,846],{}," untuk penyesuaian tingkat instance.",[691,1355,1356,1357,1359],{},"Gunakan ",[741,1358,846],{}," ketika Anda ingin mengubah kelas atau atribut dari satu komponen.",[734,1361,1362],{"className":856,"code":857,"language":858,"meta":739,"style":739},[741,1363,1364,1388,1392],{"__ignoreMap":739},[744,1365,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386],{"class":746,"line":8},[744,1367,865],{"class":753},[744,1369,869],{"class":868},[744,1371,872],{"class":753},[744,1373,875],{"class":749},[744,1375,878],{"class":753},[744,1377,882],{"class":881},[744,1379,885],{"class":753},[744,1381,888],{"class":881},[744,1383,891],{"class":753},[744,1385,882],{"class":881},[744,1387,896],{"class":753},[744,1389,1390],{"class":746,"line":757},[744,1391,901],{"class":753},[744,1393,1394,1396,1398],{"class":746,"line":774},[744,1395,906],{"class":753},[744,1397,869],{"class":868},[744,1399,896],{"class":753},[691,1401,1402],{},"Gunakan token tema CSS ketika Anda ingin mengubah nilai desain di banyak komponen.",[691,1404,1356,1405,1407,1408,1410],{},[741,1406,918],{}," atau ",[741,1409,922],{}," ketika Anda ingin mengubah konfigurasi komponen di seluruh aplikasi atau subtree.",[720,1412,1414],{"id":1413},"primitif-yang-dapat-diakses","Primitif yang dapat diakses",[691,1416,1417],{},"Selaras menggunakan Reka UI untuk banyak primitif interaktif.",[691,1419,1420],{},"Reka UI menyediakan interaksi keyboard, manajemen fokus, perilaku ARIA, dan fitur aksesibilitas lainnya untuk primitif ini.",[691,1422,1423],{},"Selaras menambahkan komponen dan styling sendiri di atas fondasi ini.",[720,1425,1427],{"id":1426},"antarmuka-adaptif","Antarmuka adaptif",[691,1429,1430],{},"Beberapa komponen Selaras dapat menggunakan presentasi yang berbeda ketika ruang layar yang tersedia berubah.",[691,1432,1433],{},"Misalnya, sebuah komponen dapat menggunakan popover di layar yang lebih besar dan modal atau drawer di layar yang lebih kecil.",[691,1435,1436],{},"Komponen menjaga satu API publik sementara Selaras mengubah presentasinya.",[720,1438,1440],{"id":1439},"gerakan-berbasis-css","Gerakan berbasis CSS",[691,1442,1443],{},"Selaras menggunakan CSS untuk transisi komponen dan state interaksi.",[691,1445,1446],{},"Selaras tidak memerlukan library animasi JavaScript untuk gerakan standarnya.",[691,1448,1449],{},"Selaras juga menghormati preferensi reduced-motion pengguna.",[715,1451,1453],{"id":1452},"apa-yang-anda-dapatkan","Apa yang Anda dapatkan",[691,1455,1456,1457,830],{},"Saat Anda menginstal Selaras, Nuxt secara otomatis mengimpor komponen dengan awalan ",[741,1458,971],{},[691,1460,1272],{},[734,1462,1463],{"className":856,"code":977,"language":858,"meta":739,"style":739},[741,1464,1465,1473,1481,1489,1497],{"__ignoreMap":739},[744,1466,1467,1469,1471],{"class":746,"line":8},[744,1468,865],{"class":753},[744,1470,869],{"class":868},[744,1472,988],{"class":753},[744,1474,1475,1477,1479],{"class":746,"line":757},[744,1476,865],{"class":753},[744,1478,995],{"class":868},[744,1480,988],{"class":753},[744,1482,1483,1485,1487],{"class":746,"line":774},[744,1484,865],{"class":753},[744,1486,1004],{"class":868},[744,1488,988],{"class":753},[744,1490,1491,1493,1495],{"class":746,"line":787},[744,1492,865],{"class":753},[744,1494,1013],{"class":868},[744,1496,988],{"class":753},[744,1498,1499,1501,1503],{"class":746,"line":800},[744,1500,865],{"class":753},[744,1502,1022],{"class":868},[744,1504,988],{"class":753},[691,1506,1507],{},"Selaras juga menyediakan composable untuk UI tingkat aplikasi:",[734,1509,1510],{"className":1030,"code":1031,"language":1032,"meta":739,"style":739},[741,1511,1512,1518,1524,1530,1536],{"__ignoreMap":739},[744,1513,1514,1516],{"class":746,"line":8},[744,1515,637],{"class":749},[744,1517,1041],{"class":753},[744,1519,1520,1522],{"class":746,"line":757},[744,1521,645],{"class":749},[744,1523,1041],{"class":753},[744,1525,1526,1528],{"class":746,"line":774},[744,1527,650],{"class":749},[744,1529,1041],{"class":753},[744,1531,1532,1534],{"class":746,"line":787},[744,1533,1058],{"class":749},[744,1535,1041],{"class":753},[744,1537,1538,1540],{"class":746,"line":800},[744,1539,1065],{"class":749},[744,1541,1041],{"class":753},[691,1543,1544],{},"Selaras juga dapat menyediakan perilaku DOM kecil melalui direktif, seperti:",[734,1546,1547],{"className":856,"code":1073,"language":858,"meta":739,"style":739},[741,1548,1549,1559,1563,1571,1575],{"__ignoreMap":739},[744,1550,1551,1553,1555,1557],{"class":746,"line":8},[744,1552,865],{"class":753},[744,1554,869],{"class":868},[744,1556,1084],{"class":749},[744,1558,896],{"class":753},[744,1560,1561],{"class":746,"line":757},[744,1562,901],{"class":753},[744,1564,1565,1567,1569],{"class":746,"line":774},[744,1566,906],{"class":753},[744,1568,869],{"class":868},[744,1570,896],{"class":753},[744,1572,1573],{"class":746,"line":787},[744,1574,1103],{"emptyLinePlaceholder":686},[744,1576,1577,1579,1581,1583,1585,1587,1589,1591,1593],{"class":746,"line":800},[744,1578,865],{"class":753},[744,1580,995],{"class":868},[744,1582,1112],{"class":749},[744,1584,878],{"class":753},[744,1586,1117],{"class":881},[744,1588,1120],{"class":749},[744,1590,878],{"class":753},[744,1592,1125],{"class":881},[744,1594,988],{"class":753},[715,1596,1598],{"id":1597},"mulai-dari-mana","Mulai dari mana",[691,1600,1601,1602,830],{},"Mulai dari ",[698,1603,1604],{"href":28},"Instalasi",[691,1606,1607,1608,1610],{},"Lalu baca ",[698,1609,1342],{"href":76}," untuk mempelajari cara menyesuaikan Selaras dengan CSS.",[691,1612,1613,1614,1616],{},"Gunakan dokumentasi komponen ketika Anda membutuhkan props, slot, event, varian, dan opsi ",[741,1615,846],{}," untuk komponen tertentu.",[691,1618,1619,1620,1622],{},"Baca ",[698,1621,1155],{"href":1154}," untuk fitur baru, perbaikan, dan panduan upgrade.",[715,1624,1626],{"id":1625},"penghargaan","Penghargaan",[691,1628,1244,1629,1632],{},[698,1630,703],{"href":700,"rel":1631},[702]," sebagai fondasi primitifnya.",[691,1634,1635],{},"Kami menghargai proyek-proyek berikut atas kontribusi mereka terhadap ekosistem Vue dan inspirasi yang mereka berikan untuk desain komponen yang bijaksana:",[1172,1637,1638,1643,1648,1653,1658],{},[1175,1639,1640],{},[698,1641,1181],{"href":1179,"rel":1642},[702],[1175,1644,1645],{},[698,1646,1188],{"href":1186,"rel":1647},[702],[1175,1649,1650],{},[698,1651,1195],{"href":1193,"rel":1652},[702],[1175,1654,1655],{},[698,1656,1202],{"href":1200,"rel":1657},[702],[1175,1659,1660],{},[698,1661,1209],{"href":1207,"rel":1662},[702],[691,1664,1665],{},"Pekerjaan mereka telah membentuk pemikiran kami tentang kegunaan, penyesuaian, dan pengalaman developer saat kami mengembangkan Selaras.",[1214,1667,1216],{},{"title":739,"searchDepth":774,"depth":774,"links":1669},[1670,1677,1678,1679],{"id":1258,"depth":757,"text":1259,"children":1671},[1672,1673,1674,1675,1676],{"id":1262,"depth":774,"text":1263},{"id":1346,"depth":774,"text":1347},{"id":1413,"depth":774,"text":1414},{"id":1426,"depth":774,"text":1427},{"id":1439,"depth":774,"text":1440},{"id":1452,"depth":757,"text":1453},{"id":1597,"depth":757,"text":1598},{"id":1625,"depth":757,"text":1626},"Pelajari apa itu Selaras, apa yang disediakannya, dan cara menyesuaikannya.",{},"\u002Fid\u002Foverview\u002Fgetting-started\u002Fintroduction",{"title":1236,"description":1680},"id\u002Foverview\u002Fgetting-started\u002Fintroduction","kOhbl2l7CADjvLZtrsckVM7Ork4iLZiTq4AtbjTsG6c",1792925240370]