[{"data":1,"prerenderedAt":1505},["ShallowReactive",2],{"bml-reference-design-migration":3},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8,17,32,37,44,57,1184,1237,1243,1280,1285,1297,1354,1365,1371,1376,1435,1440,1446,1451,1487,1492],{"type":9,"tag":10,"props":11,"children":13},"element","h1",{"id":12},"migrating-git-ui-components",[14],{"type":15,"value":16},"text","Migrating Git UI components",{"type":9,"tag":18,"props":19,"children":20},"p",{},[21,23,30],{"type":15,"value":22},"The Design Library contains the 41 presentation components extracted from Git UI. Declare the\ndependency and one unaliased root import as described in the ",{"type":9,"tag":24,"props":25,"children":27},"a",{"href":26},"\u002Fbml-reference\u002Fdesign-library",[28],{"type":15,"value":29},"library README",{"type":15,"value":31},". Keep\nthe application's document, state, forms, actions, destinations, permissions and transport there.\nNested pages and components use the same short tags.",{"type":9,"tag":18,"props":33,"children":34},{},[35],{"type":15,"value":36},"Replace component calls and remove their old local definitions together. Local definitions take\nprecedence over imported exports, so a successful build with a remaining copy does not establish\nthat the library is being used. The extraction does not require forwarding components or an alias.",{"type":9,"tag":38,"props":39,"children":41},"h2",{"id":40},"tag-mapping",[42],{"type":15,"value":43},"Tag mapping",{"type":9,"tag":18,"props":45,"children":46},{},[47,49,55],{"type":15,"value":48},"Props and projected children retain their roles, with the caller adjustments below. The\n",{"type":9,"tag":24,"props":50,"children":52},{"href":51},"\u002Fbml-reference\u002Fdesign-library#components",[53],{"type":15,"value":54},"component reference",{"type":15,"value":56}," lists the current props, defaults and attribute targets.",{"type":9,"tag":58,"props":59,"children":60},"table",{},[61,85],{"type":9,"tag":62,"props":63,"children":64},"thead",{},[65],{"type":9,"tag":66,"props":67,"children":68},"tr",{},[69,75,80],{"type":9,"tag":70,"props":71,"children":72},"th",{},[73],{"type":15,"value":74},"Git UI tag",{"type":9,"tag":70,"props":76,"children":77},{},[78],{"type":15,"value":79},"Library tag",{"type":9,"tag":70,"props":81,"children":82},{},[83],{"type":15,"value":84},"Caller adjustment",{"type":9,"tag":86,"props":87,"children":88},"tbody",{},[89,116,140,171,202,226,250,274,319,343,374,398,422,453,477,501,525,549,573,597,621,645,676,713,737,761,792,816,847,871,902,926,950,974,998,1027,1058,1082,1106,1130,1154],{"type":9,"tag":66,"props":90,"children":91},{},[92,103,111],{"type":9,"tag":93,"props":94,"children":95},"td",{},[96],{"type":9,"tag":97,"props":98,"children":100},"code",{"className":99},"",[101],{"type":15,"value":102},"ui-alert",{"type":9,"tag":93,"props":104,"children":105},{},[106],{"type":9,"tag":97,"props":107,"children":108},{"className":99},[109],{"type":15,"value":110},"alert",{"type":9,"tag":93,"props":112,"children":113},{},[114],{"type":15,"value":115},"Keep tone, hidden and compact state.",{"type":9,"tag":66,"props":117,"children":118},{},[119,127,135],{"type":9,"tag":93,"props":120,"children":121},{},[122],{"type":9,"tag":97,"props":123,"children":124},{"className":99},[125],{"type":15,"value":126},"ui-app-header",{"type":9,"tag":93,"props":128,"children":129},{},[130],{"type":9,"tag":97,"props":131,"children":132},{"className":99},[133],{"type":15,"value":134},"app-header",{"type":9,"tag":93,"props":136,"children":137},{},[138],{"type":15,"value":139},"Supply the brand, product, destination and projected navigation.",{"type":9,"tag":66,"props":141,"children":142},{},[143,151,159],{"type":9,"tag":93,"props":144,"children":145},{},[146],{"type":9,"tag":97,"props":147,"children":148},{"className":99},[149],{"type":15,"value":150},"ui-badge",{"type":9,"tag":93,"props":152,"children":153},{},[154],{"type":9,"tag":97,"props":155,"children":156},{"className":99},[157],{"type":15,"value":158},"badge",{"type":9,"tag":93,"props":160,"children":161},{},[162,164,169],{"type":15,"value":163},"Set ",{"type":9,"tag":97,"props":165,"children":166},{"className":99},[167],{"type":15,"value":168},"--purple",{"type":15,"value":170}," in consumer CSS to customize the purple tone.",{"type":9,"tag":66,"props":172,"children":173},{},[174,182,190],{"type":9,"tag":93,"props":175,"children":176},{},[177],{"type":9,"tag":97,"props":178,"children":179},{"className":99},[180],{"type":15,"value":181},"ui-bosca-mark",{"type":9,"tag":93,"props":183,"children":184},{},[185],{"type":9,"tag":97,"props":186,"children":187},{"className":99},[188],{"type":15,"value":189},"bosca-mark",{"type":9,"tag":93,"props":191,"children":192},{},[193,195,200],{"type":15,"value":194},"The SVG paths are preserved; colors use the ",{"type":9,"tag":97,"props":196,"children":197},{"className":99},[198],{"type":15,"value":199},"--mark-*",{"type":15,"value":201}," variables.",{"type":9,"tag":66,"props":203,"children":204},{},[205,213,221],{"type":9,"tag":93,"props":206,"children":207},{},[208],{"type":9,"tag":97,"props":209,"children":210},{"className":99},[211],{"type":15,"value":212},"ui-button",{"type":9,"tag":93,"props":214,"children":215},{},[216],{"type":9,"tag":97,"props":217,"children":218},{"className":99},[219],{"type":15,"value":220},"button",{"type":9,"tag":93,"props":222,"children":223},{},[224],{"type":15,"value":225},"Keep native type, disabled\u002Floading state, classes and declarative events.",{"type":9,"tag":66,"props":227,"children":228},{},[229,237,245],{"type":9,"tag":93,"props":230,"children":231},{},[232],{"type":9,"tag":97,"props":233,"children":234},{"className":99},[235],{"type":15,"value":236},"ui-card",{"type":9,"tag":93,"props":238,"children":239},{},[240],{"type":9,"tag":97,"props":241,"children":242},{"className":99},[243],{"type":15,"value":244},"card",{"type":9,"tag":93,"props":246,"children":247},{},[248],{"type":15,"value":249},"Keep title, padding and projected content.",{"type":9,"tag":66,"props":251,"children":252},{},[253,261,269],{"type":9,"tag":93,"props":254,"children":255},{},[256],{"type":9,"tag":97,"props":257,"children":258},{"className":99},[259],{"type":15,"value":260},"ui-checkbox",{"type":9,"tag":93,"props":262,"children":263},{},[264],{"type":9,"tag":97,"props":265,"children":266},{"className":99},[267],{"type":15,"value":268},"checkbox",{"type":9,"tag":93,"props":270,"children":271},{},[272],{"type":15,"value":273},"Keep native form attributes and change events.",{"type":9,"tag":66,"props":275,"children":276},{},[277,285,293],{"type":9,"tag":93,"props":278,"children":279},{},[280],{"type":9,"tag":97,"props":281,"children":282},{"className":99},[283],{"type":15,"value":284},"ui-comment-editor",{"type":9,"tag":93,"props":286,"children":287},{},[288],{"type":9,"tag":97,"props":289,"children":290},{"className":99},[291],{"type":15,"value":292},"comment-editor",{"type":9,"tag":93,"props":294,"children":295},{},[296,298,303,305,310,312,317],{"type":15,"value":297},"Native attributes target the textarea. ",{"type":9,"tag":97,"props":299,"children":300},{"className":99},[301],{"type":15,"value":302},"name",{"type":15,"value":304}," defaults to ",{"type":9,"tag":97,"props":306,"children":307},{"className":99},[308],{"type":15,"value":309},"body",{"type":15,"value":311},"; ",{"type":9,"tag":97,"props":313,"children":314},{"className":99},[315],{"type":15,"value":316},"describedBy",{"type":15,"value":318}," adds external descriptions.",{"type":9,"tag":66,"props":320,"children":321},{},[322,330,338],{"type":9,"tag":93,"props":323,"children":324},{},[325],{"type":9,"tag":97,"props":326,"children":327},{"className":99},[328],{"type":15,"value":329},"ui-confirm-dialog",{"type":9,"tag":93,"props":331,"children":332},{},[333],{"type":9,"tag":97,"props":334,"children":335},{"className":99},[336],{"type":15,"value":337},"confirm-dialog",{"type":9,"tag":93,"props":339,"children":340},{},[341],{"type":15,"value":342},"Keep application-owned confirmation actions in projected content.",{"type":9,"tag":66,"props":344,"children":345},{},[346,354,362],{"type":9,"tag":93,"props":347,"children":348},{},[349],{"type":9,"tag":97,"props":350,"children":351},{"className":99},[352],{"type":15,"value":353},"ui-copy",{"type":9,"tag":93,"props":355,"children":356},{},[357],{"type":9,"tag":97,"props":358,"children":359},{"className":99},[360],{"type":15,"value":361},"copy",{"type":9,"tag":93,"props":363,"children":364},{},[365,367,372],{"type":15,"value":366},"Keep the exact value and label; ",{"type":9,"tag":97,"props":368,"children":369},{"className":99},[370],{"type":15,"value":371},"copyresult",{"type":15,"value":373}," reports clipboard success or failure.",{"type":9,"tag":66,"props":375,"children":376},{},[377,385,393],{"type":9,"tag":93,"props":378,"children":379},{},[380],{"type":9,"tag":97,"props":381,"children":382},{"className":99},[383],{"type":15,"value":384},"ui-copy-field",{"type":9,"tag":93,"props":386,"children":387},{},[388],{"type":9,"tag":97,"props":389,"children":390},{"className":99},[391],{"type":15,"value":392},"copy-field",{"type":9,"tag":93,"props":394,"children":395},{},[396],{"type":15,"value":397},"Keep the value, field label and copy label.",{"type":9,"tag":66,"props":399,"children":400},{},[401,409,417],{"type":9,"tag":93,"props":402,"children":403},{},[404],{"type":9,"tag":97,"props":405,"children":406},{"className":99},[407],{"type":15,"value":408},"ui-dialog",{"type":9,"tag":93,"props":410,"children":411},{},[412],{"type":9,"tag":97,"props":413,"children":414},{"className":99},[415],{"type":15,"value":416},"dialog",{"type":9,"tag":93,"props":418,"children":419},{},[420],{"type":15,"value":421},"Keep request\u002Fcompletion state and projected forms. Use native escapes for native dialog elements.",{"type":9,"tag":66,"props":423,"children":424},{},[425,433,441],{"type":9,"tag":93,"props":426,"children":427},{},[428],{"type":9,"tag":97,"props":429,"children":430},{"className":99},[431],{"type":15,"value":432},"ui-disclosure-heading",{"type":9,"tag":93,"props":434,"children":435},{},[436],{"type":9,"tag":97,"props":437,"children":438},{"className":99},[439],{"type":15,"value":440},"disclosure-heading",{"type":9,"tag":93,"props":442,"children":443},{},[444,446,451],{"type":15,"value":445},"Keep it inside the caller's native ",{"type":9,"tag":97,"props":447,"children":448},{"className":99},[449],{"type":15,"value":450},"details",{"type":15,"value":452}," element.",{"type":9,"tag":66,"props":454,"children":455},{},[456,464,472],{"type":9,"tag":93,"props":457,"children":458},{},[459],{"type":9,"tag":97,"props":460,"children":461},{"className":99},[462],{"type":15,"value":463},"ui-empty-state",{"type":9,"tag":93,"props":465,"children":466},{},[467],{"type":9,"tag":97,"props":468,"children":469},{"className":99},[470],{"type":15,"value":471},"empty-state",{"type":9,"tag":93,"props":473,"children":474},{},[475],{"type":15,"value":476},"Keep title, message, icon and projected actions.",{"type":9,"tag":66,"props":478,"children":479},{},[480,488,496],{"type":9,"tag":93,"props":481,"children":482},{},[483],{"type":9,"tag":97,"props":484,"children":485},{"className":99},[486],{"type":15,"value":487},"ui-field",{"type":9,"tag":93,"props":489,"children":490},{},[491],{"type":9,"tag":97,"props":492,"children":493},{"className":99},[494],{"type":15,"value":495},"field",{"type":9,"tag":93,"props":497,"children":498},{},[499],{"type":15,"value":500},"Keep the label, hint and projected native control.",{"type":9,"tag":66,"props":502,"children":503},{},[504,512,520],{"type":9,"tag":93,"props":505,"children":506},{},[507],{"type":9,"tag":97,"props":508,"children":509},{"className":99},[510],{"type":15,"value":511},"ui-icon",{"type":9,"tag":93,"props":513,"children":514},{},[515],{"type":9,"tag":97,"props":516,"children":517},{"className":99},[518],{"type":15,"value":519},"icon",{"type":9,"tag":93,"props":521,"children":522},{},[523],{"type":15,"value":524},"Glyphs, size and stroke-width props are preserved.",{"type":9,"tag":66,"props":526,"children":527},{},[528,536,544],{"type":9,"tag":93,"props":529,"children":530},{},[531],{"type":9,"tag":97,"props":532,"children":533},{"className":99},[534],{"type":15,"value":535},"ui-icon-button",{"type":9,"tag":93,"props":537,"children":538},{},[539],{"type":9,"tag":97,"props":540,"children":541},{"className":99},[542],{"type":15,"value":543},"icon-button",{"type":9,"tag":93,"props":545,"children":546},{},[547],{"type":15,"value":548},"Keep the accessible label, native button attributes and click action.",{"type":9,"tag":66,"props":550,"children":551},{},[552,560,568],{"type":9,"tag":93,"props":553,"children":554},{},[555],{"type":9,"tag":97,"props":556,"children":557},{"className":99},[558],{"type":15,"value":559},"ui-icon-link",{"type":9,"tag":93,"props":561,"children":562},{},[563],{"type":9,"tag":97,"props":564,"children":565},{"className":99},[566],{"type":15,"value":567},"icon-link",{"type":9,"tag":93,"props":569,"children":570},{},[571],{"type":15,"value":572},"Keep the accessible label, destination and native link attributes.",{"type":9,"tag":66,"props":574,"children":575},{},[576,584,592],{"type":9,"tag":93,"props":577,"children":578},{},[579],{"type":9,"tag":97,"props":580,"children":581},{"className":99},[582],{"type":15,"value":583},"ui-input",{"type":9,"tag":93,"props":585,"children":586},{},[587],{"type":9,"tag":97,"props":588,"children":589},{"className":99},[590],{"type":15,"value":591},"input",{"type":9,"tag":93,"props":593,"children":594},{},[595],{"type":15,"value":596},"Keep native form attributes, controlled value and declarative events.",{"type":9,"tag":66,"props":598,"children":599},{},[600,608,616],{"type":9,"tag":93,"props":601,"children":602},{},[603],{"type":9,"tag":97,"props":604,"children":605},{"className":99},[606],{"type":15,"value":607},"ui-json-editor",{"type":9,"tag":93,"props":609,"children":610},{},[611],{"type":9,"tag":97,"props":612,"children":613},{"className":99},[614],{"type":15,"value":615},"json-editor",{"type":9,"tag":93,"props":617,"children":618},{},[619],{"type":15,"value":620},"Keep the field name\u002Fvalue; optionally supply label, mode, readonly\u002Fdisabled state, error and preservation key.",{"type":9,"tag":66,"props":622,"children":623},{},[624,632,640],{"type":9,"tag":93,"props":625,"children":626},{},[627],{"type":9,"tag":97,"props":628,"children":629},{"className":99},[630],{"type":15,"value":631},"ui-loading-state",{"type":9,"tag":93,"props":633,"children":634},{},[635],{"type":9,"tag":97,"props":636,"children":637},{"className":99},[638],{"type":15,"value":639},"loading-state",{"type":9,"tag":93,"props":641,"children":642},{},[643],{"type":15,"value":644},"Keep label, compact state and additional native attributes.",{"type":9,"tag":66,"props":646,"children":647},{},[648,656,664],{"type":9,"tag":93,"props":649,"children":650},{},[651],{"type":9,"tag":97,"props":652,"children":653},{"className":99},[654],{"type":15,"value":655},"ui-page-heading",{"type":9,"tag":93,"props":657,"children":658},{},[659],{"type":9,"tag":97,"props":660,"children":661},{"className":99},[662],{"type":15,"value":663},"page-heading",{"type":9,"tag":93,"props":665,"children":666},{},[667,669,674],{"type":15,"value":668},"Use the library ",{"type":9,"tag":97,"props":670,"children":671},{"className":99},[672],{"type":15,"value":673},"NavigationItem",{"type":15,"value":675}," and explicitly supply any product breadcrumb.",{"type":9,"tag":66,"props":677,"children":678},{},[679,687,695],{"type":9,"tag":93,"props":680,"children":681},{},[682],{"type":9,"tag":97,"props":683,"children":684},{"className":99},[685],{"type":15,"value":686},"ui-page",{"type":9,"tag":93,"props":688,"children":689},{},[690],{"type":9,"tag":97,"props":691,"children":692},{"className":99},[693],{"type":15,"value":694},"page-shell",{"type":9,"tag":93,"props":696,"children":697},{},[698,700,704,706,711],{"type":15,"value":699},"Use ",{"type":9,"tag":97,"props":701,"children":702},{"className":99},[703],{"type":15,"value":694},{"type":15,"value":705}," for the visual main container; ",{"type":9,"tag":97,"props":707,"children":708},{"className":99},[709],{"type":15,"value":710},"page",{"type":15,"value":712}," remains BML's route declaration.",{"type":9,"tag":66,"props":714,"children":715},{},[716,724,732],{"type":9,"tag":93,"props":717,"children":718},{},[719],{"type":9,"tag":97,"props":720,"children":721},{"className":99},[722],{"type":15,"value":723},"ui-panel",{"type":9,"tag":93,"props":725,"children":726},{},[727],{"type":9,"tag":97,"props":728,"children":729},{"className":99},[730],{"type":15,"value":731},"panel",{"type":9,"tag":93,"props":733,"children":734},{},[735],{"type":15,"value":736},"Keep projected content; native attributes target its section.",{"type":9,"tag":66,"props":738,"children":739},{},[740,748,756],{"type":9,"tag":93,"props":741,"children":742},{},[743],{"type":9,"tag":97,"props":744,"children":745},{"className":99},[746],{"type":15,"value":747},"ui-popover",{"type":9,"tag":93,"props":749,"children":750},{},[751],{"type":9,"tag":97,"props":752,"children":753},{"className":99},[754],{"type":15,"value":755},"popover",{"type":9,"tag":93,"props":757,"children":758},{},[759],{"type":15,"value":760},"Keep label, icon, width and projected content; the library owns disclosure positioning and dismissal.",{"type":9,"tag":66,"props":762,"children":763},{},[764,772,780],{"type":9,"tag":93,"props":765,"children":766},{},[767],{"type":9,"tag":97,"props":768,"children":769},{"className":99},[770],{"type":15,"value":771},"ui-search-input",{"type":9,"tag":93,"props":773,"children":774},{},[775],{"type":9,"tag":97,"props":776,"children":777},{"className":99},[778],{"type":15,"value":779},"search-input",{"type":9,"tag":93,"props":781,"children":782},{},[783,785,790],{"type":15,"value":784},"Keep value, name and input events. Autofocus remains enabled by default; pass ",{"type":9,"tag":97,"props":786,"children":787},{"className":99},[788],{"type":15,"value":789},":autofocus=\"false\"",{"type":15,"value":791}," when needed.",{"type":9,"tag":66,"props":793,"children":794},{},[795,803,811],{"type":9,"tag":93,"props":796,"children":797},{},[798],{"type":9,"tag":97,"props":799,"children":800},{"className":99},[801],{"type":15,"value":802},"ui-select",{"type":9,"tag":93,"props":804,"children":805},{},[806],{"type":9,"tag":97,"props":807,"children":808},{"className":99},[809],{"type":15,"value":810},"select",{"type":9,"tag":93,"props":812,"children":813},{},[814],{"type":15,"value":815},"Keep native options and change events. Mark persistent async choices explicitly and use the public search types.",{"type":9,"tag":66,"props":817,"children":818},{},[819,827,835],{"type":9,"tag":93,"props":820,"children":821},{},[822],{"type":9,"tag":97,"props":823,"children":824},{"className":99},[825],{"type":15,"value":826},"ui-section",{"type":9,"tag":93,"props":828,"children":829},{},[830],{"type":9,"tag":97,"props":831,"children":832},{"className":99},[833],{"type":15,"value":834},"section",{"type":9,"tag":93,"props":836,"children":837},{},[838,840,845],{"type":15,"value":839},"Keep projected content; use ",{"type":9,"tag":97,"props":841,"children":842},{"className":99},[843],{"type":15,"value":844},"html:section",{"type":15,"value":846}," for an unstyled native section.",{"type":9,"tag":66,"props":848,"children":849},{},[850,858,866],{"type":9,"tag":93,"props":851,"children":852},{},[853],{"type":9,"tag":97,"props":854,"children":855},{"className":99},[856],{"type":15,"value":857},"ui-section-heading",{"type":9,"tag":93,"props":859,"children":860},{},[861],{"type":9,"tag":97,"props":862,"children":863},{"className":99},[864],{"type":15,"value":865},"section-heading",{"type":9,"tag":93,"props":867,"children":868},{},[869],{"type":15,"value":870},"Keep title, subtitle and projected actions.",{"type":9,"tag":66,"props":872,"children":873},{},[874,882,890],{"type":9,"tag":93,"props":875,"children":876},{},[877],{"type":9,"tag":97,"props":878,"children":879},{"className":99},[880],{"type":15,"value":881},"ui-segmented-control",{"type":9,"tag":93,"props":883,"children":884},{},[885],{"type":9,"tag":97,"props":886,"children":887},{"className":99},[888],{"type":15,"value":889},"segmented-control",{"type":9,"tag":93,"props":891,"children":892},{},[893,895,900],{"type":15,"value":894},"Keep labels\u002Fvalues, native hidden form value and bubbling ",{"type":9,"tag":97,"props":896,"children":897},{"className":99},[898],{"type":15,"value":899},"segmentchange",{"type":15,"value":901}," event.",{"type":9,"tag":66,"props":903,"children":904},{},[905,913,921],{"type":9,"tag":93,"props":906,"children":907},{},[908],{"type":9,"tag":97,"props":909,"children":910},{"className":99},[911],{"type":15,"value":912},"ui-source-view",{"type":9,"tag":93,"props":914,"children":915},{},[916],{"type":9,"tag":97,"props":917,"children":918},{"className":99},[919],{"type":15,"value":920},"source-view",{"type":9,"tag":93,"props":922,"children":923},{},[924],{"type":15,"value":925},"Pass requested lines explicitly; Git's editable and preview workflows remain in Git.",{"type":9,"tag":66,"props":927,"children":928},{},[929,937,945],{"type":9,"tag":93,"props":930,"children":931},{},[932],{"type":9,"tag":97,"props":933,"children":934},{"className":99},[935],{"type":15,"value":936},"ui-spinner",{"type":9,"tag":93,"props":938,"children":939},{},[940],{"type":9,"tag":97,"props":941,"children":942},{"className":99},[943],{"type":15,"value":944},"spinner",{"type":9,"tag":93,"props":946,"children":947},{},[948],{"type":15,"value":949},"Keep size; the spinner remains decorative.",{"type":9,"tag":66,"props":951,"children":952},{},[953,961,969],{"type":9,"tag":93,"props":954,"children":955},{},[956],{"type":9,"tag":97,"props":957,"children":958},{"className":99},[959],{"type":15,"value":960},"ui-switch",{"type":9,"tag":93,"props":962,"children":963},{},[964],{"type":9,"tag":97,"props":965,"children":966},{"className":99},[967],{"type":15,"value":968},"switch",{"type":9,"tag":93,"props":970,"children":971},{},[972],{"type":15,"value":973},"Keep label, checked\u002Fdisabled state and native form\u002Fchange behavior.",{"type":9,"tag":66,"props":975,"children":976},{},[977,985,993],{"type":9,"tag":93,"props":978,"children":979},{},[980],{"type":9,"tag":97,"props":981,"children":982},{"className":99},[983],{"type":15,"value":984},"ui-table-scroll",{"type":9,"tag":93,"props":986,"children":987},{},[988],{"type":9,"tag":97,"props":989,"children":990},{"className":99},[991],{"type":15,"value":992},"table-scroll",{"type":9,"tag":93,"props":994,"children":995},{},[996],{"type":15,"value":997},"Keep the projected native table; optionally provide a contextual scroll-region label.",{"type":9,"tag":66,"props":999,"children":1000},{},[1001,1009,1017],{"type":9,"tag":93,"props":1002,"children":1003},{},[1004],{"type":9,"tag":97,"props":1005,"children":1006},{"className":99},[1007],{"type":15,"value":1008},"ui-tabs",{"type":9,"tag":93,"props":1010,"children":1011},{},[1012],{"type":9,"tag":97,"props":1013,"children":1014},{"className":99},[1015],{"type":15,"value":1016},"tabs",{"type":9,"tag":93,"props":1018,"children":1019},{},[1020,1021,1025],{"type":15,"value":668},{"type":9,"tag":97,"props":1022,"children":1023},{"className":99},[1024],{"type":15,"value":673},{"type":15,"value":1026},"; destinations remain native links.",{"type":9,"tag":66,"props":1028,"children":1029},{},[1030,1038,1046],{"type":9,"tag":93,"props":1031,"children":1032},{},[1033],{"type":9,"tag":97,"props":1034,"children":1035},{"className":99},[1036],{"type":15,"value":1037},"ui-time",{"type":9,"tag":93,"props":1039,"children":1040},{},[1041],{"type":9,"tag":97,"props":1042,"children":1043},{"className":99},[1044],{"type":15,"value":1045},"time",{"type":9,"tag":93,"props":1047,"children":1048},{},[1049,1051,1056],{"type":15,"value":1050},"Formatting props and server formatting are preserved; use ",{"type":9,"tag":97,"props":1052,"children":1053},{"className":99},[1054],{"type":15,"value":1055},"html:time",{"type":15,"value":1057}," for native markup.",{"type":9,"tag":66,"props":1059,"children":1060},{},[1061,1069,1077],{"type":9,"tag":93,"props":1062,"children":1063},{},[1064],{"type":9,"tag":97,"props":1065,"children":1066},{"className":99},[1067],{"type":15,"value":1068},"ui-toast",{"type":9,"tag":93,"props":1070,"children":1071},{},[1072],{"type":9,"tag":97,"props":1073,"children":1074},{"className":99},[1075],{"type":15,"value":1076},"toast",{"type":9,"tag":93,"props":1078,"children":1079},{},[1080],{"type":15,"value":1081},"Keep a stable key and increment the notice sequence for each new message.",{"type":9,"tag":66,"props":1083,"children":1084},{},[1085,1093,1101],{"type":9,"tag":93,"props":1086,"children":1087},{},[1088],{"type":9,"tag":97,"props":1089,"children":1090},{"className":99},[1091],{"type":15,"value":1092},"ui-tree",{"type":9,"tag":93,"props":1094,"children":1095},{},[1096],{"type":9,"tag":97,"props":1097,"children":1098},{"className":99},[1099],{"type":15,"value":1100},"tree",{"type":9,"tag":93,"props":1102,"children":1103},{},[1104],{"type":15,"value":1105},"Keep local\u002Fserver expansion ownership; optionally provide a preservation key.",{"type":9,"tag":66,"props":1107,"children":1108},{},[1109,1117,1125],{"type":9,"tag":93,"props":1110,"children":1111},{},[1112],{"type":9,"tag":97,"props":1113,"children":1114},{"className":99},[1115],{"type":15,"value":1116},"ui-tree-item",{"type":9,"tag":93,"props":1118,"children":1119},{},[1120],{"type":9,"tag":97,"props":1121,"children":1122},{"className":99},[1123],{"type":15,"value":1124},"tree-item",{"type":9,"tag":93,"props":1126,"children":1127},{},[1128],{"type":15,"value":1129},"Keep paths, labels, depth and native destinations\u002Factions.",{"type":9,"tag":66,"props":1131,"children":1132},{},[1133,1141,1149],{"type":9,"tag":93,"props":1134,"children":1135},{},[1136],{"type":9,"tag":97,"props":1137,"children":1138},{"className":99},[1139],{"type":15,"value":1140},"ui-tooltip",{"type":9,"tag":93,"props":1142,"children":1143},{},[1144],{"type":9,"tag":97,"props":1145,"children":1146},{"className":99},[1147],{"type":15,"value":1148},"tooltip",{"type":9,"tag":93,"props":1150,"children":1151},{},[1152],{"type":15,"value":1153},"Keep content, placement, delay and the projected trigger.",{"type":9,"tag":66,"props":1155,"children":1156},{},[1157,1165,1173],{"type":9,"tag":93,"props":1158,"children":1159},{},[1160],{"type":9,"tag":97,"props":1161,"children":1162},{"className":99},[1163],{"type":15,"value":1164},"ui-view-tabs",{"type":9,"tag":93,"props":1166,"children":1167},{},[1168],{"type":9,"tag":97,"props":1169,"children":1170},{"className":99},[1171],{"type":15,"value":1172},"view-tabs",{"type":9,"tag":93,"props":1174,"children":1175},{},[1176,1178,1183],{"type":15,"value":1177},"Keep caller-owned selected state and handle the bubbling ",{"type":9,"tag":97,"props":1179,"children":1180},{"className":99},[1181],{"type":15,"value":1182},"viewchange",{"type":15,"value":901},{"type":9,"tag":18,"props":1185,"children":1186},{},[1187,1189,1193,1195,1199,1200,1204,1205,1209,1211,1215,1217,1221,1223,1228,1230,1235],{"type":15,"value":1188},"Audit intentional native elements when enabling the import. ",{"type":9,"tag":97,"props":1190,"children":1191},{"className":99},[1192],{"type":15,"value":220},{"type":15,"value":1194},", ",{"type":9,"tag":97,"props":1196,"children":1197},{"className":99},[1198],{"type":15,"value":591},{"type":15,"value":1194},{"type":9,"tag":97,"props":1201,"children":1202},{"className":99},[1203],{"type":15,"value":810},{"type":15,"value":1194},{"type":9,"tag":97,"props":1206,"children":1207},{"className":99},[1208],{"type":15,"value":834},{"type":15,"value":1210},",\n",{"type":9,"tag":97,"props":1212,"children":1213},{"className":99},[1214],{"type":15,"value":1045},{"type":15,"value":1216}," and ",{"type":9,"tag":97,"props":1218,"children":1219},{"className":99},[1220],{"type":15,"value":416},{"type":15,"value":1222}," also name library components. Use ",{"type":9,"tag":97,"props":1224,"children":1225},{"className":99},[1226],{"type":15,"value":1227},"html:",{"type":15,"value":1229}," for their native forms, including\nmatching closing tags. Props, merged classes and additional attributes use BML's ",{"type":9,"tag":97,"props":1231,"children":1232},{"className":99},[1233],{"type":15,"value":1234},"attrs",{"type":15,"value":1236}," support;\ncomponents no longer need server scripts that filter named props out of an attribute map.",{"type":9,"tag":38,"props":1238,"children":1240},{"id":1239},"navigation-and-search-types",[1241],{"type":15,"value":1242},"Navigation and search types",{"type":9,"tag":18,"props":1244,"children":1245},{},[1246,1248,1253,1255,1260,1261,1266,1267,1272,1274,1278],{"type":15,"value":1247},"Replace imports of Git's former navigation model with ",{"type":9,"tag":97,"props":1249,"children":1250},{"className":99},[1251],{"type":15,"value":1252},"bosca.design.model.NavigationItem",{"type":15,"value":1254},".\nIt still carries ",{"type":9,"tag":97,"props":1256,"children":1257},{"className":99},[1258],{"type":15,"value":1259},"label",{"type":15,"value":1194},{"type":9,"tag":97,"props":1262,"children":1263},{"className":99},[1264],{"type":15,"value":1265},"href",{"type":15,"value":1216},{"type":9,"tag":97,"props":1268,"children":1269},{"className":99},[1270],{"type":15,"value":1271},"selected",{"type":15,"value":1273},". ",{"type":9,"tag":97,"props":1275,"children":1276},{"className":99},[1277],{"type":15,"value":663},{"type":15,"value":1279}," renders the supplied trail and current\ncrumb; Git explicitly adds its own product entry. Other products supply their own entries.",{"type":9,"tag":18,"props":1281,"children":1282},{},[1283],{"type":15,"value":1284},"Async select transport stays in the application. Import the linked declarations with:",{"type":9,"tag":1286,"props":1287,"children":1292},"pre",{"className":1288,"code":1290,"filename":-1,"highlights":-1,"language":1291,"meta":99},[1289],"language-ts","import type { SelectOption, SelectPage, SelectSearch } from \"@bosca\u002Fbml-design\u002Fselect\";\n","ts",[1293],{"type":9,"tag":97,"props":1294,"children":1295},{"__ignoreMap":99},[1296],{"type":15,"value":1290},{"type":9,"tag":18,"props":1298,"children":1299},{},[1300,1302,1307,1309,1314,1315,1320,1321,1326,1327,1332,1334,1339,1341,1345,1347,1352],{"type":15,"value":1301},"A bubbling ",{"type":9,"tag":97,"props":1303,"children":1304},{"className":99},[1305],{"type":15,"value":1306},"selectsearch",{"type":15,"value":1308}," event supplies ",{"type":9,"tag":97,"props":1310,"children":1311},{"className":99},[1312],{"type":15,"value":1313},"query",{"type":15,"value":1194},{"type":9,"tag":97,"props":1316,"children":1317},{"className":99},[1318],{"type":15,"value":1319},"offset",{"type":15,"value":1194},{"type":9,"tag":97,"props":1322,"children":1323},{"className":99},[1324],{"type":15,"value":1325},"resolve",{"type":15,"value":1216},{"type":9,"tag":97,"props":1328,"children":1329},{"className":99},[1330],{"type":15,"value":1331},"reject",{"type":15,"value":1333},". Resolve an option\narray or a ",{"type":9,"tag":97,"props":1335,"children":1336},{"className":99},[1337],{"type":15,"value":1338},"SelectPage",{"type":15,"value":1340}," with explicit previous\u002Fnext offsets, and report failed requests through\n",{"type":9,"tag":97,"props":1342,"children":1343},{"className":99},[1344],{"type":15,"value":1331},{"type":15,"value":1346},". Keep server contracts, authentication and response mapping in the application adapter.\nChoices that must remain available across result pages use ",{"type":9,"tag":97,"props":1348,"children":1349},{"className":99},[1350],{"type":15,"value":1351},"data-persistent",{"type":15,"value":1353}," on their native option:",{"type":9,"tag":1286,"props":1355,"children":1360},{"className":1356,"code":1358,"filename":-1,"highlights":-1,"language":1359,"meta":99},[1357],"language-html","\u003Cselect name=\"owner\" label=\"Owner\" searchable async>\n  \u003Coption value=\"any\" data-persistent>Any owner\u003C\u002Foption>\n\u003C\u002Fselect>\n","html",[1361],{"type":9,"tag":97,"props":1362,"children":1363},{"__ignoreMap":99},[1364],{"type":15,"value":1358},{"type":9,"tag":38,"props":1366,"children":1368},{"id":1367},"styles-spacing-and-assets",[1369],{"type":15,"value":1370},"Styles, spacing and assets",{"type":9,"tag":18,"props":1372,"children":1373},{},[1374],{"type":15,"value":1375},"Move reusable presentation with its component. The library includes component styles, native control\nsizing, pending button presentation, tooltip surfaces, projected table rules, modal form classes,\ndynamic select choices and editor styles. The shared rules for projected table\u002Fmodal\u002Fselect content\nstay under the owning library marker. Application document layout, auth screens, grids, diff\u002Flog\npresentation and route composition remain application CSS.",{"type":9,"tag":18,"props":1377,"children":1378},{},[1379,1381,1387,1389,1394,1396,1401,1402,1407,1409,1414,1415,1420,1421,1426,1428,1433],{"type":15,"value":1380},"Use the ",{"type":9,"tag":24,"props":1382,"children":1384},{"href":1383},"\u002Fbml-reference\u002Fdesign-tokens",[1385],{"type":15,"value":1386},"public CSS variables",{"type":15,"value":1388}," on the document or a themed container. Surface\u002Ftext\ncolors, accents, feedback colors, fonts and radii inherit through the components. ",{"type":9,"tag":97,"props":1390,"children":1391},{"className":99},[1392],{"type":15,"value":1393},"--control-border",{"type":15,"value":1395},"\ncan give neutral controls a stronger boundary while ",{"type":9,"tag":97,"props":1397,"children":1398},{"className":99},[1399],{"type":15,"value":1400},"--line",{"type":15,"value":1216},{"type":9,"tag":97,"props":1403,"children":1404},{"className":99},[1405],{"type":15,"value":1406},"--line-2",{"type":15,"value":1408}," retain subtle surface\ndividers. Control background\u002Fradius overrides are optional and otherwise follow the local surface\nand radius variables. Shared ",{"type":9,"tag":97,"props":1410,"children":1411},{"className":99},[1412],{"type":15,"value":1413},"--control-height-md",{"type":15,"value":1194},{"type":9,"tag":97,"props":1416,"children":1417},{"className":99},[1418],{"type":15,"value":1419},"--control-height-sm",{"type":15,"value":1194},{"type":9,"tag":97,"props":1422,"children":1423},{"className":99},[1424],{"type":15,"value":1425},"--control-height-xs",{"type":15,"value":1427}," and\n",{"type":9,"tag":97,"props":1429,"children":1430},{"className":99},[1431],{"type":15,"value":1432},"--control-gap",{"type":15,"value":1434}," defaults preserve 32\u002F30\u002F24px controls and 6px content spacing. Application layout gaps\nand margins remain explicit application CSS.",{"type":9,"tag":18,"props":1436,"children":1437},{},[1438],{"type":15,"value":1439},"The library declares the original Geist and Geist Mono faces, packages their WOFF2 subsets and\nretains the font and dependency notices. Select the document font in application CSS. Remove copied\nfonts, old private font routes and extracted global rules once their callers use the library.\nDo not target generated scope IDs to restyle a component.",{"type":9,"tag":38,"props":1441,"children":1443},{"id":1442},"browser-behavior-and-application-adapters",[1444],{"type":15,"value":1445},"Browser behavior and application adapters",{"type":9,"tag":18,"props":1447,"children":1448},{},[1449],{"type":15,"value":1450},"The compiled dependency brings its reachable client helpers. Remove the old extracted helpers\nafter migrating their callers; do not import private paths from the library source checkout.\nKeep domain adapters such as Git reference search, search URL state, discussion actions, editable\nCodeMirror state, previews and diff workspace behavior in Git.",{"type":9,"tag":18,"props":1452,"children":1453},{},[1454,1458,1460,1465,1467,1472,1474,1479,1481,1485],{"type":9,"tag":97,"props":1455,"children":1456},{"className":99},[1457],{"type":15,"value":920},{"type":15,"value":1459}," owns the read-only CodeMirror viewer. It infers language from ",{"type":9,"tag":97,"props":1461,"children":1462},{"className":99},[1463],{"type":15,"value":1464},"path",{"type":15,"value":1466},", accepts an\nexplicit ",{"type":9,"tag":97,"props":1468,"children":1469},{"className":99},[1470],{"type":15,"value":1471},"language",{"type":15,"value":1473},", and takes a positive requested ",{"type":9,"tag":97,"props":1475,"children":1476},{"className":99},[1477],{"type":15,"value":1478},"line",{"type":15,"value":1480}," from its caller. It does not inspect Git\nURL parameters. ",{"type":9,"tag":97,"props":1482,"children":1483},{"className":99},[1484],{"type":15,"value":615},{"type":15,"value":1486}," owns the structured engine and native form value; applications retain\nvalidation and save actions. Basic pages do not reach either editor's implementation assets through\nthe module-wide import alone.",{"type":9,"tag":18,"props":1488,"children":1489},{},[1490],{"type":15,"value":1491},"Give preserved controls distinct keys for independent instances, and change the key when the\napplication intends to replace local editor state. A toast's initial sequence is a baseline;\nretained server text does not announce again after navigation or remount. Increase its sequence for\nevery new notice, including repeated text. Copy controls retain native labels and manual-copy\nrecovery when clipboard access fails. Forms, links, native select values and escaped editor content\nprovide their documented script-disabled behavior.",{"type":9,"tag":18,"props":1493,"children":1494},{},[1495,1497,1503],{"type":15,"value":1496},"The ",{"type":9,"tag":24,"props":1498,"children":1500},{"href":1499},"\u002Fbml-reference\u002Fdesign-library#catalog-and-example-consumer",[1501],{"type":15,"value":1502},"isolated consumer",{"type":15,"value":1504}," exercises these contracts in\nproduction and development, including two consumer themes, native fallback, declarative actions,\nretained state and component disposal. Git's route and browser checks cover its application adapters\nand the 1920\u002F1440\u002F1024\u002F390px layout matrix.",1793227349727]