[{"data":1,"prerenderedAt":1913},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Foverview\u002Ftheming\u002Fcomponent-styling":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":92},{"en":684,"id":1366},{"id":685,"title":91,"aside":686,"body":687,"collapse":10,"description":1362,"editLink":686,"extension":744,"icon":9,"issueLink":686,"meta":1363,"navBadges":9,"navigation":9,"order":45,"path":92,"prevNext":686,"seo":1364,"stem":93,"toc":686,"__hash__":1365},"docs\u002Foverview\u002Ftheming\u002Fcomponent-styling.md",true,{"type":688,"value":689,"toc":1355},"minimark",[690,695,699,768,779,786,880,887,891,898,949,964,975,1025,1039,1111,1136,1145,1148,1154,1198,1204,1211,1218,1301,1305,1308,1341,1351],[691,692,694],"h2",{"id":693},"control-sizes","Control sizes",[696,697,698],"p",{},"Buttons and single-line fields share the same default outer height for each size:",[700,701,702,718],"table",{},[703,704,705],"thead",{},[706,707,708,712,715],"tr",{},[709,710,711],"th",{},"Size",[709,713,714],{},"Height",[709,716,717],{},"At a 16px root font size",[719,720,721,738,753],"tbody",{},[706,722,723,730,735],{},[724,725,726],"td",{},[727,728,729],"code",{},"sm",[724,731,732],{},[727,733,734],{},"2rem",[724,736,737],{},"32px",[706,739,740,745,750],{},[724,741,742],{},[727,743,744],{},"md",[724,746,747],{},[727,748,749],{},"2.5rem",[724,751,752],{},"40px",[706,754,755,760,765],{},[724,756,757],{},[727,758,759],{},"lg",[724,761,762],{},[727,763,764],{},"2.75rem",[724,766,767],{},"44px",[696,769,770,771,774,775,778],{},"This applies to Button, Input, InputNumber, Select, Autocomplete, DatePicker,\nColorPicker's trigger, and each PinInput box. DatePicker keeps the same height\nwith ",[727,772,773],{},"trigger-mode=\"field\""," and ",[727,776,777],{},"trigger-mode=\"button\"",", including range and\ntime-only modes. Clear buttons and loading indicators do not increase the\nouter height.",[696,780,781,782,785],{},"Use the same ",[727,783,784],{},"size"," when placing a field beside an action:",[787,788,793],"pre",{"className":789,"code":790,"language":791,"meta":792,"style":792},"language-vue-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"flex items-center gap-2\">\n  \u003CSInput size=\"md\" placeholder=\"Search projects\" \u002F>\n  \u003CSButton size=\"md\">Search\u003C\u002FSButton>\n\u003C\u002Fdiv>\n","vue-html","",[727,794,795,821,849,870],{"__ignoreMap":792},[796,797,799,803,807,811,814,818],"span",{"class":798,"line":8},"line",[796,800,802],{"class":801},"sVt8B","\u003C",[796,804,806],{"class":805},"s9eBZ","div",[796,808,810],{"class":809},"sScJk"," class",[796,812,813],{"class":801},"=",[796,815,817],{"class":816},"sZZnC","\"flex items-center gap-2\"",[796,819,820],{"class":801},">\n",[796,822,824,827,830,833,835,838,841,843,846],{"class":798,"line":823},2,[796,825,826],{"class":801},"  \u003C",[796,828,829],{"class":805},"SInput",[796,831,832],{"class":809}," size",[796,834,813],{"class":801},[796,836,837],{"class":816},"\"md\"",[796,839,840],{"class":809}," placeholder",[796,842,813],{"class":801},[796,844,845],{"class":816},"\"Search projects\"",[796,847,848],{"class":801}," \u002F>\n",[796,850,852,854,857,859,861,863,866,868],{"class":798,"line":851},3,[796,853,826],{"class":801},[796,855,856],{"class":805},"SButton",[796,858,832],{"class":809},[796,860,813],{"class":801},[796,862,837],{"class":816},[796,864,865],{"class":801},">Search\u003C\u002F",[796,867,856],{"class":805},[796,869,820],{"class":801},[796,871,873,876,878],{"class":798,"line":872},4,[796,874,875],{"class":801},"\u003C\u002F",[796,877,806],{"class":805},[796,879,820],{"class":801},[696,881,882,883,886],{},"The height refers to the control itself; FormField labels, descriptions, and\nvalidation messages add space around it. Textareas and wrapping selections can\ngrow to fit their content. Buttons embedded inside a field use smaller dimensions\nto leave room within the field. Theme and local ",[727,884,885],{},":ui"," overrides can customize\nthese defaults.",[691,888,890],{"id":889},"field-clear-controls","Field clear controls",[696,892,893,894,897],{},"Input, Textarea, Select, Autocomplete, and DatePicker share a neutral ",[727,895,896],{},"ghost","\nButton for their built-in clear action. Its hover background sits inside the\nfield border. The target and glyph have independent sizes, so the clear icon\nmatches adjacent field icons without needing a full-height button:",[700,899,900,912],{},[703,901,902],{},[706,903,904,907,910],{},[709,905,906],{},"Field size",[709,908,909],{},"Clear target",[709,911,167],{},[719,913,914,926,938],{},[706,915,916,920,923],{},[724,917,918],{},[727,919,729],{},[724,921,922],{},"24px",[724,924,925],{},"16px",[706,927,928,932,935],{},[724,929,930],{},[727,931,744],{},[724,933,934],{},"28px",[724,936,937],{},"18px",[706,939,940,944,946],{},[724,941,942],{},[727,943,759],{},[724,945,737],{},[724,947,948],{},"20px",[696,950,951,952,955,956,959,960,963],{},"These dimensions scale with the root font size. With ",[727,953,954],{},"clearable",", the action\nstays visible whenever there is content, including the number ",[727,957,958],{},"0"," and an\nAutocomplete draft query. Empty, disabled, and read-only fields hide it.\nLoading indicators and custom ",[727,961,962],{},"trailing"," content can appear alongside it.\nClearing returns focus to the editor or trigger.",[696,965,966,967,970,971,974],{},"Customize one field with ",[727,968,969],{},"ui.clear",", or replace its glyph with ",[727,972,973],{},"#clear-icon",":",[787,976,978],{"className":789,"code":977,"language":791,"meta":792,"style":792},"\u003CSInput v-model=\"query\" clearable :ui=\"{ clear: 'rounded-sm' }\" \u002F>\n",[727,979,980],{"__ignoreMap":792},[796,981,982,984,986,989,991,994,997,999,1002,1005,1008,1010,1012,1015,1018,1021,1023],{"class":798,"line":8},[796,983,802],{"class":801},[796,985,829],{"class":805},[796,987,988],{"class":809}," v-model",[796,990,813],{"class":801},[796,992,993],{"class":816},"\"",[796,995,996],{"class":801},"query",[796,998,993],{"class":816},[796,1000,1001],{"class":809}," clearable",[796,1003,1004],{"class":801}," :",[796,1006,1007],{"class":809},"ui",[796,1009,813],{"class":801},[796,1011,993],{"class":816},[796,1013,1014],{"class":801},"{ clear: ",[796,1016,1017],{"class":816},"'rounded-sm'",[796,1019,1020],{"class":801}," }",[796,1022,993],{"class":816},[796,1024,848],{"class":801},[696,1026,1027,1028,1031,1032,1035,1036,974],{},"Use the shared ",[727,1029,1030],{},"fieldClearButton"," recipe in ",[727,1033,1034],{},"app.config.ts"," to style every\nbuilt-in field clear control. The same recipe works inside ",[727,1037,1038],{},"STheme",[787,1040,1044],{"className":1041,"code":1042,"filename":1034,"language":1043,"meta":792,"style":792},"language-ts shiki shiki-themes github-light github-dark","export default defineAppConfig({\n  selaras: {\n    ui: {\n      fieldClearButton: {\n        slots: { base: 'rounded-sm' },\n      },\n    },\n  },\n})\n","ts",[727,1045,1046,1061,1066,1071,1076,1087,1093,1099,1105],{"__ignoreMap":792},[796,1047,1048,1052,1055,1058],{"class":798,"line":8},[796,1049,1051],{"class":1050},"szBVR","export",[796,1053,1054],{"class":1050}," default",[796,1056,1057],{"class":809}," defineAppConfig",[796,1059,1060],{"class":801},"({\n",[796,1062,1063],{"class":798,"line":823},[796,1064,1065],{"class":801},"  selaras: {\n",[796,1067,1068],{"class":798,"line":851},[796,1069,1070],{"class":801},"    ui: {\n",[796,1072,1073],{"class":798,"line":872},[796,1074,1075],{"class":801},"      fieldClearButton: {\n",[796,1077,1079,1082,1084],{"class":798,"line":1078},5,[796,1080,1081],{"class":801},"        slots: { base: ",[796,1083,1017],{"class":816},[796,1085,1086],{"class":801}," },\n",[796,1088,1090],{"class":798,"line":1089},6,[796,1091,1092],{"class":801},"      },\n",[796,1094,1096],{"class":798,"line":1095},7,[796,1097,1098],{"class":801},"    },\n",[796,1100,1102],{"class":798,"line":1101},8,[796,1103,1104],{"class":801},"  },\n",[796,1106,1108],{"class":798,"line":1107},9,[796,1109,1110],{"class":801},"})\n",[696,1112,1113,1114,1117,1118,1120,1121,774,1124,1127,1128,1131,1132,1135],{},"Size-specific target or icon overrides use ",[727,1115,1116],{},"compoundVariants"," with a ",[727,1119,784],{},"\ncondition and the ",[727,1122,1123],{},"base",[727,1125,1126],{},"icon"," slots. DatePicker also exposes ",[727,1129,1130],{},"ui.buttonClear"," for clear placement\nin button trigger mode, and ",[727,1133,1134],{},"ui.triggerIcon"," for its field-mode calendar\u002Fclock\nglyph. Keep enough space inside the field when changing the target size.",[691,1137,1139,1140,1142,1143],{"id":1138},"the-ui-prop-and-stheme","The ",[727,1141,885],{}," prop and ",[727,1144,1038],{},[696,1146,1147],{},"Color tokens and component class overrides are separate systems.",[696,1149,1150,1151,1153],{},"Use theme tokens for design values. Use ",[727,1152,885],{}," when you want to change classes\nor attributes for one component instance.",[787,1155,1157],{"className":789,"code":1156,"language":791,"meta":792,"style":792},"\u003CSButton :ui=\"{ base: 'font-mono' }\">\n  Custom\n\u003C\u002FSButton>\n",[727,1158,1159,1185,1190],{"__ignoreMap":792},[796,1160,1161,1163,1165,1167,1169,1171,1173,1176,1179,1181,1183],{"class":798,"line":8},[796,1162,802],{"class":801},[796,1164,856],{"class":805},[796,1166,1004],{"class":801},[796,1168,1007],{"class":809},[796,1170,813],{"class":801},[796,1172,993],{"class":816},[796,1174,1175],{"class":801},"{ base: ",[796,1177,1178],{"class":816},"'font-mono'",[796,1180,1020],{"class":801},[796,1182,993],{"class":816},[796,1184,820],{"class":801},[796,1186,1187],{"class":798,"line":823},[796,1188,1189],{"class":801},"  Custom\n",[796,1191,1192,1194,1196],{"class":798,"line":851},[796,1193,875],{"class":801},[796,1195,856],{"class":805},[796,1197,820],{"class":801},[696,1199,1200,1201,1203],{},"Each ",[727,1202,885],{}," key is a component slot.",[696,1205,1206,1207,1210],{},"A string adds classes. Selaras merges conflicting Tailwind classes with\n",[727,1208,1209],{},"tailwind-merge",".",[696,1212,1213,1214,1217],{},"An object can contain ",[727,1215,1216],{},"class"," and other Vue attributes:",[787,1219,1221],{"className":789,"code":1220,"language":791,"meta":792,"style":792},"\u003CSButton\n  :ui=\"{\n    base: {\n      class: 'font-mono',\n      'data-test': 'save-button',\n    },\n  }\"\n>\n  Save\n\u003C\u002FSButton>\n",[727,1222,1223,1230,1244,1249,1259,1272,1276,1284,1288,1293],{"__ignoreMap":792},[796,1224,1225,1227],{"class":798,"line":8},[796,1226,802],{"class":801},[796,1228,1229],{"class":805},"SButton\n",[796,1231,1232,1235,1237,1239,1241],{"class":798,"line":823},[796,1233,1234],{"class":801},"  :",[796,1236,1007],{"class":809},[796,1238,813],{"class":801},[796,1240,993],{"class":816},[796,1242,1243],{"class":801},"{\n",[796,1245,1246],{"class":798,"line":851},[796,1247,1248],{"class":801},"    base: {\n",[796,1250,1251,1254,1256],{"class":798,"line":872},[796,1252,1253],{"class":801},"      class: ",[796,1255,1178],{"class":816},[796,1257,1258],{"class":801},",\n",[796,1260,1261,1264,1267,1270],{"class":798,"line":1078},[796,1262,1263],{"class":816},"      'data-test'",[796,1265,1266],{"class":801},": ",[796,1268,1269],{"class":816},"'save-button'",[796,1271,1258],{"class":801},[796,1273,1274],{"class":798,"line":1089},[796,1275,1098],{"class":801},[796,1277,1278,1281],{"class":798,"line":1095},[796,1279,1280],{"class":801},"  }",[796,1282,1283],{"class":816},"\"\n",[796,1285,1286],{"class":798,"line":1101},[796,1287,820],{"class":801},[796,1289,1290],{"class":798,"line":1107},[796,1291,1292],{"class":801},"  Save\n",[796,1294,1295,1297,1299],{"class":798,"line":13},[796,1296,875],{"class":801},[796,1298,856],{"class":805},[796,1300,820],{"class":801},[691,1302,1304],{"id":1303},"precedence","Precedence",[696,1306,1307],{},"For component classes, the order from low priority to high priority is:",[1309,1310,1311,1319,1324,1330,1335],"ol",{},[1312,1313,1314,1315,1318],"li",{},"component base ",[727,1316,1317],{},"tv()"," theme",[1312,1320,1321],{},[727,1322,1323],{},"app.config.selaras.ui",[1312,1325,1326,1327,1329],{},"ancestor ",[727,1328,1038],{}," recipes, from outer to inner",[1312,1331,1332,1333],{},"the component root ",[727,1334,1216],{},[1312,1336,1337,1338,1340],{},"the component ",[727,1339,885],{}," slot class",[696,1342,1343,1344,1347,1348,1350],{},"For design tokens, normal CSS cascade rules apply to the public\n",[727,1345,1346],{},"--selaras-*"," inputs. Managed ",[727,1349,1038],{}," and runtime token scopes create explicit\ntheme owners for their subtree and supported portals.",[1352,1353,1354],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":792,"searchDepth":851,"depth":851,"links":1356},[1357,1358,1359,1361],{"id":693,"depth":823,"text":694},{"id":889,"depth":823,"text":890},{"id":1138,"depth":823,"text":1360},"The :ui prop and STheme",{"id":1303,"depth":823,"text":1304},"Customize individual component slots and understand style precedence.",{},{"title":91,"description":1362},"xEybAP0RyeEMIWSJIM5KqhB9QLLUm1Rn27q944DIgPM",{"id":1367,"title":1368,"aside":686,"body":1369,"collapse":10,"description":1907,"editLink":686,"extension":744,"icon":9,"issueLink":686,"meta":1908,"navBadges":9,"navigation":9,"order":45,"path":1909,"prevNext":686,"seo":1910,"stem":1911,"toc":686,"__hash__":1912},"docs\u002Fid\u002Foverview\u002Ftheming\u002Fcomponent-styling.md","Penyesuaian komponen",{"type":688,"value":1370,"toc":1900},[1371,1375,1378,1431,1440,1446,1510,1516,1520,1526,1573,1585,1593,1633,1644,1694,1714,1722,1725,1731,1771,1777,1782,1788,1858,1860,1863,1889,1898],[691,1372,1374],{"id":1373},"ukuran-kontrol","Ukuran kontrol",[696,1376,1377],{},"Tombol dan field satu baris memiliki tinggi luar default yang sama untuk setiap ukuran:",[700,1379,1380,1393],{},[703,1381,1382],{},[706,1383,1384,1387,1390],{},[709,1385,1386],{},"Ukuran",[709,1388,1389],{},"Tinggi",[709,1391,1392],{},"Pada root font-size 16px",[719,1394,1395,1407,1419],{},[706,1396,1397,1401,1405],{},[724,1398,1399],{},[727,1400,729],{},[724,1402,1403],{},[727,1404,734],{},[724,1406,737],{},[706,1408,1409,1413,1417],{},[724,1410,1411],{},[727,1412,744],{},[724,1414,1415],{},[727,1416,749],{},[724,1418,752],{},[706,1420,1421,1425,1429],{},[724,1422,1423],{},[727,1424,759],{},[724,1426,1427],{},[727,1428,764],{},[724,1430,767],{},[696,1432,1433,1434,1436,1437,1439],{},"Ini berlaku untuk Button, Input, InputNumber, Select, Autocomplete, DatePicker,\nColorPicker trigger, dan setiap kotak PinInput. DatePicker mempertahankan tinggi yang sama\ndengan ",[727,1435,773],{}," dan ",[727,1438,777],{},", termasuk range dan mode time-only. Tombol clear dan indikator loading tidak menambah tinggi luar.",[696,1441,1442,1443,1445],{},"Gunakan ",[727,1444,784],{}," yang sama saat menempatkan field di samping aksi:",[787,1447,1448],{"className":789,"code":790,"language":791,"meta":792,"style":792},[727,1449,1450,1464,1484,1502],{"__ignoreMap":792},[796,1451,1452,1454,1456,1458,1460,1462],{"class":798,"line":8},[796,1453,802],{"class":801},[796,1455,806],{"class":805},[796,1457,810],{"class":809},[796,1459,813],{"class":801},[796,1461,817],{"class":816},[796,1463,820],{"class":801},[796,1465,1466,1468,1470,1472,1474,1476,1478,1480,1482],{"class":798,"line":823},[796,1467,826],{"class":801},[796,1469,829],{"class":805},[796,1471,832],{"class":809},[796,1473,813],{"class":801},[796,1475,837],{"class":816},[796,1477,840],{"class":809},[796,1479,813],{"class":801},[796,1481,845],{"class":816},[796,1483,848],{"class":801},[796,1485,1486,1488,1490,1492,1494,1496,1498,1500],{"class":798,"line":851},[796,1487,826],{"class":801},[796,1489,856],{"class":805},[796,1491,832],{"class":809},[796,1493,813],{"class":801},[796,1495,837],{"class":816},[796,1497,865],{"class":801},[796,1499,856],{"class":805},[796,1501,820],{"class":801},[796,1503,1504,1506,1508],{"class":798,"line":872},[796,1505,875],{"class":801},[796,1507,806],{"class":805},[796,1509,820],{"class":801},[696,1511,1512,1513,1515],{},"Tinggi mengacu pada kontrol itu sendiri; label, deskripsi, dan pesan validasi FormField menambah ruang di sekitarnya. Textarea dan pilihan wrapping dapat tumbuh sesuai kontennya. Tombol yang tertanam di dalam field menggunakan dimensi yang lebih kecil agar menyisakan ruang di dalam field. Default dapat disesuaikan melalui tema dan override ",[727,1514,885],{}," lokal.",[691,1517,1519],{"id":1518},"kontrol-clear-field","Kontrol clear field",[696,1521,1522,1523,1525],{},"Input, Textarea, Select, Autocomplete, dan DatePicker berbagi Button ",[727,1524,896],{}," netral untuk aksi clear bawaan. Background hover-nya berada di dalam border field. Target dan glyph memiliki ukuran independen, sehingga ikon clear cocok dengan ikon field di sebelahnya tanpa membutuhkan tombol setinggi field:",[700,1527,1528,1541],{},[703,1529,1530],{},[706,1531,1532,1535,1538],{},[709,1533,1534],{},"Ukuran field",[709,1536,1537],{},"Target clear",[709,1539,1540],{},"Ikon",[719,1542,1543,1553,1563],{},[706,1544,1545,1549,1551],{},[724,1546,1547],{},[727,1548,729],{},[724,1550,922],{},[724,1552,925],{},[706,1554,1555,1559,1561],{},[724,1556,1557],{},[727,1558,744],{},[724,1560,934],{},[724,1562,937],{},[706,1564,1565,1569,1571],{},[724,1566,1567],{},[727,1568,759],{},[724,1570,737],{},[724,1572,948],{},[696,1574,1575,1576,1578,1579,1581,1582,1584],{},"Dimensi ini diskalakan dengan root font-size. Dengan ",[727,1577,954],{},", aksi tetap terlihat setiap kali ada konten, termasuk angka ",[727,1580,958],{}," dan query draft Autocomplete. Field kosong, disabled, dan read-only menyembunyikannya. Indikator loading dan konten ",[727,1583,962],{}," kustom dapat muncul di sampingnya. Clear mengembalikan fokus ke editor atau trigger.",[696,1586,1587,1588,1590,1591,974],{},"Sesuaikan satu field dengan ",[727,1589,969],{},", atau ganti glyph dengan ",[727,1592,973],{},[787,1594,1595],{"className":789,"code":977,"language":791,"meta":792,"style":792},[727,1596,1597],{"__ignoreMap":792},[796,1598,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631],{"class":798,"line":8},[796,1600,802],{"class":801},[796,1602,829],{"class":805},[796,1604,988],{"class":809},[796,1606,813],{"class":801},[796,1608,993],{"class":816},[796,1610,996],{"class":801},[796,1612,993],{"class":816},[796,1614,1001],{"class":809},[796,1616,1004],{"class":801},[796,1618,1007],{"class":809},[796,1620,813],{"class":801},[796,1622,993],{"class":816},[796,1624,1014],{"class":801},[796,1626,1017],{"class":816},[796,1628,1020],{"class":801},[796,1630,993],{"class":816},[796,1632,848],{"class":801},[696,1634,1635,1636,1638,1639,1641,1642,974],{},"Gunakan resep ",[727,1637,1030],{}," bersama di ",[727,1640,1034],{}," untuk menstyle setiap kontrol clear field bawaan. Resep yang sama berfungsi di dalam ",[727,1643,1038],{},[787,1645,1646],{"className":1041,"code":1042,"filename":1034,"language":1043,"meta":792,"style":792},[727,1647,1648,1658,1662,1666,1670,1678,1682,1686,1690],{"__ignoreMap":792},[796,1649,1650,1652,1654,1656],{"class":798,"line":8},[796,1651,1051],{"class":1050},[796,1653,1054],{"class":1050},[796,1655,1057],{"class":809},[796,1657,1060],{"class":801},[796,1659,1660],{"class":798,"line":823},[796,1661,1065],{"class":801},[796,1663,1664],{"class":798,"line":851},[796,1665,1070],{"class":801},[796,1667,1668],{"class":798,"line":872},[796,1669,1075],{"class":801},[796,1671,1672,1674,1676],{"class":798,"line":1078},[796,1673,1081],{"class":801},[796,1675,1017],{"class":816},[796,1677,1086],{"class":801},[796,1679,1680],{"class":798,"line":1089},[796,1681,1092],{"class":801},[796,1683,1684],{"class":798,"line":1095},[796,1685,1098],{"class":801},[796,1687,1688],{"class":798,"line":1101},[796,1689,1104],{"class":801},[796,1691,1692],{"class":798,"line":1107},[796,1693,1110],{"class":801},[696,1695,1696,1697,1699,1700,1702,1703,1436,1705,1707,1708,1710,1711,1713],{},"Override target atau ikon spesifik ukuran menggunakan ",[727,1698,1116],{}," dengan kondisi ",[727,1701,784],{}," dan slot ",[727,1704,1123],{},[727,1706,1126],{},". DatePicker juga mengekspos ",[727,1709,1130],{}," untuk penempatan clear dalam mode button trigger, dan ",[727,1712,1134],{}," untuk glyph calendar\u002Fclock mode field. Pertahankan ruang yang cukup di dalam field saat mengubah ukuran target.",[691,1715,1717,1718,1436,1720],{"id":1716},"prop-ui-dan-stheme","Prop ",[727,1719,885],{},[727,1721,1038],{},[696,1723,1724],{},"Token warna dan override kelas komponen adalah sistem terpisah.",[696,1726,1727,1728,1730],{},"Gunakan token tema untuk nilai desain. Gunakan ",[727,1729,885],{}," saat Anda ingin mengubah kelas atau atribut untuk satu instance komponen.",[787,1732,1733],{"className":789,"code":1156,"language":791,"meta":792,"style":792},[727,1734,1735,1759,1763],{"__ignoreMap":792},[796,1736,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1757],{"class":798,"line":8},[796,1738,802],{"class":801},[796,1740,856],{"class":805},[796,1742,1004],{"class":801},[796,1744,1007],{"class":809},[796,1746,813],{"class":801},[796,1748,993],{"class":816},[796,1750,1175],{"class":801},[796,1752,1178],{"class":816},[796,1754,1020],{"class":801},[796,1756,993],{"class":816},[796,1758,820],{"class":801},[796,1760,1761],{"class":798,"line":823},[796,1762,1189],{"class":801},[796,1764,1765,1767,1769],{"class":798,"line":851},[796,1766,875],{"class":801},[796,1768,856],{"class":805},[796,1770,820],{"class":801},[696,1772,1773,1774,1776],{},"Setiap key ",[727,1775,885],{}," adalah slot komponen.",[696,1778,1779,1780,1210],{},"String menambahkan kelas. Selaras menggabungkan kelas Tailwind yang bertentangan dengan ",[727,1781,1209],{},[696,1783,1784,1785,1787],{},"Objek dapat berisi ",[727,1786,1216],{}," dan atribut Vue lainnya:",[787,1789,1790],{"className":789,"code":1220,"language":791,"meta":792,"style":792},[727,1791,1792,1798,1810,1814,1822,1832,1836,1842,1846,1850],{"__ignoreMap":792},[796,1793,1794,1796],{"class":798,"line":8},[796,1795,802],{"class":801},[796,1797,1229],{"class":805},[796,1799,1800,1802,1804,1806,1808],{"class":798,"line":823},[796,1801,1234],{"class":801},[796,1803,1007],{"class":809},[796,1805,813],{"class":801},[796,1807,993],{"class":816},[796,1809,1243],{"class":801},[796,1811,1812],{"class":798,"line":851},[796,1813,1248],{"class":801},[796,1815,1816,1818,1820],{"class":798,"line":872},[796,1817,1253],{"class":801},[796,1819,1178],{"class":816},[796,1821,1258],{"class":801},[796,1823,1824,1826,1828,1830],{"class":798,"line":1078},[796,1825,1263],{"class":816},[796,1827,1266],{"class":801},[796,1829,1269],{"class":816},[796,1831,1258],{"class":801},[796,1833,1834],{"class":798,"line":1089},[796,1835,1098],{"class":801},[796,1837,1838,1840],{"class":798,"line":1095},[796,1839,1280],{"class":801},[796,1841,1283],{"class":816},[796,1843,1844],{"class":798,"line":1101},[796,1845,820],{"class":801},[796,1847,1848],{"class":798,"line":1107},[796,1849,1292],{"class":801},[796,1851,1852,1854,1856],{"class":798,"line":13},[796,1853,875],{"class":801},[796,1855,856],{"class":805},[796,1857,820],{"class":801},[691,1859,1304],{"id":1303},[696,1861,1862],{},"Untuk kelas komponen, urutan dari prioritas rendah ke tinggi adalah:",[1309,1864,1865,1871,1875,1881,1884],{},[1312,1866,1867,1868,1870],{},"tema dasar ",[727,1869,1317],{}," komponen",[1312,1872,1873],{},[727,1874,1323],{},[1312,1876,1877,1878,1880],{},"resep ",[727,1879,1038],{}," ancestor, dari luar ke dalam",[1312,1882,1883],{},"kelas root komponen",[1312,1885,1886,1887,1870],{},"kelas slot ",[727,1888,885],{},[696,1890,1891,1892,1894,1895,1897],{},"Untuk token desain, aturan cascade CSS normal berlaku pada input publik ",[727,1893,1346],{},". Scope ",[727,1896,1038],{}," dan runtime token yang dikelola membuat pemilik tema eksplisit untuk subtree dan portal yang didukung.",[1352,1899,1354],{},{"title":792,"searchDepth":851,"depth":851,"links":1901},[1902,1903,1904,1906],{"id":1373,"depth":823,"text":1374},{"id":1518,"depth":823,"text":1519},{"id":1716,"depth":823,"text":1905},"Prop :ui dan STheme",{"id":1303,"depth":823,"text":1304},"Sesuaikan slot komponen individual dan pahami prioritas style.",{},"\u002Fid\u002Foverview\u002Ftheming\u002Fcomponent-styling",{"title":1368,"description":1907},"id\u002Foverview\u002Ftheming\u002Fcomponent-styling","Hcnkc0G-CxrFIu9Vkw2X4Z_Fv8SY241C_WFGtgQ8NjA",1792925240704]