From e86f6dbb6011d208c96b838a2be8228f3e3491b0 Mon Sep 17 00:00:00 2001 From: prnk28 Date: Sun, 8 Dec 2024 20:11:42 +0000 Subject: [PATCH] deploy: 11024fb78c4c6606d19d53775a77f15c00b07437 --- 404.html | 451 + assets/scripts/lunr.js | 6 + assets/search.json | 1 + components/alert/index.html | 1897 ++++ components/animated-image/index.html | 1162 +++ components/animation/index.html | 1755 ++++ components/avatar/index.html | 1376 +++ components/badge/index.html | 1292 +++ components/breadcrumb-item/index.html | 801 ++ components/breadcrumb/index.html | 1356 +++ components/button-group/index.html | 1793 ++++ components/button/index.html | 2715 ++++++ components/card/index.html | 1367 +++ components/carousel-item/index.html | 749 ++ components/carousel/index.html | 3532 +++++++ components/checkbox/index.html | 1625 ++++ components/color-picker/index.html | 1819 ++++ components/copy-button/index.html | 1810 ++++ components/details/index.html | 1275 +++ components/dialog/index.html | 1807 ++++ components/divider/index.html | 1143 +++ components/drawer/index.html | 2425 +++++ components/dropdown/index.html | 2094 ++++ components/format-bytes/index.html | 996 ++ components/format-date/index.html | 1181 +++ components/format-number/index.html | 1163 +++ components/icon-button/index.html | 1337 +++ components/icon/index.html | 1699 ++++ components/image-comparer/index.html | 965 ++ components/include/index.html | 765 ++ components/input/index.html | 2566 +++++ components/menu-item/index.html | 1522 +++ components/menu-label/index.html | 675 ++ components/menu/index.html | 952 ++ components/mutation-observer/index.html | 1167 +++ components/option/index.html | 1007 ++ components/popup/index.html | 4857 ++++++++++ components/progress-bar/index.html | 1175 +++ components/progress-ring/index.html | 1266 +++ components/qr-code/index.html | 1237 +++ components/radio-button/index.html | 1621 ++++ components/radio-group/index.html | 1674 ++++ components/radio/index.html | 1063 ++ components/range/index.html | 1907 ++++ components/rating/index.html | 1759 ++++ components/relative-time/index.html | 1035 ++ components/resize-observer/index.html | 800 ++ components/select/index.html | 2870 ++++++ components/skeleton/index.html | 1644 ++++ components/spinner/index.html | 926 ++ components/split-panel/index.html | 2709 ++++++ components/switch/index.html | 1464 +++ components/tab-group/index.html | 1863 ++++ components/tab-panel/index.html | 789 ++ components/tab/index.html | 733 ++ components/tag/index.html | 1140 +++ components/textarea/index.html | 1958 ++++ components/tooltip/index.html | 2032 ++++ components/tree-item/index.html | 1347 +++ components/tree/index.html | 1785 ++++ components/visually-hidden/index.html | 795 ++ .../{chunk.ZH2KM23Q.js => chunk.37J3NAYG.js} | 2 +- .../{chunk.PTXGKMCM.js => chunk.3EZHFHG3.js} | 6 +- .../{chunk.A2BFSQ3C.js => chunk.3H4P7QZ5.js} | 2 +- .../{chunk.T7KYOX3S.js => chunk.3KSLHZUI.js} | 2 +- .../{chunk.SQZ5OT6N.js => chunk.3ZGEZ6AF.js} | 2 +- .../{chunk.3XSEVTOL.js => chunk.3ZTS7K3T.js} | 2 +- .../{chunk.SRVZQDLF.js => chunk.4BS7E4WA.js} | 2 +- .../{chunk.WMGEXFCN.js => chunk.4VSLQP6A.js} | 8 +- .../{chunk.Y3VN6GCE.js => chunk.5T6ERPEL.js} | 2 +- .../{chunk.YD3SR4QD.js => chunk.5YM23XW6.js} | 2 +- .../{chunk.SSHR2JDI.js => chunk.6PGWJ74B.js} | 2 +- .../{chunk.JURRYKMI.js => chunk.6QIZUGEE.js} | 8 +- .../{chunk.YJFDGOZ2.js => chunk.77NS7GHF.js} | 2 +- .../{chunk.6IYKUC4J.js => chunk.7MNXVO5H.js} | 2 +- .../{chunk.F5FBHKBI.js => chunk.A4BE7OVG.js} | 2 +- .../{chunk.XLVNHEC6.js => chunk.AAZEKXC4.js} | 2 +- .../{chunk.J67LBPKS.js => chunk.AOTJKWMX.js} | 2 +- .../{chunk.ZVYU26EE.js => chunk.AT35VHTC.js} | 2 +- .../{chunk.DSZSVCSX.js => chunk.AW64EVPI.js} | 2 +- .../{chunk.SLMMUW6G.js => chunk.CA4YGNMP.js} | 6 +- .../{chunk.K2IH25YY.js => chunk.CMVGJZQB.js} | 6 +- .../{chunk.TKH2FCTH.js => chunk.CPXW4SC4.js} | 2 +- .../{chunk.JOMOSJ6V.js => chunk.D4HT5N2S.js} | 6 +- .../{chunk.EVGTMRV3.js => chunk.DDLAAFQL.js} | 2 +- .../{chunk.TQRRFFWX.js => chunk.E4DVWLFF.js} | 2 +- .../{chunk.CFH2JNVK.js => chunk.EAH27JYQ.js} | 18 +- .../{chunk.4S2NCH2A.js => chunk.EXPSTLYX.js} | 6 +- .../{chunk.2T47JI2Y.js => chunk.F3BK5VZ5.js} | 2 +- .../{chunk.VADWVLYW.js => chunk.F5DJG2IC.js} | 8 +- .../{chunk.IULN2B2Z.js => chunk.FG3K56UG.js} | 2 +- .../{chunk.WWLGKKJL.js => chunk.FSY7RZDG.js} | 2 +- .../{chunk.ANK5P6NL.js => chunk.FY6XFGKF.js} | 12 +- .../{chunk.R3FA5JLK.js => chunk.GA6KQAOQ.js} | 2 +- .../{chunk.P63VQA7M.js => chunk.GQVYY2ON.js} | 2 +- .../{chunk.GH4I3V5W.js => chunk.GVMOZDVD.js} | 8 +- .../{chunk.BWM56YWB.js => chunk.HDJPOAMP.js} | 2 +- .../{chunk.EUMKZFJV.js => chunk.HECO4DZ2.js} | 6 +- .../{chunk.JXNEB52G.js => chunk.HIEWE77I.js} | 6 +- .../{chunk.4RZCCS72.js => chunk.HJLSNBIP.js} | 2 +- .../{chunk.RNPLPMI7.js => chunk.HP6XNQLT.js} | 6 +- .../{chunk.XYZE4CTX.js => chunk.I5J75LJ5.js} | 2 +- .../{chunk.GBETTBLG.js => chunk.I6TGOM6Z.js} | 2 +- .../{chunk.THDZPG3S.js => chunk.IDJPPGR6.js} | 6 +- .../{chunk.NQXFTJK2.js => chunk.IE2PU6PU.js} | 2 +- .../{chunk.IZLUHFAR.js => chunk.IPBA3RL7.js} | 2 +- .../{chunk.MB643KRE.js => chunk.IRURSJVI.js} | 8 +- .../{chunk.QYSV4AOQ.js => chunk.IYOMW7E7.js} | 8 +- .../{chunk.636GFVN7.js => chunk.JDMEV6W6.js} | 8 +- .../{chunk.QFY5BTZB.js => chunk.JEDU5SAS.js} | 8 +- .../{chunk.CKGCU5UH.js => chunk.JIZBX5ZW.js} | 2 +- .../{chunk.AYJVTYM4.js => chunk.JRVKL7AO.js} | 2 +- .../{chunk.JFXHKZRL.js => chunk.JWMI3NOK.js} | 2 +- .../{chunk.Z5WPL7FK.js => chunk.K2G6YYR3.js} | 2 +- .../{chunk.QWPPJ6MK.js => chunk.KHZVE7CV.js} | 2 +- .../{chunk.CBWL3I6V.js => chunk.KLYKT4LR.js} | 2 +- .../{chunk.TW53AQUU.js => chunk.KMS6K2ZC.js} | 2 +- .../{chunk.CS2FJAVB.js => chunk.L5V2RVPF.js} | 2 +- .../{chunk.TUUNNIMD.js => chunk.LJWD3SJX.js} | 2 +- .../{chunk.LPDJYE6J.js => chunk.M7CLXYMX.js} | 2 +- .../{chunk.VGFMDSAI.js => chunk.MPAT4V3I.js} | 2 +- .../{chunk.CMHBKN7G.js => chunk.MZEJHEPM.js} | 6 +- .../{chunk.6OGSJDWU.js => chunk.N3DJF6MW.js} | 6 +- .../{chunk.QT6X3RZ4.js => chunk.N5QISGWZ.js} | 14 +- .../{chunk.U4O2H2B7.js => chunk.NAMNOMAN.js} | 14 +- .../{chunk.CMTWBNST.js => chunk.NQG7KWCE.js} | 2 +- .../{chunk.I2VMJQGZ.js => chunk.NSDAXWU5.js} | 10 +- .../{chunk.JJSRKCKW.js => chunk.NZULQTUJ.js} | 2 +- .../{chunk.ARHWQFOY.js => chunk.OAUTL6YH.js} | 2 +- .../{chunk.MTYZGYVJ.js => chunk.OYSDTFV2.js} | 2 +- .../{chunk.OENC5VUK.js => chunk.PDIS3YDB.js} | 2 +- .../{chunk.OUERAG24.js => chunk.PJ7UYN3F.js} | 8 +- .../{chunk.UNW6LWJI.js => chunk.PYB4RKJQ.js} | 2 +- .../{chunk.K2ROYTBB.js => chunk.QKLVXD76.js} | 6 +- .../{chunk.F5YMP27H.js => chunk.RH52FQAZ.js} | 2 +- .../{chunk.J72VNH2K.js => chunk.RYBGPLV6.js} | 2 +- .../{chunk.IJORZ53P.js => chunk.SAQU6XWJ.js} | 2 +- .../{chunk.TZECUIPX.js => chunk.SQHWC2O3.js} | 2 +- .../{chunk.2A654XM4.js => chunk.SQPWULD2.js} | 2 +- .../{chunk.4TOASGPU.js => chunk.TJHEY5YZ.js} | 2 +- .../{chunk.PMQVOPBU.js => chunk.UKBSSTC3.js} | 8 +- .../{chunk.EJV2FSC6.js => chunk.UPQ2JL5V.js} | 2 +- .../{chunk.MZQVGI4G.js => chunk.URMLYPYT.js} | 6 +- .../{chunk.ZPH3EXSL.js => chunk.UYEAPXNR.js} | 6 +- .../{chunk.UBXOQCSK.js => chunk.VK2Q54G3.js} | 2 +- .../{chunk.S6WKFUYV.js => chunk.VN7UQORF.js} | 2 +- .../{chunk.JQ4XSVZH.js => chunk.VVCN2VEU.js} | 2 +- .../{chunk.KIAH3HVJ.js => chunk.W2PFS7FX.js} | 2 +- .../{chunk.W6AXMEWH.js => chunk.WEYLHTLN.js} | 8 +- .../{chunk.Q4JOTESV.js => chunk.WMTR3AJO.js} | 2 +- .../{chunk.YOF2P2QN.js => chunk.WTGDMHCB.js} | 2 +- .../{chunk.MA64RL76.js => chunk.YALLUFXD.js} | 2 +- .../{chunk.RQJPCZFL.js => chunk.YO6PE2U4.js} | 2 +- .../{chunk.QCSKTARG.js => chunk.YOXFY4TW.js} | 2 +- .../{chunk.DRMJWHYW.js => chunk.YPIYOHSV.js} | 6 +- .../{chunk.SETBDGGP.js => chunk.Z4DU36RP.js} | 2 +- .../{chunk.DAKI4CJK.js => chunk.ZK7UG7BY.js} | 2 +- .../{chunk.Y44PSRDY.js => chunk.ZMNSPLYC.js} | 2 +- .../{chunk.XMU6QYKR.js => chunk.ZXSNECDV.js} | 2 +- dist/components/alert/alert.component.js | 16 +- dist/components/alert/alert.js | 18 +- .../animated-image.component.js | 6 +- .../animated-image/animated-image.js | 8 +- .../animation/animation.component.js | 4 +- dist/components/animation/animation.js | 6 +- dist/components/avatar/avatar.component.js | 8 +- dist/components/avatar/avatar.js | 10 +- .../breadcrumb/breadcrumb.component.js | 2 +- dist/components/breadcrumb/breadcrumb.js | 2 +- dist/components/button/button.component.js | 12 +- dist/components/button/button.js | 14 +- .../components/carousel/carousel.component.js | 8 +- dist/components/carousel/carousel.js | 10 +- .../components/checkbox/checkbox.component.js | 10 +- dist/components/checkbox/checkbox.js | 12 +- .../color-picker/color-picker.component.js | 20 +- dist/components/color-picker/color-picker.js | 22 +- .../copy-button/copy-button.component.js | 10 +- dist/components/copy-button/copy-button.js | 12 +- dist/components/details/details.component.js | 8 +- dist/components/details/details.js | 10 +- dist/components/dialog/dialog.component.js | 14 +- dist/components/dialog/dialog.js | 16 +- dist/components/drawer/drawer.component.js | 14 +- dist/components/drawer/drawer.js | 16 +- .../components/dropdown/dropdown.component.js | 8 +- dist/components/dropdown/dropdown.js | 10 +- .../icon-button/icon-button.component.js | 8 +- dist/components/icon-button/icon-button.js | 10 +- dist/components/icon/icon.component.js | 2 +- dist/components/icon/icon.js | 2 +- .../image-comparer.component.js | 8 +- .../image-comparer/image-comparer.js | 10 +- dist/components/input/input.component.js | 14 +- dist/components/input/input.js | 16 +- .../menu-item/menu-item.component.js | 12 +- dist/components/menu-item/menu-item.js | 14 +- .../menu-item/submenu-controller.js | 4 +- dist/components/option/option.component.js | 8 +- dist/components/option/option.js | 10 +- .../progress-bar/progress-bar.component.js | 8 +- dist/components/progress-bar/progress-bar.js | 10 +- dist/components/radio/radio.component.js | 8 +- dist/components/radio/radio.js | 10 +- dist/components/range/range.component.js | 12 +- dist/components/range/range.js | 14 +- dist/components/rating/rating.component.js | 8 +- dist/components/rating/rating.js | 10 +- dist/components/select/select.component.js | 16 +- dist/components/select/select.js | 18 +- .../split-panel/split-panel.component.js | 4 +- dist/components/split-panel/split-panel.js | 6 +- dist/components/switch/switch.component.js | 6 +- dist/components/switch/switch.js | 8 +- .../tab-group/tab-group.component.js | 12 +- dist/components/tab-group/tab-group.js | 14 +- dist/components/tab/tab.component.js | 12 +- dist/components/tab/tab.js | 14 +- dist/components/tag/tag.component.js | 12 +- dist/components/tag/tag.js | 14 +- .../components/textarea/textarea.component.js | 6 +- dist/components/textarea/textarea.js | 8 +- dist/components/tooltip/tooltip.component.js | 6 +- dist/components/tooltip/tooltip.js | 8 +- .../tree-item/tree-item.component.js | 16 +- dist/components/tree-item/tree-item.js | 18 +- dist/components/tree/tree.component.js | 18 +- dist/components/tree/tree.js | 20 +- dist/custom-elements.json | 372 +- dist/react/alert/index.js | 18 +- dist/react/animated-image/index.js | 8 +- dist/react/animation/index.js | 6 +- dist/react/avatar/index.js | 10 +- dist/react/breadcrumb/index.js | 2 +- dist/react/button/index.js | 14 +- dist/react/carousel/index.js | 10 +- dist/react/checkbox/index.js | 12 +- dist/react/color-picker/index.js | 22 +- dist/react/copy-button/index.js | 12 +- dist/react/details/index.js | 10 +- dist/react/dialog/index.js | 16 +- dist/react/drawer/index.js | 16 +- dist/react/dropdown/index.js | 10 +- dist/react/icon-button/index.js | 10 +- dist/react/icon/index.js | 2 +- dist/react/image-comparer/index.js | 10 +- dist/react/index.d.ts | 2 +- dist/react/index.js | 158 +- dist/react/input/index.js | 16 +- dist/react/menu-item/index.js | 14 +- dist/react/option/index.js | 10 +- dist/react/progress-bar/index.js | 10 +- dist/react/radio/index.js | 10 +- dist/react/range/index.js | 14 +- dist/react/rating/index.js | 10 +- dist/react/select/index.js | 18 +- dist/react/split-panel/index.js | 6 +- dist/react/switch/index.js | 8 +- dist/react/tab-group/index.js | 14 +- dist/react/tab/index.js | 14 +- dist/react/tag/index.js | 14 +- dist/react/textarea/index.js | 8 +- dist/react/tooltip/index.js | 8 +- dist/react/tree-item/index.js | 18 +- dist/react/tree/index.js | 20 +- dist/shoelace.js | 180 +- dist/types/vue/index.d.ts | 78 +- dist/vscode.html-custom-data.json | 54 +- dist/web-types.json | 142 +- frameworks/angular/index.html | 599 ++ frameworks/react/index.html | 743 ++ frameworks/templ/index.html | 458 + frameworks/vue-2/index.html | 587 ++ frameworks/vue/index.html | 630 ++ getting-started/customizing/index.html | 773 ++ getting-started/form-controls/index.html | 1899 ++++ getting-started/installation/index.html | 766 ++ getting-started/localization/index.html | 697 ++ getting-started/themes/index.html | 696 ++ getting-started/usage/index.html | 837 ++ index.html | 764 ++ resources/accessibility/index.html | 522 + resources/changelog/index.html | 8516 +++++++++++++++++ resources/community/index.html | 565 ++ resources/contributing/index.html | 1414 +++ tokens/border-radius/index.html | 510 + tokens/color/index.html | 1664 ++++ tokens/elevation/index.html | 494 + tokens/more/index.html | 987 ++ tokens/spacing/index.html | 572 ++ tokens/transition/index.html | 497 + tokens/typography/index.html | 749 ++ tokens/z-index/index.html | 485 + tutorials/integrating-with-astro/index.html | 614 ++ tutorials/integrating-with-laravel/index.html | 632 ++ tutorials/integrating-with-nextjs/index.html | 871 ++ tutorials/integrating-with-rails/index.html | 606 ++ 297 files changed, 121095 insertions(+), 1253 deletions(-) create mode 100644 404.html create mode 100644 assets/scripts/lunr.js create mode 100644 assets/search.json create mode 100644 components/alert/index.html create mode 100644 components/animated-image/index.html create mode 100644 components/animation/index.html create mode 100644 components/avatar/index.html create mode 100644 components/badge/index.html create mode 100644 components/breadcrumb-item/index.html create mode 100644 components/breadcrumb/index.html create mode 100644 components/button-group/index.html create mode 100644 components/button/index.html create mode 100644 components/card/index.html create mode 100644 components/carousel-item/index.html create mode 100644 components/carousel/index.html create mode 100644 components/checkbox/index.html create mode 100644 components/color-picker/index.html create mode 100644 components/copy-button/index.html create mode 100644 components/details/index.html create mode 100644 components/dialog/index.html create mode 100644 components/divider/index.html create mode 100644 components/drawer/index.html create mode 100644 components/dropdown/index.html create mode 100644 components/format-bytes/index.html create mode 100644 components/format-date/index.html create mode 100644 components/format-number/index.html create mode 100644 components/icon-button/index.html create mode 100644 components/icon/index.html create mode 100644 components/image-comparer/index.html create mode 100644 components/include/index.html create mode 100644 components/input/index.html create mode 100644 components/menu-item/index.html create mode 100644 components/menu-label/index.html create mode 100644 components/menu/index.html create mode 100644 components/mutation-observer/index.html create mode 100644 components/option/index.html create mode 100644 components/popup/index.html create mode 100644 components/progress-bar/index.html create mode 100644 components/progress-ring/index.html create mode 100644 components/qr-code/index.html create mode 100644 components/radio-button/index.html create mode 100644 components/radio-group/index.html create mode 100644 components/radio/index.html create mode 100644 components/range/index.html create mode 100644 components/rating/index.html create mode 100644 components/relative-time/index.html create mode 100644 components/resize-observer/index.html create mode 100644 components/select/index.html create mode 100644 components/skeleton/index.html create mode 100644 components/spinner/index.html create mode 100644 components/split-panel/index.html create mode 100644 components/switch/index.html create mode 100644 components/tab-group/index.html create mode 100644 components/tab-panel/index.html create mode 100644 components/tab/index.html create mode 100644 components/tag/index.html create mode 100644 components/textarea/index.html create mode 100644 components/tooltip/index.html create mode 100644 components/tree-item/index.html create mode 100644 components/tree/index.html create mode 100644 components/visually-hidden/index.html rename dist/chunks/{chunk.ZH2KM23Q.js => chunk.37J3NAYG.js} (83%) rename dist/chunks/{chunk.PTXGKMCM.js => chunk.3EZHFHG3.js} (100%) rename dist/chunks/{chunk.A2BFSQ3C.js => chunk.3H4P7QZ5.js} (83%) rename dist/chunks/{chunk.T7KYOX3S.js => chunk.3KSLHZUI.js} (82%) rename dist/chunks/{chunk.SQZ5OT6N.js => chunk.3ZGEZ6AF.js} (95%) rename dist/chunks/{chunk.3XSEVTOL.js => chunk.3ZTS7K3T.js} (87%) rename dist/chunks/{chunk.SRVZQDLF.js => chunk.4BS7E4WA.js} (82%) rename dist/chunks/{chunk.WMGEXFCN.js => chunk.4VSLQP6A.js} (99%) rename dist/chunks/{chunk.Y3VN6GCE.js => chunk.5T6ERPEL.js} (93%) rename dist/chunks/{chunk.YD3SR4QD.js => chunk.5YM23XW6.js} (84%) rename dist/chunks/{chunk.SSHR2JDI.js => chunk.6PGWJ74B.js} (85%) rename dist/chunks/{chunk.JURRYKMI.js => chunk.6QIZUGEE.js} (99%) rename dist/chunks/{chunk.YJFDGOZ2.js => chunk.77NS7GHF.js} (85%) rename dist/chunks/{chunk.6IYKUC4J.js => chunk.7MNXVO5H.js} (83%) rename dist/chunks/{chunk.F5FBHKBI.js => chunk.A4BE7OVG.js} (81%) rename dist/chunks/{chunk.XLVNHEC6.js => chunk.AAZEKXC4.js} (92%) rename dist/chunks/{chunk.J67LBPKS.js => chunk.AOTJKWMX.js} (94%) rename dist/chunks/{chunk.ZVYU26EE.js => chunk.AT35VHTC.js} (80%) rename dist/chunks/{chunk.DSZSVCSX.js => chunk.AW64EVPI.js} (99%) rename dist/chunks/{chunk.SLMMUW6G.js => chunk.CA4YGNMP.js} (100%) rename dist/chunks/{chunk.K2IH25YY.js => chunk.CMVGJZQB.js} (100%) rename dist/chunks/{chunk.TKH2FCTH.js => chunk.CPXW4SC4.js} (94%) rename dist/chunks/{chunk.JOMOSJ6V.js => chunk.D4HT5N2S.js} (100%) rename dist/chunks/{chunk.EVGTMRV3.js => chunk.DDLAAFQL.js} (95%) rename dist/chunks/{chunk.TQRRFFWX.js => chunk.E4DVWLFF.js} (87%) rename dist/chunks/{chunk.CFH2JNVK.js => chunk.EAH27JYQ.js} (99%) rename dist/chunks/{chunk.4S2NCH2A.js => chunk.EXPSTLYX.js} (100%) rename dist/chunks/{chunk.2T47JI2Y.js => chunk.F3BK5VZ5.js} (94%) rename dist/chunks/{chunk.VADWVLYW.js => chunk.F5DJG2IC.js} (99%) rename dist/chunks/{chunk.IULN2B2Z.js => chunk.FG3K56UG.js} (94%) rename dist/chunks/{chunk.WWLGKKJL.js => chunk.FSY7RZDG.js} (94%) rename dist/chunks/{chunk.ANK5P6NL.js => chunk.FY6XFGKF.js} (100%) rename dist/chunks/{chunk.R3FA5JLK.js => chunk.GA6KQAOQ.js} (84%) rename dist/chunks/{chunk.P63VQA7M.js => chunk.GQVYY2ON.js} (94%) rename dist/chunks/{chunk.GH4I3V5W.js => chunk.GVMOZDVD.js} (98%) rename dist/chunks/{chunk.BWM56YWB.js => chunk.HDJPOAMP.js} (93%) rename dist/chunks/{chunk.EUMKZFJV.js => chunk.HECO4DZ2.js} (100%) rename dist/chunks/{chunk.JXNEB52G.js => chunk.HIEWE77I.js} (100%) rename dist/chunks/{chunk.4RZCCS72.js => chunk.HJLSNBIP.js} (83%) rename dist/chunks/{chunk.RNPLPMI7.js => chunk.HP6XNQLT.js} (100%) rename dist/chunks/{chunk.XYZE4CTX.js => chunk.I5J75LJ5.js} (83%) rename dist/chunks/{chunk.GBETTBLG.js => chunk.I6TGOM6Z.js} (83%) rename dist/chunks/{chunk.THDZPG3S.js => chunk.IDJPPGR6.js} (100%) rename dist/chunks/{chunk.NQXFTJK2.js => chunk.IE2PU6PU.js} (84%) rename dist/chunks/{chunk.IZLUHFAR.js => chunk.IPBA3RL7.js} (85%) rename dist/chunks/{chunk.MB643KRE.js => chunk.IRURSJVI.js} (100%) rename dist/chunks/{chunk.QYSV4AOQ.js => chunk.IYOMW7E7.js} (99%) rename dist/chunks/{chunk.636GFVN7.js => chunk.JDMEV6W6.js} (99%) rename dist/chunks/{chunk.QFY5BTZB.js => chunk.JEDU5SAS.js} (99%) rename dist/chunks/{chunk.CKGCU5UH.js => chunk.JIZBX5ZW.js} (86%) rename dist/chunks/{chunk.AYJVTYM4.js => chunk.JRVKL7AO.js} (94%) rename dist/chunks/{chunk.JFXHKZRL.js => chunk.JWMI3NOK.js} (94%) rename dist/chunks/{chunk.Z5WPL7FK.js => chunk.K2G6YYR3.js} (83%) rename dist/chunks/{chunk.QWPPJ6MK.js => chunk.KHZVE7CV.js} (86%) rename dist/chunks/{chunk.CBWL3I6V.js => chunk.KLYKT4LR.js} (82%) rename dist/chunks/{chunk.TW53AQUU.js => chunk.KMS6K2ZC.js} (93%) rename dist/chunks/{chunk.CS2FJAVB.js => chunk.L5V2RVPF.js} (99%) rename dist/chunks/{chunk.TUUNNIMD.js => chunk.LJWD3SJX.js} (93%) rename dist/chunks/{chunk.LPDJYE6J.js => chunk.M7CLXYMX.js} (93%) rename dist/chunks/{chunk.VGFMDSAI.js => chunk.MPAT4V3I.js} (93%) rename dist/chunks/{chunk.CMHBKN7G.js => chunk.MZEJHEPM.js} (100%) rename dist/chunks/{chunk.6OGSJDWU.js => chunk.N3DJF6MW.js} (100%) rename dist/chunks/{chunk.QT6X3RZ4.js => chunk.N5QISGWZ.js} (99%) rename dist/chunks/{chunk.U4O2H2B7.js => chunk.NAMNOMAN.js} (99%) rename dist/chunks/{chunk.CMTWBNST.js => chunk.NQG7KWCE.js} (94%) rename dist/chunks/{chunk.I2VMJQGZ.js => chunk.NSDAXWU5.js} (99%) rename dist/chunks/{chunk.JJSRKCKW.js => chunk.NZULQTUJ.js} (84%) rename dist/chunks/{chunk.ARHWQFOY.js => chunk.OAUTL6YH.js} (99%) rename dist/chunks/{chunk.MTYZGYVJ.js => chunk.OYSDTFV2.js} (94%) rename dist/chunks/{chunk.OENC5VUK.js => chunk.PDIS3YDB.js} (94%) rename dist/chunks/{chunk.OUERAG24.js => chunk.PJ7UYN3F.js} (99%) rename dist/chunks/{chunk.UNW6LWJI.js => chunk.PYB4RKJQ.js} (95%) rename dist/chunks/{chunk.K2ROYTBB.js => chunk.QKLVXD76.js} (100%) rename dist/chunks/{chunk.F5YMP27H.js => chunk.RH52FQAZ.js} (95%) rename dist/chunks/{chunk.J72VNH2K.js => chunk.RYBGPLV6.js} (93%) rename dist/chunks/{chunk.IJORZ53P.js => chunk.SAQU6XWJ.js} (83%) rename dist/chunks/{chunk.TZECUIPX.js => chunk.SQHWC2O3.js} (94%) rename dist/chunks/{chunk.2A654XM4.js => chunk.SQPWULD2.js} (95%) rename dist/chunks/{chunk.4TOASGPU.js => chunk.TJHEY5YZ.js} (83%) rename dist/chunks/{chunk.PMQVOPBU.js => chunk.UKBSSTC3.js} (99%) rename dist/chunks/{chunk.EJV2FSC6.js => chunk.UPQ2JL5V.js} (94%) rename dist/chunks/{chunk.MZQVGI4G.js => chunk.URMLYPYT.js} (100%) rename dist/chunks/{chunk.ZPH3EXSL.js => chunk.UYEAPXNR.js} (100%) rename dist/chunks/{chunk.UBXOQCSK.js => chunk.VK2Q54G3.js} (93%) rename dist/chunks/{chunk.S6WKFUYV.js => chunk.VN7UQORF.js} (85%) rename dist/chunks/{chunk.JQ4XSVZH.js => chunk.VVCN2VEU.js} (84%) rename dist/chunks/{chunk.KIAH3HVJ.js => chunk.W2PFS7FX.js} (94%) rename dist/chunks/{chunk.W6AXMEWH.js => chunk.WEYLHTLN.js} (98%) rename dist/chunks/{chunk.Q4JOTESV.js => chunk.WMTR3AJO.js} (80%) rename dist/chunks/{chunk.YOF2P2QN.js => chunk.WTGDMHCB.js} (94%) rename dist/chunks/{chunk.MA64RL76.js => chunk.YALLUFXD.js} (84%) rename dist/chunks/{chunk.RQJPCZFL.js => chunk.YO6PE2U4.js} (94%) rename dist/chunks/{chunk.QCSKTARG.js => chunk.YOXFY4TW.js} (92%) rename dist/chunks/{chunk.DRMJWHYW.js => chunk.YPIYOHSV.js} (100%) rename dist/chunks/{chunk.SETBDGGP.js => chunk.Z4DU36RP.js} (84%) rename dist/chunks/{chunk.DAKI4CJK.js => chunk.ZK7UG7BY.js} (83%) rename dist/chunks/{chunk.Y44PSRDY.js => chunk.ZMNSPLYC.js} (82%) rename dist/chunks/{chunk.XMU6QYKR.js => chunk.ZXSNECDV.js} (94%) create mode 100644 frameworks/angular/index.html create mode 100644 frameworks/react/index.html create mode 100644 frameworks/templ/index.html create mode 100644 frameworks/vue-2/index.html create mode 100644 frameworks/vue/index.html create mode 100644 getting-started/customizing/index.html create mode 100644 getting-started/form-controls/index.html create mode 100644 getting-started/installation/index.html create mode 100644 getting-started/localization/index.html create mode 100644 getting-started/themes/index.html create mode 100644 getting-started/usage/index.html create mode 100644 index.html create mode 100644 resources/accessibility/index.html create mode 100644 resources/changelog/index.html create mode 100644 resources/community/index.html create mode 100644 resources/contributing/index.html create mode 100644 tokens/border-radius/index.html create mode 100644 tokens/color/index.html create mode 100644 tokens/elevation/index.html create mode 100644 tokens/more/index.html create mode 100644 tokens/spacing/index.html create mode 100644 tokens/transition/index.html create mode 100644 tokens/typography/index.html create mode 100644 tokens/z-index/index.html create mode 100644 tutorials/integrating-with-astro/index.html create mode 100644 tutorials/integrating-with-laravel/index.html create mode 100644 tutorials/integrating-with-nextjs/index.html create mode 100644 tutorials/integrating-with-rails/index.html diff --git a/404.html b/404.html new file mode 100644 index 00000000..bcbafaaf --- /dev/null +++ b/404.html @@ -0,0 +1,451 @@ + + + + + + + Page Not Found + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+
+

Page Not Found

+

A UFO takes one of the little worker monsters

+

The page you were looking for couldn’t be found.

+

Press / to search, or head back to the homepage.

+
+
+
+
+ + diff --git a/assets/scripts/lunr.js b/assets/scripts/lunr.js new file mode 100644 index 00000000..cdc94cd3 --- /dev/null +++ b/assets/scripts/lunr.js @@ -0,0 +1,6 @@ +/** + * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.9 + * Copyright (C) 2020 Oliver Nightingale + * @license MIT + */ +!function(){var e=function(t){var r=new e.Builder;return r.pipeline.add(e.trimmer,e.stopWordFilter,e.stemmer),r.searchPipeline.add(e.stemmer),t.call(r,r),r.build()};e.version="2.3.9",e.utils={},e.utils.warn=function(e){return function(t){e.console&&console.warn&&console.warn(t)}}(this),e.utils.asString=function(e){return void 0===e||null===e?"":e.toString()},e.utils.clone=function(e){if(null===e||void 0===e)return e;for(var t=Object.create(null),r=Object.keys(e),i=0;i0){var c=e.utils.clone(r)||{};c.position=[a,l],c.index=s.length,s.push(new e.Token(i.slice(a,o),c))}a=o+1}}return s},e.tokenizer.separator=/[\s\-]+/,e.Pipeline=function(){this._stack=[]},e.Pipeline.registeredFunctions=Object.create(null),e.Pipeline.registerFunction=function(t,r){r in this.registeredFunctions&&e.utils.warn("Overwriting existing registered function: "+r),t.label=r,e.Pipeline.registeredFunctions[t.label]=t},e.Pipeline.warnIfFunctionNotRegistered=function(t){var r=t.label&&t.label in this.registeredFunctions;r||e.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",t)},e.Pipeline.load=function(t){var r=new e.Pipeline;return t.forEach(function(t){var i=e.Pipeline.registeredFunctions[t];if(!i)throw new Error("Cannot load unregistered function: "+t);r.add(i)}),r},e.Pipeline.prototype.add=function(){var t=Array.prototype.slice.call(arguments);t.forEach(function(t){e.Pipeline.warnIfFunctionNotRegistered(t),this._stack.push(t)},this)},e.Pipeline.prototype.after=function(t,r){e.Pipeline.warnIfFunctionNotRegistered(r);var i=this._stack.indexOf(t);if(i==-1)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,r)},e.Pipeline.prototype.before=function(t,r){e.Pipeline.warnIfFunctionNotRegistered(r);var i=this._stack.indexOf(t);if(i==-1)throw new Error("Cannot find existingFn");this._stack.splice(i,0,r)},e.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);t!=-1&&this._stack.splice(t,1)},e.Pipeline.prototype.run=function(e){for(var t=this._stack.length,r=0;r1&&(se&&(r=n),s!=e);)i=r-t,n=t+Math.floor(i/2),s=this.elements[2*n];return s==e?2*n:s>e?2*n:sa?l+=2:o==a&&(t+=r[u+1]*i[l+1],u+=2,l+=2);return t},e.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},e.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,r=0;t0){var o,a=s.str.charAt(0);a in s.node.edges?o=s.node.edges[a]:(o=new e.TokenSet,s.node.edges[a]=o),1==s.str.length&&(o["final"]=!0),n.push({node:o,editsRemaining:s.editsRemaining,str:s.str.slice(1)})}if(0!=s.editsRemaining){if("*"in s.node.edges)var u=s.node.edges["*"];else{var u=new e.TokenSet;s.node.edges["*"]=u}if(0==s.str.length&&(u["final"]=!0),n.push({node:u,editsRemaining:s.editsRemaining-1,str:s.str}),s.str.length>1&&n.push({node:s.node,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)}),1==s.str.length&&(s.node["final"]=!0),s.str.length>=1){if("*"in s.node.edges)var l=s.node.edges["*"];else{var l=new e.TokenSet;s.node.edges["*"]=l}1==s.str.length&&(l["final"]=!0),n.push({node:l,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)})}if(s.str.length>1){var c,h=s.str.charAt(0),d=s.str.charAt(1);d in s.node.edges?c=s.node.edges[d]:(c=new e.TokenSet,s.node.edges[d]=c),1==s.str.length&&(c["final"]=!0),n.push({node:c,editsRemaining:s.editsRemaining-1,str:h+s.str.slice(2)})}}}return i},e.TokenSet.fromString=function(t){for(var r=new e.TokenSet,i=r,n=0,s=t.length;n=e;t--){var r=this.uncheckedNodes[t],i=r.child.toString();i in this.minimizedNodes?r.parent.edges[r["char"]]=this.minimizedNodes[i]:(r.child._str=i,this.minimizedNodes[i]=r.child),this.uncheckedNodes.pop()}},e.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},e.Index.prototype.search=function(t){return this.query(function(r){var i=new e.QueryParser(t,r);i.parse()})},e.Index.prototype.query=function(t){for(var r=new e.Query(this.fields),i=Object.create(null),n=Object.create(null),s=Object.create(null),o=Object.create(null),a=Object.create(null),u=0;u1?this._b=1:this._b=e},e.Builder.prototype.k1=function(e){this._k1=e},e.Builder.prototype.add=function(t,r){var i=t[this._ref],n=Object.keys(this._fields);this._documents[i]=r||{},this.documentCount+=1;for(var s=0;s=this.length)return e.QueryLexer.EOS;var t=this.str.charAt(this.pos);return this.pos+=1,t},e.QueryLexer.prototype.width=function(){return this.pos-this.start},e.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},e.QueryLexer.prototype.backup=function(){this.pos-=1},e.QueryLexer.prototype.acceptDigitRun=function(){var t,r;do t=this.next(),r=t.charCodeAt(0);while(r>47&&r<58);t!=e.QueryLexer.EOS&&this.backup()},e.QueryLexer.prototype.more=function(){return this.pos1&&(t.backup(),t.emit(e.QueryLexer.TERM)),t.ignore(),t.more())return e.QueryLexer.lexText},e.QueryLexer.lexEditDistance=function(t){return t.ignore(),t.acceptDigitRun(),t.emit(e.QueryLexer.EDIT_DISTANCE),e.QueryLexer.lexText},e.QueryLexer.lexBoost=function(t){return t.ignore(),t.acceptDigitRun(),t.emit(e.QueryLexer.BOOST),e.QueryLexer.lexText},e.QueryLexer.lexEOS=function(t){t.width()>0&&t.emit(e.QueryLexer.TERM)},e.QueryLexer.termSeparator=e.tokenizer.separator,e.QueryLexer.lexText=function(t){for(;;){var r=t.next();if(r==e.QueryLexer.EOS)return e.QueryLexer.lexEOS;if(92!=r.charCodeAt(0)){if(":"==r)return e.QueryLexer.lexField;if("~"==r)return t.backup(),t.width()>0&&t.emit(e.QueryLexer.TERM),e.QueryLexer.lexEditDistance;if("^"==r)return t.backup(),t.width()>0&&t.emit(e.QueryLexer.TERM),e.QueryLexer.lexBoost;if("+"==r&&1===t.width())return t.emit(e.QueryLexer.PRESENCE),e.QueryLexer.lexText;if("-"==r&&1===t.width())return t.emit(e.QueryLexer.PRESENCE),e.QueryLexer.lexText;if(r.match(e.QueryLexer.termSeparator))return e.QueryLexer.lexTerm}else t.escapeCharacter()}},e.QueryParser=function(t,r){this.lexer=new e.QueryLexer(t),this.query=r,this.currentClause={},this.lexemeIdx=0},e.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var t=e.QueryParser.parseClause;t;)t=t(this);return this.query},e.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},e.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},e.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},e.QueryParser.parseClause=function(t){var r=t.peekLexeme();if(void 0!=r)switch(r.type){case e.QueryLexer.PRESENCE:return e.QueryParser.parsePresence;case e.QueryLexer.FIELD:return e.QueryParser.parseField;case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var i="expected either a field or a term, found "+r.type;throw r.str.length>=1&&(i+=" with value '"+r.str+"'"),new e.QueryParseError(i,r.start,r.end)}},e.QueryParser.parsePresence=function(t){var r=t.consumeLexeme();if(void 0!=r){switch(r.str){case"-":t.currentClause.presence=e.Query.presence.PROHIBITED;break;case"+":t.currentClause.presence=e.Query.presence.REQUIRED;break;default:var i="unrecognised presence operator'"+r.str+"'";throw new e.QueryParseError(i,r.start,r.end)}var n=t.peekLexeme();if(void 0==n){var i="expecting term or field, found nothing";throw new e.QueryParseError(i,r.start,r.end)}switch(n.type){case e.QueryLexer.FIELD:return e.QueryParser.parseField;case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var i="expecting term or field, found '"+n.type+"'";throw new e.QueryParseError(i,n.start,n.end)}}},e.QueryParser.parseField=function(t){var r=t.consumeLexeme();if(void 0!=r){if(t.query.allFields.indexOf(r.str)==-1){var i=t.query.allFields.map(function(e){return"'"+e+"'"}).join(", "),n="unrecognised field '"+r.str+"', possible fields: "+i;throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.fields=[r.str];var s=t.peekLexeme();if(void 0==s){var n="expecting term, found nothing";throw new e.QueryParseError(n,r.start,r.end)}switch(s.type){case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var n="expecting term, found '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},e.QueryParser.parseTerm=function(t){var r=t.consumeLexeme();if(void 0!=r){t.currentClause.term=r.str.toLowerCase(),r.str.indexOf("*")!=-1&&(t.currentClause.usePipeline=!1);var i=t.peekLexeme();if(void 0==i)return void t.nextClause();switch(i.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+i.type+"'";throw new e.QueryParseError(n,i.start,i.end)}}},e.QueryParser.parseEditDistance=function(t){var r=t.consumeLexeme();if(void 0!=r){var i=parseInt(r.str,10);if(isNaN(i)){var n="edit distance must be numeric";throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.editDistance=i;var s=t.peekLexeme();if(void 0==s)return void t.nextClause();switch(s.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},e.QueryParser.parseBoost=function(t){var r=t.consumeLexeme();if(void 0!=r){var i=parseInt(r.str,10);if(isNaN(i)){var n="boost must be numeric";throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.boost=i;var s=t.peekLexeme();if(void 0==s)return void t.nextClause();switch(s.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.lunr=t()}(this,function(){return e})}(); diff --git a/assets/search.json b/assets/search.json new file mode 100644 index 00000000..8bd0728f --- /dev/null +++ b/assets/search.json @@ -0,0 +1 @@ +{"searchIndex":{"version":"2.3.9","fields":["t","h","c"],"fieldVectors":[["t/0",[0,42.016,1,77.918]],["h/0",[0,36.982,1,68.582]],["c/0",[0,1.779,1,3.298,2,3.133,3,5.951,4,4.354,5,0.088,6,3.906,7,4.969,8,4.634,9,5.389]],["t/1",[10,35.705,11,57.219,12,66.547,13,66.547,14,66.547,15,57.219]],["h/1",[10,24.866,14,78.047,16,63.063,17,71.964,18,42.03,19,68.405,20,0.192,21,37.747,22,26.453,23,40.516,24,67.107,25,25.646,26,29.049,27,59.6,28,63.063,29,34.11,30,36.473,31,71.964,32,7.898]],["c/1",[0,1.129,2,2.259,5,0.108,6,2.817,9,3.886,10,2.115,11,3.342,14,3.886,16,3.14,17,3.583,18,2.996,19,3.843,20,0.012,21,2.429,22,2.202,23,2.018,24,3.342,25,1.828,26,2.071,27,3.835,28,4.058,29,2.726,30,2.914,31,4.63,32,0.393,33,1.176,34,6.085,35,0.39,36,4.318,37,4.318,38,0.452,39,1.359,40,2.968,41,1.359,42,3.124,43,2.124,44,3.886,45,1.88,46,1.88,47,0.436,48,0.965,49,0.287,50,1.493,51,2.259,52,3.64,53,2.093,54,1.699,55,0.928,56,1.756,57,1.359,58,3.14,59,0.432,60,2.562,61,4.908,62,0.051,63,0.393,64,0.218,65,2.206,66,1.991,67,1.201,68,2.352,69,3.886,70,3.583,71,1.6,72,0.338,73,0.69,74,1.756,75,4.63,76,3.342,77,1.991,78,3.342,79,2.817,80,0.356,81,4.908,82,3.169,83,2.968,84,0.194,85,3.583,86,3.14,87,1.414,88,3.583,89,1.094,90,1.816,91,4.292,92,3.161,93,2.259,94,1.256,95,3.14,96,4.908,97,3.64,98,3.311,99,3.886,100,3.14,101,1.317,102,3.877,103,4.908,104,3.467,105,4.908,106,4.908,107,3.583,108,2.817,109,0.669,110,1.238,111,4.292,112,3.14,113,0.374,114,3.583,115,6.341,116,2.429,117,3.342,118,3.583,119,2.429,120,5.546,121,3.467,122,5.022,123,1.247,124,2.683,125,3.886,126,3.583,127,5.13,128,4.908,129,4.908,130,3.886,131,3.668,132,4.292,133,0.849,134,2.683,135,4.292,136,1.611,137,3.886,138,1.644,139,1.699,140,2.018,141,2.683,142,1.201,143,0.276,144,2.968,145,1.699,146,3.886,147,4.908,148,4.908,149,3.583,150,2.683,151,2.259,152,4.908,153,4.318,154,3.886,155,3.342,156,4.908,157,4.908,158,1.88,159,2.562,160,3.583,161,3.886,162,2.269,163,3.342,164,2.173,165,2.018,166,4.908,167,3.886,168,3.583,169,3.511,170,2.817,171,3.583,172,2.352,173,3.039,174,3.583,175,3.14,176,2.352,177,4.908,178,3.342,179,0.32,180,4.292,181,4.908,182,4.908,183,3.583,184,4.908,185,2.093,186,2.817,187,4.292,188,4.908,189,4.292,190,4.908,191,2.093,192,3.342,193,0.323,194,4.908,195,3.886,196,1.447,197,4.908,198,4.292,199,4.292,200,1.493,201,2.968,202,4.908,203,2.683,204,1.816,205,2.968,206,3.886,207,1.947,208,4.292,209,4.292,210,1.402,211,3.835,212,4.908,213,4.292,214,3.886,215,0.693,216,2.968,217,3.583,218,4.292,219,0.508,220,4.784,221,3.886,222,4.908,223,4.908,224,1.541,225,2.093,226,1.88,227,4.292,228,4.908,229,1.88,230,3.342,231,1.129,232,3.886,233,4.292,234,4.908,235,2.093,236,2.817,237,4.908,238,4.908,239,4.908]],["t/2",[80,17.317]],["h/2",[20,0.138,66,30.948,80,7.147,98,51.456,149,71.964,229,37.747,240,86.19,241,45.373,242,7.524,243,34.11,244,47.236,245,71.964,246,1.562,247,119.703,248,86.19,249,78.047,250,36.473,251,49.254,252,63.063,253,53.878]],["c/2",[0,1.114,2,2.229,5,0.081,10,2.065,19,3.692,20,0.012,24,3.297,25,1.26,29,2.65,30,2.734,35,0.387,39,1.741,41,1.741,42,1.921,48,1.453,49,0.285,51,2.894,55,0.708,62,0.056,64,0.216,66,2.32,67,1.708,68,2.321,71,1.864,72,0.333,73,0.684,74,1.733,77,1.521,80,0.617,87,1.402,92,1.991,98,4.097,101,1.687,113,0.48,114,3.536,116,1.855,119,1.855,123,1.237,134,2.647,136,1.014,139,2.65,143,0.291,149,4.59,159,2.528,162,2.249,165,1.991,173,3.013,176,3.013,179,0.455,186,2.779,191,2.065,193,0.39,200,1.473,210,2.187,219,0.388,229,2.408,235,2.681,240,6.105,241,2.894,242,0.639,243,2.416,244,3.013,245,4.59,246,0.127,247,7.158,248,6.696,249,4.978,250,2.583,251,3.142,252,4.467,253,4.186,254,2.647,255,4.842,256,2.779,257,0.985,258,3.098,259,1.733,260,1.991,261,0.504,262,2.779,263,2.144,264,3.282,265,1.792,266,0.48,267,3.151,268,2.894,269,3.098,270,2.42,271,2.928,272,3.297,273,2.326,274,3.297,275,4.842,276,2.42,277,3.297,278,2.42,279,1.289,280,4.235,281,0.592,282,2.674,283,4.842,284,3.835,285,0.465,286,4.842,287,1.792,288,4.842,289,4.59,290,3.297,291,4.235,292,0.237,293,2.583,294,4.235,295,3.437,296,5.498,297,4.235,298,4.842,299,5.498,300,2.326,301,0.369,302,0.369,303,2.229,304,3.098,305,1.792,306,0.281,307,1.16,308,1.933,309,2.249,310,2.42,311,2.647,312,2.779,313,3.098,314,3.297,315,0.637,316,1.26,317,3.536,318,4.28,319,3.536,320,4.842,321,3.536,322,1.676,323,1.636,324,4.842,325,5.097,326,4.221,327,2.779,328,3.835,329,2.42,330,3.835,331,3.536,332,2.928,333,4.842,334,1.383,335,2.528,336,1.855,337,4.235,338,3.835,339,3.835,340,2.647,341,3.835,342,4.235,343,3.835,344,1.676,345,2.42,346,3.835,347,4.842,348,3.835,349,4.842,350,4.842,351,3.536,352,6.286,353,4.842,354,3.297,355,2.176,356,4.235,357,4.842,358,3.835,359,0.315,360,4.842,361,4.842,362,2.784,363,3.297,364,4.842,365,0.985,366,6.286,367,2.647,368,2.321,369,3.835,370,2.779,371,4.842,372,3.297,373,4.235,374,3.536,375,2.229,376,4.842,377,3.536,378,2.779,379,4.023,380,6.286,381,4.842,382,1.991]],["t/3",[383,189.101]],["h/3",[66,48.875,383,123.254,384,136.115]],["c/3",[10,1.713,22,1.823,66,2.426,131,3.546,383,6.118,384,6.756,385,4.624,386,2.35,387,6.791,388,6.791,389,6.791]],["t/4",[78,162.595]],["h/4",[10,25.922,20,0.197,50,31.254,66,32.263,67,25.133,78,109.45,113,7.839,179,6.692,263,45.498,264,53.642,266,7.839,267,43.815,390,62.132,391,64.851,392,51.347]],["c/4",[0,1.395,10,2.094,20,0.012,25,1.579,35,0.445,39,1.68,41,2.003,48,1.194,49,0.248,50,2.201,51,2.793,54,2.1,62,0.056,65,1.905,66,2.428,67,1.77,71,1.531,73,0.787,78,5.846,87,1.353,92,2.494,94,1.084,113,0.552,139,2.77,143,0.285,165,2.494,179,0.533,219,0.486,242,0.552,261,0.494,263,3.423,264,4.036,265,2.677,266,0.59,267,3.488,268,3.331,269,4.629,270,3.032,271,3.669,272,4.131,273,2.245,274,4.131,276,3.032,278,3.616,279,1.12,293,2.245,323,1.579,359,0.471,382,2.494,390,4.375,391,3.765,392,3.616,393,3.317,394,4.43,395,3.483,396,2.032,397,0.33,398,6.067,399,2.87,400,6.067,401,6.067,402,2.687,403,2.171,404,6.067]],["t/5",[79,84.93,173,70.916,405,49.557]],["h/5",[65,37.899,66,37.899,79,69.275,172,57.844,173,57.844,241,55.563,313,100.366,391,55.563,405,40.423,406,72.985,407,37.899]],["c/5",[0,1.339,5,0.075,10,2.074,20,0.011,25,1.837,30,2.155,32,0.467,33,0.975,35,0.434,39,1.613,41,1.955,48,1.389,51,3.25,62,0.057,65,2.385,66,2.48,68,3.383,71,1.469,73,0.768,77,1.829,79,4.902,87,1.299,92,2.394,94,1.041,133,1.008,136,1.22,139,2.733,143,0.311,165,2.394,170,3.343,172,3.641,173,3.383,179,0.495,193,0.297,219,0.467,241,3.25,242,0.539,261,0.398,263,2.579,264,3.041,265,2.612,266,0.444,267,3.239,268,3.25,269,3.727,270,2.911,271,3.522,272,3.966,273,2.155,274,3.966,276,2.911,278,3.528,279,1.402,292,0.266,313,5.323,335,3.041,362,2.579,367,3.184,375,2.681,382,2.394,386,2.016,391,3.25,393,3.184,394,4.253,395,3.343,405,2.544,406,4.594,407,2.48,408,2.612,409,3.522,410,1.951,411,2.792,412,0.536,413,5.094,414,3.522,415,1.951,416,3.522,417,3.184,418,2.681,419,0.374,420,4.253,421,1.516,422,6.643,423,6.643,424,4.253,425,3.966,426,3.966,427,3.727,428,4.532,429,2.792,430,3.966,431,2.792,432,3.343]],["t/6",[79,137.066]],["h/6",[50,33.381,65,34.459,66,34.459,79,62.988,172,52.595,207,43.527,241,50.521,261,7.491,281,8.793,313,94.252,391,50.521,406,66.361,407,34.459,433,70.218,434,3.159]],["c/6",[0,1.272,10,2.076,20,0.011,25,1.439,30,2.046,32,0.548,33,1.145,35,0.421,39,1.531,41,1.893,42,2.193,48,1.345,49,0.28,50,2.08,51,2.546,60,2.887,62,0.057,65,2.331,66,2.331,68,3.558,71,1.395,73,0.883,77,1.736,79,4.924,87,1.233,92,2.273,94,0.988,99,4.379,116,2.118,123,1.088,133,0.957,139,2.684,142,1.353,143,0.327,151,2.546,159,3.57,165,2.273,169,3.71,170,3.174,172,3.558,179,0.505,193,0.282,207,2.712,219,0.443,241,3.148,242,0.522,261,0.529,263,2.449,264,2.887,265,2.046,266,0.422,267,3.166,268,3.148,269,3.538,270,2.763,271,3.344,272,3.765,273,2.046,274,3.765,276,2.763,278,3.417,279,1.37,281,0.639,282,2.619,284,4.379,313,5.266,329,2.763,335,2.887,355,1.914,367,3.023,382,2.273,391,3.571,393,3.023,394,4.037,395,3.174,405,2.29,406,4.489,407,2.331,408,2.046,409,3.344,410,1.852,411,2.65,415,1.852,416,3.344,417,3.023,418,2.546,419,0.355,420,4.037,421,1.439,422,5.98,423,5.98,424,4.037,425,3.765,426,3.765,427,3.538,428,3.925,429,2.65,433,4.375,434,0.237,435,4.037,436,5.529,437,5.529,438,2.118,439,4.037,440,5.529,441,2.449,442,3.738,443,3.023,444,4.836,445,4.037,446,2.65,447,4.836,448,2.763,449,2.449,450,4.836,451,3.174,452,5.529,453,3.538,454,4.993,455,0.34,456,2.449]],["t/7",[143,9.393]],["h/7",[22,35.986,38,12.337,84,4.112,143,6.598,231,30.831,419,8.608,457,37.121]],["c/7",[0,1.027,1,2.542,5,0.108,10,1.693,17,3.261,18,3.053,19,2.979,20,0.012,21,2.283,22,2.232,30,2.206,33,0.748,37,3.041,38,0.773,41,1.857,43,1.496,47,0.41,50,1.358,52,2.563,55,1.047,62,0.056,63,0.358,64,0.246,65,2.107,67,1.641,71,1.127,73,0.649,74,1.598,77,2.107,84,0.255,86,2.858,88,3.261,89,1.329,90,1.653,91,3.906,93,2.056,94,1.199,102,3.112,104,2.441,108,2.563,109,0.813,110,1.504,112,2.858,118,3.261,119,1.71,121,2.441,123,1.173,126,3.261,136,0.936,141,2.441,142,1.458,143,0.338,145,1.546,151,2.056,162,1.598,173,2.14,179,0.291,180,3.906,192,3.041,201,2.701,203,3.668,207,2.364,210,2.13,215,1.011,216,2.701,219,0.358,231,1.961,235,1.904,242,0.341,250,2.76,254,3.668,257,1.051,261,0.489,266,0.546,279,1.238,281,0.358,287,1.653,292,0.252,300,1.653,303,2.056,305,1.653,306,0.389,312,3.421,317,3.261,322,2.655,323,1.162,332,2.701,334,1.276,335,2.332,336,1.71,340,2.441,344,1.546,348,3.536,354,3.041,355,2.063,379,2.858,386,1.546,393,2.441,415,2.247,418,2.056,419,0.517,426,3.041,441,1.978,442,2.441,455,0.367,457,2.289,458,5.867,459,4.281,460,3.17,461,1.653,462,1.027,463,2.701,464,2.441,465,1.978,466,4.352,467,5.96,468,3.041,469,2.701,470,4.466,471,2.232,472,2.063,473,1.653,474,3.906,475,3.421,476,3.258,477,2.979,478,1.71,479,1.978,480,3.536,481,2.858,482,2.563,483,2.364,484,4.466,485,3.041,486,3.536,487,3.536,488,2.858,489,2.563,490,2.364,491,2.14,492,3.421,493,2.483,494,1.904,495,4.874,496,4.281,497,7.047,498,3.258,499,3.906,500,3.089,501,1.546,502,1.904,503,1.698,504,1.546,505,2.232,506,3.261,507,3.906,508,6.709,509,6.709,510,6.709,511,4.466,512,3.906,513,4.466,514,3.906,515,2.056,516,2.056,517,3.261,518,4.466,519,4.466,520,1.653,521,4.466,522,2.563,523,3.261,524,2.858,525,2.232,526,3.041,527,5.213,528,3.536,529,4.466,530,4.466,531,3.041,532,3.041,533,3.041,534,4.466,535,3.261,536,3.536,537,3.906,538,4.466,539,2.701,540,2.056,541,4.466,542,3.041,543,1.162,544,1.448,545,2.332,546,3.906,547,1.168,548,3.906,549,1.092,550,2.441,551,2.563,552,3.536,553,1.836,554,2.701,555,3.668,556,1.771,557,2.858,558,3.906,559,0.183,560,3.906,561,0.623,562,3.258,563,2.858,564,4.874,565,0.934,566,4.72,567,0.756,568,1.173,569,5.213,570,2.858,571,2.283,572,1.904,573,5.96,574,0.879,575,4.466,576,2.563,577,3.906,578,4.466,579,4.466,580,1.904,581,1.836,582,3.041,583,3.906,584,4.466]],["t/8",[66,74.986]],["h/8",[5,1.112,35,7.662,40,75.314,41,34.483,60,45.033,66,45.9,140,35.459,179,5.618,242,6.585,260,35.459,264,65.023,266,6.581,267,36.783,268,39.709,270,43.106,301,6.581,302,6.581,473,31.92,585,58.73,586,62.98,587,55.191,588,33.035]],["c/8",[0,1.483,5,0.083,10,2.115,18,2.75,20,0.012,21,2.166,25,1.678,29,2.232,32,0.453,33,0.947,34,3.018,35,0.506,39,1.144,40,4.643,41,2.221,45,1.583,47,0.284,48,1.113,49,0.264,50,1.962,51,2.604,53,1.763,54,1.43,55,0.605,58,2.645,59,0.61,60,4.009,62,0.055,64,0.195,65,2.281,66,2.519,67,1.011,69,3.273,71,1.427,72,0.389,73,0.755,74,2.481,77,1.298,78,2.814,79,2.372,80,0.3,87,0.921,94,1.239,95,3.619,101,1.109,102,2.953,104,2.26,107,3.018,109,0.771,113,0.432,114,3.018,116,1.583,117,2.814,119,1.583,121,3.092,124,2.26,133,1.116,136,1.638,138,1.384,139,1.958,140,2.651,141,2.26,142,1.011,143,0.163,151,1.903,159,2.158,162,2.307,165,2.651,172,1.981,173,3.091,178,2.814,179,0.5,183,4.13,193,0.37,196,1.667,200,1.257,201,2.499,203,2.26,205,2.499,207,1.639,210,1.181,215,0.584,219,0.453,229,1.583,236,3.702,242,0.642,243,1.958,244,1.981,245,3.018,252,2.645,253,4.197,257,1.086,260,2.325,261,0.473,264,4.14,266,0.554,267,3.334,268,3.452,270,3.466,273,1.53,277,2.814,278,2.827,279,1.044,285,0.544,287,1.53,293,2.093,300,2.387,301,0.605,302,0.605,304,2.645,305,2.093,306,0.328,312,2.372,323,1.678,328,3.273,334,1.616,344,1.43,351,3.018,355,1.43,359,0.368,362,3.216,369,3.273,370,2.372,378,2.372,379,3.619,385,2.814,390,2.499,391,3.192,392,3.466,396,2.769,397,0.351,399,3.182,402,2.856,409,3.9,411,1.981,414,2.499,421,1.076,429,3.091,430,2.814,438,1.583,441,2.505,443,2.26,446,1.981,455,0.348,473,2.093,476,2.26,477,3.223,481,2.645,482,2.372,483,1.639,488,2.645,489,3.247,491,1.981,493,2.093,494,1.763,498,3.791,520,1.53,522,2.372,525,2.066,533,2.814,543,1.472,547,0.886,551,3.247,553,1.699,559,0.169,563,3.619,565,0.647,568,0.813,571,1.583,572,2.412,574,0.813,580,1.763,581,2.325,585,4.391,586,4.13,587,5.002,588,2.782,589,1.721,590,1.699,591,0.521,592,0.521,593,5.107,594,3.273,595,2.645,596,3.615,597,2.499,598,2.26,599,3.615,600,2.158,601,2.505,602,3.018,603,5.656,604,4.391,605,3.273,606,3.615,607,4.133,608,3.247,609,3.018,610,2.645,611,4.133,612,2.158,613,1.763,614,4.947,615,2.499,616,2.645,617,4.133,618,3.852,619,2.645,620,2.645,621,0.657,622,3.615,623,4.947,624,3.852,625,2.499,626,1.699,627,1.981,628,3.092,629,2.499,630,2.814,631,2.499,632,3.615,633,4.947,634,3.615,635,2.499,636,3.273,637,3.018,638,1.981,639,1.699,640,3.615,641,0.692,642,1.109,643,2.499,644,4.133,645,0.5,646,3.421,647,3.018,648,4.133,649,3.615,650,2.645,651,3.615,652,1.981,653,3.273,654,3.273,655,3.615,656,3.9,657,4.479,658,2.26,659,3.018,660,2.645,661,3.247,662,3.615,663,1.981,664,1.981,665,3.273,666,3.273,667,0.364,668,2.645,669,1.83,670,3.615,671,3.615,672,1.763,673,3.852,674,1.43,675,4.133,676,2.814,677,3.273,678,2.372,679,3.273,680,1.903,681,4.133,682,4.133,683,1.699,684,4.479,685,2.066,686,3.615,687,4.133,688,2.645,689,4.133,690,4.133,691,4.133,692,2.645,693,2.26]],["t/9",[462,42.016,694,61.196]],["h/9",[89,27.412,110,21.38,143,4.837,281,6.791,282,32.456,308,34.044,407,26.61,462,33.278,553,34.837,694,53.172,695,74.109,696,39.014,697,53.554,698,42.35,699,57.701,700,34.837,701,39.014,702,29.329,703,37.526]],["c/9",[0,0.612,2,1.224,5,0.113,10,1.969,15,1.811,18,1.749,20,0.006,21,1.019,23,2.058,27,1.608,28,1.702,29,2.104,30,1.853,32,0.568,33,0.942,41,0.736,42,1.055,43,0.891,47,0.442,49,0.168,53,1.134,54,0.92,55,0.979,57,0.736,62,0.054,63,0.213,64,0.172,65,1.572,71,1.263,72,0.418,73,0.728,74,1.791,77,1.909,80,0.408,84,0.082,87,1.355,88,1.942,89,1.877,90,1.518,92,1.093,93,1.888,94,0.895,97,1.526,101,0.714,104,1.454,109,0.363,110,1.888,114,2.995,116,1.571,119,1.917,123,1.107,124,1.454,133,0.71,134,1.454,136,1.179,139,0.92,141,1.454,142,1.003,143,0.307,145,0.92,162,0.951,193,0.328,196,0.784,200,0.809,210,0.76,215,1.179,216,1.608,226,1.019,229,1.571,236,2.354,246,0.12,250,1.518,254,2.242,256,1.526,257,1.337,261,0.384,266,0.203,279,1.039,281,0.536,282,2.935,292,0.323,293,0.984,300,1.518,303,1.224,305,1.518,306,0.154,308,2.249,309,0.951,310,3.454,315,0.659,316,1.067,322,1.419,323,0.692,326,1.608,329,1.329,331,1.942,355,1.733,372,3.409,382,1.093,386,0.92,391,1.224,403,2.175,406,1.608,407,2.601,411,1.275,415,1.884,416,2.48,419,0.263,420,1.942,421,1.464,425,1.811,429,1.275,455,0.346,460,2.217,462,1.961,465,1.816,469,1.608,471,3.21,476,1.454,478,1.019,483,1.055,488,2.624,490,2.548,491,2.399,494,1.134,498,2.242,500,1.224,501,2.832,503,1.774,504,2.392,516,2.799,522,1.526,542,1.811,543,1.067,544,2.3,550,1.454,553,3.15,559,0.168,561,0.429,562,1.454,565,0.952,567,0.337,568,0.807,571,1.917,572,1.134,574,0.985,581,1.093,589,1.248,590,1.093,612,1.388,613,2.135,625,1.608,627,1.275,628,1.454,641,0.687,645,0.183,663,2.697,667,0.361,668,1.702,669,1.178,672,1.134,685,1.329,686,2.326,694,2.902,695,5.854,696,2.957,697,3.224,698,3.739,699,4.373,700,2.752,701,3.645,702,1.419,703,1.816,704,2.659,705,2.873,706,2.995,707,0.736,708,5.617,709,3.254,710,1.526,711,2.106,712,2.326,713,2.659,714,3.587,715,1.888,716,4.423,717,2.326,718,0.245,719,1.811,720,1.942,721,2.326,722,1.942,723,2.05,724,1.749,725,1.275,726,1.942,727,2.106,728,2.659,729,0.282,730,2.326,731,2.326,732,2.326,733,2.106,734,3.964,735,1.942,736,3.587,737,2.155,738,1.608,739,1.388,740,1.388,741,2.995,742,2.659,743,2.659,744,2.492,745,1.811,746,1.942,747,3.203,748,3.587,749,2.106,750,1.942,751,2.106,752,2.659,753,2.106,754,2.326,755,1.526,756,1.811,757,2.354,758,2.659,759,0.859,760,0.46,761,2.659,762,4.101,763,4.101,764,3.587,765,1.855,766,5.626,767,4.373,768,5.086,769,6.423,770,5.816,771,2.399,772,1.151,773,2.354,774,5.086,775,4.283,776,5.086,777,2.326,778,1.702,779,1.526,780,1.526,781,1.702,782,3.353,783,1.811,784,1.526,785,1.526,786,2.217,787,2.399,788,0.417,789,2.106,790,1.811,791,1.942,792,2.659,793,2.659,794,2.659,795,2.659,796,1.811,797,0.289,798,1.608,799,2.59,800,2.659,801,3.587,802,2.326,803,1.942,804,2.326,805,2.659,806,2.659,807,0.809,808,1.702,809,1.942,810,2.135,811,1.942,812,2.326,813,0.733,814,1.627,815,0.92,816,1.035,817,1.43,818,5.626,819,5.626,820,4.101,821,4.101,822,6.423,823,5.006,824,4.071,825,4.071,826,5.626,827,1.442,828,2.659,829,3.676,830,2.48,831,1.686,832,5.626,833,6.912,834,4.101,835,4.101,836,1.658,837,3.403,838,1.294,839,3.6,840,5.626,841,4.101,842,5.006,843,3.703,844,5.626,845,2.659,846,2.326,847,2.326,848,1.942,849,3.248,850,3.587,851,1.811,852,2.659,853,2.659,854,2.659,855,2.659,856,2.659,857,5.006,858,2.659,859,5.006,860,0.431,861,2.659,862,3.587,863,1.733,864,2.659,865,2.326,866,1.702,867,1.275,868,2.659,869,1.816,870,0.76,871,2.659,872,2.659,873,1.608,874,1.526,875,1.942,876,2.326,877,2.659,878,1.942,879,1.526,880,1.608,881,1.329,882,2.659,883,1.811]],["t/10",[241,109.936]],["h/10",[5,1.112,20,0.174,32,6.912,50,37.885,62,0.577,73,9.386,113,6.581,140,35.459,241,39.709,246,1.367,336,33.035,396,28.889,397,4.697,419,5.538,434,2.483,561,9.014,613,36.783,705,49.509,767,58.73,884,75.431,885,34.212,886,27.085,887,58.73,888,75.431,889,36.783,890,68.304]],["c/10",[0,0.885,5,0.069,10,2.017,18,2.296,19,3.361,20,0.012,21,1.474,22,1.033,26,1.134,29,1.332,30,1.424,32,0.656,33,0.645,35,0.237,38,0.354,39,1.719,42,1.527,45,2.062,48,1.481,49,0.157,50,2.406,51,1.772,54,1.332,55,0.984,56,2.407,57,1.066,60,3.696,62,0.056,64,0.231,65,1.691,66,1.95,67,1.842,71,1.358,72,0.427,73,0.922,74,1.377,76,2.621,77,1.209,82,1.924,87,0.858,89,0.858,90,1.993,94,1.202,95,2.463,100,2.463,109,0.965,110,0.971,113,0.56,116,2.062,119,2.379,133,1.303,134,2.104,136,1.409,138,2.08,140,2.553,141,2.944,142,1.645,143,0.327,145,2.328,151,1.772,158,1.474,159,2.01,162,2.222,163,2.621,165,1.582,167,3.048,169,3.104,179,0.251,186,2.209,192,2.621,193,0.196,196,2.086,200,1.638,205,3.756,210,2.095,215,0.761,219,0.431,235,1.641,241,2.479,242,0.294,243,2.149,246,0.125,250,2.489,257,0.973,259,1.377,261,0.525,263,1.704,264,2.01,266,0.474,273,1.424,278,2.691,279,1.354,281,0.431,285,0.37,287,2.298,290,2.621,292,0.253,293,1.993,300,2.298,305,1.993,306,0.223,307,0.71,308,1.066,310,3.361,315,0.708,318,2.621,323,1.002,329,3.538,336,2.943,345,1.924,355,1.332,359,0.251,362,2.384,365,0.603,370,3.091,372,3.666,374,2.81,375,2.479,386,1.864,390,2.328,391,1.772,396,2.371,397,0.385,399,2.91,402,2.384,409,2.328,410,1.803,411,2.581,415,1.803,416,3.756,419,0.525,434,0.234,435,2.81,441,1.704,446,2.581,448,1.924,455,0.414,465,2.384,469,2.328,471,2.691,472,1.864,473,1.424,474,3.366,475,2.209,478,2.576,483,2.808,489,3.091,490,1.527,494,1.641,498,2.944,503,0.913,515,1.772,522,2.209,524,2.463,525,2.691,544,1.746,545,2.811,547,1.149,556,1.527,557,2.463,559,0.29,561,0.803,562,2.944,565,0.843,572,3.019,574,1.059,582,3.666,589,1.638,599,3.366,600,2.811,601,1.704,602,2.81,612,2.01,613,2.648,627,1.845,628,2.104,629,3.256,635,2.328,638,1.845,641,0.645,642,1.033,643,3.256,645,0.265,650,2.463,652,1.845,653,3.048,656,2.328,657,3.048,664,2.581,667,0.546,669,2.75,672,2.868,673,3.666,679,4.918,685,2.691,692,2.463,702,1.864,705,3.861,707,1.862,709,2.214,715,1.772,720,2.81,729,0.37,737,1.474,741,2.81,755,2.209,757,2.209,759,0.544,760,0.932,767,4.58,771,2.581,773,2.209,786,1.704,797,0.419,801,3.366,807,1.889,808,3.445,813,0.688,831,1.582,836,1.587,860,0.623,863,1.332,866,2.463,874,2.209,881,1.924,883,2.621,884,5.431,885,2.668,886,2.303,887,4.58,888,5.431,889,2.648,890,5.963,891,3.048,892,3.849,893,3.849,894,2.479,895,1.04,896,3.849,897,2.944,898,3.366,899,3.048,900,3.048,901,3.666,902,3.366,903,2.328,904,1.772,905,3.849,906,3.256,907,2.81,908,2.463,909,3.048,910,2.81,911,1.332,912,1.924,913,2.463,914,5.384,915,1.924,916,3.849,917,1.993,918,3.366,919,2.81,920,3.366,921,2.01,922,3.366,923,3.849,924,2.621,925,2.581,926,3.849,927,3.366,928,3.366,929,4.709,930,3.366,931,2.859,932,3.932,933,3.366,934,2.328,935,3.366,936,2.81,937,3.849,938,0.453,939,1.704,940,3.849,941,3.366,942,2.104,943,2.209,944,3.849,945,3.849,946,3.048,947,2.209,948,1.845,949,3.048,950,5.384,951,2.621,952,1.845,953,3.048,954,3.849,955,3.849,956,3.849,957,0.658,958,1.704,959,3.366,960,2.81,961,3.048,962,3.366,963,2.81,964,3.366,965,3.366,966,1.772,967,3.849,968,3.849,969,2.328,970,3.366,971,4.535,972,3.849,973,5.384,974,1.924,975,2.81,976,4.709,977,3.048,978,2.81]],["t/11",[41,66.117]],["h/11",[26,27.912,40,57.266,41,52.971,42,37.561,57,26.219,62,0.634,71,33.584,138,31.717,143,3.725,215,13.381,453,60.594,581,38.93,608,54.355,609,69.146,629,57.266]],["c/11",[0,1.341,2,1.989,5,0.075,7,3.155,10,2.019,12,3.422,18,1.843,20,0.009,21,1.655,22,2.171,25,1.125,26,2.406,30,1.599,33,0.976,37,2.942,38,0.607,39,1.614,40,5.142,41,2.444,42,3.316,46,1.655,47,0.297,48,1.147,49,0.27,53,1.843,57,2.24,62,0.055,64,0.243,65,2.316,66,1.357,71,2.059,72,0.401,73,0.718,82,2.16,83,3.99,84,0.133,89,1.575,94,0.772,108,2.48,109,0.795,110,1.665,112,3.731,123,1.298,125,3.422,126,3.155,132,3.779,133,1.315,134,2.362,136,1.545,138,1.953,139,2.284,142,1.057,143,0.327,144,2.613,145,1.496,153,2.942,162,2.361,172,2.071,173,3.162,186,2.48,192,5.378,193,0.396,200,1.315,205,2.613,211,3.99,215,1.074,216,2.613,242,0.58,250,1.599,253,2.362,254,2.362,256,2.48,257,0.677,261,0.45,262,2.48,265,1.599,266,0.33,270,4.079,292,0.277,295,3.187,300,1.599,303,1.989,305,1.599,306,0.25,315,0.767,329,2.16,332,2.613,344,2.018,351,3.155,354,2.942,358,3.422,362,2.582,392,2.16,403,2.527,414,2.613,415,1.447,418,1.989,419,0.277,427,2.765,431,2.071,438,1.655,442,2.362,453,3.731,455,0.435,457,2.187,459,2.48,460,1.914,463,2.613,466,3.155,468,2.942,469,2.613,471,2.914,473,2.158,476,3.607,477,3.298,478,2.233,480,5.225,485,2.942,489,2.48,490,1.714,492,2.48,495,5.022,498,4.154,516,1.989,522,3.787,542,2.942,543,1.125,545,2.256,551,2.48,559,0.238,561,0.452,572,2.814,580,1.843,581,3.124,585,4.493,588,1.655,589,1.315,590,1.777,608,4.054,609,5.158,610,2.765,613,1.843,618,2.942,625,2.613,627,2.071,629,3.99,631,2.613,638,2.071,639,1.777,645,0.401,650,2.765,676,2.942,680,2.684,683,1.777,688,2.765,729,0.297,747,2.765,788,0.913,803,3.155,829,2.613,839,2.765,863,1.496,873,3.526,906,2.613,912,2.16,935,3.779,939,1.914,947,2.48,948,3.162,979,3.97,980,3.422,981,4.321,982,3.779,983,4.321,984,2.765,985,4.321,986,3.422,987,1.989,988,7.063,989,4.321,990,3.155,991,3.422,992,3.779,993,2.362,994,3.779,995,2.16,996,3.155,997,3.779,998,3.779,999,4.321,1000,3.731,1001,3.97,1002,3.97,1003,4.321,1004,3.155,1005,4.321,1006,2.48,1007,4.321,1008,5.83,1009,4.321,1010,3.155,1011,4.321,1012,2.48,1013,3.779,1014,4.52,1015,0.398,1016,3.779,1017,3.779,1018,4.321,1019,3.155,1020,1.777,1021,2.765,1022,2.613,1023,2.942,1024,3.779,1025,4.321,1026,4.321,1027,2.942,1028,3.155,1029,3.779,1030,3.422,1031,4.321,1032,4.321,1033,1.546,1034,2.765,1035,2.765,1036,1.989,1037,3.779,1038,3.779]],["t/12",[43,61.196,995,91.312]],["h/12",[43,53.863,995,80.37]],["c/12",[5,0.101,10,2.027,16,3.636,18,2.423,19,3.475,20,0.011,21,2.177,29,2.407,33,0.952,36,4.735,42,2.254,43,2.889,44,4.5,50,1.729,62,0.047,64,0.195,71,1.434,75,4.15,77,1.785,82,2.84,87,1.267,92,2.336,93,2.616,94,1.343,98,2.967,104,3.107,112,4.45,119,2.663,122,4.5,123,1.118,136,1.19,151,2.616,158,2.177,162,2.033,163,4.735,169,2.84,170,3.262,175,3.636,185,2.423,186,3.262,196,1.675,198,4.97,199,4.97,203,3.802,204,2.103,215,0.803,242,0.434,243,1.967,257,1.28,267,2.423,329,3.475,332,3.437,335,3.923,336,2.177,382,3.089,442,3.802,459,3.992,487,4.5,523,4.15,525,3.755,536,4.5,636,4.5,638,2.724,647,4.15,652,2.724,656,3.437,672,2.423,692,4.45,693,3.107,706,4.15,709,2.859,738,3.437,753,4.5,754,4.97,785,3.262,879,3.262,904,2.616,909,4.5,912,2.84,919,4.15,949,4.5,971,4.15,995,3.755,1001,3.869,1020,2.336,1033,2.488,1039,4.97,1040,6.201,1041,2.689,1042,5.683,1043,3.636,1044,4.5,1045,4.97,1046,4.5,1047,3.262,1048,6.082,1049,5.683,1050,4.97,1051,5.683,1052,5.683,1053,3.869,1054,6.082,1055,4.97,1056,2.724,1057,3.869,1058,5.683,1059,5.683,1060,5.683,1061,6.954,1062,4.97,1063,5.683,1064,5.507,1065,4.97,1066,4.97,1067,5.683,1068,6.082,1069,5.683,1070,5.683,1071,2.758,1072,4.15,1073,4.97,1074,5.683,1075,4.97,1076,3.636,1077,5.683,1078,5.683,1079,5.683,1080,4.15,1081,4.5,1082,5.683,1083,2.84,1084,5.683,1085,4.97,1086,3.869,1087,3.636,1088,3.437,1089,3.636,1090,4.97,1091,4.97]],["t/13",[1083,119.339]],["h/13",[1083,83.825,1087,85.789,1092,106.171,1093,85.789,1094,76.956,1095,67.003,1096,117.25]],["c/13",[8,3.955,10,2.039,19,3.792,20,0.01,22,1.892,27,3.513,28,3.717,30,2.15,33,1.27,46,2.906,47,0.4,49,0.31,50,1.767,53,2.477,62,0.047,63,0.465,64,0.242,65,1.824,82,3.943,83,3.513,84,0.178,86,3.717,87,1.832,92,2.388,113,0.443,134,3.176,141,4.313,162,2.078,169,3.522,170,3.334,193,0.402,207,2.304,211,3.513,236,3.334,257,1.104,269,4.51,276,3.522,315,0.764,362,2.572,370,3.334,397,0.316,410,2.541,448,3.522,473,2.15,533,4.799,548,5.08,568,1.386,580,2.477,613,2.477,720,4.242,879,3.334,917,2.92,946,4.6,948,2.784,978,4.242,1001,3.955,1033,2.078,1035,3.717,1047,4.355,1050,5.08,1083,4.193,1087,5.171,1088,4.262,1091,5.08,1092,6.4,1093,5.171,1094,4.355,1095,3.792,1096,7.068,1097,4.6,1098,5.08,1099,5.809,1100,5.809,1101,4.6,1102,4.6,1103,3.717,1104,5.809,1105,5.08,1106,3.955,1107,5.581,1108,4.6,1109,5.146,1110,5.08,1111,3.513,1112,5.809,1113,4.6,1114,4.588,1115,5.809,1116,6.163,1117,5.809,1118,2.784,1119,5.809,1120,5.809,1121,5.809,1122,5.809,1123,0.558,1124,5.809,1125,4.6,1126,3.955,1127,5.809]],["t/14",[45,91.459]],["h/14",[0,25.821,26,33.095,45,57.288,71,28.329,138,37.607,200,34.156,382,46.16,709,46.16,1128,108.465,1129,88.918,1130,71.848]],["c/14",[0,1.495,2,2.993,8,3.474,10,1.963,18,2.176,20,0.011,21,1.954,22,1.37,25,1.328,26,2.221,32,0.638,33,0.854,35,0.4,42,2.024,45,3.3,49,0.209,50,1.552,57,1.413,60,2.664,62,0.056,64,0.175,65,2.042,67,1.248,71,1.901,72,0.447,73,0.779,74,2.326,77,2.042,94,1.162,97,2.929,101,1.37,104,2.79,109,0.696,113,0.546,123,1.482,136,1.578,138,2.178,139,1.766,140,2.673,142,1.248,145,2.477,162,1.826,169,2.55,170,2.929,171,3.726,173,2.446,186,2.929,193,0.406,200,2.177,203,2.79,204,1.888,210,1.458,242,0.625,244,2.446,252,4.579,253,3.554,256,2.929,261,0.514,266,0.546,273,1.888,277,3.474,282,1.954,285,0.49,289,3.726,312,3.732,345,2.55,379,3.265,382,2.942,392,2.55,396,1.709,399,2.024,402,2.26,410,2.178,411,2.446,419,0.328,421,1.328,439,3.726,441,2.879,442,2.79,448,2.55,460,2.26,483,2.024,489,2.929,491,2.446,493,1.888,525,2.55,557,3.265,559,0.266,562,2.79,574,1.279,576,3.732,585,3.474,593,4.041,598,2.79,604,3.474,612,3.395,613,2.773,615,3.086,621,0.429,628,3.554,631,3.086,636,4.041,638,2.446,645,0.351,647,3.726,652,2.446,659,4.748,678,2.929,680,2.349,706,3.726,707,1.413,709,3.098,724,2.176,729,0.447,753,4.041,755,2.929,760,0.883,767,3.474,802,4.462,810,2.176,846,4.462,886,2.042,911,1.766,930,4.462,952,2.446,963,3.726,978,3.726,980,4.041,1047,2.929,1081,4.041,1083,2.55,1086,3.474,1087,3.265,1093,3.265,1103,3.265,1106,4.427,1114,3.086,1128,5.288,1129,5.149,1130,4.16,1131,2.664,1132,5.091,1133,4.16,1134,6.258,1135,6.258,1136,3.265,1137,4.872,1138,4.462,1139,5.103,1140,5.103,1141,6.502,1142,5.103,1143,4.462,1144,4.462,1145,5.103,1146,3.726,1147,4.462,1148,3.726,1149,4.462,1150,4.748,1151,6.502,1152,5.103,1153,4.462,1154,5.103,1155,5.103,1156,5.103,1157,3.265,1158,3.474,1159,3.086,1160,4.041,1161,4.462,1162,5.103,1163,5.103,1164,4.041,1165,5.103]],["t/15",[1103,152.798]],["h/15",[10,10.335,20,0.097,26,12.074,38,10.884,43,13.72,50,27.37,62,0.602,71,10.335,82,34.612,84,2.124,98,36.159,109,5.587,131,21.387,143,4.162,175,26.211,179,2.668,207,16.248,210,11.701,219,5.55,246,1.098,365,6.417,417,22.393,419,6.793,434,2.59,455,5.535,462,9.42,498,22.393,535,29.91,567,5.196,576,23.512,598,22.393,645,2.818,652,33.194,692,44.316,694,13.72,760,7.088,811,29.91,874,23.512,887,47.158,895,6.859,1033,14.656,1034,26.211,1086,27.891,1103,26.211,1106,27.891,1166,35.823,1167,32.438,1168,27.891,1169,35.823,1170,35.823,1171,29.91,1172,32.438,1173,35.823,1174,32.438,1175,27.891,1176,35.823,1177,32.438,1178,15.159,1179,26.211,1180,27.891,1181,26.211,1182,9.42,1183,27.891]],["c/15",[0,0.729,1,1.352,5,0.096,6,1.82,10,1.84,11,1.311,12,1.525,18,2.868,19,0.962,20,0.012,21,1.214,22,1.257,25,1.449,26,1.878,27,3.131,29,1.792,30,1.916,31,2.315,32,0.375,33,1.15,34,2.95,36,1.311,37,1.311,38,0.711,39,0.533,42,1.603,43,2.198,44,2.51,45,1.983,46,2.441,47,0.451,48,1.018,49,0.312,50,2.411,51,1.459,52,1.105,53,2.375,54,1.621,55,0.9,56,0.689,57,0.533,60,1.655,62,0.057,64,0.219,65,2.112,66,1.269,67,1.146,68,1.519,69,1.525,71,1.552,72,0.132,73,0.83,74,1.675,77,2.157,82,3.432,83,1.165,84,0.236,86,1.232,87,1.312,88,2.315,89,1.312,90,0.713,92,1.303,93,2.156,94,1.25,95,2.028,98,4.17,101,0.517,102,1.005,107,1.406,109,1.016,110,1.306,111,1.684,112,2.028,113,0.147,116,1.794,117,1.311,118,1.406,119,1.214,121,2.209,123,1.323,131,3.074,133,1.21,134,1.733,136,1.488,137,1.525,138,0.645,141,2.209,142,1.146,143,0.304,144,1.165,145,1.927,151,2.383,153,2.158,155,1.311,158,1.547,159,1.655,162,2.201,168,2.315,169,3.6,170,1.105,171,1.406,172,1.519,173,2.244,174,1.406,175,4.667,176,0.923,179,0.383,185,0.821,186,2.319,187,2.772,191,1.352,192,3.525,193,0.162,196,1.526,200,0.586,204,1.916,206,1.525,207,2.818,210,2.106,211,2.443,217,1.406,219,0.584,229,0.738,231,1.077,235,1.723,242,0.425,243,0.666,244,1.936,246,0.107,250,1.495,253,1.053,254,1.053,256,3.53,257,1.195,258,2.028,260,0.792,261,0.459,262,2.688,265,1.495,266,0.449,271,1.165,272,1.311,273,0.713,276,1.584,279,1.135,280,1.684,282,0.738,285,0.185,287,0.713,289,1.406,290,2.158,292,0.285,295,1.053,299,2.772,300,1.916,303,1.459,304,1.232,305,1.495,306,0.234,307,0.864,308,0.533,309,0.689,310,0.962,312,1.105,315,0.417,316,1.449,317,4.299,322,1.792,323,1.051,325,2.315,326,3.131,329,2.019,331,1.406,334,1.338,335,1.005,336,1.214,337,1.684,338,2.51,343,1.525,344,0.666,345,1.584,346,4.1,354,2.158,355,0.666,358,2.51,362,1.404,363,1.311,365,0.998,368,1.519,370,1.82,372,2.158,373,1.684,377,2.315,378,1.82,382,1.661,386,1.097,392,2.34,396,1.865,397,0.173,399,2.053,402,2.074,403,0.689,410,2.665,411,1.519,414,3.131,417,2.56,418,1.459,419,0.493,421,1.219,425,2.158,426,1.311,429,1.519,430,2.158,431,2.822,434,0.216,435,1.406,438,1.983,441,1.789,442,1.053,443,1.733,446,2.244,448,0.962,451,2.319,455,0.466,456,1.404,457,0.533,459,1.105,460,0.853,461,0.713,462,1.547,464,3.362,465,2.293,466,1.406,468,2.158,469,1.165,471,0.962,472,1.097,473,2.358,475,2.319,476,1.053,477,0.962,478,1.794,483,1.257,485,2.751,486,2.51,490,2.053,491,2.669,492,2.319,493,1.916,494,0.821,496,1.105,498,3.218,504,1.097,515,0.887,516,0.887,520,1.733,523,1.406,525,2.019,526,2.158,535,4.299,540,1.459,542,3.189,543,0.501,544,1.518,545,2.445,546,1.684,547,0.964,549,0.471,551,1.105,553,1.303,554,1.165,555,1.053,556,0.764,559,0.228,561,0.666,562,2.209,563,3.936,565,0.922,567,0.832,570,2.585,572,1.352,574,1.158,576,2.319,580,1.997,581,0.792,582,2.158,585,1.311,588,1.214,589,1.229,590,2.529,595,2.028,596,1.684,598,2.209,601,0.853,604,1.311,605,2.51,610,1.232,612,1.005,613,1.997,615,1.165,616,1.232,618,1.311,622,1.684,625,1.165,627,2.669,631,1.917,638,2.481,639,1.303,642,0.517,645,0.496,646,1.917,650,2.996,652,3.453,655,2.772,656,1.165,658,1.053,659,2.95,667,0.279,668,1.232,669,1.789,672,2.623,674,0.666,676,4.188,678,1.82,679,1.525,680,1.86,683,1.303,684,1.525,685,1.584,692,4.61,693,1.053,694,2.342,697,1.916,698,1.584,699,3.189,700,0.792,701,0.887,702,1.398,705,2.319,707,1.542,709,2.529,710,1.82,718,0.292,723,1.584,724,2.623,725,0.923,726,1.406,727,1.525,734,3.199,738,1.165,745,1.311,746,1.406,750,2.95,751,4.662,757,1.105,760,1.135,772,1.191,778,1.232,785,1.82,787,0.923,788,0.497,797,0.44,799,0.887,807,1.229,808,1.232,809,1.406,810,1.723,811,2.315,813,0.567,815,0.666,816,0.486,824,1.82,836,0.934,838,0.729,843,1.005,848,1.406,849,1.525,860,0.312,862,1.684,863,0.666,874,4.275,879,1.82,880,1.917,883,1.311,885,0.764,886,2.061,887,3.189,890,2.51,894,0.887,895,0.784,897,1.733,904,2.564,906,3.719,910,1.406,912,0.962,913,2.585,915,0.962,917,0.713,918,1.684,921,1.005,922,1.684,925,2.669,928,4.095,931,1.459,936,2.315,946,3.708,947,1.105,948,3.054,949,1.525,971,2.315,974,1.584,977,5.196,978,1.406,984,2.585,990,2.315,991,2.51,992,1.684,994,1.684,995,1.584,996,1.406,1002,1.311,1004,1.406,1010,2.315,1012,1.105,1015,0.372,1016,1.684,1027,1.311,1033,2.201,1034,3.313,1035,2.585,1038,2.772,1041,0.689,1043,1.232,1044,1.525,1045,1.684,1046,1.525,1047,2.688,1053,1.311,1056,1.519,1064,4.871,1068,1.684,1071,1.257,1073,1.684,1080,2.315,1083,2.783,1086,3.525,1087,3.767,1088,1.165,1089,2.585,1090,1.684,1092,3.708,1093,3.313,1101,1.525,1103,4.61,1106,3.525,1107,3.199,1108,1.525,1109,2.315,1111,3.719,1113,1.525,1114,1.165,1125,1.525,1130,1.232,1131,1.655,1133,1.232,1146,2.315,1147,2.772,1148,2.315,1158,1.311,1160,1.525,1166,4.527,1167,4.662,1168,4.339,1169,4.527,1170,3.533,1171,4.299,1172,2.51,1173,2.772,1174,4.1,1175,3.525,1176,4.527,1177,3.708,1178,1.916,1179,2.996,1180,2.751,1181,2.028,1182,1.547,1183,4.008,1184,1.684,1185,3.17,1186,1.181,1187,1.926,1188,4.527,1189,3.419,1190,1.684,1191,1.926,1192,1.926,1193,1.926,1194,3.17,1195,2.315,1196,1.926,1197,1.684,1198,1.926,1199,1.926,1200,1.926,1201,1.926,1202,4.527,1203,3.17,1204,3.17,1205,1.926,1206,1.406,1207,1.926,1208,1.926,1209,1.926,1210,3.17,1211,2.772,1212,1.926,1213,3.17,1214,1.82,1215,1.926,1216,4.04,1217,1.926,1218,1.926,1219,1.926,1220,1.926,1221,2.772,1222,1.926,1223,1.684,1224,1.926,1225,1.926,1226,4.1,1227,0.586,1228,1.926,1229,2.315,1230,3.17,1231,0.853,1232,1.684,1233,1.232,1234,3.17,1235,1.406,1236,1.926,1237,1.926,1238,1.926,1239,1.926,1240,1.926,1241,3.17,1242,1.105,1243,1.406,1244,1.525,1245,0.689,1246,1.926,1247,2.028,1248,1.926,1249,3.533,1250,1.926,1251,1.005,1252,1.105,1253,1.926,1254,1.684,1255,1.926,1256,1.926,1257,3.17,1258,1.105,1259,1.525,1260,0.45,1261,1.525,1262,0.292,1263,1.684,1264,2.51,1265,3.17,1266,1.684,1267,1.926,1268,1.926,1269,1.684,1270,1.684,1271,2.51,1272,0.906,1273,2.772,1274,1.406,1275,1.926,1276,1.525,1277,1.525,1278,1.519,1279,1.684,1280,1.406,1281,1.926,1282,1.926,1283,2.772,1284,1.926,1285,1.926,1286,1.684,1287,1.684,1288,1.926,1289,2.772,1290,1.926,1291,3.17,1292,1.926,1293,1.926,1294,4.04,1295,3.199,1296,3.17,1297,1.165,1298,1.165,1299,1.926,1300,1.926,1301,1.926,1302,3.199,1303,1.926,1304,3.199,1305,2.772,1306,1.684,1307,1.406,1308,2.315,1309,1.926,1310,1.926,1311,2.209,1312,1.926,1313,3.533,1314,1.926,1315,1.926,1316,3.17,1317,1.926,1318,2.445,1319,3.17,1320,1.684,1321,1.406,1322,1.105,1323,1.926,1324,3.17,1325,1.926,1326,1.232,1327,1.684,1328,1.684,1329,1.926,1330,1.926,1331,1.926,1332,1.926,1333,1.311,1334,1.926,1335,1.926,1336,1.406,1337,1.926,1338,1.684,1339,1.926,1340,1.684,1341,1.926,1342,2.51,1343,1.232,1344,1.525,1345,1.926,1346,1.684,1347,1.684,1348,1.926,1349,1.684,1350,1.684,1351,1.926,1352,1.926,1353,3.533,1354,1.926,1355,1.926,1356,1.406,1357,0.429,1358,4.04,1359,1.926,1360,1.926,1361,1.926,1362,1.684,1363,3.78,1364,1.684,1365,1.684,1366,1.684,1367,1.926,1368,3.533,1369,1.684,1370,1.926,1371,1.684,1372,1.926,1373,1.926,1374,1.684,1375,1.684,1376,1.684,1377,1.926,1378,1.684,1379,1.525,1380,3.533,1381,1.005,1382,1.926,1383,1.926,1384,1.926,1385,1.926,1386,1.926,1387,1.684,1388,1.926,1389,2.772,1390,1.684,1391,1.311,1392,1.165,1393,1.926,1394,1.926,1395,1.406,1396,1.165,1397,1.525,1398,1.926,1399,1.684,1400,1.926,1401,1.684,1402,1.684,1403,1.684,1404,1.926,1405,1.525,1406,1.926,1407,1.406,1408,1.655,1409,1.165,1410,0.821,1411,1.568,1412,1.525,1413,1.165,1414,1.525,1415,1.406,1416,1.926,1417,1.406,1418,1.926,1419,1.926,1420,1.926,1421,1.232,1422,1.684,1423,1.926,1424,1.926,1425,1.926,1426,1.926,1427,1.684,1428,1.053,1429,1.311,1430,1.525,1431,1.684,1432,1.82,1433,1.684,1434,1.926,1435,1.684,1436,2.71,1437,1.232,1438,1.926,1439,1.165,1440,1.684,1441,1.926,1442,1.926,1443,1.926,1444,0.962,1445,1.684,1446,1.311,1447,2.772,1448,1.926,1449,1.926,1450,2.95,1451,1.232,1452,1.926,1453,1.232,1454,1.684,1455,1.926,1456,1.926,1457,1.684,1458,1.926,1459,1.926,1460,2.315,1461,1.406,1462,1.406,1463,0.923,1464,1.684,1465,1.926,1466,1.684,1467,1.926,1468,1.926]],["t/16",[504,63.236,1469,77.918]],["h/16",[457,43.094,504,53.868,1469,66.375]],["c/16",[62,0.05,64,0.221,179,0.488,185,2.742,261,0.439,292,0.316,315,0.985,457,2.193,461,2.38,504,2.971,517,4.696,664,3.082,667,0.659,813,1.149,817,1.837,867,3.082,869,3.315,873,3.889,924,4.379,1245,2.679,1469,3.66,1470,6.431,1471,3.214,1472,5.093,1473,4.696,1474,3.516,1475,5.098,1476,1.895,1477,6.431,1478,4.696,1479,3.889,1480,4.379,1481,5.093,1482,3.082,1483,2.742,1484,3.691,1485,2.644,1486,6.431]],["t/17",[215,25.817,457,50.589]],["h/17",[41,40.488,215,20.662,216,88.431,457,48.989]],["c/17",[2,2.109,5,0.059,10,1.156,22,1.23,38,0.422,41,2.082,53,1.954,62,0.05,65,1.904,67,1.121,87,1.021,123,1.193,131,2.392,136,0.96,139,2.098,143,0.238,153,3.12,161,3.628,179,0.298,207,1.817,215,1.235,216,4.548,218,4.007,262,2.63,292,0.325,315,0.603,334,1.309,414,2.771,419,0.294,455,0.418,457,2.216,461,1.695,464,2.505,479,3.009,480,4.801,486,3.628,502,3.084,503,1.087,580,1.954,586,3.345,613,1.954,685,3.03,694,1.534,725,2.196,824,3.9,825,4.937,829,5.201,839,5.504,843,3.547,867,4.122,897,2.505,901,3.12,948,2.196,966,2.109,1020,3.536,1021,5.504,1022,5.201,1023,5.856,1027,3.12,1030,5.956,1131,2.392,1307,3.345,1311,3.714,1343,2.932,1487,7.557,1488,3.12,1489,4.801,1490,5.856,1491,5.856,1492,6.811,1493,2.63,1494,3.628,1495,4.007,1496,4.581,1497,5.302,1498,4.801,1499,4.427,1500,6.062,1501,5.302,1502,6.062,1503,5.302,1504,6.062,1505,6.062,1506,6.062,1507,6.062,1508,4.801,1509,6.062,1510,5.302,1511,6.062,1512,4.427,1513,6.062]],["t/18",[1514,174.363]],["h/18",[265,7.848,1514,15.485,1515,15.485,1516,18.546,1517,18.546,1518,18.546,1519,18.546,1520,18.546,1521,18.546,1522,18.546,1523,18.546,1524,18.546,1525,18.546,1526,18.546,1527,18.546,1528,18.546,1529,18.546,1530,18.546,1531,18.546,1532,18.546,1533,18.546,1534,18.546,1535,18.546,1536,160.148,1537,18.546,1538,18.546,1539,18.546,1540,18.546,1541,18.546,1542,18.546,1543,18.546,1544,18.546,1545,18.546,1546,18.546,1547,18.546,1548,18.546,1549,18.546,1550,18.546,1551,16.793,1552,18.546,1553,18.546,1554,18.546,1555,18.546,1556,18.546,1557,18.546,1558,18.546,1559,18.546,1560,18.546,1561,18.546,1562,18.546,1563,18.546,1564,18.546,1565,18.546,1566,18.546,1567,18.546,1568,18.546,1569,18.546,1570,18.546,1571,18.546,1572,18.546,1573,18.546,1574,18.546,1575,18.546,1576,18.546,1577,18.546,1578,18.546,1579,18.546,1580,18.546,1581,18.546,1582,18.546,1583,18.546,1584,18.546,1585,18.546,1586,18.546,1587,18.546,1588,18.546,1589,18.546,1590,18.546,1591,18.546,1592,18.546,1593,18.546,1594,18.546,1595,18.546,1596,18.546,1597,18.546,1598,18.546,1599,18.546,1600,18.546,1601,18.546,1602,18.546,1603,18.546,1604,18.546,1605,18.546,1606,18.546,1607,18.546,1608,18.546,1609,18.546,1610,18.546,1611,18.546,1612,18.546,1613,18.546,1614,18.546,1615,18.546,1616,18.546,1617,18.546,1618,18.546,1619,18.546,1620,18.546,1621,18.546,1622,18.546,1623,18.546,1624,18.546]],["c/18",[0,0.661,1,0.191,2,0.562,3,0.391,4,2.526,5,0.099,6,0.7,8,0.83,10,1.326,11,0.58,15,0.58,18,1.857,19,0.931,20,0.011,21,0.714,22,1.365,24,0.304,25,0.803,26,1.164,27,0.515,28,0.545,29,1.818,30,2.427,32,0.599,33,1.068,34,1.759,35,0.234,36,0.304,37,0.58,38,0.389,39,0.796,40,2.964,41,1.477,42,0.338,43,2.016,45,1.015,46,1.877,47,0.059,48,0.24,49,0.064,50,1.106,51,2.898,52,1.07,53,0.52,54,2.915,55,1.148,56,1.961,57,1.33,58,3.675,59,0.164,60,1.384,62,0.054,63,0.036,64,0.21,65,0.903,66,0.832,67,0.298,71,0.215,72,0.182,73,0.731,74,0.16,75,1.936,76,0.58,77,0.585,80,0.275,82,1.325,83,0.515,84,0.214,85,0.327,87,0.846,89,1.394,90,1.739,92,1.09,94,0.84,95,0.78,97,0.257,98,2.453,100,0.995,101,1.06,102,0.445,104,0.466,107,0.327,108,4.306,109,0.972,110,1.186,112,0.545,113,0.607,116,0.714,117,0.304,119,1.257,121,0.466,123,0.522,124,0.244,125,0.354,127,2.1,131,1.258,133,0.147,135,1.36,136,0.555,138,0.807,139,0.295,140,0.501,142,0.589,143,0.286,144,0.738,145,0.422,149,2.396,150,2.996,151,0.858,153,0.304,155,0.58,158,0.822,159,0.445,160,0.622,162,1.239,163,0.304,164,0.198,165,0.99,169,1.437,171,2.772,172,1.154,173,2.66,174,0.891,175,5.484,176,4.128,178,1.059,179,0.299,185,0.52,189,1.36,191,0.52,193,0.109,195,0.354,196,1.246,200,0.567,201,0.27,204,0.451,205,3.128,206,1.7,207,1.442,208,0.391,209,1.36,210,1.128,211,0.738,214,1.232,215,1.136,216,0.738,217,0.327,219,0.621,220,0.83,221,3.635,224,1.569,225,2.797,226,2.457,229,1.512,230,2.101,231,1.593,232,0.354,233,0.391,235,0.52,236,1.522,241,0.392,242,0.407,243,0.422,244,3.037,245,0.891,246,0.112,249,1.907,250,1.214,251,0.426,252,0.545,253,2.076,254,0.667,256,1.232,257,0.88,258,0.286,259,1.754,260,0.766,261,0.248,262,0.7,263,0.54,264,1.258,265,1.064,266,0.48,267,1.316,268,0.206,270,1.073,273,0.981,276,0.223,278,0.223,279,1.339,281,0.427,282,1.981,284,0.354,285,0.117,287,0.315,289,2.529,290,0.304,292,0.331,293,0.165,294,2.318,295,0.466,296,0.391,297,1.067,300,1.405,301,0.164,302,0.164,303,0.392,304,0.286,305,0.576,306,0.049,307,0.867,308,2.043,309,1.104,310,1.437,313,1.193,315,0.844,316,1.165,317,1.136,319,0.327,322,1.258,323,0.317,325,0.891,326,1.298,327,1.07,328,0.354,329,1.073,331,0.327,332,2.296,334,0.243,335,1.121,336,0.171,339,0.354,340,1.987,341,1.232,342,0.745,344,0.155,345,0.777,346,0.675,348,1.232,351,1.136,354,3.779,355,1.136,359,0.101,362,0.198,365,0.797,367,0.85,368,0.585,369,1.907,370,1.07,374,1.361,377,0.327,378,0.893,379,1.374,382,3.266,385,0.58,386,0.743,390,0.738,391,0.716,392,1.64,393,1.794,394,0.327,395,0.489,396,0.963,397,0.319,399,1.821,403,1.558,405,0.521,407,1.192,408,0.165,410,0.521,411,0.746,412,0.143,416,0.27,417,1.687,419,0.446,420,0.327,421,0.69,424,0.622,426,0.58,428,0.489,429,2.145,431,0.585,432,1.522,433,1.193,434,0.182,438,0.326,439,1.759,441,0.377,443,4.25,445,1.136,447,0.391,448,1.897,449,0.54,450,0.391,451,1.07,454,0.622,455,0.289,456,2.252,457,1.765,458,1.067,460,0.689,461,0.576,462,1.664,463,0.27,464,1.987,465,1.61,466,0.327,468,0.304,469,0.27,471,0.931,472,0.645,475,0.257,477,1.204,478,1.257,479,0.377,481,0.286,482,0.257,483,0.177,485,0.304,488,1.193,489,0.489,490,1.676,491,1.271,492,0.489,493,1.777,495,0.58,496,0.893,498,1.174,500,1.22,502,1.477,503,0.369,504,1.549,505,0.426,515,2.381,516,0.988,520,1.345,522,0.489,524,0.78,525,0.931,526,0.83,527,0.391,528,0.354,531,0.304,532,0.83,533,1.059,535,0.327,536,0.354,537,3.029,539,0.515,540,0.392,542,0.58,543,1.444,544,1.123,545,0.233,547,0.07,549,1.917,550,0.85,551,0.489,553,0.184,554,0.515,555,3.621,556,1.374,557,1.974,558,1.63,559,0.237,560,0.391,561,0.522,562,1.687,563,3.552,564,0.83,565,0.662,566,1.232,567,0.729,568,1.238,569,2.515,570,0.78,571,0.326,572,1.55,574,0.566,576,1.383,577,0.391,580,0.52,581,0.35,582,2.101,583,0.745,586,0.327,587,2.326,588,1.182,589,1.667,590,1.495,591,0.041,593,0.354,594,0.354,595,1.541,597,1.127,598,1.019,600,0.637,601,1.681,602,0.327,605,0.675,606,0.391,609,0.327,610,0.995,612,0.233,613,1.226,614,0.391,615,0.515,616,0.78,618,0.304,619,0.286,620,0.286,621,0.18,623,0.745,624,0.83,625,0.515,626,2.015,627,0.408,628,0.466,629,1.298,630,2.101,631,0.27,632,0.391,633,1.067,634,0.391,635,3.177,637,0.622,638,0.214,639,1.495,640,0.745,641,0.36,642,0.5,643,0.515,645,0.399,646,1.603,647,0.327,649,0.391,650,0.286,652,1.154,653,0.966,654,3.544,656,0.515,659,1.136,661,0.257,663,0.585,664,0.746,665,0.966,666,0.675,667,0.538,668,0.78,669,1.534,672,1.316,673,0.304,674,0.995,676,0.83,680,0.206,683,0.64,684,1.7,685,0.426,688,0.545,692,2.326,693,0.85,694,2.359,696,0.392,697,2.054,698,0.426,699,0.83,701,2.06,702,0.538,705,1.07,706,0.622,707,1.007,708,1.067,709,1.561,711,0.966,712,0.391,714,0.745,715,1.511,716,0.78,717,0.745,719,3.522,720,0.327,723,0.426,724,0.52,725,0.408,726,0.891,729,0.059,730,0.391,733,0.354,735,0.622,736,0.391,737,0.326,741,0.622,744,0.198,745,0.304,747,2.216,749,0.675,751,0.354,757,1.232,759,0.94,760,0.629,768,0.354,771,2.556,772,1.799,773,3.104,775,0.545,778,0.78,779,0.257,780,0.7,781,1.193,782,0.812,784,0.489,785,1.988,786,0.54,787,0.746,788,0.451,796,2.688,797,0.413,798,0.515,799,1.22,803,0.622,807,2.122,808,0.78,809,0.327,810,0.191,811,0.327,813,0.586,814,0.338,815,0.295,816,0.958,817,0.243,825,0.257,827,1.115,829,0.515,830,0.738,831,0.64,836,2.171,837,3.436,838,0.908,839,0.545,843,0.233,848,0.327,849,0.354,851,1.958,860,0.138,863,0.422,865,0.745,867,0.585,869,0.825,870,0.128,873,0.941,874,1.383,875,1.568,876,0.391,878,2.1,879,0.257,880,0.515,883,0.58,885,2.302,886,1.721,887,0.304,889,0.795,894,0.392,895,0.143,897,0.466,899,0.354,901,1.64,904,0.562,906,1.298,907,1.759,908,0.286,909,0.354,910,0.891,911,0.295,912,0.931,913,0.286,915,0.61,917,0.315,921,2.559,924,0.58,925,0.893,927,1.36,929,0.745,931,2.113,932,0.891,933,0.745,934,1.457,936,0.327,938,0.053,939,0.825,942,1.019,943,1.07,947,1.771,948,0.408,951,0.83,952,1.573,953,0.675,958,0.377,961,0.354,962,0.391,964,0.745,965,0.745,966,0.988,970,0.745,974,0.931,975,0.622,976,0.745,977,0.354,982,0.391,984,0.78,987,0.206,990,0.327,991,0.354,993,0.244,995,0.223,996,2.253,997,0.745,998,0.391,1001,0.58,1004,0.891,1006,0.257,1010,0.327,1012,1.522,1013,1.067,1014,2.937,1019,1.568,1020,0.35,1021,0.286,1022,0.27,1023,0.58,1024,0.391,1027,0.58,1028,0.327,1029,0.391,1030,1.7,1033,0.305,1035,0.286,1036,0.716,1040,1.232,1041,0.305,1044,0.354,1046,0.966,1053,1.64,1055,0.391,1056,1.961,1057,2.786,1062,0.745,1064,0.354,1066,0.391,1072,2.529,1075,1.067,1076,1.193,1080,0.327,1081,0.354,1083,0.931,1086,0.58,1087,0.545,1088,0.515,1094,0.7,1095,0.931,1098,0.745,1103,0.78,1105,0.391,1106,0.58,1108,0.354,1109,0.327,1110,0.391,1111,0.738,1116,0.745,1118,1.892,1125,0.354,1126,0.83,1128,2.706,1129,0.354,1130,0.995,1132,0.545,1133,0.545,1134,0.745,1135,0.391,1136,1.193,1137,0.83,1138,1.63,1143,0.391,1144,0.391,1150,1.136,1153,0.391,1157,0.286,1159,0.27,1160,0.354,1167,0.354,1168,0.83,1171,0.327,1174,0.354,1175,1.64,1177,0.675,1178,1.882,1179,0.286,1180,1.059,1181,1.974,1182,1.731,1184,0.391,1186,1.839,1188,0.745,1189,1.136,1190,0.391,1195,0.622,1197,0.391,1202,0.391,1211,0.391,1214,0.257,1223,0.391,1226,0.966,1227,0.473,1229,0.327,1231,0.198,1233,0.286,1245,0.768,1247,0.286,1249,1.63,1251,2.273,1252,0.257,1254,0.745,1258,0.489,1261,0.966,1262,0.041,1264,0.354,1269,0.391,1270,0.391,1271,0.354,1272,1.545,1273,0.391,1274,1.136,1277,0.354,1278,0.585,1280,1.759,1283,0.745,1286,0.391,1287,1.63,1289,0.745,1295,0.354,1297,0.27,1298,1.298,1302,0.354,1304,0.675,1305,0.391,1306,0.391,1311,0.667,1318,1.502,1321,0.622,1322,2.087,1326,0.286,1327,0.391,1328,0.391,1338,0.391,1340,1.067,1342,3.347,1343,0.286,1346,0.391,1347,0.391,1349,0.391,1357,0.537,1362,0.745,1363,1.361,1364,0.745,1365,0.391,1366,0.745,1368,0.745,1369,0.391,1371,1.067,1374,3.578,1375,0.391,1376,0.391,1380,0.391,1381,0.812,1387,0.391,1390,0.745,1391,1.805,1392,3.856,1396,1.603,1397,1.7,1399,2.106,1402,1.36,1403,0.391,1405,0.966,1407,0.622,1408,2.136,1409,0.515,1410,3.147,1411,2.544,1412,0.354,1415,1.136,1417,0.327,1421,0.545,1422,0.391,1427,0.391,1428,2.31,1429,0.304,1432,0.7,1433,0.391,1435,5.173,1436,3.448,1437,0.545,1439,2.095,1440,0.745,1444,0.931,1446,1.269,1453,0.995,1460,1.136,1461,2.1,1462,0.327,1463,0.408,1466,0.391,1469,0.795,1471,0.223,1472,0.354,1473,0.622,1474,0.466,1475,0.58,1476,0.459,1482,0.893,1483,0.191,1484,0.489,1485,0.501,1489,0.966,1490,0.58,1491,0.58,1492,0.966,1493,0.489,1497,2.106,1508,0.354,1514,0.622,1515,0.622,1516,0.745,1517,0.745,1518,0.745,1519,0.745,1520,0.745,1521,0.745,1522,0.745,1523,0.745,1524,0.745,1525,0.745,1526,0.745,1527,0.745,1528,0.745,1529,0.745,1530,0.745,1531,0.745,1532,1.067,1533,1.067,1534,1.067,1535,1.067,1536,6.429,1537,0.745,1538,0.745,1539,0.745,1540,0.745,1541,0.745,1542,0.745,1543,0.745,1544,0.745,1545,0.745,1546,0.745,1547,0.745,1548,0.745,1549,0.745,1550,0.745,1551,0.675,1552,0.745,1553,0.745,1554,0.745,1555,0.745,1556,0.745,1557,0.745,1558,0.745,1559,0.745,1560,0.745,1561,0.745,1562,0.745,1563,0.745,1564,0.745,1565,0.745,1566,0.745,1567,0.745,1568,0.745,1569,0.745,1570,0.745,1571,0.745,1572,0.745,1573,0.745,1574,0.745,1575,0.745,1576,0.745,1577,1.067,1578,0.745,1579,0.745,1580,0.745,1581,0.745,1582,0.745,1583,0.745,1584,1.067,1585,0.745,1586,0.745,1587,0.745,1588,0.745,1589,0.745,1590,0.745,1591,0.745,1592,0.745,1593,0.745,1594,0.745,1595,0.745,1596,0.745,1597,1.067,1598,0.745,1599,0.745,1600,0.745,1601,0.745,1602,0.745,1603,1.067,1604,0.745,1605,0.745,1606,0.745,1607,0.745,1608,0.745,1609,0.745,1610,0.745,1611,0.745,1612,0.745,1613,0.745,1614,0.745,1615,0.745,1616,0.745,1617,0.745,1618,0.745,1619,0.745,1620,0.745,1621,0.745,1622,0.745,1623,0.745,1624,0.745,1625,0.413,1626,2.655,1627,0.447,1628,0.447,1629,0.852,1630,0.745,1631,0.447,1632,0.447,1633,0.447,1634,0.354,1635,0.447,1636,0.447,1637,0.675,1638,0.447,1639,0.545,1640,0.852,1641,1.136,1642,0.852,1643,1.22,1644,1.232,1645,1.258,1646,0.391,1647,0.447,1648,2.099,1649,0.78,1650,0.447,1651,1.534,1652,0.447,1653,0.447,1654,0.447,1655,2.1,1656,0.447,1657,2.326,1658,1.986,1659,0.391,1660,0.447,1661,0.515,1662,0.447,1663,0.447,1664,0.852,1665,0.447,1666,0.447,1667,0.447,1668,4.352,1669,0.447,1670,0.447,1671,0.447,1672,1.36,1673,0.447,1674,3.016,1675,4.699,1676,0.447,1677,0.447,1678,0.447,1679,0.447,1680,0.391,1681,2.608,1682,0.447,1683,0.675,1684,0.447,1685,0.447,1686,0.391,1687,0.447,1688,2.592,1689,2.147,1690,0.447,1691,2.878,1692,0.447,1693,0.447,1694,1.07,1695,0.447,1696,0.391,1697,0.852,1698,5.481,1699,0.447,1700,0.447,1701,0.447,1702,4.354,1703,4.59,1704,0.447,1705,1.883,1706,2.296,1707,0.447,1708,0.447,1709,0.447,1710,0.447,1711,0.447,1712,0.447,1713,0.447,1714,0.675,1715,0.738,1716,0.447,1717,5.86,1718,0.447,1719,0.745,1720,0.852,1721,1.611,1722,0.447,1723,2.198,1724,0.354,1725,0.852,1726,0.447,1727,0.447,1728,0.745,1729,0.447,1730,0.447,1731,0.852,1732,0.447,1733,2.879,1734,0.304,1735,0.852,1736,0.447,1737,0.447,1738,0.852,1739,2.106,1740,0.447,1741,0.447,1742,0.447,1743,0.447,1744,2.598,1745,1.63,1746,0.447,1747,0.447,1748,0.447,1749,0.447,1750,0.354,1751,0.327,1752,0.852,1753,0.852,1754,1.22,1755,0.447,1756,0.447,1757,0.852,1758,0.622,1759,0.852,1760,0.447,1761,0.447,1762,1.374,1763,0.447,1764,0.447,1765,0.447,1766,0.445,1767,0.852,1768,0.447,1769,0.447,1770,0.447,1771,1.878,1772,0.391,1773,1.696,1774,1.568,1775,0.354,1776,0.447,1777,0.447,1778,0.852,1779,0.447,1780,0.447,1781,0.447,1782,0.447,1783,1.759,1784,1.771,1785,0.852,1786,0.447,1787,1.864,1788,0.7,1789,0.447,1790,0.447,1791,0.852,1792,0.447,1793,0.745,1794,0.447,1795,0.447,1796,0.447,1797,0.447,1798,0.447,1799,0.447,1800,0.447,1801,0.447,1802,1.556,1803,0.852,1804,0.447,1805,1.556,1806,0.447,1807,0.447,1808,0.447,1809,0.447,1810,0.515,1811,0.58,1812,0.447,1813,0.447,1814,0.447,1815,1.22,1816,0.447,1817,0.852,1818,0.852,1819,0.447,1820,1.232,1821,0.447,1822,0.852,1823,0.447,1824,0.447,1825,0.447,1826,0.447,1827,0.447,1828,0.447,1829,0.852,1830,0.893,1831,0.447,1832,0.447,1833,0.852,1834,0.514,1835,0.447,1836,2.147,1837,0.447,1838,0.447,1839,0.447,1840,0.447,1841,0.447,1842,0.852,1843,0.447,1844,0.447,1845,0.304,1846,1.22,1847,0.447,1848,0.447,1849,0.447,1850,0.852,1851,0.852,1852,0.447,1853,0.447,1854,2.651,1855,0.447,1856,0.447,1857,1.232,1858,2.147,1859,0.852,1860,0.447,1861,0.447,1862,0.447,1863,0.447,1864,0.447,1865,0.447,1866,0.447,1867,0.447,1868,0.391,1869,0.447,1870,0.447,1871,2.106,1872,1.22,1873,0.852,1874,0.447,1875,3.948,1876,0.447,1877,0.447,1878,0.447,1879,1.864,1880,0.447,1881,0.447,1882,0.447,1883,0.447,1884,0.447,1885,0.852,1886,1.556,1887,0.447,1888,0.852,1889,0.257,1890,0.447,1891,0.447,1892,0.447,1893,0.447,1894,0.447,1895,2.876,1896,0.447,1897,0.852,1898,0.447,1899,0.447,1900,0.988,1901,0.447,1902,0.447,1903,0.447,1904,0.286,1905,0.447,1906,1.123,1907,0.447,1908,0.391,1909,0.447,1910,0.447,1911,0.852,1912,0.447,1913,0.447,1914,0.447,1915,0.447,1916,0.622,1917,0.447,1918,0.852,1919,3.281,1920,0.447,1921,0.447,1922,0.447,1923,0.447,1924,0.447,1925,0.447,1926,0.447,1927,0.447,1928,0.447,1929,0.852,1930,0.447,1931,0.447,1932,1.374,1933,0.675,1934,0.447,1935,1.794,1936,0.447,1937,0.447,1938,0.447,1939,0.447,1940,1.63,1941,0.852,1942,0.447,1943,0.426,1944,0.447,1945,0.447,1946,0.447,1947,0.447,1948,0.447,1949,2.651,1950,0.745,1951,0.745,1952,1.067,1953,1.317,1954,0.447,1955,0.7,1956,0.766,1957,0.447,1958,0.447,1959,1.193,1960,0.447,1961,0.447,1962,0.447,1963,0.233,1964,0.447,1965,0.447,1966,1.556,1967,0.447,1968,0.966,1969,0.675,1970,0.852,1971,0.447,1972,0.447,1973,0.447,1974,0.447,1975,0.354,1976,1.232,1977,1.22,1978,0.447,1979,0.447,1980,0.447,1981,0.447,1982,0.447,1983,0.447,1984,1.07,1985,1.511,1986,0.852,1987,0.233,1988,0.447,1989,1.759,1990,0.447,1991,0.447,1992,0.447,1993,2.318,1994,2.318,1995,0.447,1996,0.447,1997,0.447,1998,0.447,1999,0.447,2000,2.651,2001,0.447,2002,0.447,2003,0.447,2004,0.447,2005,0.447,2006,0.447,2007,0.447,2008,0.447,2009,0.195,2010,0.852,2011,0.852,2012,1.864,2013,0.447,2014,0.391,2015,0.447,2016,0.447,2017,0.447,2018,0.391,2019,0.447,2020,0.447,2021,0.447,2022,0.447,2023,0.447,2024,0.852,2025,0.852,2026,0.447,2027,0.447,2028,0.391,2029,0.391,2030,0.447,2031,0.391,2032,0.447,2033,0.852,2034,0.447,2035,0.675,2036,0.447,2037,0.447,2038,0.447,2039,0.447,2040,0.447,2041,0.447,2042,0.447,2043,0.447,2044,0.391,2045,0.447,2046,0.447,2047,0.447,2048,4.59,2049,3.464,2050,0.447,2051,0.391,2052,0.447,2053,0.447,2054,1.136,2055,0.447,2056,0.745,2057,0.675,2058,0.447,2059,0.447,2060,0.447,2061,0.891,2062,0.447,2063,0.447,2064,0.304,2065,2.147,2066,0.447,2067,0.852,2068,3.948,2069,0.447,2070,0.447,2071,0.447,2072,0.852,2073,0.447,2074,0.447,2075,0.327,2076,0.739,2077,0.447,2078,0.447,2079,0.447,2080,0.447,2081,0.447,2082,0.447,2083,0.447,2084,0.447,2085,0.447,2086,0.447,2087,0.447,2088,0.447,2089,0.391,2090,0.447,2091,0.852,2092,0.447,2093,0.327,2094,0.447,2095,0.447,2096,1.883,2097,0.447,2098,0.447,2099,1.059,2100,0.447,2101,0.447,2102,2.396,2103,2.965,2104,0.447,2105,0.447,2106,0.447,2107,0.447,2108,0.447,2109,0.7,2110,0.447,2111,0.447,2112,0.447,2113,0.447,2114,1.342,2115,0.447,2116,0.447,2117,0.391,2118,0.447,2119,0.447,2120,2.814,2121,0.304,2122,1.22,2123,1.136,2124,0.852,2125,0.852,2126,0.447,2127,0.447,2128,0.447,2129,1.232,2130,0.447,2131,0.852,2132,0.447,2133,0.447,2134,0.447,2135,0.447,2136,0.447,2137,0.447,2138,0.447,2139,0.447,2140,0.447,2141,0.447,2142,0.447,2143,0.447,2144,2.061,2145,0.941,2146,0.447,2147,0.447,2148,0.447,2149,0.354,2150,0.354,2151,0.852,2152,0.391,2153,0.852,2154,1.174,2155,1.298,2156,0.447,2157,0.447,2158,0.391,2159,0.447,2160,0.447,2161,0.447,2162,0.447,2163,0.447,2164,0.447,2165,0.447,2166,0.447,2167,0.447,2168,0.447,2169,1.556,2170,0.447,2171,0.973,2172,0.447,2173,0.447,2174,0.58,2175,0.447,2176,0.447,2177,0.447,2178,0.447,2179,0.825,2180,0.447,2181,2.1,2182,0.447,2183,0.447,2184,0.622,2185,0.447,2186,0.447,2187,0.447,2188,0.447,2189,0.447,2190,0.447,2191,0.447,2192,0.891,2193,0.891,2194,0.447,2195,0.745,2196,2.277,2197,0.447,2198,0.447,2199,0.391,2200,0.447,2201,1.453,2202,0.447,2203,0.447,2204,1.067,2205,0.447,2206,0.447,2207,0.447,2208,0.447,2209,0.745,2210,0.447,2211,0.447,2212,0.447,2213,0.852,2214,0.447,2215,0.447,2216,0.852,2217,1.22,2218,0.447,2219,0.447,2220,0.891,2221,0.447,2222,0.447,2223,0.445,2224,0.447,2225,0.447,2226,0.852,2227,0.447,2228,0.447,2229,0.447,2230,0.447,2231,0.852,2232,0.852,2233,0.941,2234,0.104,2235,0.391,2236,0.447,2237,0.391,2238,0.515,2239,0.447,2240,0.675,2241,0.447,2242,0.447,2243,0.447,2244,0.447,2245,0.852,2246,0.447,2247,0.304,2248,0.447,2249,2.869,2250,0.447,2251,0.447,2252,0.447,2253,0.447,2254,0.447,2255,0.447,2256,0.852,2257,0.447,2258,0.447,2259,0.447,2260,0.467,2261,0.447,2262,0.447,2263,0.447,2264,0.447,2265,0.447,2266,0.447,2267,0.447,2268,0.447,2269,0.447,2270,0.852,2271,0.447,2272,0.447,2273,0.447,2274,0.447,2275,0.391,2276,0.447,2277,0.447,2278,0.447,2279,0.447,2280,0.447,2281,0.447,2282,0.447,2283,0.852,2284,0.447,2285,0.447,2286,0.447,2287,0.447,2288,0.223,2289,0.354,2290,0.354,2291,0.391,2292,0.327,2293,0.447,2294,0.447,2295,0.447,2296,0.966,2297,0.447,2298,0.391,2299,0.447,2300,0.447,2301,0.447,2302,0.447,2303,0.447,2304,0.447,2305,0.447,2306,0.447,2307,0.447,2308,0.622,2309,0.852,2310,0.447,2311,0.447,2312,1.36,2313,0.447,2314,0.447,2315,1.878,2316,0.61,2317,0.447,2318,0.447,2319,0.304,2320,0.447,2321,0.447,2322,0.447,2323,0.447,2324,0.447,2325,0.447,2326,0.447,2327,0.447,2328,0.447,2329,1.269,2330,0.447,2331,0.447,2332,0.447,2333,0.447,2334,0.447,2335,0.995,2336,0.745,2337,0.447,2338,1.136,2339,0.852,2340,0.447,2341,0.447,2342,0.447,2343,0.447,2344,0.447,2345,0.447,2346,0.354,2347,0.447,2348,0.447,2349,0.447,2350,0.447,2351,0.852,2352,0.852,2353,0.447,2354,0.745,2355,0.852,2356,0.447,2357,0.447,2358,0.447,2359,0.447,2360,0.852,2361,0.391,2362,0.745,2363,0.745,2364,0.745,2365,0.745,2366,0.447,2367,0.852,2368,0.447,2369,0.447,2370,0.391,2371,0.391,2372,0.391,2373,0.391,2374,0.447,2375,0.286,2376,0.83,2377,0.447,2378,0.447,2379,0.447,2380,0.447,2381,0.852,2382,0.447,2383,0.852,2384,0.447,2385,0.447,2386,0.447,2387,0.447,2388,0.447,2389,0.447,2390,0.447,2391,0.447,2392,0.447,2393,1.22,2394,0.391,2395,0.447,2396,0.447,2397,0.354,2398,0.447,2399,0.447,2400,0.447,2401,0.852,2402,1.759,2403,0.447,2404,0.447,2405,0.354,2406,0.354,2407,0.447,2408,0.447,2409,0.852,2410,0.447,2411,0.852,2412,0.447,2413,0.391,2414,0.447,2415,0.447,2416,0.447,2417,0.354,2418,0.447,2419,0.447,2420,0.447,2421,0.447,2422,0.447,2423,0.447,2424,0.447,2425,0.966,2426,0.447,2427,0.447,2428,0.447,2429,0.447,2430,0.852,2431,0.447,2432,0.447,2433,0.447,2434,0.447,2435,0.447,2436,0.515,2437,0.447,2438,0.447,2439,0.391,2440,0.447,2441,0.447,2442,1.22,2443,0.354,2444,0.391,2445,0.447,2446,0.447,2447,0.447,2448,0.447,2449,0.327,2450,0.447,2451,0.447,2452,0.891,2453,0.447,2454,0.447,2455,0.447,2456,0.447,2457,0.447,2458,1.067,2459,0.447,2460,0.447,2461,0.447,2462,1.067,2463,1.63,2464,0.447,2465,0.354,2466,0.447,2467,0.852,2468,0.852,2469,0.447,2470,0.447,2471,1.22,2472,0.447,2473,0.447,2474,0.447,2475,0.852,2476,0.447,2477,0.447,2478,0.354,2479,0.304,2480,0.447,2481,0.447,2482,0.447,2483,0.447,2484,0.447,2485,0.447,2486,0.447,2487,0.327,2488,0.447,2489,0.391,2490,0.391,2491,0.447,2492,0.447,2493,0.966,2494,0.447,2495,1.864,2496,0.852,2497,0.447,2498,0.447,2499,0.447,2500,0.852,2501,0.545,2502,0.447,2503,0.447,2504,0.257,2505,0.447,2506,0.447,2507,0.447,2508,0.852,2509,0.354,2510,0.447,2511,0.447,2512,0.447,2513,0.447,2514,0.354,2515,0.391,2516,0.852,2517,0.675,2518,0.852,2519,0.622,2520,0.286,2521,0.354,2522,0.447,2523,0.447,2524,0.447,2525,1.361,2526,0.745,2527,0.745,2528,0.447,2529,0.447,2530,0.852,2531,0.447,2532,0.447,2533,1.22,2534,0.58,2535,0.447,2536,0.447,2537,0.447,2538,0.447,2539,0.447,2540,0.852,2541,0.852,2542,0.622,2543,0.286,2544,0.447,2545,0.447,2546,0.447,2547,0.852,2548,0.447,2549,0.447,2550,0.391,2551,0.447,2552,0.447,2553,0.447,2554,0.447,2555,0.447,2556,0.447,2557,0.391,2558,0.447,2559,0.327,2560,0.675,2561,0.447,2562,0.447,2563,0.675,2564,0.104,2565,0.447,2566,0.447,2567,0.391,2568,1.067,2569,0.852,2570,0.852,2571,1.22,2572,0.852,2573,0.354,2574,0.447,2575,0.852,2576,0.852,2577,1.556,2578,0.852,2579,0.447,2580,0.447,2581,0.391,2582,0.852,2583,0.391,2584,0.447,2585,0.447,2586,0.354,2587,0.447,2588,0.391,2589,0.391,2590,0.447,2591,0.447,2592,0.447,2593,0.852,2594,0.447,2595,0.447,2596,0.447,2597,0.447,2598,0.447,2599,0.745,2600,0.391,2601,0.447,2602,0.447,2603,0.447,2604,0.447,2605,0.447,2606,0.447,2607,0.447,2608,0.852,2609,0.447,2610,0.852,2611,0.447,2612,0.447,2613,0.447,2614,0.447,2615,0.447,2616,0.447,2617,0.447,2618,0.447,2619,0.447,2620,0.447,2621,0.852,2622,0.447,2623,0.447,2624,0.447,2625,0.447,2626,0.447,2627,0.391,2628,0.447,2629,0.447,2630,1.136,2631,0.447,2632,0.675,2633,0.745,2634,0.447,2635,0.447,2636,0.447,2637,0.354,2638,0.447,2639,0.447,2640,0.447,2641,0.447,2642,0.622,2643,0.447,2644,0.447,2645,0.447,2646,0.447,2647,0.447,2648,0.852,2649,0.58,2650,0.447,2651,0.447,2652,0.447,2653,0.447,2654,0.447,2655,0.447,2656,0.447,2657,0.447,2658,0.447,2659,0.447,2660,0.447,2661,1.22,2662,0.447,2663,0.447,2664,0.447,2665,0.852,2666,0.447,2667,0.447,2668,1.22,2669,0.447,2670,0.447,2671,0.447,2672,0.447,2673,0.447,2674,0.447,2675,0.447,2676,0.391,2677,0.852,2678,0.327,2679,0.447,2680,0.447,2681,0.447,2682,0.447,2683,0.447,2684,0.447,2685,0.391,2686,0.447,2687,1.22,2688,0.447,2689,0.852,2690,0.447,2691,0.447,2692,0.745,2693,0.447,2694,0.447,2695,0.354,2696,0.447,2697,3.464,2698,0.447,2699,0.447,2700,0.354,2701,0.447,2702,0.391,2703,0.391,2704,0.447,2705,0.391,2706,0.391,2707,0.391,2708,0.447,2709,0.447,2710,0.447,2711,0.852,2712,0.447,2713,0.447,2714,0.447,2715,0.447,2716,0.327,2717,0.447,2718,0.447,2719,0.447,2720,0.447,2721,0.447,2722,0.447,2723,0.257,2724,0.447,2725,0.745,2726,0.391,2727,0.447,2728,0.447,2729,0.447,2730,0.447,2731,0.391,2732,0.447,2733,0.447,2734,0.852,2735,0.354,2736,0.447,2737,0.447,2738,0.447,2739,0.447,2740,0.447,2741,0.447,2742,0.447,2743,0.214,2744,0.447,2745,0.447,2746,0.447,2747,0.447,2748,0.447,2749,0.447,2750,0.391,2751,0.447,2752,0.447,2753,0.447,2754,0.391,2755,0.447,2756,0.447,2757,0.852,2758,0.447,2759,0.447,2760,0.447,2761,0.447,2762,0.447,2763,0.447,2764,0.304,2765,0.447,2766,0.391,2767,0.447,2768,0.447,2769,0.391,2770,0.447,2771,0.447,2772,0.447,2773,0.447,2774,0.391,2775,0.447,2776,0.447,2777,0.447,2778,0.447,2779,0.447,2780,0.447,2781,0.447,2782,0.852,2783,0.447,2784,0.447,2785,0.447,2786,0.447,2787,0.675,2788,0.391,2789,0.447,2790,0.447,2791,0.447,2792,0.447,2793,0.447,2794,0.447,2795,0.391,2796,0.447,2797,0.447,2798,0.447,2799,0.447,2800,0.354,2801,0.447,2802,0.447,2803,0.447,2804,0.447,2805,0.447,2806,0.447,2807,0.327,2808,0.327,2809,0.447,2810,0.354,2811,0.447,2812,0.447,2813,0.447,2814,0.447,2815,0.447,2816,0.447,2817,0.447,2818,0.447,2819,0.447,2820,0.852,2821,0.447,2822,0.447,2823,0.447,2824,0.447,2825,0.447,2826,0.447,2827,0.447,2828,0.447,2829,0.447,2830,0.304,2831,0.327,2832,0.447,2833,0.852,2834,0.745,2835,0.447,2836,0.447,2837,0.447,2838,0.447,2839,0.327,2840,0.447,2841,0.447]],["t/19",[2525,174.363]],["h/19",[457,44.527,2525,117.427]],["c/19",[0,1.521,62,0.054,73,0.72,261,0.451,292,0.315,419,0.425,456,2.928,457,2.218,461,2.447,465,2.928,490,3.355,516,3.044,555,3.615,817,1.889,1245,2.722,1411,2.215,1476,2.243,1482,3.647,2075,4.828,2525,5.85,2630,4.828,2842,6.612]],["t/20",[22,39.715,64,5.089,457,40.968]],["h/20",[22,27.577,55,15.033,64,3.534,87,22.906,226,39.351,259,36.761,308,39.002,457,28.447,694,53.838,759,14.518,827,24.369,836,30.283,837,62.132,1076,65.743,1658,36.761,1900,47.301]],["c/20",[5,0.102,20,0.005,21,1.298,22,1.887,33,0.567,39,0.938,40,3.84,41,1.602,47,0.233,54,1.173,55,1.108,62,0.045,64,0.218,77,2.208,87,1.657,89,1.29,94,0.606,108,1.945,109,0.789,110,1.46,142,0.829,150,1.853,173,1.624,174,2.474,175,2.168,178,2.307,179,0.458,210,0.968,215,1.236,219,0.464,226,3.092,235,1.445,243,1.173,259,2.596,270,2.458,279,0.626,287,1.254,292,0.333,308,2.423,315,1.037,334,0.968,345,2.892,368,1.624,382,1.393,399,1.344,421,1.28,457,2.352,462,1.844,464,1.853,465,3.407,479,2.563,500,3.661,501,3.022,502,3.601,503,1.506,504,2.812,505,1.694,506,4.226,517,2.474,554,2.974,555,2.688,567,0.892,568,0.667,612,1.769,627,3.043,658,1.853,667,0.747,694,2.704,732,2.964,747,2.168,759,1.07,760,1.001,771,1.624,772,0.779,773,1.945,778,3.147,803,4.226,816,1.941,817,2.333,825,3.645,827,1.763,829,4.077,836,2.449,837,4.882,838,1.46,839,3.147,869,3.784,903,3.5,921,1.769,925,1.624,947,1.945,974,2.458,1002,2.307,1010,2.474,1014,2.168,1020,2.772,1021,2.168,1022,2.049,1023,4.323,1065,2.964,1076,4.314,1245,2.789,1259,2.684,1278,2.357,1392,2.974,1411,1.135,1436,1.56,1445,2.964,1469,3.169,1475,4.788,1476,2.42,1482,2.774,1490,2.307,1491,4.323,1514,2.474,1625,0.354,1651,1.501,1658,2.596,1674,1.945,1723,4.253,1788,2.823,1830,2.774,1900,3.627,1906,2.28,2064,2.307,2089,2.964,2171,1.769,2179,1.501,2316,1.694,2520,2.168,2843,3.389,2844,3.389,2845,3.389,2846,3.389,2847,3.389,2848,3.389,2849,3.389,2850,3.389,2851,3.389,2852,2.964,2853,3.389,2854,3.389,2855,2.684,2856,1.694,2857,3.894,2858,4.3,2859,5.028,2860,3.389,2861,3.389,2862,3.389,2863,3.389,2864,2.964,2865,2.964,2866,2.964,2867,3.389,2868,3.389,2869,3.389,2870,3.389,2871,3.389,2872,3.389,2873,2.964,2874,2.474]],["t/21",[457,50.589,816,46.098]],["h/21",[457,44.527,816,40.574]],["c/21",[62,0.043,123,1.259,139,2.215,260,2.631,261,0.437,292,0.324,315,0.842,457,2.255,464,3.498,760,1.107,816,2.197,817,1.828,1245,2.968,1475,4.357,1476,2.4,1478,4.673,1479,3.87,1480,4.357,1481,5.068,1482,3.578,1483,2.729,2519,5.451,2520,4.777,2521,5.068,2856,3.198,2875,5.596,2876,5.596,2877,5.068,2878,5.596,2879,5.068,2880,6.399,2881,6.399,2882,5.596,2883,5.596,2884,5.068,2885,5.068,2886,5.596,2887,5.596]],["t/22",[457,50.589,2144,95.394]],["h/22",[457,44.527,2144,83.963]],["c/22",[62,0.044,123,1.305,139,2.296,261,0.453,262,3.807,292,0.315,315,0.873,343,6.036,457,2.28,464,3.626,817,1.895,1482,3.653,2144,4.502,2888,7.622,2889,6.633,2890,6.633,2891,5.801,2892,6.633,2893,6.633]],["t/23",[2894,189.101]],["h/23",[457,33.416,667,10.62,778,77.226,816,30.45,869,77.166,974,60.316,1906,39.134,2857,95.574,2859,95.574,2894,95.574]],["c/23",[22,1.262,24,5.902,26,1.386,62,0.041,89,1.049,119,1.801,126,3.434,127,5.026,131,2.456,139,1.628,179,0.402,196,1.386,200,1.431,204,1.741,215,0.665,261,0.518,262,2.7,266,0.359,270,2.35,292,0.326,315,1.024,340,4.739,457,2.196,464,2.571,559,0.192,597,5.242,667,0.74,738,2.844,755,2.7,764,7.438,778,5.076,780,2.7,813,0.841,816,2.001,817,1.343,829,2.844,839,3.009,869,3.838,873,2.844,903,4.418,948,2.254,974,3.965,1041,1.683,1094,2.7,1227,1.431,1245,2.714,1472,3.724,1473,3.434,1474,2.571,1475,4.2,1476,2.029,1482,2.956,1483,2.006,1490,3.202,1491,3.202,1906,2.572,2519,3.434,2520,3.947,2521,3.724,2526,5.394,2527,5.394,2637,6.864,2834,7.119,2857,4.885,2858,5.394,2859,6.165,2864,4.113,2865,4.113,2873,5.394,2876,4.113,2877,3.724,2878,4.113,2879,3.724,2882,4.113,2883,4.113,2884,3.724,2885,3.724,2886,4.113,2887,4.113,2894,5.45,2895,5.394,2896,4.703,2897,6.883,2898,4.703,2899,4.703,2900,4.703,2901,6.883,2902,5.394,2903,8.668,2904,8.668,2905,4.703,2906,4.703,2907,6.168,2908,4.703,2909,4.703,2910,4.703,2911,4.703,2912,4.703,2913,4.703,2914,3.724,2915,4.113,2916,4.113,2917,4.703,2918,4.703,2919,4.703,2920,4.703,2921,6.168,2922,4.703,2923,4.703,2924,8.215,2925,4.703,2926,4.703,2927,4.113,2928,4.703]],["t/24",[449,80.911,2929,144.69]],["h/24",[20,0.157,23,46.16,68,53.816,143,4.417,231,25.821,242,8.572,359,7.313,418,51.693,449,49.723,661,64.45,2308,81.988,2929,133.195,2930,98.196]],["c/24",[0,1.365,2,2.732,5,0.099,10,2.139,20,0.011,23,2.935,25,1.544,28,3.798,30,2.196,33,1.196,49,0.292,52,3.407,54,2.054,62,0.048,66,2.242,68,3.422,74,2.124,94,1.061,139,2.054,143,0.301,169,2.966,179,0.387,205,3.589,210,1.695,219,0.476,231,1.761,242,0.643,250,2.196,262,3.407,263,2.628,266,0.545,267,2.531,268,2.732,273,2.642,276,3.568,277,4.862,285,0.57,301,0.453,302,0.453,312,3.407,316,1.544,327,3.407,359,0.465,362,2.628,382,2.44,399,2.832,409,3.589,410,1.988,418,3.287,421,1.544,448,2.966,449,3.6,491,3.422,625,3.589,646,3.589,661,4.396,662,5.191,673,4.862,757,3.407,796,4.041,920,5.191,948,2.845,958,2.628,1047,3.407,1083,3.568,1089,3.798,1114,3.589,1231,2.628,1242,3.407,1247,3.798,1274,4.334,1407,4.334,1463,3.422,1515,4.334,2275,5.191,2308,5.592,2725,5.191,2929,6.805,2930,6.697,2931,5.935,2932,5.935,2933,5.935,2934,5.935,2935,5.191,2936,5.935,2937,7.14,2938,5.935,2939,5.935,2940,5.935]],["t/25",[457,40.968,779,84.93,2238,89.478]],["h/25",[457,43.094,779,89.338,2238,94.122]],["c/25",[20,0.009,62,0.044,225,2.817,226,2.53,292,0.315,315,0.869,457,2.217,555,3.611,719,4.498,779,4.923,829,3.995,1021,4.227,1023,4.498,1094,3.792,1186,1.667,1221,5.777,1392,3.995,1492,5.231,1493,3.792,2103,4.498,2238,5.186]],["t/26",[449,80.911,1916,133.413]],["h/26",[41,29.71,54,37.137,68,51.428,110,36.606,242,11.077,334,30.651,359,6.989,397,5.843,449,47.517,559,4.389,660,68.66,661,61.591,1233,68.66,1904,68.66,1916,78.35]],["c/26",[0,1.65,2,2.755,5,0.099,7,4.369,10,2.056,20,0.008,25,2,41,2.291,48,1.512,49,0.326,50,1.82,51,2.755,52,4.119,54,2.483,62,0.048,64,0.206,66,1.879,67,1.464,68,3.439,70,5.239,87,1.334,92,2.46,94,1.07,98,3.124,110,2.01,136,1.503,139,2.071,200,1.82,210,1.709,220,4.075,242,0.639,261,0.409,263,2.65,265,2.655,268,2.755,306,0.347,327,3.435,334,2.05,359,0.467,362,2.65,365,0.937,377,4.369,382,2.46,397,0.418,399,2.374,410,2.403,418,2.755,448,2.991,449,3.608,453,3.829,473,2.215,477,2.991,559,0.314,589,1.82,590,2.46,660,4.917,661,4.119,703,2.65,729,0.412,897,3.271,948,2.868,1047,3.435,1083,3.586,1089,3.829,1114,3.619,1148,4.369,1233,4.591,1242,4.119,1247,3.829,1810,3.619,1811,4.075,1889,3.435,1904,4.591,1916,6.041,2515,5.233,2534,4.075,2788,5.233,2941,3.435,2942,5.984,2943,5.984,2944,5.984,2945,5.984,2946,5.984,2947,5.984,2948,5.984,2949,5.984]],["t/27",[449,80.911,2950,144.69]],["h/27",[10,33.2,20,0.101,39,19.965,41,19.965,66,22.643,68,34.56,110,18.193,165,29.644,179,4.696,219,5.778,242,8.329,263,31.932,266,5.502,267,30.751,268,60.581,273,26.685,276,36.037,278,36.037,399,28.602,449,31.932,559,2.949,604,74.28,616,46.14,626,29.644,627,34.56,674,37.756,1164,57.102,1661,43.606,2417,57.102,2807,52.652,2950,57.102,2951,63.061]],["c/27",[0,1.241,2,2.485,7,3.941,10,2.158,20,0.011,38,0.497,39,1.865,41,2.033,48,1.325,49,0.221,62,0.055,65,1.695,66,2.534,67,1.32,68,3.686,82,2.697,92,2.769,94,0.965,98,2.818,110,1.699,113,0.412,136,1.131,139,2.331,140,2.219,142,1.32,165,3.253,167,4.274,179,0.478,183,3.941,210,1.924,219,0.588,242,0.642,261,0.368,263,2.983,264,2.818,265,1.997,266,0.514,267,3.375,268,3.925,273,2.987,276,3.67,277,3.675,278,3.955,301,0.412,302,0.412,303,2.485,305,2.493,306,0.39,326,4.441,334,1.542,365,0.845,367,2.95,382,2.219,391,3.101,399,2.913,402,2.39,410,1.808,428,3.098,430,3.675,448,2.697,449,3.505,451,3.098,477,2.697,478,2.58,485,4.587,544,1.75,547,0.845,559,0.324,563,3.453,587,4.31,604,5.389,616,4.921,621,0.454,626,3.019,627,3.519,628,2.95,631,3.264,643,4.073,645,0.371,660,3.453,674,2.739,729,0.371,734,4.274,830,3.264,881,2.697,948,2.587,1047,3.098,1083,3.366,1089,3.453,1114,3.264,1133,3.453,1164,5.334,1242,3.098,1247,3.453,1259,4.274,1494,4.274,1630,4.72,1661,4.073,2298,4.72,2417,5.334,2807,5.615,2950,6.609,2951,7.349,2952,5.891,2953,5.397,2954,5.397,2955,6.736,2956,7.343,2957,5.397,2958,5.397,2959,5.397,2960,5.397,2961,5.397,2962,5.397,2963,5.397]],["t/28",[449,80.911,2642,133.413]],["h/28",[0,14.43,10,15.832,20,0.169,26,18.496,33,10.508,38,5.774,41,27.144,50,19.089,52,36.02,62,0.656,66,19.705,73,6.829,139,21.718,143,2.468,241,45.134,242,7.485,263,27.789,265,23.223,334,17.925,386,21.718,418,28.89,449,27.789,471,31.361,559,4.01,660,40.154,661,56.272,1183,66.752,1233,40.154,1276,49.694,2493,77.634,2642,99.578,2964,85.735,2965,77.634,2966,37.948]],["c/28",[0,1.73,2,3.331,5,0.088,10,2.14,20,0.012,23,2.795,25,1.883,26,1.789,27,2.774,29,2.1,30,1.698,33,1.139,38,0.558,39,1.27,41,2.183,48,1.48,49,0.278,50,1.846,51,3.331,52,4.437,53,1.957,54,1.588,62,0.057,64,0.158,66,2.272,67,1.122,70,3.35,71,1.898,73,0.66,74,2.171,75,3.35,82,2.293,87,1.023,90,1.698,92,2.495,94,0.82,110,1.531,121,2.508,133,0.794,136,1.576,139,2.729,143,0.285,159,3.55,170,3.483,176,2.199,178,3.124,193,0.234,200,1.846,210,1.733,219,0.486,220,3.124,241,3.559,242,0.618,243,1.588,250,1.698,252,2.936,253,3.717,261,0.464,263,3.332,265,2.861,266,0.35,268,3.464,269,4.947,273,2.516,274,3.124,276,2.293,278,3.398,279,0.847,281,0.486,292,0.173,303,2.112,306,0.352,312,3.483,325,3.35,326,2.774,327,3.483,334,1.733,341,3.633,362,2.032,370,3.483,374,4.965,382,1.886,386,2.353,391,2.112,392,2.293,399,2.87,403,1.642,405,1.537,410,1.537,417,3.317,418,3.63,419,0.295,429,2.199,435,3.35,439,3.35,441,2.032,443,2.508,448,2.293,449,3.204,471,3.398,473,1.698,475,3.483,477,2.293,478,1.757,520,2.246,524,2.936,526,3.124,544,1.488,549,1.122,551,2.633,554,2.774,559,0.316,563,2.936,572,1.957,592,0.422,598,2.508,613,1.957,615,2.774,618,3.124,635,2.774,638,2.199,660,4.815,661,4.437,729,0.316,731,4.012,772,1.055,784,2.633,848,3.35,870,1.311,879,2.633,883,3.124,886,2.428,917,1.698,948,2.199,963,3.35,971,3.35,995,2.293,1000,2.936,1047,2.633,1083,3.033,1089,2.936,1102,3.633,1114,2.774,1148,5.283,1183,5.124,1233,3.883,1242,3.903,1247,2.936,1261,3.633,1272,1.942,1274,3.35,1276,6.122,1278,2.199,1311,2.508,1333,3.124,1389,4.012,1515,3.35,1536,3.633,1551,3.633,1810,2.774,1811,3.124,2308,4.431,2493,6.339,2534,3.124,2543,2.936,2642,6.257,2676,4.012,2726,4.012,2964,7.001,2965,5.959,2966,4.112,2967,4.588,2968,4.588,2969,4.588,2970,4.588,2971,3.633,2972,6.799,2973,6.068,2974,4.588,2975,4.588,2976,6.068,2977,4.588,2978,4.588,2979,4.588,2980,4.588,2981,4.588,2982,4.588,2983,4.588,2984,4.588,2985,4.588,2986,4.588,2987,4.588,2988,4.588,2989,4.588,2990,4.588,2991,4.588,2992,4.012,2993,4.588,2994,7.525,2995,6.068,2996,4.588,2997,4.588]],["t/29",[231,42.016,626,75.113]],["h/29",[84,3.151,143,5.541,231,23.627,242,7.844,246,1.628,261,7.014,266,7.839,419,9.044,434,2.958,462,23.627,516,47.301,626,57.909,645,7.068,838,23.627,1906,33.315,2998,89.852]],["c/29",[5,0.094,20,0.012,30,1.948,32,0.531,33,1.11,35,0.408,38,0.61,47,0.524,49,0.271,59,0.463,62,0.056,63,0.629,64,0.27,72,0.524,73,0.573,80,0.59,84,0.234,89,1.173,100,3.367,109,0.718,113,0.402,123,1.035,143,0.327,158,2.016,193,0.268,215,0.937,219,0.675,231,1.872,242,0.634,246,0.124,261,0.453,266,0.554,267,2.244,279,1.224,281,0.422,282,2.016,285,0.506,292,0.302,301,0.402,302,0.402,306,0.305,307,1.224,322,1.821,359,0.432,365,0.824,393,4.294,396,2.552,397,0.287,403,1.883,412,0.484,419,0.515,434,0.209,455,0.483,462,1.872,465,2.33,500,3.052,504,1.821,516,3.791,549,1.287,559,0.312,565,1.039,574,1.035,588,2.539,591,0.484,592,0.484,620,3.367,621,0.557,626,3.479,628,2.877,641,1.11,645,0.499,667,0.691,718,0.484,729,0.362,750,3.843,777,4.602,788,0.824,797,0.573,799,2.423,813,0.941,815,1.821,831,2.163,838,1.669,870,1.503,895,0.881,906,3.182,925,2.522,938,0.619,957,0.643,1015,0.484,1033,2.372,1041,1.883,1071,2.087,1123,0.506,1133,3.367,1229,3.843,1260,0.506,1262,0.738,1437,3.367,1483,2.828,1512,3.843,1625,0.55,1775,4.168,1906,2.354,1989,5.564,2009,0.55,2234,0.643,2260,2.016,2425,4.168,2564,0.643,2998,6.664,2999,5.263,3000,6.63,3001,1.883,3002,5.263,3003,5.263,3004,5.263,3005,5.263,3006,4.168,3007,4.168,3008,4.602,3009,3.843,3010,5.263,3011,5.263]],["t/30",[2103,162.595]],["h/30",[71,24.369,84,2.962,151,44.467,219,7.74,231,22.211,242,7.374,246,1.531,261,6.594,419,6.202,434,2.781,561,10.094,645,6.645,1094,55.441,1639,61.804,2103,65.767,2145,58.41,2296,123.198,2316,48.271,2563,76.488,2800,76.488]],["c/30",[5,0.113,20,0.011,22,1.004,32,0.611,33,0.626,35,0.325,38,0.344,41,1.035,46,2.783,47,0.514,48,0.736,49,0.25,51,2.429,54,1.294,55,1.163,59,0.329,62,0.054,63,0.582,64,0.262,67,1.291,71,1.834,72,0.534,73,0.407,74,1.338,77,1.174,80,0.562,84,0.204,89,0.834,90,1.384,94,0.943,109,0.906,110,1.331,113,0.466,116,1.432,133,0.913,136,0.783,139,1.826,143,0.275,151,2.429,155,3.592,158,1.432,159,1.952,162,1.338,163,3.592,164,1.656,176,1.792,179,0.398,193,0.191,196,1.802,204,1.384,207,1.483,219,0.66,224,2.199,231,1.718,242,0.6,246,0.111,256,2.146,257,1.04,259,1.338,261,0.453,265,1.953,266,0.57,281,0.3,285,0.507,290,3.592,292,0.304,293,1.384,301,0.285,302,0.285,306,0.217,307,1.342,316,0.973,322,1.294,323,1.591,329,1.869,336,2.543,340,2.044,355,2.298,359,0.344,365,0.586,375,2.429,386,1.294,397,0.204,410,1.767,411,2.529,412,0.344,413,4.614,419,0.393,429,1.792,434,0.191,441,1.656,446,2.529,455,0.447,465,1.656,475,2.146,477,1.869,479,3.101,488,4.249,491,3.356,493,1.384,501,1.294,502,2.607,503,0.887,515,2.429,525,1.869,531,2.546,543,0.973,544,1.711,545,2.755,547,0.586,549,1.496,551,2.146,553,1.537,556,1.483,559,0.272,561,0.781,565,0.826,568,1.579,572,2.987,574,1.203,590,2.169,591,0.344,592,0.344,613,2.25,621,0.443,638,1.792,639,1.537,642,1.416,645,0.421,664,2.529,669,2.336,674,1.826,678,3.028,685,1.869,700,2.169,710,2.146,718,0.344,721,3.27,724,1.595,729,0.363,737,2.342,738,2.261,760,1.058,765,2.134,788,1.097,797,0.574,799,2.429,809,2.73,813,1.093,814,1.483,816,0.943,817,1.068,824,3.028,827,0.887,843,3.192,860,0.855,863,1.826,866,2.393,870,1.746,880,3.191,885,3.183,894,1.721,895,0.883,910,2.73,913,2.393,921,3.192,931,3.66,938,0.621,942,2.044,951,3.592,957,0.457,958,1.656,975,2.73,980,2.961,1001,3.592,1015,0.344,1033,1.338,1037,5.808,1094,4.452,1101,2.961,1123,0.359,1126,2.546,1179,2.393,1252,2.146,1260,0.359,1262,0.669,1297,2.261,1311,3.342,1353,4.614,1357,1.176,1463,2.529,1484,2.146,1625,0.391,1639,4.779,1719,4.614,1758,4.849,1762,2.393,1772,3.27,1783,2.73,1834,0.943,1953,2.044,2009,0.391,2103,5.924,2114,1.068,2145,4.754,2154,1.656,2223,2.755,2234,0.457,2260,1.432,2296,6.779,2316,3.812,2514,4.178,2563,4.178,2564,0.457,2800,6.142,2971,2.961,3012,3.739,3013,7.003,3014,5.276,3015,4.614,3016,5.276,3017,4.614,3018,5.276,3019,6.641,3020,3.739,3021,3.739,3022,3.27,3023,2.146,3024,3.27,3025,5.276,3026,3.27,3027,2.815,3028,4.841,3029,5.276,3030,4.614,3031,3.739,3032,5.276,3033,3.739,3034,3.739,3035,5.276,3036,3.739,3037,3.27,3038,3.739,3039,3.739,3040,3.739,3041,3.27,3042,3.27,3043,3.739,3044,3.739,3045,3.739,3046,3.739,3047,3.739,3048,3.739,3049,3.739,3050,2.73,3051,2.961,3052,3.739,3053,4.614,3054,2.261,3055,2.261,3056,2.261,3057,2.261,3058,3.739]],["t/31",[1932,152.798]],["h/31",[84,3.365,143,5.794,219,8.793,242,8.378,261,7.491,419,9.457,434,3.159,626,45.113,645,7.549,1186,27.686,1272,31.346,1932,94.252,3059,80.127]],["c/31",[5,0.108,20,0.011,29,1.78,32,0.639,33,0.861,35,0.402,38,0.661,47,0.557,49,0.267,54,1.78,59,0.453,62,0.057,63,0.606,64,0.268,72,0.548,80,0.594,84,0.22,113,0.392,123,1.012,143,0.326,168,5.244,179,0.426,193,0.262,200,1.564,207,2.592,215,0.727,219,0.684,242,0.632,257,0.806,261,0.446,266,0.595,281,0.524,285,0.494,287,1.903,292,0.3,295,2.811,301,0.392,302,0.392,306,0.298,323,1.966,340,2.811,359,0.426,396,2.531,397,0.28,412,0.473,415,1.722,419,0.512,434,0.218,455,0.465,501,1.78,502,2.193,503,1.22,504,1.78,505,2.57,526,3.502,545,2.685,547,0.806,559,0.319,568,1.285,574,1.012,576,2.952,591,0.473,592,0.473,597,3.952,613,2.193,621,0.549,626,3.52,641,1.203,645,0.494,667,0.575,669,2.277,718,0.473,729,0.354,759,1.068,788,1.024,797,0.56,814,2.04,879,2.952,938,0.605,957,0.629,958,2.277,974,2.57,987,2.368,1015,0.473,1033,1.84,1041,2.338,1071,2.592,1123,0.494,1186,1.968,1260,0.494,1262,0.695,1272,2.397,1357,1.457,1471,2.57,1483,2.193,1484,3.751,1625,0.537,1834,0.919,1932,5.517,1956,2.114,2009,0.537,2114,1.469,2174,3.502,2234,0.629,2260,1.97,2564,0.629,2856,2.57,3059,5.821,3060,5.143,3061,5.143,3062,5.143,3063,5.143,3064,5.143,3065,5.143,3066,6.534,3067,3.755,3068,6.534]],["t/32",[231,54.913]],["h/32",[5,1.324,62,0.688,143,4.041,231,36.964,242,7.844,246,1.628,261,7.014,393,56.167,395,58.974,419,6.597,434,2.958,561,10.738,564,69.958,952,49.243,1178,38.023,3069,89.852,3070,89.852]],["c/32",[1,2.254,5,0.114,18,1.598,19,1.873,20,0.01,25,1.986,26,1.105,32,0.533,35,0.325,42,1.486,47,0.482,48,0.737,49,0.153,55,0.973,56,1.891,57,1.038,59,0.33,62,0.055,63,0.562,64,0.25,67,0.917,72,0.457,73,0.844,76,2.552,77,1.659,80,0.542,89,0.835,90,1.387,92,1.541,93,2.433,101,2.083,109,0.835,113,0.286,133,0.914,137,2.968,138,1.77,143,0.286,151,1.725,179,0.244,193,0.191,196,1.959,211,2.266,215,1.078,231,2.017,232,2.968,235,1.598,236,2.151,242,0.592,243,1.297,246,0.111,250,1.387,251,2.641,257,0.587,260,1.541,261,0.497,266,0.57,281,0.3,285,0.36,292,0.308,293,1.387,301,0.286,302,0.286,305,1.956,306,0.217,307,1.13,308,1.038,315,0.875,322,1.297,326,2.266,336,2.024,355,2.119,359,0.344,365,0.587,368,1.796,393,4.172,395,4.514,397,0.204,403,2.378,405,1.255,412,0.563,417,2.049,419,0.427,421,1.375,428,3.514,434,0.191,441,1.66,443,2.889,455,0.494,462,1.408,473,1.387,479,2.944,483,1.486,494,1.598,500,3.06,501,2.301,503,1.725,516,3.621,520,1.387,544,1.714,545,1.957,549,0.917,550,2.889,553,2.172,554,2.266,559,0.272,561,0.64,564,5.415,565,1.098,574,0.737,588,1.435,590,1.541,591,0.345,592,0.345,595,2.398,600,1.957,621,0.444,641,0.885,642,1.006,664,1.796,674,2.301,680,1.725,694,1.255,702,1.829,718,0.345,729,0.258,765,2.223,772,0.862,781,4.254,788,1.041,797,0.408,799,1.725,810,1.598,813,0.945,814,2.428,815,1.297,825,3.816,831,1.541,838,1.612,851,4.526,860,0.856,863,1.829,870,1.071,895,0.628,897,2.049,900,2.968,903,3.196,908,2.398,911,1.297,915,1.873,925,2.533,938,0.441,952,3.359,957,0.458,975,4.47,1000,2.398,1015,0.345,1020,1.541,1056,1.796,1072,2.736,1123,0.36,1172,5.264,1178,2.265,1227,2.132,1260,0.36,1262,0.612,1272,1.071,1313,3.277,1357,1.178,1453,2.398,1483,1.598,1493,2.151,1625,0.392,1688,2.934,1691,3.598,1705,2.151,1830,2.934,1900,1.725,1906,2.155,1956,1.541,1989,2.736,2009,0.392,2145,2.266,2204,3.277,2223,3.659,2234,0.458,2288,3.322,2292,2.736,2394,3.277,2509,4.185,2560,2.968,2564,0.857,2567,4.621,2568,3.277,2632,5.264,2702,4.621,2703,4.621,2735,4.185,2915,3.277,3015,5.353,3023,3.033,3024,3.277,3027,3.227,3028,2.968,3042,4.621,3051,4.847,3053,4.621,3069,5.353,3070,5.353,3071,3.748,3072,3.277,3073,1.873,3074,6.044,3075,3.748,3076,6.647,3077,3.748,3078,5.284,3079,5.284,3080,2.968,3081,3.748,3082,2.968,3083,5.284,3084,3.748,3085,3.748,3086,4.621,3087,3.748,3088,3.748,3089,3.748,3090,3.748,3091,3.748,3092,3.748,3093,3.748,3094,3.748,3095,3.748,3096,3.748,3097,3.748,3098,3.748,3099,2.968,3100,3.277,3101,3.748,3102,3.748,3103,3.748,3104,3.748,3105,6.121,3106,3.748,3107,3.748,3108,3.748,3109,3.748,3110,6.121,3111,5.284,3112,5.284,3113,5.284,3114,5.284,3115,6.121,3116,5.284,3117,3.748,3118,3.277,3119,7.273,3120,7.009,3121,3.748,3122,3.748,3123,3.748,3124,3.748,3125,3.748,3126,3.748,3127,3.748,3128,3.748,3129,3.277,3130,3.748,3131,3.748,3132,3.748,3133,3.748,3134,3.748]],["t/33",[1626,174.363]],["h/33",[55,16.819,84,3.525,242,8.776,261,7.848,419,7.381,434,3.309,1182,26.434,1411,38.501,1485,47.257,1626,124.254,2316,57.449,3135,100.53]],["c/33",[5,0.106,20,0.011,32,0.618,35,0.417,38,0.501,39,1.507,41,1.507,47,0.556,49,0.223,55,1.128,59,0.479,62,0.057,63,0.591,64,0.254,72,0.556,80,0.601,84,0.226,89,1.213,94,1.317,102,3.535,109,0.742,113,0.415,133,0.942,143,0.214,158,2.593,179,0.441,185,2.887,193,0.278,224,1.709,231,1.251,242,0.633,261,0.462,266,0.415,281,0.543,282,2.084,285,0.523,292,0.255,301,0.415,302,0.415,306,0.315,359,0.441,397,0.296,402,2.41,412,0.501,419,0.473,434,0.222,455,0.453,461,2.014,479,3.415,502,3.143,547,0.853,559,0.277,574,1.071,591,0.501,592,0.501,621,0.569,652,2.608,672,2.321,700,2.237,716,3.482,718,0.501,729,0.374,760,0.942,797,0.592,813,0.973,814,2.159,824,4.231,843,3.848,860,1.097,870,1.555,895,1.134,913,3.482,915,2.72,924,3.705,938,0.64,947,3.124,957,0.665,1015,0.501,1123,0.523,1182,1.695,1226,4.31,1227,2.413,1243,5.382,1260,0.523,1262,0.678,1311,4.216,1322,3.124,1411,2.469,1471,3.384,1483,2.321,1485,3.261,1625,0.569,1626,6.302,1645,2.841,1834,0.973,2009,0.569,2076,2.159,2234,0.665,2316,4.042,2514,4.31,2564,0.665,2830,5.019,2941,3.124,2966,3.291,3001,2.759,3135,6.446,3136,5.442,3137,5.442,3138,7.371,3139,5.442,3140,4.759,3141,4.31,3142,2.841,3143,5.442]],["t/34",[1182,42.016,1432,104.876]],["h/34",[84,4.353,242,10.837,419,9.113,434,4.086,1182,32.64,1432,81.473]],["c/34",[1,2.409,5,0.105,20,0.012,29,1.955,32,0.555,35,0.426,38,0.52,46,2.163,47,0.389,49,0.231,55,1.097,57,1.564,59,0.497,62,0.057,63,0.601,64,0.258,72,0.389,74,2.021,80,0.543,84,0.23,109,0.945,113,0.431,140,2.322,143,0.222,179,0.451,193,0.288,219,0.626,242,0.637,257,0.885,261,0.386,266,0.596,279,1.279,281,0.453,285,0.543,292,0.261,301,0.431,302,0.431,306,0.327,322,1.955,334,1.614,359,0.451,375,2.6,397,0.308,412,0.52,419,0.481,428,3.242,434,0.216,455,0.461,472,2.704,493,2.09,494,2.955,547,0.885,559,0.283,565,1.174,591,0.52,592,0.52,600,3.617,601,3.46,619,4.796,621,0.582,641,1.16,683,3.355,707,1.564,718,0.52,729,0.389,759,1.059,784,3.242,788,1.174,797,0.615,810,2.409,886,2.176,938,0.665,957,0.69,987,2.6,1015,0.52,1123,0.543,1182,1.919,1186,1.425,1260,0.543,1262,0.69,1357,1.671,1378,4.94,1432,4.882,1625,0.59,1651,3.068,1834,1.01,2009,0.59,2076,3.099,2234,0.69,2319,4.718,2375,3.614,2517,4.473,2564,0.69,3144,5.648,3145,4.94,3146,4.473,3147,4.473,3148,4.473,3149,4.473,3150,4.94,3151,4.94]],["t/35",[1432,137.066]],["h/35",[84,3.525,143,4.522,225,49.022,242,8.776,261,7.848,419,7.381,434,3.309,472,39.785,601,50.905,645,7.908,683,47.257,1432,87.204,2076,45.596]],["c/35",[0,1.659,5,0.101,9,5.206,19,3.79,20,0.011,22,1.936,32,0.527,33,1.101,35,0.404,38,0.478,47,0.55,48,1.419,49,0.269,51,2.39,55,0.76,56,1.858,57,1.437,59,0.457,62,0.057,63,0.578,64,0.269,72,0.55,74,1.858,80,0.596,82,2.595,84,0.221,94,0.928,109,0.708,110,1.31,113,0.396,118,3.791,123,1.419,133,0.898,136,1.088,143,0.284,179,0.428,193,0.265,210,1.483,213,5.749,219,0.578,224,1.63,225,3.076,229,1.988,235,2.214,242,0.633,246,0.104,257,1.13,258,3.322,260,2.702,261,0.449,279,0.958,281,0.416,285,0.499,292,0.271,301,0.396,302,0.396,306,0.301,310,3.285,323,1.711,334,1.483,359,0.428,362,2.911,368,2.488,372,3.535,397,0.283,403,1.858,412,0.478,419,0.463,421,1.351,434,0.234,442,2.838,455,0.444,462,1.194,472,2.624,494,2.214,520,2.67,544,2.132,547,0.813,559,0.295,565,0.813,574,1.021,591,0.478,592,0.478,601,3.464,602,3.791,608,2.98,610,4.206,619,3.322,621,0.552,626,2.134,641,0.869,645,0.496,672,2.214,683,3.285,718,0.478,729,0.357,759,0.929,760,1.248,797,0.565,813,0.928,827,1.231,870,1.483,886,1.63,897,2.838,917,2.433,938,0.611,957,0.635,1015,0.478,1033,1.858,1041,1.858,1043,3.322,1056,3.151,1057,3.535,1071,2.059,1118,2.488,1123,0.499,1182,1.867,1186,1.31,1214,2.98,1260,0.499,1262,0.664,1297,4.362,1409,4.362,1411,1.739,1432,4.905,1463,2.488,1625,0.543,1810,4.362,1834,0.928,2009,0.543,2076,3.008,2099,3.535,2114,1.483,2234,0.635,2375,3.322,2517,4.111,2564,0.635,3145,4.54,3152,5.192,3153,5.192,3154,5.192,3155,5.192,3156,5.192,3157,5.192,3158,5.192,3159,5.206,3160,5.192,3161,5.192,3162,5.192,3163,4.54,3164,5.192]],["t/36",[55,34.938]],["h/36",[55,26.119,84,2.469,89,17.949,143,3.167,219,6.452,242,6.147,246,1.276,261,5.496,266,6.143,396,26.965,419,5.169,434,2.318,472,27.864,561,8.414,567,10.213,601,35.652,645,5.539,667,7.084,827,19.096,830,48.687,838,18.514,1429,54.819,1484,46.212,1485,33.098,2076,31.934,2316,40.236]],["c/36",[5,0.11,20,0.011,21,1.293,22,0.906,26,0.995,29,1.999,32,0.673,33,0.821,35,0.302,38,0.311,41,0.935,46,2.428,47,0.551,48,1.136,49,0.201,55,1.275,56,2.067,59,0.297,62,0.057,63,0.539,64,0.232,71,1.237,72,0.547,73,0.733,80,0.589,84,0.194,87,0.753,89,1.501,90,1.815,94,1.032,109,0.669,113,0.258,123,0.664,133,0.584,136,0.707,141,1.846,142,1.413,143,0.285,145,1.697,158,1.878,162,1.208,165,1.388,179,0.319,185,2.092,193,0.25,200,1.027,201,2.042,204,1.25,210,0.965,215,1.086,219,0.631,225,2.463,235,2.092,242,0.578,243,1.169,246,0.107,251,2.886,257,0.529,261,0.394,266,0.611,279,1.17,281,0.508,285,0.325,291,2.953,292,0.309,295,1.846,301,0.258,302,0.258,306,0.196,307,1.066,308,1.358,309,1.208,315,0.924,316,1.503,319,3.581,322,2.431,334,0.965,359,0.319,365,0.529,370,3.315,375,2.258,390,3.833,395,2.815,396,2.352,397,0.184,399,1.339,407,1.814,412,0.531,415,1.131,418,1.554,419,0.371,434,0.202,444,2.953,455,0.457,457,0.935,461,1.815,462,1.128,472,2.508,476,3.68,478,1.293,479,2.981,490,1.945,495,2.299,496,1.938,498,3.157,500,2.659,501,1.697,502,2.871,503,1.163,504,2.751,515,1.554,516,1.554,522,1.938,532,2.299,540,1.554,544,1.095,547,0.529,549,1.2,553,1.388,559,0.328,561,0.662,565,0.529,567,0.919,568,1.136,571,1.878,574,0.664,580,1.44,589,1.757,591,0.311,592,0.311,600,1.763,601,3.351,613,1.44,619,4.751,621,0.412,638,1.618,641,1.304,642,0.906,643,2.042,645,0.397,657,2.674,667,0.653,688,2.161,693,1.846,694,2.703,696,1.554,697,2.882,700,2.768,701,2.659,702,1.999,703,2.172,705,1.938,709,2.887,715,2.258,718,0.311,724,2.092,725,2.351,729,0.232,737,1.293,739,1.763,740,2.561,741,2.465,744,1.495,749,2.674,750,2.465,755,2.815,759,0.816,782,1.763,786,2.172,787,1.618,788,0.993,797,0.367,807,1.757,810,1.44,815,1.697,817,2.162,824,3.864,827,1.761,830,4.49,836,2.07,838,1.666,843,3.515,860,1.174,863,1.169,869,1.495,870,1.401,881,2.886,886,1.54,889,1.44,894,3.484,895,1.213,921,1.763,938,0.397,957,0.413,958,3.209,987,1.554,1015,0.311,1036,1.554,1056,1.618,1113,2.674,1123,0.325,1158,2.299,1231,1.495,1245,2.409,1260,0.325,1262,0.62,1280,3.581,1298,2.042,1311,3.68,1322,1.938,1343,2.161,1357,1.093,1411,1.643,1428,3.157,1429,4.934,1444,1.687,1469,1.44,1471,2.451,1476,1.984,1479,2.966,1484,3.638,1485,2.768,1512,2.465,1625,0.353,1651,2.172,1766,1.763,1830,1.618,1834,0.604,1906,1.59,1933,2.674,1963,1.763,1985,2.258,1987,1.763,2009,0.353,2076,2.874,2114,1.401,2117,4.289,2121,3.339,2144,3.015,2158,4.289,2234,0.413,2260,1.878,2316,3.71,2370,4.289,2371,4.289,2372,4.289,2373,4.289,2564,0.413,2630,2.465,2695,2.674,2743,1.618,2808,2.465,2856,2.451,2866,2.953,2885,2.674,2914,2.674,3001,2.513,3006,2.674,3023,1.938,3146,3.884,3147,3.884,3148,3.884,3149,3.884,3150,4.289,3151,5.051,3163,4.289,3165,3.884,3166,3.376,3167,3.376,3168,5.776,3169,2.953,3170,2.674,3171,2.674,3172,3.376,3173,2.953,3174,5.543,3175,5.543,3176,3.376,3177,3.376,3178,4.904,3179,4.904,3180,3.376,3181,3.376,3182,3.376,3183,2.465,3184,2.953,3185,3.376,3186,2.674,3187,3.376,3188,3.376,3189,3.376,3190,2.953,3191,6.732,3192,3.376,3193,3.376,3194,3.376,3195,3.376,3196,3.376,3197,3.376,3198,1.687,3199,1.687,3200,1.687,3201,1.618,3202,1.846,3203,1.846,3204,2.042]],["t/37",[55,26.733,1186,46.098]],["h/37",[41,26.219,55,27.421,84,2.904,225,40.384,226,36.269,242,7.23,261,9.087,419,6.08,434,2.726,667,8.333,1186,38.835,1485,38.93,1657,60.594,3205,74.99]],["c/37",[5,0.098,20,0.011,30,2.665,32,0.577,35,0.403,38,0.476,41,1.994,43,1.732,47,0.565,49,0.211,55,1.283,59,0.455,62,0.056,63,0.577,64,0.275,71,1.654,72,0.565,73,0.714,80,0.605,84,0.221,113,0.395,123,1.017,133,0.895,142,1.265,143,0.203,155,5.156,158,3.26,179,0.427,193,0.264,225,3.405,226,2.758,242,0.627,257,1.027,261,0.517,281,0.525,285,0.497,292,0.294,295,2.827,301,0.395,302,0.395,306,0.38,321,3.776,359,0.427,365,0.81,397,0.282,405,1.732,408,1.914,412,0.476,419,0.462,434,0.207,438,1.981,455,0.443,460,2.904,462,1.189,473,1.914,501,1.79,539,3.127,547,0.81,556,2.051,559,0.268,565,0.81,591,0.476,592,0.476,621,0.551,641,0.866,667,0.666,680,2.381,707,1.432,715,2.381,718,0.476,729,0.356,759,1.017,797,0.563,799,3.315,813,1.172,814,2.051,816,1.305,894,3.019,904,2.381,917,1.914,938,0.608,957,0.632,966,2.381,1015,0.476,1041,2.346,1056,2.478,1071,2.601,1118,2.478,1123,0.497,1182,1.656,1186,2.155,1189,3.776,1227,1.573,1260,0.497,1262,0.663,1357,1.153,1476,1.524,1482,2.478,1485,3.113,1625,0.54,1657,4.607,1834,0.924,2009,0.54,2234,0.632,2260,3.248,2288,4.238,2316,2.584,2465,4.095,2564,0.632,3205,5.996,3206,5.171,3207,5.171]],["t/38",[1391,162.595]],["h/38",[84,3.525,143,4.522,242,8.776,261,7.848,419,7.381,434,3.309,453,73.555,626,47.257,1381,60.017,1391,123.27,2649,78.271]],["c/38",[5,0.112,20,0.011,25,1.298,35,0.394,38,0.59,39,1.381,47,0.532,49,0.204,55,0.73,59,0.439,62,0.056,63,0.567,64,0.266,72,0.532,74,1.784,80,0.583,84,0.217,134,3.502,143,0.304,179,0.417,185,2.126,193,0.254,215,1.056,219,0.4,242,0.622,260,2.91,261,0.437,292,0.281,301,0.38,302,0.38,306,0.371,359,0.417,393,2.726,397,0.272,412,0.459,419,0.454,427,3.191,434,0.215,453,4.944,455,0.435,482,2.862,501,2.217,502,2.126,503,1.183,504,2.784,547,0.781,559,0.262,562,2.726,565,1.109,591,0.459,592,0.459,621,0.538,626,3.411,667,0.564,707,1.381,718,0.459,725,2.39,729,0.343,760,1.41,788,1.21,813,1.438,814,1.978,816,1.786,817,1.424,838,1.85,869,2.837,880,3.015,886,1.566,919,4.678,942,2.726,1015,0.459,1123,0.479,1126,3.395,1175,3.395,1182,1.628,1186,1.258,1189,3.641,1229,3.641,1231,2.208,1258,2.862,1260,0.479,1262,0.651,1278,2.39,1308,3.641,1326,4.099,1357,1.665,1381,4.425,1391,5.947,1463,3.071,1469,2.732,1476,1.47,1491,3.395,1625,0.521,1645,3.696,1834,0.891,1943,3.538,1956,3.177,2009,0.521,2031,4.361,2179,2.837,2184,3.641,2288,3.538,2375,3.191,2583,4.361,2586,3.949,2649,5.688,2941,2.862,3073,3.538,3099,6.119,3208,4.986,3209,4.986,3210,7.47,3211,4.986,3212,4.986,3213,4.986,3214,6.406,3215,5.169,3216,5.603,3217,4.986,3218,4.986,3219,4.986,3220,4.986,3221,4.986,3222,4.986,3223,8.23]],["t/39",[1182,42.016,1706,110.492]],["h/39",[143,5.583,242,10.837,419,9.113,434,4.086,1182,32.64,1706,85.836]],["c/39",[1,2.659,5,0.08,20,0.012,35,0.452,38,0.574,47,0.429,49,0.255,58,3.99,59,0.549,62,0.056,63,0.589,64,0.253,72,0.429,80,0.567,143,0.318,193,0.318,242,0.649,261,0.426,292,0.235,301,0.476,302,0.476,306,0.361,334,1.781,359,0.479,397,0.339,412,0.574,419,0.502,434,0.225,455,0.452,559,0.32,591,0.574,592,0.574,621,0.618,718,0.574,729,0.429,760,1.079,810,2.659,904,2.87,987,2.87,1015,0.574,1123,0.599,1182,1.857,1260,0.599,1262,0.677,1706,5.137,1715,3.77,2009,0.652,2064,4.245,2192,5.369,2193,5.369,2319,4.245,3224,5.453,3225,6.235]],["t/40",[771,114.449]],["h/40",[84,3.291,87,23.922,143,4.221,242,8.192,246,1.701,261,7.325,419,6.889,434,3.089,561,11.214,567,13.611,589,32.641,645,7.382,667,9.442,697,39.71,771,51.428,827,25.45,2155,64.889]],["c/40",[5,0.111,20,0.011,23,1.731,29,1.457,32,0.629,33,0.959,35,0.352,38,0.387,47,0.531,48,0.828,49,0.234,56,2.05,57,1.166,59,0.37,62,0.056,63,0.604,64,0.259,67,1.03,72,0.548,73,0.795,80,0.584,84,0.224,87,1.838,90,1.558,94,1.164,109,0.997,110,1.445,113,0.437,116,1.613,123,1.127,133,0.729,136,0.882,142,1.03,143,0.297,144,3.464,145,1.457,150,2.302,179,0.373,191,1.795,193,0.215,210,1.203,219,0.618,229,1.613,242,0.608,246,0.12,257,0.897,259,1.506,261,0.391,266,0.533,279,1.057,281,0.337,282,2.194,285,0.405,287,1.558,292,0.3,301,0.321,302,0.321,306,0.332,307,1.349,308,1.586,309,1.506,311,2.302,315,0.919,316,1.962,323,1.096,344,1.457,355,1.457,359,0.373,365,0.66,397,0.229,403,1.506,407,1.799,410,1.41,412,0.387,415,1.41,419,0.418,421,1.096,434,0.21,455,0.475,462,1.896,471,2.104,478,1.613,490,1.67,494,1.795,543,1.491,547,0.66,549,1.03,559,0.286,561,0.764,565,0.897,567,0.979,568,1.127,572,2.443,574,0.828,589,2.564,591,0.387,592,0.387,621,0.481,641,1.292,642,1.13,645,0.448,663,2.018,667,0.664,694,2.84,696,1.938,697,3.129,698,2.863,700,3.228,701,2.997,702,2.253,703,3.095,709,3.1,718,0.387,723,2.104,729,0.29,737,1.613,739,2.991,740,2.991,744,1.864,759,0.987,765,1.748,768,3.334,770,3.074,771,4.121,772,0.968,774,3.334,775,2.694,776,3.334,782,2.198,786,2.537,787,2.745,788,1.095,789,3.334,797,0.458,807,1.281,813,1.024,817,1.86,827,1.955,836,2.223,860,1.222,863,1.457,889,1.795,895,1.224,917,1.558,932,3.074,938,0.495,957,0.515,987,1.938,1015,0.387,1102,3.334,1123,0.405,1231,1.864,1245,2.05,1260,0.405,1262,0.694,1272,1.203,1357,1.277,1444,2.104,1476,1.688,1625,0.44,1705,3.288,1766,2.198,1834,1.024,1963,2.198,1985,2.637,1987,2.198,2009,0.44,2155,4.914,2234,0.515,2465,3.334,2564,0.515,2723,2.417,2743,2.018,3001,2.05,3067,3.074,3198,2.104,3199,2.104,3200,2.104,3201,2.018,3202,2.302,3203,2.302,3204,2.546,3226,4.21,3227,6.595,3228,3.334,3229,5.01,3230,4.21,3231,4.21,3232,4.21,3233,4.21,3234,4.21,3235,4.21,3236,4.21,3237,3.682,3238,3.682,3239,2.417,3240,2.302,3241,2.198,3242,2.546]],["t/41",[1706,144.406]],["h/41",[54,27.864,84,2.469,138,26.965,143,3.167,242,6.147,246,1.276,261,8.086,419,7.605,434,2.318,549,19.695,561,8.414,645,5.539,969,48.687,1130,51.516,1409,48.687,1688,56.767,1706,48.687,1715,71.625,1734,54.819,1750,63.756,1762,51.516,1773,51.516,2154,35.652,2192,58.787,2193,58.787,2292,58.787,3243,70.409,3244,70.409]],["c/41",[0,1.418,5,0.114,16,2.04,20,0.01,32,0.608,33,0.787,35,0.289,38,0.514,47,0.536,48,1.099,49,0.192,53,2.005,54,2.134,55,1.041,56,1.682,57,1.708,58,2.04,59,0.28,62,0.055,63,0.551,64,0.257,71,0.804,72,0.536,73,0.347,80,0.58,83,1.928,84,0.171,87,0.711,89,0.711,90,2.434,93,2.165,94,0.999,99,2.524,101,2.002,109,1.017,113,0.359,119,1.221,133,0.814,136,0.668,138,1.871,142,0.78,143,0.293,150,2.57,179,0.208,193,0.163,196,1.818,204,2.068,215,0.871,219,0.57,224,1.477,242,0.569,243,1.103,246,0.104,250,1.18,251,1.593,257,1.03,259,1.682,260,1.933,261,0.47,265,2.547,266,0.579,279,0.868,281,0.255,285,0.306,292,0.296,300,1.18,301,0.243,302,0.243,305,2.068,306,0.185,307,0.588,315,0.419,322,1.103,323,1.224,339,2.524,359,0.306,365,0.499,386,1.627,397,0.174,403,2.207,405,2.203,408,2.282,412,0.293,415,1.068,419,0.469,421,0.829,428,2.699,432,1.83,434,0.161,441,1.412,451,1.83,455,0.423,460,2.082,463,3.977,482,1.83,488,2.04,492,1.83,493,1.18,501,2.382,503,1.115,515,2.165,520,1.18,528,2.524,539,1.928,543,1.454,544,1.034,549,1.609,553,1.31,559,0.291,561,0.584,565,0.875,568,1.213,574,1.294,588,1.221,590,1.31,591,0.293,592,0.293,598,3.054,621,0.395,642,0.856,645,0.384,658,1.743,664,1.528,667,0.492,678,1.83,680,1.467,718,0.293,729,0.219,760,1.232,765,2.214,788,0.875,797,0.347,799,2.572,810,1.359,813,1.306,814,1.264,816,1.659,831,1.933,838,1.081,860,1.115,869,2.082,870,0.911,880,1.928,886,1.001,895,1.101,912,1.593,921,3.716,938,0.375,939,3.047,943,3.54,957,0.39,969,4.162,993,2.57,1004,2.327,1015,0.293,1020,1.31,1022,1.928,1033,2.207,1041,1.14,1095,1.593,1123,0.306,1130,4.853,1131,2.455,1158,2.17,1159,3.379,1182,1.715,1227,2.307,1245,1.682,1258,1.83,1260,0.452,1262,0.633,1357,1.048,1409,4.707,1439,1.928,1450,2.327,1463,1.528,1476,1.647,1482,2.254,1494,2.524,1498,2.524,1499,2.327,1501,2.788,1503,2.788,1508,2.524,1510,2.788,1645,1.664,1661,1.928,1688,3.92,1696,2.788,1706,5.177,1715,5.253,1734,3.202,1745,4.112,1750,6.091,1751,2.327,1762,4.674,1773,4.853,1834,0.999,1889,1.83,1906,2.133,1908,2.788,1943,3.557,1956,1.933,1976,2.524,1984,3.95,1989,2.327,2075,2.327,2099,2.17,2114,1.596,2144,1.664,2154,3.235,2179,2.731,2192,5.334,2193,5.446,2220,4.503,2223,1.664,2234,0.39,2238,3.729,2288,3.082,2292,4.802,2335,2.04,2338,2.327,2458,2.788,2520,2.04,2559,2.327,2564,0.39,2764,3.804,2839,2.327,2891,2.788,2927,2.788,2935,2.788,2941,1.83,3027,2.165,3041,2.788,3051,3.724,3118,2.788,3142,1.664,3170,2.524,3190,2.788,3215,4.079,3224,2.788,3240,1.743,3243,6.389,3244,4.886,3245,3.187,3246,2.788,3247,2.788,3248,3.187,3249,3.724,3250,3.724,3251,3.187,3252,3.187,3253,3.187,3254,3.187,3255,3.187,3256,3.187,3257,3.187,3258,3.187,3259,3.187,3260,3.187,3261,4.702,3262,3.187,3263,4.702,3264,4.702,3265,2.327,3266,3.187,3267,3.187,3268,3.187,3269,3.187,3270,3.187,3271,3.187,3272,4.702,3273,4.702,3274,3.187,3275,5.587,3276,3.187,3277,3.187,3278,3.187,3279,3.187,3280,3.187,3281,3.187,3282,3.187,3283,3.187,3284,3.724,3285,3.187,3286,3.187,3287,6.577,3288,5.587,3289,3.187,3290,3.187,3291,4.112,3292,3.187,3293,3.187,3294,3.187,3295,3.187,3296,3.187,3297,3.187,3298,3.187,3299,6.577,3300,4.702,3301,3.187,3302,3.187,3303,4.702,3304,3.187,3305,3.187,3306,3.187,3307,3.187,3308,3.187,3309,3.187,3310,3.187,3311,4.702,3312,3.187,3313,3.187,3314,3.187,3315,3.187,3316,3.187,3317,5.587,3318,3.187,3319,3.187,3320,3.187,3321,3.187,3322,3.187,3323,3.187,3324,3.187,3325,3.187,3326,3.187,3327,3.187,3328,3.187,3329,2.524,3330,5.587,3331,3.187]],["t/42",[215,25.817,1668,116.913]],["h/42",[84,3.151,143,4.041,215,14.518,242,7.844,246,1.628,261,7.014,315,13.518,419,9.044,434,2.958,553,42.238,561,10.738,645,7.068,667,9.041,901,69.958,943,58.974,1178,38.023,1272,29.349,1668,65.743]],["c/42",[5,0.108,20,0.011,21,1.362,23,1.462,32,0.637,33,0.996,35,0.313,38,0.658,39,1.979,47,0.506,48,1.002,49,0.208,55,1.121,59,0.313,62,0.056,63,0.59,64,0.259,67,0.87,72,0.518,73,0.554,80,0.564,84,0.246,94,0.636,109,0.811,110,1.285,113,0.271,116,1.362,119,1.362,133,0.881,136,0.745,142,0.87,143,0.281,145,1.231,176,1.704,179,0.423,191,1.517,193,0.181,203,1.944,210,1.016,215,1.224,219,0.285,224,1.117,225,2.769,229,3.046,242,0.585,243,1.231,246,0.109,257,1.017,259,2.323,260,1.462,261,0.348,266,0.495,279,1.098,281,0.285,285,0.342,292,0.304,301,0.271,302,0.271,305,2.403,306,0.295,307,1.268,308,2.038,309,1.822,311,1.944,315,1.087,316,0.925,344,2.058,359,0.332,365,0.557,386,2.378,397,0.194,407,1.599,410,1.191,412,0.327,415,1.191,416,3.079,419,0.483,421,1.325,434,0.187,443,1.944,455,0.489,456,1.575,462,1.731,472,1.762,478,1.362,490,1.411,543,1.325,547,0.557,549,1.245,551,2.041,553,3.026,556,1.411,559,0.281,561,0.679,562,3.251,565,1.017,567,0.646,568,1.17,571,2.278,574,0.7,580,1.517,589,1.809,591,0.327,592,0.327,621,0.428,639,3.197,641,1.302,642,0.955,645,0.409,658,1.944,663,1.704,664,1.704,667,0.693,670,3.11,683,2.093,694,2.767,696,1.637,697,2.968,698,1.777,700,2.825,701,2.738,702,2.058,703,2.634,707,0.985,709,2.093,715,2.989,718,0.327,723,1.777,729,0.409,737,1.95,739,2.658,740,2.658,744,1.575,759,1.064,772,0.818,782,1.857,786,1.575,787,1.704,788,0.932,797,0.387,807,1.549,813,1.161,817,1.454,827,0.843,836,2.107,838,1.171,860,1.22,863,1.231,886,1.599,889,1.517,894,3.58,895,1.233,899,5.962,900,4.032,901,5.36,911,1.231,917,1.884,938,0.418,939,1.575,943,4.604,957,0.435,966,1.637,984,2.276,1015,0.327,1036,1.637,1039,3.11,1041,1.272,1071,1.411,1095,1.777,1118,1.704,1123,0.342,1128,2.151,1131,1.857,1175,3.467,1178,3.173,1186,0.897,1231,1.575,1245,1.272,1260,0.342,1262,0.658,1272,1.699,1428,1.944,1429,3.467,1444,1.777,1451,2.276,1476,1.048,1625,0.372,1658,1.272,1668,5.346,1681,1.857,1694,2.041,1766,1.857,1774,5.94,1834,0.636,1906,2.105,1953,2.783,1959,2.276,1963,1.857,1985,2.344,1987,1.857,1993,6.954,1994,6.954,2009,0.372,2044,6.437,2054,3.718,2056,5.201,2076,2.019,2109,2.041,2129,2.922,2234,0.435,2315,3.11,2335,4.817,2336,5.201,2362,4.453,2363,4.453,2364,4.453,2365,4.453,2463,5.201,2543,2.276,2564,0.435,2700,2.816,2743,1.704,2754,4.453,2831,3.718,3198,1.777,3199,1.777,3200,1.777,3202,1.944,3203,1.944,3239,2.041,3240,1.944,3241,1.857,3332,3.556,3333,6.493,3334,6.493,3335,6.493,3336,5.947,3337,6.493,3338,3.556,3339,5.091,3340,3.11,3341,2.421,3342,3.556,3343,2.816,3344,4.453,3345,3.556,3346,3.556,3347,3.556,3348,3.556,3349,5.091,3350,3.11,3351,5.947]],["t/43",[55,26.733,273,67.617]],["h/43",[55,12.849,73,9.556,84,2.693,89,19.578,109,11.977,143,6.349,219,7.037,229,33.635,231,20.195,242,6.705,246,1.392,261,5.995,273,46.691,282,33.635,315,11.555,419,8.101,434,2.528,567,11.14,645,6.042,759,12.409,1088,53.107,2145,53.107]],["c/43",[5,0.109,10,1.022,20,0.011,29,1.401,32,0.664,33,1.151,35,0.343,38,0.587,47,0.535,49,0.228,54,1.401,55,1.155,56,1.449,58,2.591,59,0.356,62,0.056,63,0.597,64,0.256,67,0.99,72,0.535,73,0.831,80,0.585,84,0.234,89,1.422,101,1.087,109,0.761,113,0.309,119,1.551,121,2.213,123,0.796,133,0.701,142,1.364,143,0.336,145,1.401,158,2.136,165,1.664,176,1.941,179,0.264,193,0.206,196,1.644,210,1.593,215,1.129,219,0.687,224,1.271,226,2.979,229,2.136,231,1.756,242,0.603,246,0.118,257,0.634,261,0.436,271,3.373,273,3.215,279,0.747,281,0.324,282,3.235,285,0.389,292,0.304,301,0.309,302,0.309,305,1.498,306,0.235,307,1.178,315,1.024,316,1.451,322,2.208,323,1.451,329,2.023,359,0.363,365,0.634,386,1.401,395,3.201,397,0.22,407,2.479,412,0.373,417,2.213,418,1.864,419,0.522,427,2.591,434,0.208,455,0.492,456,1.793,493,1.498,500,1.864,503,1.323,504,2.379,505,2.023,515,1.864,544,1.313,545,2.114,547,0.634,559,0.305,565,0.634,567,0.945,568,1.502,571,1.551,574,0.796,580,1.727,581,1.664,590,2.623,591,0.373,592,0.373,621,0.469,626,1.664,638,1.941,639,2.826,641,1.248,645,0.439,702,1.401,707,1.121,710,3.201,715,2.568,718,0.373,724,2.378,729,0.279,759,1.165,760,0.701,786,1.793,788,1.077,797,0.441,807,1.232,810,1.727,813,0.997,815,1.93,827,1.323,830,3.373,843,4.171,860,0.903,870,1.593,873,3.373,889,3.256,895,0.934,903,2.448,904,1.864,917,1.498,925,1.941,938,0.476,942,2.213,953,4.416,957,0.495,958,1.793,1015,0.373,1033,2.283,1036,1.864,1043,2.591,1088,4.832,1095,2.023,1123,0.389,1128,3.373,1227,1.232,1260,0.389,1262,0.686,1266,3.541,1278,3.295,1343,4.082,1356,4.658,1357,0.903,1413,2.448,1451,2.591,1469,1.727,1479,3.373,1493,2.324,1681,2.912,1694,2.324,1751,2.956,1830,1.941,2109,2.324,2114,1.593,2129,3.201,2144,2.114,2145,4.157,2171,2.114,2201,2.47,2234,0.495,2260,1.551,2478,3.206,2487,2.956,2564,0.495,2700,5.052,2856,2.787,3006,3.206,3009,2.956,3050,4.072,3067,2.956,3086,4.877,3173,3.541,3174,3.541,3175,4.877,3183,2.956,3352,4.049,3353,4.049,3354,4.049,3355,4.049,3356,4.049,3357,4.049,3358,4.049,3359,4.049,3360,5.577,3361,4.049,3362,3.541,3363,4.049,3364,4.049,3365,4.049,3366,4.049,3367,4.049,3368,4.049,3369,4.049,3370,4.049,3371,4.049,3372,4.049,3373,4.049,3374,3.541,3375,4.049,3376,4.049,3377,5.02,3378,4.049,3379,4.049,3380,4.049,3381,4.049,3382,4.049]],["t/44",[365,37.408]],["h/44",[84,3.365,143,4.316,219,8.793,231,25.235,242,8.378,246,1.739,261,7.491,365,23.075,419,7.046,434,3.159,561,11.468,567,13.92,645,7.549,1186,27.686,2184,80.127]],["c/44",[5,0.11,20,0.011,22,1.119,32,0.584,33,0.953,35,0.35,38,0.384,46,2.79,47,0.479,49,0.233,54,2.602,59,0.367,62,0.056,63,0.603,64,0.259,72,0.479,80,0.545,84,0.213,109,0.569,113,0.318,133,0.985,136,0.874,143,0.274,164,1.847,179,0.371,193,0.213,196,1.229,219,0.672,227,6.576,231,1.865,242,0.607,246,0.122,259,2.036,261,0.475,279,1.196,281,0.456,285,0.401,292,0.31,293,1.543,301,0.318,302,0.318,306,0.242,307,1.285,310,2.084,316,1.085,318,2.839,323,1.686,334,1.191,336,2.18,344,1.443,355,1.443,359,0.371,365,1.35,397,0.227,412,0.384,419,0.447,434,0.21,455,0.463,468,5.12,476,2.28,492,2.394,501,1.443,547,0.653,559,0.285,561,0.727,565,0.892,567,0.976,568,1.608,574,0.82,580,1.778,588,2.18,591,0.384,592,0.384,621,0.478,641,0.698,642,1.119,645,0.446,718,0.384,729,0.287,760,1.204,765,1.119,788,1.015,797,0.619,807,1.268,813,0.745,814,1.654,815,1.443,816,1.052,831,1.714,860,0.922,885,2.57,895,0.953,925,1.999,931,3.543,938,0.491,957,0.51,1002,2.839,1015,0.384,1033,2.036,1123,0.401,1180,4.411,1186,1.838,1260,0.401,1262,0.692,1318,3.926,1336,5.49,1357,1.444,1381,3.382,1396,4.209,1463,1.999,1476,1.229,1625,0.436,1834,0.745,1906,1.845,2009,0.436,2114,1.191,2121,3.875,2184,6.045,2234,0.51,2520,2.668,2564,0.51,3054,2.522,3055,2.522,3056,2.522,3057,2.522,3204,2.522,3383,4.17,3384,4.17,3385,5.955,3386,5.955,3387,6.475,3388,5.955,3389,5.955,3390,5.955,3391,5.955,3392,7.519,3393,7.519,3394,7.519,3395,7.519,3396,8.421,3397,7.519,3398,7.519,3399,7.519,3400,7.519,3401,7.519,3402,7.519,3403,7.519,3404,7.519,3405,7.519,3406,7.519,3407,7.519,3408,7.519,3409,7.519,3410,7.519,3411,7.519,3412,7.519,3413,4.17,3414,4.17,3415,4.17,3416,4.17,3417,4.17,3418,4.17,3419,4.17,3420,4.17,3421,4.17,3422,4.17,3423,4.17,3424,4.17]],["t/45",[1935,130.543]],["h/45",[143,4.747,215,17.053,242,9.214,261,8.239,419,10.071,816,30.45,838,27.754,1411,40.423,1935,85.748,2154,53.445]],["c/45",[5,0.073,20,0.012,32,0.556,33,0.949,35,0.427,38,0.522,47,0.562,48,1.115,49,0.232,59,0.499,62,0.057,63,0.556,64,0.239,72,0.562,73,0.756,80,0.606,109,1.024,113,0.432,143,0.325,162,2.028,193,0.289,215,1.154,242,0.638,260,2.33,261,0.474,281,0.454,285,0.545,292,0.213,293,2.098,301,0.432,302,0.432,306,0.329,359,0.452,368,2.717,397,0.309,405,1.898,408,2.098,409,3.428,412,0.522,419,0.54,455,0.427,520,2.098,532,3.859,559,0.284,565,1.28,591,0.522,592,0.522,621,0.583,643,3.428,683,2.33,707,1.569,718,0.522,729,0.39,788,1.088,797,0.617,816,2.061,838,1.878,860,0.918,895,0.949,938,0.667,957,0.693,966,3.196,993,3.099,1015,0.522,1123,0.545,1182,1.303,1186,1.752,1227,1.724,1260,0.545,1262,0.639,1411,2.62,1625,0.592,1889,3.253,1906,1.838,1935,4.736,1943,2.833,2009,0.592,2075,4.139,2099,3.859,2154,3.663,2234,0.693,2564,0.693,2764,4.728,2941,3.253,3001,2.484,3142,2.959,3425,5.668,3426,5.668,3427,4.957]],["t/46",[555,130.543]],["h/46",[84,2.904,143,6.055,231,21.776,242,7.23,246,1.501,261,6.465,419,8.546,434,2.726,555,72.768,561,9.897,645,6.515,725,45.386,807,28.806,836,27.912,838,21.776,885,37.561,1272,27.05,1381,49.441,1688,45.386]],["c/46",[0,1.16,4,3.779,5,0.113,20,0.011,22,0.943,26,1.035,32,0.548,33,0.845,35,0.31,38,0.464,39,0.973,43,1.978,46,3.144,47,0.505,48,1.27,49,0.206,53,1.498,55,1.18,56,2.624,57,0.973,59,0.309,62,0.056,63,0.588,64,0.258,65,1.103,72,0.505,73,0.703,74,1.257,77,2.147,80,0.554,84,0.198,90,2.389,97,2.016,110,1.273,113,0.268,123,0.691,133,0.608,136,1.057,140,2.075,143,0.312,160,2.565,164,1.555,179,0.385,193,0.179,219,0.57,231,1.784,236,2.016,242,0.583,243,1.216,246,0.121,257,1.071,259,1.257,261,0.403,266,0.451,279,0.648,281,0.281,285,0.338,292,0.303,293,1.3,300,1.3,301,0.268,302,0.268,306,0.204,307,1.314,308,1.635,309,1.257,316,0.914,323,0.914,334,1.003,336,1.933,344,1.216,355,1.216,359,0.329,363,2.392,365,0.55,397,0.191,407,1.585,409,2.124,410,1.176,412,0.323,414,2.124,419,0.471,429,1.683,431,2.419,434,0.197,438,1.933,455,0.451,461,1.3,462,0.808,465,1.555,473,1.3,481,2.247,493,1.3,494,1.498,496,2.016,520,1.3,525,1.755,540,1.617,543,1.68,547,0.55,549,0.859,555,4.738,559,0.307,561,0.675,565,0.925,567,0.64,568,1.503,572,2.916,574,0.691,581,1.444,591,0.323,592,0.323,608,2.897,621,0.424,637,2.565,639,1.444,641,0.588,642,0.943,645,0.406,646,2.124,652,3.277,669,2.235,672,2.152,688,2.247,707,0.973,715,1.617,718,0.323,725,3.663,729,0.242,735,2.565,756,2.392,759,1.036,760,0.873,765,2.231,775,3.779,797,0.549,807,2.08,808,2.247,813,0.902,816,1.49,836,2.377,838,1.686,851,4.021,860,0.817,885,3.394,886,1.103,894,1.617,895,0.845,907,2.565,911,1.216,912,1.755,931,3.455,938,0.413,942,3.529,957,0.429,960,2.565,987,1.617,993,3.229,1000,2.247,1015,0.323,1028,2.565,1033,2.113,1036,1.617,1056,2.419,1076,5.024,1123,0.338,1181,2.247,1243,3.685,1252,2.016,1260,0.338,1262,0.675,1272,1.953,1278,1.683,1298,2.124,1308,2.565,1326,3.779,1336,4.312,1357,0.783,1379,2.781,1381,4.324,1408,1.834,1410,1.498,1414,2.781,1450,2.565,1461,2.565,1463,1.683,1625,0.367,1641,2.565,1644,2.781,1658,2.113,1688,3.277,1733,4.677,1744,5.637,1758,3.685,1783,4.312,1784,2.016,1810,3.052,1811,3.436,1834,0.628,1845,2.392,1857,2.781,1906,1.139,1953,1.92,2009,0.367,2114,1.003,2179,2.615,2223,1.834,2234,0.429,2289,2.781,2376,2.392,2405,3.996,2487,2.565,2564,0.429,2588,3.072,2649,4.994,2716,2.565,2830,2.392,3001,1.257,3054,2.124,3055,2.124,3056,2.124,3057,2.124,3073,1.755,3201,1.683,3385,4.677,3386,4.677,3387,4.677,3388,4.677,3389,4.677,3390,4.677,3391,4.677,3428,3.512,3429,7.119,3430,6.226,3431,7.119,3432,6.226,3433,7.334,3434,7.119,3435,6.226,3436,7.334,3437,6.226,3438,7.334,3439,8.119,3440,2.781,3441,3.072,3442,3.512,3443,3.072,3444,3.072,3445,4.413,3446,4.413,3447,3.512,3448,3.072,3449,3.072,3450,3.072,3451,3.072,3452,3.072,3453,3.072,3454,3.072,3455,3.072,3456,3.512,3457,3.512]],["t/47",[225,101.835]],["h/47",[84,3.219,225,44.766,231,24.139,242,8.014,246,1.664,261,7.166,419,6.74,434,3.022,561,10.971,645,7.222,702,36.331,772,24.139,1182,24.139,1648,67.17,2129,60.254,2201,46.485,2504,60.254,3458,71.476]],["c/47",[0,0.877,5,0.112,20,0.011,22,1.024,25,1.836,32,0.614,33,0.896,35,0.329,38,0.351,46,2.984,47,0.527,49,0.219,55,0.558,56,2.212,57,1.482,59,0.336,62,0.057,63,0.586,64,0.264,67,0.933,68,1.829,71,0.963,72,0.527,73,0.796,80,0.579,84,0.205,93,1.756,94,1.105,101,1.436,102,1.992,108,2.19,109,0.52,113,0.291,119,1.461,123,0.751,133,0.66,136,0.799,138,1.278,143,0.264,158,2.367,164,1.69,176,2.565,179,0.349,191,2.282,193,0.195,203,2.086,204,1.412,215,0.756,219,0.306,224,2.359,225,3.679,231,1.727,242,0.595,243,2.139,246,0.123,250,1.412,251,2.674,257,0.838,259,1.365,261,0.365,265,1.412,266,0.408,273,2.78,279,0.704,281,0.306,285,0.367,292,0.303,301,0.291,302,0.291,303,3.458,304,4.807,306,0.221,307,1.302,310,2.674,315,0.813,316,0.993,322,1.32,323,0.993,334,1.09,335,1.992,336,2.367,340,2.086,344,1.32,359,0.349,365,0.838,368,1.829,386,1.32,397,0.208,405,2.07,408,2.287,412,0.351,417,2.086,419,0.397,430,2.598,431,2.565,432,3.072,434,0.178,438,1.461,442,2.086,455,0.45,456,1.69,459,3.072,461,1.412,462,0.877,464,2.086,472,1.32,473,1.412,482,3.072,483,1.513,493,1.412,494,2.282,496,3.548,501,1.852,503,1.269,504,1.852,505,1.907,522,2.19,540,1.756,543,1.393,547,0.598,556,1.513,559,0.274,561,0.7,565,0.838,567,0.85,568,1.508,574,0.751,581,2.2,590,1.568,591,0.351,592,0.351,600,3.227,621,0.45,639,1.568,642,1.024,645,0.425,658,2.926,667,0.336,672,1.627,674,2.319,702,2.139,707,1.711,715,3.708,718,0.351,724,2.282,729,0.262,756,2.598,757,3.548,760,0.926,765,2.016,771,1.829,772,1.815,788,1.201,797,0.582,799,2.846,807,1.161,815,2.319,816,0.963,817,1.09,838,1.231,860,1.085,870,1.766,885,2.799,895,1.122,911,1.32,917,1.412,925,1.829,931,3.53,938,0.449,939,2.37,947,2.19,957,0.466,984,2.441,1015,0.351,1033,1.365,1034,2.441,1095,3.089,1123,0.367,1146,5.341,1157,2.441,1179,2.441,1182,1.909,1227,1.88,1235,2.786,1252,2.19,1260,0.367,1262,0.673,1357,0.851,1411,2.719,1439,2.307,1451,2.441,1463,1.829,1474,3.663,1625,0.399,1637,3.021,1648,4.287,1651,2.37,1658,3.02,1668,2.441,1681,3.684,1694,3.072,1721,1.992,1830,2.962,1834,0.682,1845,2.598,1906,1.735,1984,2.19,2009,0.399,2076,1.513,2109,3.072,2114,1.09,2129,4.401,2179,1.69,2201,3.326,2223,3.227,2234,0.466,2260,2.367,2290,5.949,2425,3.021,2452,3.908,2504,4.312,2564,0.466,2573,3.021,2678,2.786,2831,2.786,2856,1.907,3027,3.085,3054,2.307,3055,2.307,3056,2.307,3057,2.307,3343,3.021,3377,2.786,3458,4.562,3459,3.815,3460,3.815,3461,3.815,3462,4.68,3463,5.351,3464,3.815,3465,3.815,3466,3.815,3467,3.815,3468,3.815,3469,3.815,3470,3.815,3471,3.815,3472,3.815,3473,3.815,3474,3.815,3475,3.815,3476,3.908,3477,3.337,3478,3.337,3479,3.337,3480,2.786,3481,3.337,3482,2.786,3483,6.181,3484,3.815,3485,3.815,3486,3.021,3487,3.021,3488,3.021,3489,3.815,3490,3.815]],["t/48",[1392,144.406]],["h/48",[25,21.305,73,8.909,84,2.511,143,5.581,231,18.827,242,6.251,246,1.298,261,5.589,419,7.699,434,2.357,561,8.556,645,5.633,667,7.204,725,39.24,788,12.826,807,24.905,815,28.336,836,24.132,870,23.387,885,32.475,1272,23.387,1381,42.746,1392,72.513,1688,39.24,1715,85.8]],["c/48",[0,0.685,4,3.435,5,0.114,20,0.01,22,0.8,25,1.906,26,0.878,32,0.598,33,0.749,35,0.275,38,0.412,39,0.825,43,1.798,46,3.144,47,0.521,48,1.321,49,0.183,53,1.271,55,1.146,56,2.491,57,0.825,59,0.262,62,0.056,63,0.558,64,0.246,65,1.404,72,0.521,73,0.797,74,1.066,77,2.008,80,0.563,84,0.183,90,2.208,93,2.059,94,1.143,97,1.711,110,0.752,113,0.227,123,0.586,133,0.516,136,0.937,140,1.839,143,0.305,160,2.176,164,1.32,179,0.35,191,1.271,193,0.152,219,0.538,224,1.404,231,1.831,236,1.711,242,0.559,243,1.031,246,0.116,257,1.052,259,1.6,261,0.366,266,0.531,279,0.55,281,0.239,285,0.286,292,0.295,293,1.103,300,1.103,301,0.227,302,0.227,306,0.173,307,1.239,308,1.486,309,1.066,316,0.775,323,0.775,334,1.278,336,1.713,344,1.031,355,1.031,359,0.291,363,2.029,365,0.467,397,0.162,403,1.921,407,1.404,410,0.998,412,0.274,414,1.802,419,0.447,428,1.711,429,1.428,431,2.144,434,0.184,438,1.713,446,1.428,455,0.428,461,1.103,462,0.685,473,1.103,481,1.907,493,1.103,494,2.289,496,2.567,516,1.372,520,1.103,525,1.489,540,1.372,543,1.664,547,0.467,549,1.094,559,0.31,561,0.624,565,0.935,567,0.378,568,1.527,572,2.544,574,0.586,581,1.225,590,2.453,591,0.274,592,0.274,608,1.711,621,0.376,637,2.176,639,1.225,641,0.499,642,0.8,645,0.44,646,1.802,652,3.064,667,0.613,669,2.377,672,1.907,674,2.213,680,1.372,685,1.489,688,1.907,707,0.825,715,1.372,718,0.274,725,3.511,729,0.205,735,2.176,756,2.029,759,0.984,760,0.929,765,2.263,775,3.435,788,1.187,797,0.487,799,1.372,807,1.945,813,0.799,815,2.535,816,1.354,836,2.329,838,1.028,851,3.655,860,0.87,867,1.428,870,2.093,875,2.176,885,3.371,886,0.936,894,1.372,895,0.899,903,1.802,907,2.176,911,1.031,912,1.489,931,3.488,934,1.802,938,0.351,942,3.262,957,0.364,960,2.176,987,1.372,993,2.935,1000,1.907,1015,0.274,1020,1.225,1028,2.176,1033,1.921,1036,1.372,1056,2.144,1076,4.911,1123,0.286,1181,1.907,1243,2.176,1252,1.711,1260,0.286,1262,0.641,1272,1.826,1278,1.428,1298,1.802,1308,2.176,1326,3.435,1336,3.92,1357,0.664,1379,2.36,1381,4.23,1392,5.283,1408,1.556,1410,1.271,1414,2.36,1450,2.176,1463,1.428,1625,0.311,1641,2.176,1644,2.36,1649,3.818,1651,1.981,1658,1.921,1688,3.064,1715,4.874,1733,4.725,1744,5.317,1758,3.92,1783,4.356,1784,1.711,1810,2.705,1811,3.045,1834,0.533,1845,2.029,1857,2.36,1906,1.741,1953,1.629,2009,0.311,2114,0.851,2179,2.377,2201,3.548,2223,2.803,2234,0.364,2289,2.36,2376,2.029,2405,3.542,2487,2.176,2564,0.364,2589,2.606,2649,4.741,2716,2.176,2830,2.029,3001,1.066,3054,1.802,3055,1.802,3056,1.802,3057,1.802,3073,1.489,3171,5.909,3186,2.36,3201,1.428,3385,4.251,3386,4.251,3387,4.251,3388,4.251,3389,4.251,3390,4.251,3391,4.251,3430,6.525,3432,6.525,3435,6.525,3437,6.525,3440,2.36,3441,2.606,3443,2.606,3444,2.606,3445,3.911,3446,3.911,3448,2.606,3449,2.606,3450,2.606,3451,2.606,3452,2.606,3453,2.606,3454,2.606,3455,2.606,3491,2.98,3492,7.461,3493,7.325,3494,7.576,3495,7.325,3496,7.461,3497,2.606,3498,2.98,3499,4.472,3500,8.013,3501,2.98,3502,2.98,3503,2.98,3504,2.98,3505,2.98,3506,2.98,3507,2.98,3508,2.98,3509,2.98,3510,2.98,3511,2.98,3512,2.98]],["t/49",[1178,67.617,2402,133.413]],["h/49",[45,48.652,242,9.698,261,8.672,419,8.156,524,81.283,1178,66.075,2402,118.369]],["c/49",[5,0.111,20,0.012,32,0.631,35,0.432,45,2.9,47,0.542,49,0.237,59,0.509,62,0.055,63,0.463,64,0.199,72,0.542,80,0.595,101,2.167,113,0.441,193,0.295,242,0.64,261,0.48,266,0.578,281,0.563,285,0.556,292,0.218,300,2.14,301,0.441,302,0.441,306,0.335,308,2.097,315,1.062,359,0.458,397,0.315,399,2.294,412,0.532,419,0.486,455,0.356,503,1.667,524,5.165,539,3.497,559,0.237,591,0.532,592,0.532,621,0.591,667,0.509,718,0.532,724,2.466,729,0.398,765,2.033,788,0.906,790,3.938,791,4.223,797,0.629,813,1.354,911,2.002,938,0.681,957,0.707,1015,0.532,1020,2.89,1123,0.556,1132,3.701,1178,3.158,1260,0.556,1262,0.532,1395,5.132,1464,5.058,1473,5.529,1625,0.604,2009,0.604,2234,0.707,2402,6.276,2542,4.223,2564,0.707,3027,3.236,3073,2.89,3513,5.783,3514,5.783,3515,5.058,3516,4.223,3517,5.058,3518,5.783,3519,4.58]],["t/50",[101,49.042,1178,67.617]],["h/50",[45,51.35,101,35.986,242,10.236,261,9.153,419,8.608,1178,49.616,2436,81.077,3520,117.25]],["c/50",[5,0.111,20,0.011,32,0.631,35,0.41,45,3.078,47,0.526,49,0.217,50,2.216,59,0.467,62,0.057,63,0.425,64,0.182,72,0.526,80,0.583,89,1.183,101,2.328,110,1.339,113,0.405,193,0.271,204,2.914,229,2.032,242,0.63,250,1.963,261,0.455,266,0.583,281,0.612,285,0.51,292,0.2,301,0.405,302,0.405,306,0.307,308,2.017,315,1.085,322,1.836,359,0.434,397,0.289,412,0.488,419,0.468,438,2.032,455,0.41,503,1.581,559,0.217,565,0.831,570,3.395,591,0.488,592,0.488,621,0.56,641,0.888,683,2.181,718,0.488,729,0.365,744,2.349,765,1.956,780,3.825,788,0.831,790,3.612,791,3.874,797,0.577,813,1.191,860,0.859,895,0.888,938,0.624,939,2.951,957,0.648,1006,4.613,1015,0.488,1123,0.51,1131,2.77,1132,4.264,1137,3.612,1150,3.874,1178,3.12,1186,1.681,1260,0.51,1262,0.488,1322,3.045,1625,0.554,1904,3.395,2009,0.554,2234,0.648,2413,4.64,2436,4.03,2449,3.874,2489,5.828,2564,0.648,2795,4.64,3027,3.068,3073,2.651,3159,6.637,3515,4.64,3516,3.874,3517,4.64,3520,7.33,3521,5.305,3522,7.286,3523,5.305,3524,5.277,3525,6.664,3526,5.277,3527,5.305,3528,5.305,3529,5.305,3530,5.305,3531,5.305,3532,7.286,3533,5.305,3534,6.684,3535,5.305,3536,5.305,3537,3.819,3538,5.305,3539,5.305,3540,7.643,3541,5.305]],["t/51",[55,26.733,219,14.641]],["h/51",[55,24.052,84,3.291,215,15.162,219,11.626,226,41.097,242,8.192,246,1.701,261,7.325,419,6.889,561,11.214,567,13.611,601,47.517,645,7.382,667,9.442]],["c/51",[5,0.11,10,1.246,18,3.005,20,0.011,22,1.325,29,2.203,32,0.565,35,0.392,38,0.454,39,1.763,43,1.654,46,1.891,47,0.543,49,0.26,50,1.502,55,1.272,56,2.278,59,0.434,60,2.578,62,0.056,63,0.596,64,0.256,67,1.208,72,0.543,80,0.596,84,0.228,89,1.101,113,0.377,121,2.699,123,0.971,143,0.277,179,0.459,193,0.252,200,1.502,215,1.17,219,0.699,226,2.698,242,0.627,246,0.122,257,0.773,261,0.435,266,0.568,279,0.911,281,0.396,285,0.475,287,1.827,292,0.306,300,1.827,301,0.377,302,0.377,306,0.286,307,1.175,319,3.605,322,1.709,335,2.578,359,0.415,365,0.773,375,2.931,390,3.85,397,0.269,399,2.525,402,2.186,412,0.454,419,0.452,446,2.366,455,0.5,456,2.186,465,2.186,483,1.958,499,4.318,507,4.318,512,4.318,514,4.318,547,0.773,549,1.208,559,0.202,561,0.736,565,0.773,567,1.001,574,0.971,587,3.159,591,0.454,592,0.454,600,4.118,601,3.411,619,4.929,620,3.159,621,0.535,641,1.321,642,1.325,643,2.986,645,0.512,656,2.986,667,0.62,669,2.186,693,2.699,702,1.709,718,0.454,725,2.366,729,0.34,738,2.986,759,0.9,760,0.854,784,2.834,797,0.537,836,2.325,860,0.8,869,2.186,886,1.55,895,0.827,908,3.159,938,0.581,957,0.603,1015,0.454,1041,1.767,1071,1.958,1123,0.475,1260,0.475,1262,0.709,1356,3.605,1357,1.101,1446,3.362,1625,0.516,1649,3.159,1834,0.883,1959,3.159,1985,2.931,2009,0.516,2064,4.335,2233,2.986,2234,0.778,2564,0.603,2743,2.366,2750,4.318,2808,3.605,3001,1.767,3146,3.91,3147,3.91,3148,3.91,3149,3.91,3198,2.467,3199,2.467,3200,2.467,3201,2.366,3204,2.986,3205,3.91,3542,4.937,3543,4.937,3544,4.937,3545,4.937,3546,4.318,3547,3.362,3548,3.605,3549,3.91]],["t/52",[1012,104.876,1178,67.617]],["h/52",[5,1.556,45,46.224,130,95.574,196,35.573,242,9.214,261,8.239,419,7.749,1012,90.032,1178,64.488]],["c/52",[1,2.154,5,0.111,20,0.011,23,2.077,26,1.489,29,2.236,32,0.602,35,0.397,45,3.09,47,0.516,49,0.207,59,0.444,62,0.057,63,0.405,64,0.174,72,0.516,77,1.586,80,0.575,85,4.717,110,1.275,113,0.385,120,5.65,123,1.271,130,6.533,133,0.874,162,1.807,164,2.237,179,0.329,193,0.258,196,2.451,229,2.474,242,0.624,250,2.391,261,0.441,266,0.573,279,1.192,281,0.405,285,0.486,292,0.19,295,2.762,301,0.385,302,0.385,306,0.293,315,0.665,321,3.689,359,0.421,378,2.9,397,0.275,405,2.658,408,1.869,412,0.465,415,1.692,419,0.457,421,1.681,438,2.474,455,0.397,473,1.869,539,4.54,554,3.907,559,0.264,565,1.176,570,3.232,571,1.935,588,2.474,591,0.465,592,0.465,608,2.9,621,0.543,631,3.055,635,3.055,641,1.329,645,0.348,669,2.237,697,1.869,718,0.465,729,0.49,744,2.237,797,0.55,813,1.496,911,2.236,938,0.594,939,2.237,957,0.617,1012,4.905,1015,0.465,1123,0.486,1132,3.232,1137,3.44,1178,3.229,1260,0.486,1262,0.465,1297,3.907,1322,2.9,1395,5.481,1439,3.055,1488,5.493,1625,0.528,1904,3.232,1959,3.232,2009,0.528,2018,6.229,2029,5.65,2054,3.689,2234,0.617,2397,4,2443,4,2444,4.418,2449,3.689,2564,0.617,2966,4.307,3023,2.9,3142,2.637,3159,6.284,3519,5.64,3524,5.116,3550,5.051,3551,6.94,3552,6.46,3553,4.418,3554,5.65,3555,4.418,3556,4.418,3557,4.418,3558,4.418,3559,5.65,3560,5.65,3561,4.418,3562,6.46,3563,6.46,3564,6.46,3565,5.051,3566,7.122,3567,5.051]],["t/53",[626,75.113,2102,133.413]],["h/53",[84,3.611,143,4.632,224,36.976,242,8.99,246,1.866,261,8.039,419,9.91,434,3.39,626,48.407,645,8.101,1272,33.636,2102,85.98]],["c/53",[4,4.362,5,0.095,20,0.012,32,0.546,35,0.419,38,0.627,47,0.469,49,0.279,59,0.484,62,0.056,63,0.638,64,0.274,72,0.469,73,0.742,80,0.577,84,0.227,101,1.477,109,0.93,113,0.42,140,2.262,141,3.008,142,1.346,143,0.313,158,2.107,179,0.444,193,0.281,219,0.546,224,2.581,229,3.106,242,0.639,246,0.126,257,0.862,260,2.262,261,0.465,266,0.42,281,0.441,285,0.529,292,0.279,300,2.036,301,0.42,302,0.42,306,0.319,307,1.016,338,4.357,359,0.444,365,0.862,397,0.3,412,0.506,419,0.521,434,0.213,455,0.49,462,1.265,496,3.158,503,1.305,544,2.51,547,0.862,559,0.279,574,1.082,591,0.506,592,0.506,621,0.573,626,3.465,645,0.51,666,4.357,667,0.6,674,2.359,683,2.262,707,1.523,718,0.506,729,0.378,788,1.068,797,0.599,838,1.568,867,2.637,881,2.749,921,2.872,934,3.327,938,0.647,957,0.672,966,2.533,974,2.749,1015,0.506,1020,2.262,1033,1.968,1123,0.529,1260,0.529,1262,0.732,1272,2.116,1357,1.52,1446,4.641,1625,0.575,1658,1.968,1715,3.327,1773,4.362,1774,5.408,1784,3.158,1834,0.983,1935,4.351,2009,0.575,2102,5.811,2171,3.559,2234,0.672,2260,2.107,2375,3.52,2436,4.122,2564,0.672,2637,4.357,3241,2.872,3249,4.357,3568,5.501,3569,4.811,3570,4.017,3571,4.811,3572,6.817]],["t/54",[219,19.135]],["h/54",[13,76.488,18,57.557,84,2.962,131,50.428,143,3.799,215,13.648,219,14.201,242,7.374,246,1.531,261,6.594,419,6.202,559,3.95,667,8.499,759,13.648,869,42.772,2035,76.488,3573,84.469]],["c/54",[1,1.32,5,0.114,6,4.157,10,1.9,13,3.642,18,3.551,20,0.011,31,4.009,32,0.369,33,0.518,35,0.419,38,0.285,39,0.857,42,1.227,45,1.185,46,1.762,47,0.498,49,0.188,50,1.67,56,1.646,59,0.272,60,3.864,62,0.056,63,0.44,64,0.189,65,0.972,67,1.125,72,0.378,73,0.741,74,1.107,76,2.107,80,0.471,84,0.186,89,0.69,93,1.424,97,2.64,100,1.98,101,0.83,102,1.615,104,1.691,109,0.829,110,1.385,113,0.236,117,2.107,119,1.762,121,1.691,123,1.08,124,1.691,131,3.781,136,0.964,143,0.285,145,1.592,161,3.642,162,1.107,169,2.299,172,1.483,179,0.202,183,3.359,193,0.235,196,0.912,200,2.071,201,1.871,203,1.691,204,1.145,207,1.824,214,2.45,215,1.093,219,0.702,220,2.107,221,3.642,224,1.444,226,2.774,242,0.565,246,0.108,257,0.485,261,0.443,263,2.037,266,0.464,267,1.32,268,2.118,273,2.609,278,2.744,279,0.849,281,0.521,282,2.103,285,0.654,292,0.301,293,2.032,300,1.145,301,0.236,302,0.236,306,0.179,307,1.122,308,1.885,323,1.197,334,1.314,336,1.185,340,1.691,344,1.071,345,1.546,355,2.44,359,0.3,362,1.37,365,0.485,368,1.483,378,2.64,382,1.272,386,1.071,392,1.546,396,2.176,397,0.168,399,2.178,402,1.37,403,1.107,407,1.444,411,2.631,412,0.423,419,0.417,421,1.429,425,2.107,438,1.185,441,1.37,442,1.691,448,1.546,451,3.151,455,0.496,456,1.37,460,1.37,462,1.494,465,2.037,479,2.037,483,3.13,491,1.483,493,2.404,500,1.424,501,2.44,503,1.718,504,2.356,505,2.744,506,2.259,520,1.145,544,1.003,552,2.45,553,1.272,556,1.227,557,1.98,559,0.303,565,0.485,568,0.609,581,1.891,587,1.98,588,2.328,591,0.285,592,0.559,600,2.401,610,2.943,620,1.98,621,0.387,625,1.871,639,1.272,641,1.018,645,0.316,650,1.98,652,1.483,665,3.642,667,0.637,668,2.943,671,2.706,676,2.107,678,1.776,703,1.37,711,2.45,718,0.423,724,1.32,729,0.213,737,1.185,755,2.64,759,0.859,760,0.95,765,2.118,772,1.398,780,2.64,784,2.64,785,1.776,788,0.952,790,2.107,796,3.132,797,0.337,810,1.32,813,1.323,814,2.411,816,0.781,817,1.736,825,1.776,827,1.091,830,2.782,831,2.67,838,1.494,860,0.501,863,2.104,866,2.943,867,1.483,869,3.277,870,0.884,885,1.227,886,0.972,897,1.691,904,1.424,908,1.98,912,1.546,938,0.364,943,1.776,957,0.378,958,1.37,959,2.706,961,2.45,963,2.259,979,2.107,987,1.424,1006,1.776,1015,0.559,1035,1.98,1041,1.964,1043,1.98,1053,2.107,1056,2.204,1071,2.178,1109,2.259,1118,1.483,1123,0.297,1128,1.871,1133,1.98,1136,3.889,1157,1.98,1161,2.706,1171,2.259,1182,1.621,1227,1.399,1258,1.776,1260,0.442,1262,0.559,1280,2.259,1333,2.107,1344,2.45,1357,1.025,1363,2.259,1412,2.45,1437,1.98,1446,5.128,1454,2.706,1462,2.259,1469,2.592,1476,0.912,1483,2.341,1493,1.776,1625,0.323,1645,2.401,1649,1.98,1651,2.037,1655,2.259,1658,1.107,1686,4.801,1762,1.98,1900,2.798,1906,1.491,1943,3.246,1955,1.776,1956,1.891,2009,0.323,2035,5.144,2064,3.132,2144,2.401,2179,1.37,2233,1.871,2234,0.378,2260,1.185,2288,3.038,2335,3.889,2338,2.259,2559,4.009,2564,0.378,2705,4.022,2706,2.706,2707,4.022,2731,2.706,2735,2.45,2808,2.259,2839,2.259,2879,2.45,2916,2.706,2992,2.706,3001,1.107,3007,2.45,3009,2.259,3023,1.776,3026,2.706,3027,2.118,3037,2.706,3142,2.401,3186,2.45,3215,3.359,3216,2.706,3265,2.259,3482,4.009,3547,2.107,3548,2.259,3549,2.45,3573,4.801,3574,3.094,3575,3.094,3576,3.094,3577,2.706,3578,3.094,3579,5.49,3580,4.6,3581,3.094,3582,3.094,3583,3.094,3584,3.094,3585,3.094,3586,4.6,3587,4.6,3588,3.094,3589,3.094,3590,3.094,3591,3.094,3592,4.6,3593,3.094,3594,3.094,3595,3.094,3596,3.094,3597,3.094,3598,3.094,3599,3.094,3600,4.6,3601,5.49,3602,4.6,3603,3.094,3604,3.094,3605,2.706,3606,3.094,3607,3.094,3608,3.094,3609,3.094,3610,3.094,3611,3.094,3612,3.094,3613,3.094,3614,3.094,3615,3.094,3616,3.094,3617,5.49,3618,3.094,3619,4.6,3620,3.094,3621,3.094,3622,3.094,3623,6.078,3624,3.094,3625,3.094,3626,3.094,3627,3.094,3628,3.094,3629,3.094,3630,3.094,3631,3.094,3632,3.094,3633,3.094,3634,3.094,3635,3.094,3636,3.094,3637,3.094,3638,3.094,3639,3.094,3640,3.094,3641,3.094,3642,3.094,3643,3.094,3644,3.094,3645,4.6,3646,3.094,3647,3.094,3648,3.094,3649,4.6,3650,3.094,3651,4.6,3652,4.813,3653,4.6,3654,2.45,3655,3.094,3656,3.094,3657,3.094,3658,3.094,3659,4.801,3660,3.094,3661,3.094,3662,4.6,3663,3.094,3664,4.6,3665,3.094,3666,3.094,3667,3.094,3668,3.094,3669,2.45,3670,3.094,3671,3.094,3672,3.094,3673,3.094]],["t/55",[308,66.117]],["h/55",[5,1.074,84,2.554,87,18.567,143,3.276,219,6.674,224,26.152,242,6.358,246,1.32,259,29.798,261,5.686,281,6.674,308,39.672,419,5.347,434,2.398,472,28.824,561,8.704,567,10.564,645,5.73,667,7.328,759,17.156,827,19.753,1485,34.237,1788,47.804,1900,38.342,2076,33.034,2196,65.952,2329,56.707]],["c/55",[0,1.075,5,0.112,6,3.191,11,2.153,16,2.023,20,0.01,23,1.3,25,1.598,26,0.932,29,2.268,30,2.058,32,0.644,33,1.098,35,0.288,38,0.512,42,1.254,43,1.059,45,1.211,47,0.54,48,1.489,49,0.191,55,1.123,57,1.294,59,0.278,62,0.056,63,0.55,64,0.236,65,0.993,67,1.143,72,0.553,73,0.747,80,0.579,84,0.188,87,1.78,89,0.705,94,0.835,101,2.143,109,0.637,110,1.179,113,0.241,116,1.211,123,0.622,124,1.728,133,0.547,136,0.979,142,1.36,143,0.27,145,1.094,146,2.503,158,1.211,164,2.462,179,0.362,185,1.993,191,1.348,193,0.161,196,0.932,200,0.962,204,1.17,210,0.903,219,0.644,224,1.929,242,0.568,246,0.104,257,0.962,259,2.608,261,0.38,265,1.17,266,0.5,279,1.134,281,0.648,282,1.211,285,0.304,287,1.17,292,0.285,300,1.17,301,0.241,302,0.241,306,0.271,307,1.267,308,2.4,309,1.672,311,1.728,314,4.962,315,1.075,316,0.823,344,1.617,345,2.336,359,0.304,365,0.495,375,1.455,386,1.094,396,1.059,397,0.172,403,2.345,405,1.059,407,1.929,410,1.059,412,0.291,415,1.565,419,0.357,421,1.598,434,0.21,445,2.308,455,0.437,461,1.73,462,1.914,472,2.375,478,1.211,489,1.815,490,1.254,492,2.683,493,1.17,501,2.126,503,0.75,515,2.56,543,1.447,547,0.495,549,0.773,552,2.503,559,0.29,561,0.581,565,0.495,566,2.503,567,0.87,568,1.35,571,1.211,574,0.919,588,1.211,589,1.868,590,1.3,591,0.291,592,0.291,612,1.651,621,0.393,641,1.337,642,0.849,645,0.383,663,1.515,667,0.604,674,1.924,685,1.58,694,2.787,696,1.455,697,2.954,698,2.336,699,3.182,700,2.695,701,2.56,702,2.268,703,2.462,705,2.683,709,1.921,710,1.815,718,0.291,722,2.308,723,1.58,729,0.217,737,2.129,739,2.44,740,2.44,744,2.462,745,2.153,746,2.308,747,2.023,755,1.815,757,2.683,759,1.185,760,0.547,772,1.413,773,1.815,781,3.93,782,1.651,783,3.182,784,2.683,786,2.462,787,1.515,788,1.027,797,0.344,798,1.912,813,1.172,814,1.254,816,1.179,817,1.588,827,1.98,831,2.286,836,2.092,838,1.413,850,2.765,860,1.226,863,1.617,870,0.903,874,1.815,881,2.779,886,0.993,889,1.348,895,1.286,911,1.094,917,1.17,931,2.56,938,0.372,939,2.07,951,2.153,957,0.386,958,2.07,969,1.912,995,1.58,1006,2.683,1012,3.762,1015,0.291,1036,1.455,1041,1.131,1071,1.254,1123,0.304,1159,3.362,1182,0.727,1186,0.798,1206,2.308,1231,1.4,1242,3.526,1245,1.131,1260,0.304,1262,0.631,1264,2.503,1271,3.701,1357,1.24,1408,2.44,1421,2.99,1436,1.455,1444,1.58,1471,2.336,1476,1.377,1483,1.348,1485,2.695,1488,4.182,1625,0.33,1645,2.44,1668,2.023,1674,1.815,1705,4.183,1766,1.651,1784,1.815,1788,3.938,1834,1.098,1871,2.765,1900,3.268,1940,2.765,1955,1.815,1956,1.3,1959,2.99,1963,1.651,1968,2.503,1969,3.701,1984,1.815,1985,2.152,1987,1.651,2009,0.33,2076,2.722,2093,2.308,2114,1.335,2149,2.503,2150,2.503,2152,2.765,2174,2.153,2196,6.365,2234,0.386,2260,2.353,2288,1.58,2329,4.182,2335,3.93,2346,2.503,2376,2.153,2443,2.503,2479,3.182,2501,2.023,2519,2.308,2559,2.308,2564,0.386,2723,1.815,2743,1.515,2764,2.153,2787,2.503,2810,2.503,3001,1.989,3050,3.412,3072,2.765,3198,1.58,3199,1.58,3200,1.58,3201,1.515,3202,1.728,3203,1.728,3239,1.815,3240,1.728,3241,1.651,3242,1.912,3329,2.503,3341,2.153,3480,2.308,3526,2.503,3537,2.336,3659,2.765,3674,3.161,3675,2.765,3676,3.161,3677,5.56,3678,2.308,3679,4.403,3680,3.161,3681,4.087,3682,3.161,3683,3.161,3684,3.161,3685,3.161,3686,3.161,3687,3.161,3688,3.161,3689,3.161,3690,2.765,3691,2.765,3692,2.765,3693,2.765,3694,2.765,3695,3.161,3696,3.161,3697,2.765,3698,2.765,3699,2.765,3700,2.765,3701,2.765,3702,2.765,3703,2.765,3704,2.765,3705,2.023]],["t/56",[759,25.817,1411,61.196]],["h/56",[84,4.484,242,11.164,434,4.21,759,20.662,1411,48.978]],["c/56",[5,0.081,20,0.012,35,0.453,38,0.576,47,0.431,49,0.256,59,0.551,62,0.056,63,0.59,64,0.253,72,0.431,80,0.568,84,0.24,143,0.246,179,0.48,193,0.319,242,0.649,287,2.316,292,0.235,301,0.478,302,0.478,306,0.363,359,0.48,397,0.341,412,0.576,434,0.225,455,0.453,547,0.98,559,0.256,591,0.576,592,0.576,621,0.619,718,0.576,729,0.431,759,1.143,760,1.083,1015,0.576,1123,0.602,1182,1.439,1186,1.579,1260,0.602,1262,0.678,1411,2.799,1499,4.57,1625,0.654,1834,1.119,2009,0.654,2895,5.473,3705,4.005,3706,6.259,3707,6.259,3708,6.259,3709,6.259,3710,6.259,3711,6.259,3712,6.259]],["t/57",[39,66.117]],["h/57",[39,38.18,242,10.528,246,2.705,261,9.414,310,68.914,419,8.854]],["c/57",[0,1.283,1,2.38,5,0.103,20,0.012,32,0.447,35,0.423,39,2.39,43,1.869,47,0.384,48,1.098,49,0.228,50,2.268,59,0.491,62,0.055,63,0.551,64,0.237,72,0.513,80,0.564,89,1.244,100,4.401,101,1.498,113,0.426,133,0.966,138,1.869,142,1.682,143,0.22,193,0.285,196,1.645,211,3.375,242,0.636,246,0.134,258,3.571,261,0.47,270,2.789,281,0.447,282,2.855,285,0.536,292,0.306,300,2.759,301,0.426,302,0.426,306,0.323,307,1.436,310,3.726,332,3.375,359,0.507,365,0.874,396,2.726,397,0.304,399,3.271,402,3.046,412,0.514,419,0.479,434,0.161,455,0.423,460,2.472,461,2.065,491,2.675,543,1.79,559,0.281,591,0.514,592,0.514,620,3.571,621,0.578,628,3.051,641,0.935,651,4.881,652,3.83,672,2.38,718,0.514,719,3.8,724,2.38,727,4.42,729,0.384,760,1.29,788,0.874,796,3.8,797,0.607,860,0.904,878,5.022,895,0.935,908,4.77,938,0.657,957,0.682,1014,4.401,1015,0.514,1123,0.536,1260,0.536,1262,0.633,1356,4.075,1437,3.571,1462,4.075,1625,0.583,2009,0.583,2233,3.375,2234,0.682,2312,4.881,2564,0.682,2633,4.881,3007,4.42,3008,4.881,3009,4.075,3547,4.683,3548,5.022,3549,5.446,3577,6.519,3713,5.581,3714,4.075,3715,5.581,3716,5.581,3717,5.581,3718,5.581]],["t/58",[1182,42.016,1411,61.196]],["h/58",[5,1.74,84,2.962,143,3.799,242,7.374,261,6.594,315,12.708,396,32.35,419,8.666,434,2.781,472,33.429,561,10.094,567,12.252,645,6.645,771,46.293,772,22.211,1182,31.037,1411,45.205,2076,38.312]],["c/58",[5,0.111,20,0.011,25,1.181,32,0.618,35,0.371,38,0.555,43,1.521,47,0.53,48,1.185,49,0.246,56,1.624,59,0.399,62,0.057,63,0.601,64,0.265,65,1.426,67,1.474,71,1.145,72,0.53,73,0.656,77,1.426,80,0.579,84,0.221,113,0.346,123,0.893,139,1.571,143,0.295,179,0.469,193,0.232,200,1.381,219,0.648,242,0.617,246,0.096,257,0.711,259,2.156,261,0.411,266,0.55,271,2.746,281,0.577,285,0.436,292,0.282,301,0.346,302,0.46,303,2.09,306,0.263,307,0.838,315,1.09,316,2.047,359,0.392,396,2.634,397,0.247,405,2.413,408,2.667,412,0.418,419,0.495,434,0.216,454,3.315,455,0.461,472,2.722,515,2.774,533,3.091,547,0.711,549,1.111,550,2.482,556,1.801,559,0.295,561,0.707,565,1.306,567,1.013,568,0.893,574,0.893,589,2.483,591,0.418,592,0.418,621,0.506,641,0.76,642,1.219,645,0.465,674,1.571,700,1.866,705,2.606,710,2.606,718,0.418,722,3.315,729,0.312,737,1.739,747,2.905,748,3.971,755,2.606,759,1.018,760,1.043,765,1.617,771,3.945,772,1.877,788,0.944,797,0.494,807,1.381,827,1.077,860,1.096,881,3.012,886,1.426,895,1.133,903,3.644,934,2.746,938,0.534,957,0.555,966,2.09,1015,0.418,1040,3.595,1123,0.436,1182,1.993,1214,2.606,1227,2.192,1260,0.436,1262,0.69,1272,1.297,1357,1.012,1411,2.912,1428,3.698,1460,3.315,1625,0.474,1648,4.932,1649,2.905,1681,2.37,1683,3.595,1714,3.595,1721,2.37,1830,2.176,1834,0.812,1889,2.606,2009,0.474,2076,3.12,2093,3.315,2114,1.297,2234,0.555,2319,4.606,2375,2.905,2504,2.606,2564,0.555,2678,4.4,2856,2.269,2941,2.606,2966,2.746,3001,2.42,3030,3.971,3142,2.37,3169,3.971,3237,3.971,3239,2.606,3462,5.27,3678,3.315,3719,3.971,3720,4.54,3721,4.54,3722,4.54,3723,5.27,3724,4.54,3725,4.54,3726,4.54,3727,6.026,3728,6.026,3729,4.54,3730,4.54,3731,4.54,3732,3.595]],["t/59",[1411,79.979]],["h/59",[225,58.805,242,10.528,246,2.186,261,9.414,434,3.97,1411,46.185,1648,88.235]],["c/59",[5,0.097,20,0.011,30,2.098,33,0.949,35,0.427,39,1.922,47,0.516,49,0.232,59,0.499,62,0.057,63,0.556,64,0.258,71,1.43,72,0.516,73,0.617,80,0.592,92,2.33,94,1.241,123,1.115,131,2.959,133,0.981,140,2.854,193,0.354,204,2.098,225,3.336,242,0.638,246,0.127,251,2.833,257,0.888,261,0.474,265,2.098,273,2.778,279,1.046,281,0.454,292,0.282,301,0.432,302,0.432,303,3.602,304,4.803,306,0.329,307,1.046,359,0.452,365,0.888,368,2.717,385,3.859,397,0.309,412,0.522,434,0.216,455,0.427,459,3.253,469,3.428,473,2.098,483,2.248,559,0.232,565,1.088,591,0.522,592,0.522,615,3.428,621,0.583,627,2.717,685,2.833,707,1.569,718,0.522,729,0.39,756,3.859,759,0.981,760,0.981,772,1.799,799,2.609,979,3.859,984,3.627,1015,0.522,1033,2.028,1034,3.627,1123,0.545,1146,4.139,1179,3.627,1182,1.846,1214,3.253,1260,0.545,1262,0.639,1408,2.959,1409,4.199,1411,2.916,1430,4.489,1489,4.489,1625,0.592,1648,5.006,1721,2.959,1935,3.796,1984,3.253,2009,0.592,2240,4.489,2290,5.944,2831,4.139,3017,4.957,3477,4.957,3478,6.072,3479,6.072,3480,4.139,3719,4.957,3733,5.668,3734,5.668,3735,5.668,3736,5.668]],["t/60",[952,87.571,1136,116.913]],["h/60",[242,9.96,246,2.068,261,8.906,419,8.376,434,3.756,483,51.745,915,65.196,952,62.525,1136,83.475]],["c/60",[5,0.114,15,3.266,20,0.011,21,1.837,26,1.841,32,0.639,35,0.384,39,1.328,47,0.43,48,1.367,49,0.196,54,1.66,55,1.229,56,2.634,59,0.422,62,0.054,63,0.557,64,0.239,71,1.21,72,0.43,73,0.522,80,0.554,109,1.087,113,0.366,124,2.622,133,1.081,164,2.767,193,0.245,242,0.617,246,0.131,250,1.775,254,2.622,261,0.427,281,0.384,285,0.461,292,0.277,301,0.366,302,0.366,306,0.278,307,1.283,315,0.969,322,2.162,327,3.586,334,1.37,356,6.077,359,0.407,365,0.751,397,0.261,407,2.312,412,0.441,415,1.606,419,0.446,434,0.2,446,2.299,455,0.427,460,2.124,479,2.124,483,3.161,502,2.045,503,1.482,549,1.801,559,0.256,567,0.792,591,0.441,592,0.441,595,5.228,613,2.045,621,0.525,641,0.803,683,1.972,716,3.069,718,0.441,724,2.045,729,0.33,760,1.081,765,2.212,788,1.153,797,0.522,813,0.857,814,2.478,815,2.162,816,1.21,824,2.753,827,1.138,843,2.504,860,1.237,889,2.045,895,1.278,904,2.208,915,4.083,938,0.564,939,2.124,952,3.916,957,0.586,1015,0.441,1123,0.461,1136,5.494,1159,2.9,1168,3.266,1195,3.502,1260,0.461,1262,0.639,1278,2.299,1311,2.622,1326,3.069,1357,1.549,1453,3.069,1460,4.562,1478,3.502,1483,2.664,1625,0.501,1655,4.562,1943,3.122,1984,3.586,2009,0.501,2114,1.985,2174,3.266,2234,0.586,2316,3.122,2478,5.502,2564,0.586,2586,4.947,3027,3.389,3028,4.947,3073,3.122,3171,3.798,3265,3.502,3737,4.796,3738,4.194,3739,6.247,3740,4.194,3741,6.247,3742,4.796,3743,4.796,3744,4.796,3745,4.796,3746,6.247,3747,5.464,3748,6.948,3749,4.796,3750,4.796,3751,4.796,3752,4.796,3753,4.796,3754,4.796,3755,4.796,3756,4.796,3757,4.796,3758,4.796,3759,4.796,3760,6.247,3761,4.796,3762,4.796,3763,4.796,3764,4.796,3765,4.796,3766,4.796,3767,4.796]],["t/61",[1681,124.674]],["h/61",[57,22.291,73,8.761,84,2.469,143,3.167,224,25.282,242,6.147,246,1.276,261,5.496,419,7.605,432,46.212,434,2.318,561,8.414,576,46.212,588,30.836,667,7.084,934,48.687,1019,86.484,1421,51.516,1681,42.034,1723,48.687,1724,63.756,1820,63.756,2109,46.212,2171,42.034,2201,35.652,2233,48.687,2504,46.212,3458,54.819,3570,58.787,3768,70.409]],["c/61",[0,0.615,1,0.67,2,0.723,5,0.114,8,1.07,20,0.008,21,0.602,25,1.905,32,0.591,33,0.773,35,0.164,36,1.07,38,0.246,39,1.14,42,0.623,43,0.526,47,0.469,48,0.81,49,0.064,57,1.917,59,0.138,62,0.055,63,0.402,64,0.235,67,1.311,70,1.147,72,0.476,73,0.886,77,1.45,80,0.515,84,0.142,86,2.635,89,0.918,90,1.859,92,0.646,93,3.14,94,0.825,95,1.005,98,1.396,101,1.514,108,1.534,109,0.998,110,0.396,113,0.314,119,0.602,123,0.81,127,1.147,133,0.799,136,1.182,140,1.099,142,1.007,143,0.268,144,0.95,145,1.208,150,3.518,151,1.231,158,2.568,162,1.652,164,0.696,165,0.646,176,3.153,179,0.174,185,0.67,191,1.488,193,0.178,200,2.184,201,0.95,204,1.291,215,1.151,217,1.147,224,2.443,225,0.67,226,1.024,230,1.07,231,0.615,241,0.723,242,0.449,243,1.425,246,0.093,251,0.785,256,0.902,258,1.71,259,0.956,260,1.693,261,0.343,266,0.491,279,0.927,281,0.126,285,0.151,287,1.524,292,0.315,293,0.989,301,0.12,302,0.12,303,0.723,306,0.091,307,0.29,308,1.484,310,2.307,315,0.826,322,0.925,323,1.071,329,2.307,330,1.244,334,1.176,344,0.544,345,1.744,355,0.925,359,0.174,365,0.547,368,1.973,375,1.231,378,0.902,379,1.005,385,1.07,386,1.208,391,1.896,397,0.086,402,0.696,403,1.248,407,0.493,411,2.407,412,0.145,415,0.526,419,0.466,421,0.696,424,1.147,427,1.005,429,1.672,431,1.973,432,3.497,434,0.154,438,1.024,443,2.251,454,1.952,455,0.33,456,1.184,459,0.902,460,0.696,462,0.802,473,1.291,477,0.785,479,3.107,481,1.71,482,2.363,487,1.244,490,1.384,491,0.753,493,0.581,494,1.14,497,1.374,500,3.231,501,2.843,502,3.093,503,1.618,504,2.843,505,2.51,516,3.187,520,0.989,540,0.723,543,1.201,544,1.628,547,0.246,549,0.854,550,1.461,553,2.757,556,1.06,557,1.71,559,0.263,561,0.365,564,1.07,565,1.068,568,0.309,571,2.052,572,0.67,574,0.526,576,4.163,580,0.67,581,2.646,582,1.07,588,2.979,589,1.253,590,1.099,591,0.145,592,0.145,594,1.244,598,0.859,621,0.225,624,1.07,627,0.753,630,1.07,635,0.95,641,0.689,642,0.422,646,1.616,654,1.244,658,1.461,664,0.753,667,0.687,668,1.005,672,1.756,674,2.574,678,1.534,680,0.723,683,1.099,685,0.785,693,0.859,702,0.544,707,0.74,715,0.723,716,1.005,718,0.145,719,2.376,724,1.14,729,0.184,737,1.024,760,0.799,765,2.194,772,1.297,779,1.534,785,0.902,788,1.195,797,0.171,804,1.374,807,1.404,810,0.67,813,1.254,814,2.817,815,2.36,816,1.484,817,1.916,825,4.465,831,1.099,838,1.88,860,0.748,867,1.281,870,2.051,873,1.616,874,0.902,875,1.147,881,1.336,885,1.06,889,1.488,895,0.773,898,1.374,902,1.374,904,0.723,906,0.95,911,1.855,915,1.336,919,1.147,921,2.798,925,2.568,934,4.295,936,1.147,938,0.185,943,0.902,952,0.753,957,0.192,993,2.745,1015,0.145,1019,5.837,1020,1.099,1022,2.792,1033,1.473,1095,3.833,1107,1.244,1111,0.95,1123,0.151,1128,0.95,1157,2.635,1159,3.037,1182,0.615,1214,0.902,1227,0.478,1232,1.374,1235,1.147,1252,1.534,1258,3.238,1260,0.151,1262,0.462,1272,0.997,1278,2.213,1279,1.374,1302,1.244,1304,2.117,1320,1.374,1321,1.147,1357,0.918,1413,0.95,1421,4.118,1439,1.616,1453,1.71,1461,1.952,1469,3.303,1474,2.524,1479,0.95,1480,1.07,1482,0.753,1483,1.969,1484,1.534,1493,0.902,1495,1.374,1499,1.147,1625,0.164,1645,2.622,1646,1.374,1651,2.606,1658,1.473,1659,1.374,1674,2.65,1680,3.051,1681,4.538,1688,2.213,1694,3.974,1723,4.187,1724,5.625,1734,3.143,1762,2.954,1771,1.374,1820,6.449,1830,1.973,1845,1.82,1868,5.328,1900,1.231,1906,2.63,1943,2.058,1955,1.534,1956,2.203,1975,2.117,2009,0.164,2057,1.244,2061,1.147,2096,2.363,2109,4.201,2154,1.184,2171,4.243,2179,3.02,2199,3.051,2201,3.599,2220,1.952,2223,1.822,2233,2.49,2234,0.426,2237,1.374,2238,1.616,2249,1.374,2260,2.568,2288,2.678,2291,1.374,2338,3.007,2452,3.371,2462,1.374,2501,1.71,2504,4.028,2543,1.005,2564,0.192,2573,1.244,2627,1.374,2630,3.007,2695,1.244,2769,1.374,2839,2.548,2855,6.16,2856,3.589,2874,1.147,2914,1.244,3027,3.596,3073,2.941,3074,5.483,3099,3.656,3129,2.338,3183,4.896,3184,2.338,3246,3.051,3362,1.374,3440,2.763,3458,4.382,3476,2.548,3481,1.374,3482,1.147,3486,1.244,3487,2.117,3488,4.243,3537,0.785,3570,2.548,3652,2.117,3654,2.117,3669,3.977,3768,3.601,3769,1.571,3770,1.571,3771,1.374,3772,1.571,3773,6.578,3774,1.571,3775,1.571,3776,1.571,3777,1.571,3778,1.571,3779,3.489,3780,3.489,3781,3.489,3782,3.489,3783,3.489,3784,3.489,3785,3.489,3786,2.673,3787,4.117,3788,2.673,3789,2.673,3790,2.673,3791,2.673,3792,6.578,3793,6.773,3794,3.489,3795,1.571,3796,1.571,3797,1.374,3798,1.571,3799,1.571,3800,1.571,3801,3.489,3802,4.117,3803,1.571,3804,2.673,3805,2.673,3806,1.571,3807,1.571,3808,1.571,3809,1.571,3810,1.571,3811,1.571,3812,1.571,3813,1.571,3814,2.673,3815,1.571,3816,1.571,3817,1.571,3818,1.571,3819,1.571,3820,1.571,3821,1.571,3822,1.571,3823,1.571,3824,1.571,3825,1.571,3826,2.338,3827,2.673,3828,1.571,3829,1.571,3830,1.571,3831,1.571,3832,2.673,3833,1.571,3834,1.571,3835,1.571,3836,2.673,3837,1.571,3838,1.571,3839,1.571,3840,1.571,3841,2.673,3842,2.338,3843,1.571,3844,1.244,3845,2.673,3846,1.571,3847,1.571,3848,1.571,3849,1.571,3850,1.571,3851,3.489,3852,1.571,3853,1.571,3854,4.616,3855,4.616,3856,1.571,3857,1.244,3858,1.571,3859,1.571,3860,1.571,3861,1.571,3862,1.571,3863,1.571,3864,1.571,3865,1.571,3866,1.571,3867,1.571,3868,1.571,3869,1.571,3870,1.571,3871,1.571,3872,1.147,3873,2.673,3874,1.571,3875,1.571,3876,3.489,3877,1.571,3878,1.571,3879,1.571,3880,1.571,3881,1.571,3882,1.374,3883,1.571,3884,1.374,3885,1.571,3886,1.571]],["t/62",[565,37.408]],["h/62",[5,1.556,84,3.701,242,9.214,261,8.239,419,7.749,434,3.475,472,41.77,561,12.613,565,18.906,567,15.309,645,8.303,2076,47.871]],["c/62",[5,0.1,20,0.012,25,1.426,32,0.545,35,0.418,38,0.504,47,0.509,48,1.078,49,0.278,59,0.482,62,0.057,63,0.619,64,0.266,72,0.468,73,0.804,77,1.72,80,0.561,84,0.227,113,0.418,138,1.835,142,1.34,143,0.215,179,0.482,193,0.279,219,0.658,242,0.639,261,0.464,281,0.439,285,0.527,292,0.278,301,0.418,302,0.418,306,0.318,309,1.96,315,1.066,316,1.426,359,0.443,397,0.298,405,2.277,408,2.516,412,0.504,419,0.475,434,0.223,455,0.476,456,2.426,462,1.563,471,2.738,472,2.804,483,2.173,547,0.858,559,0.278,561,0.773,565,1.338,567,1.028,574,1.078,589,2.068,591,0.504,592,0.504,621,0.571,641,0.917,642,1.47,645,0.509,674,1.896,694,2.277,710,3.145,718,0.504,729,0.377,737,2.098,759,1.092,760,0.948,772,1.828,783,3.73,788,1.211,797,0.596,807,2.068,816,1.715,827,1.299,860,0.887,881,3.398,895,0.917,904,2.522,912,2.738,938,0.645,957,0.67,986,4.338,1015,0.504,1093,3.506,1123,0.527,1182,1.778,1186,1.382,1227,2.068,1260,0.527,1262,0.711,1357,1.516,1411,2.476,1625,0.573,1714,4.338,1834,0.979,2009,0.573,2076,3.213,2234,0.67,2361,4.791,2564,0.67,3001,1.96,3678,4,3723,4.791,3887,4.791,3888,4.338,3889,6.761]],["t/63",[837,110.492,2120,104.876]],["h/63",[84,3.291,143,4.221,215,15.162,242,8.192,261,7.325,315,14.118,419,9.316,434,3.089,568,21.109,667,9.442,759,15.162,837,64.889,838,24.675,1251,56.022,2114,30.651,2120,61.591]],["c/63",[5,0.112,20,0.011,32,0.528,35,0.405,38,0.606,47,0.55,49,0.213,59,0.458,62,0.057,63,0.608,64,0.261,72,0.55,80,0.596,84,0.221,101,1.397,109,0.898,113,0.397,143,0.326,179,0.429,193,0.265,215,1.172,242,0.627,261,0.449,266,0.502,281,0.417,285,0.5,292,0.196,301,0.397,302,0.397,306,0.302,315,1.106,359,0.429,375,2.396,397,0.283,412,0.479,419,0.532,421,1.354,434,0.219,455,0.467,503,1.562,547,0.815,559,0.32,568,1.54,591,0.479,592,0.479,621,0.553,641,0.871,667,0.668,707,1.823,718,0.479,729,0.358,759,1.181,765,2.101,797,0.566,837,5.084,838,1.921,867,2.494,911,1.801,938,0.612,957,0.636,1015,0.479,1020,2.139,1041,2.356,1071,2.611,1118,2.494,1123,0.5,1251,4.362,1260,0.5,1262,0.698,1413,3.147,1625,0.544,1834,0.93,2009,0.544,2114,2.387,2120,4.85,2144,3.437,2145,3.981,2234,0.636,2436,3.981,2564,0.636,3165,4.121,3350,5.758,3872,4.807,3890,5.204,3891,5.204,3892,5.204,3893,5.204,3894,4.551,3895,4.551,3896,5.204,3897,4.551,3898,4.551,3899,4.551,3900,4.551,3901,7.589,3902,6.583,3903,4.551,3904,4.551,3905,4.551]],["t/64",[55,26.733,1436,84.117]],["h/64",[55,23.261,84,3.085,219,11.126,242,7.681,246,1.595,261,6.868,316,26.18,419,6.46,434,2.896,472,34.819,561,10.514,567,12.762,589,30.604,667,8.853,1436,46.317,1485,41.359,2076,39.905]],["c/64",[5,0.09,20,0.011,22,1.285,32,0.638,35,0.384,38,0.441,47,0.548,48,0.942,49,0.196,55,1.267,59,0.421,62,0.057,63,0.611,64,0.262,72,0.548,73,0.801,80,0.598,84,0.213,89,1.068,94,0.856,109,0.851,113,0.365,116,1.834,143,0.188,179,0.407,185,2.662,193,0.244,219,0.655,235,2.042,242,0.617,246,0.121,257,0.75,261,0.426,266,0.53,279,0.884,281,0.384,285,0.46,292,0.261,301,0.365,302,0.365,305,2.31,306,0.278,307,1.152,309,1.714,315,1.004,316,1.807,359,0.407,365,0.75,397,0.261,402,2.121,405,2.76,408,3.05,412,0.441,419,0.446,434,0.212,455,0.469,461,1.772,462,1.435,472,2.758,493,2.31,543,1.246,547,0.75,549,1.172,559,0.255,561,0.726,565,1.368,567,0.992,589,2.321,591,0.441,592,0.441,621,0.524,641,0.802,642,1.285,667,0.711,707,1.326,718,0.441,729,0.329,759,1.078,772,1.597,788,1.153,797,0.521,817,1.783,836,2.348,860,1.011,881,3.119,894,3.387,895,1.045,911,1.658,938,0.564,957,0.585,958,2.764,1015,0.441,1056,2.295,1057,3.261,1118,2.295,1123,0.46,1186,1.925,1227,2.507,1245,1.714,1260,0.46,1262,0.702,1272,1.368,1307,3.497,1322,2.749,1357,1.548,1436,3.974,1471,3.119,1476,1.412,1485,3.137,1625,0.501,1784,2.749,1834,0.856,1985,2.874,2009,0.501,2076,3.16,2171,2.5,2234,0.585,2247,3.261,2564,0.585,2743,2.295,3001,1.714,3023,3.583,3198,2.393,3199,2.393,3200,2.393,3201,2.295,3906,4.789,3907,4.188]],["t/65",[2120,104.876,2181,133.413]],["h/65",[84,3.443,143,5.884,242,8.572,261,7.665,315,14.773,419,9.604,434,3.233,568,22.089,759,15.866,1906,36.408,2120,64.45,2155,67.902,2181,81.988]],["c/65",[5,0.112,20,0.011,32,0.582,35,0.408,38,0.611,47,0.541,49,0.216,59,0.464,62,0.056,63,0.611,64,0.262,72,0.541,80,0.591,84,0.223,101,1.415,113,0.402,143,0.327,179,0.432,193,0.269,215,1.134,242,0.629,257,0.826,261,0.453,266,0.402,281,0.422,285,0.507,292,0.198,301,0.402,302,0.402,306,0.306,315,1.114,316,1.727,323,1.372,359,0.432,375,2.427,397,0.287,412,0.668,419,0.523,421,1.727,434,0.22,446,2.526,455,0.469,503,1.574,547,0.826,556,2.091,559,0.312,568,1.546,591,0.485,592,0.485,621,0.558,641,0.883,707,1.459,718,0.485,729,0.363,759,1.201,765,2.109,797,0.574,860,0.854,863,1.824,867,2.526,878,4.846,895,0.883,911,1.824,938,0.62,957,0.644,958,2.334,1015,0.485,1020,2.167,1041,2.375,1071,2.633,1085,4.61,1118,2.526,1123,0.507,1251,3.465,1260,0.507,1262,0.702,1263,4.61,1413,4.014,1625,0.551,1834,0.942,1906,2.601,2009,0.551,2114,2.245,2120,4.859,2155,4.752,2181,5.947,2234,0.644,2436,4.014,2501,3.373,2564,0.644,3872,4.846,3894,4.61,3895,4.61,3897,4.61,3898,4.61,3899,4.61,3900,4.61,3903,4.61,3904,4.61,3908,5.271,3909,7.625,3910,5.271,3911,5.271,3912,7.625,3913,6.637]],["t/66",[1674,137.066]],["h/66",[84,2.554,87,18.567,143,6.194,215,11.768,226,54.878,242,6.358,246,1.32,261,5.686,419,7.796,434,2.398,561,8.704,567,15.401,759,11.768,827,19.753,1242,47.804,1251,63.391,1674,47.804,1830,39.916,1955,47.804,1956,34.237,2201,36.88,3516,60.811]],["c/66",[5,0.107,20,0.011,23,1.643,32,0.645,33,0.926,35,0.34,38,0.509,43,1.339,47,0.548,48,0.786,49,0.163,57,2.107,59,0.352,62,0.057,63,0.61,64,0.262,67,0.978,72,0.566,73,0.69,80,0.593,84,0.194,87,1.835,101,1.992,109,0.754,113,0.305,116,1.531,133,0.692,136,1.158,142,0.978,143,0.328,145,1.383,146,3.165,165,1.643,179,0.36,191,1.705,193,0.204,210,1.142,215,1.075,226,3.198,235,1.705,242,0.592,246,0.114,257,0.866,261,0.377,266,0.566,279,1.262,281,0.32,285,0.384,287,1.479,292,0.279,293,1.479,301,0.305,302,0.305,306,0.32,307,1.325,308,2.107,309,1.43,311,2.185,315,1.11,316,1.04,323,1.04,344,1.913,355,2.193,359,0.36,365,0.626,397,0.218,407,1.736,410,1.339,412,0.368,415,1.339,419,0.505,421,1.438,434,0.219,455,0.477,461,1.479,462,1.903,478,1.531,490,1.585,493,1.479,503,1.503,520,1.479,540,1.84,543,1.438,547,0.626,549,0.978,559,0.294,561,0.662,562,3.464,565,0.626,567,0.999,568,1.247,571,2.117,580,1.705,581,1.643,589,1.928,591,0.368,592,0.368,621,0.464,641,1.299,642,1.701,663,1.916,667,0.486,694,2.833,696,1.84,697,3.004,700,2.95,701,2.917,702,2.193,703,2.806,709,2.272,718,0.368,723,1.998,729,0.275,737,2.117,739,2.886,740,2.886,744,1.77,759,1.163,760,0.692,765,1.073,772,0.919,782,2.087,786,1.77,787,1.916,788,0.993,797,0.435,798,2.417,813,1.133,815,1.913,827,1.952,831,2.272,836,2.188,860,0.895,863,1.383,870,1.81,889,1.705,895,0.669,904,1.84,911,1.383,917,1.479,938,0.47,957,0.488,987,2.545,995,1.998,1006,3.173,1015,0.368,1020,1.643,1036,1.84,1123,0.384,1158,2.722,1178,1.479,1206,2.918,1227,1.216,1231,1.77,1242,4.261,1251,4.375,1260,0.384,1262,0.7,1272,1.142,1357,0.891,1415,4.036,1437,2.558,1444,1.998,1625,0.418,1674,4.81,1766,2.087,1774,4.627,1830,3.647,1834,1.222,1906,1.792,1955,3.924,1956,2.811,1963,2.087,1985,2.545,1987,2.087,2009,0.418,2061,4.627,2149,3.165,2150,3.165,2154,1.77,2201,2.806,2234,0.488,2406,4.377,2439,4.834,2490,5.541,2504,2.294,2564,0.488,2723,2.294,2743,1.916,3198,1.998,3199,1.998,3200,1.998,3201,1.916,3202,2.185,3203,2.185,3239,2.294,3240,2.185,3241,2.087,3242,2.417,3247,3.495,3249,4.377,3340,3.495,3341,2.722,3377,4.036,3516,4.627,3537,2.762,3704,3.495,3705,2.558,3914,3.997,3915,7.872,3916,4.834,3917,3.997,3918,3.997]],["t/67",[50,55.58,433,116.913]],["h/67",[50,37.652,84,3.796,215,17.49,242,9.45,261,8.45,282,47.407,419,7.947,433,79.202,630,84.28,667,10.892,1469,52.786]],["c/67",[5,0.112,20,0.011,32,0.623,35,0.399,38,0.715,42,2.013,47,0.535,49,0.208,50,2.574,59,0.447,62,0.057,63,0.572,64,0.245,71,1.28,72,0.535,80,0.586,84,0.219,101,1.916,109,0.692,113,0.387,123,0.998,140,2.086,142,1.241,143,0.281,165,2.086,179,0.422,185,2.164,193,0.259,207,2.57,215,1.141,242,0.624,250,1.878,253,2.774,257,1.015,260,2.086,261,0.487,266,0.387,279,0.937,281,0.407,282,3.132,285,0.488,292,0.244,301,0.387,302,0.387,305,1.878,306,0.294,308,2.082,315,0.989,359,0.422,397,0.276,412,0.467,418,2.336,419,0.499,433,5.498,438,1.944,446,2.432,455,0.399,459,4.097,475,2.913,500,3.286,503,1.537,543,1.321,547,0.795,559,0.208,591,0.467,592,0.467,621,0.544,627,2.432,630,5.567,641,1.259,656,3.069,664,2.432,667,0.699,669,2.247,697,2.398,700,2.086,718,0.467,729,0.349,759,0.916,765,1.916,770,3.706,788,0.795,790,3.456,791,4.731,797,0.552,813,0.907,814,2.013,838,1.167,870,1.45,886,2.035,912,2.536,938,0.597,957,0.62,996,3.706,1015,0.467,1027,3.456,1041,1.816,1043,3.247,1071,2.013,1111,3.069,1118,2.432,1123,0.488,1159,3.069,1244,4.019,1260,0.488,1262,0.596,1343,3.247,1357,1.445,1401,4.438,1469,3.313,1471,2.536,1474,2.774,1476,1.496,1483,2.763,1625,0.53,1634,4.019,1775,4.019,1834,0.907,1900,3.286,1933,4.019,1943,3.238,1956,2.086,2009,0.53,2234,0.792,2557,4.438,2564,0.62,3027,2.983,3073,3.567,3844,4.019,3888,4.019,3919,5.075,3920,5.075,3921,5.075,3922,6.479,3923,6.479,3924,5.075,3925,5.075,3926,5.075,3927,5.075,3928,5.075,3929,5.075,3930,6.479,3931,5.075,3932,6.479,3933,5.075,3934,5.075,3935,5.075,3936,5.075,3937,5.075,3938,5.075,3939,6.479]],["t/68",[1691,162.595]],["h/68",[84,2.795,143,5.096,179,5.935,219,10.381,242,6.957,246,1.444,261,6.221,315,17.045,419,8.318,561,9.524,567,11.56,629,55.108,645,6.269,667,8.019,759,12.876,780,52.307,891,72.165,1691,62.049,1723,55.108,2479,62.049,3537,45.542]],["c/68",[5,0.113,20,0.011,25,1.7,26,1.697,32,0.619,33,0.71,35,0.354,38,0.53,47,0.555,49,0.235,57,1.594,59,0.373,62,0.055,63,0.587,64,0.252,65,1.332,72,0.56,73,0.461,80,0.598,84,0.2,94,0.758,97,2.434,101,1.967,109,0.956,113,0.324,123,1.285,133,0.734,140,1.743,143,0.317,179,0.477,193,0.216,195,3.358,204,1.569,215,1.092,219,0.661,224,1.332,242,0.609,246,0.125,257,1.232,261,0.446,266,0.499,281,0.34,285,0.408,287,1.569,292,0.308,301,0.324,302,0.324,306,0.246,307,1.063,315,1.128,340,3.147,355,2.262,359,0.375,365,0.664,368,2.032,375,3.008,397,0.231,412,0.39,419,0.533,421,1.498,455,0.451,461,1.569,492,2.434,500,1.952,501,2.262,502,2.455,503,1.365,504,1.992,520,1.569,532,3.919,543,1.103,544,1.375,547,0.664,549,1.037,559,0.267,561,0.683,565,0.664,567,0.959,568,0.834,571,1.624,574,0.834,591,0.39,592,0.39,621,0.484,624,2.887,629,4.431,641,1.094,642,1.545,645,0.45,667,0.665,669,1.878,674,2.426,693,2.318,718,0.39,729,0.292,733,3.358,737,2.205,759,1.068,765,2.028,772,1.324,780,4.737,788,0.664,797,0.461,799,1.952,813,1.168,816,1.452,827,1.006,831,1.743,836,1.926,860,0.932,870,1.211,886,2.052,891,5.803,895,0.964,921,3.412,938,0.499,939,1.878,957,0.518,995,2.877,1015,0.39,1017,3.708,1021,2.713,1041,2.059,1071,2.283,1072,3.096,1088,3.481,1111,2.564,1123,0.408,1227,1.29,1231,1.878,1244,3.358,1260,0.408,1262,0.674,1350,3.708,1469,2.455,1476,1.25,1479,3.481,1481,3.358,1625,0.443,1645,2.214,1651,1.878,1691,5.84,1705,2.434,1723,5.043,1734,2.887,1773,2.713,1834,0.758,1889,2.434,1956,2.366,1976,3.358,1985,1.952,2009,0.443,2061,3.096,2114,1.211,2179,1.878,2234,0.518,2260,1.624,2288,2.119,2406,3.358,2479,4.989,2543,2.713,2564,0.518,2678,3.096,2692,5.715,2743,2.032,2874,3.096,2902,6.609,3241,2.214,3534,3.708,3537,3.266,3546,3.708,3547,2.887,3844,3.358,3916,3.708,3940,4.24,3941,4.24,3942,4.24,3943,7.009,3944,7.009,3945,4.24,3946,4.24,3947,4.24,3948,4.24,3949,4.24,3950,5.756,3951,4.24,3952,4.24,3953,4.24,3954,5.756,3955,4.24,3956,5.756,3957,4.24,3958,4.24,3959,4.24,3960,4.24,3961,4.24,3962,4.24,3963,4.24,3964,4.24,3965,4.24,3966,4.24,3967,4.24,3968,4.24,3969,4.24]],["t/69",[196,53.854,1651,80.911]],["h/69",[45,47.407,89,27.595,196,46.994,242,9.45,261,8.45,419,7.947,431,59.325,432,71.048,1178,45.807,1651,54.813]],["c/69",[5,0.109,20,0.011,23,2.177,26,1.962,29,1.833,32,0.631,35,0.41,45,3.123,47,0.525,49,0.217,59,0.466,62,0.057,63,0.424,64,0.182,72,0.525,77,2.286,80,0.583,85,4.861,89,1.623,109,0.722,110,1.336,113,0.508,142,1.296,162,1.895,193,0.27,196,2.524,204,1.96,229,2.55,242,0.63,243,1.833,250,1.96,261,0.454,266,0.555,279,0.978,281,0.424,285,0.509,292,0.199,295,2.896,301,0.404,302,0.404,306,0.307,315,1.035,321,3.868,323,1.732,359,0.434,378,3.04,392,2.647,397,0.288,408,1.96,412,0.487,415,1.774,419,0.467,421,1.732,431,3.489,432,4.517,438,2.55,455,0.326,473,1.96,539,4.026,559,0.217,570,3.389,571,2.788,574,1.042,588,2.788,591,0.487,592,0.487,608,3.04,621,0.559,635,3.203,641,1.318,645,0.364,669,3.224,697,1.96,718,0.487,729,0.501,744,2.346,765,1.787,788,0.83,797,0.576,813,1.365,860,0.858,895,0.887,911,1.833,938,0.623,957,0.647,1012,4.882,1015,0.487,1123,0.509,1131,2.765,1132,3.389,1137,3.607,1150,3.868,1178,3.052,1227,2.025,1260,0.509,1262,0.487,1322,3.04,1395,4.861,1488,3.607,1625,0.554,1651,3.485,1793,4.632,1904,3.389,1959,3.389,2009,0.554,2054,3.868,2057,5.272,2234,0.647,2449,3.868,2534,3.607,2564,0.647,3027,2.439,3142,2.765,3519,5.272,3524,5.272,3551,4.632,3553,4.632,3554,5.822,3555,4.632,3556,4.632,3557,4.632,3558,4.632,3559,5.822,3560,4.632,3561,4.632,3970,5.297,3971,5.297,3972,5.297,3973,5.297,3974,5.297,3975,5.297,3976,5.297,3977,5.297,3978,5.297,3979,5.297,3980,5.297,3981,5.297,3982,5.297]],["t/70",[952,87.571,2096,104.876]],["h/70",[242,10.837,246,2.25,419,9.113,434,4.086,952,68.029,2096,81.473]],["c/70",[5,0.111,15,3.873,20,0.012,32,0.456,35,0.428,47,0.391,49,0.233,59,0.5,62,0.055,63,0.602,64,0.269,72,0.391,73,0.852,80,0.568,109,0.776,113,0.434,124,3.109,133,0.984,193,0.29,215,0.804,242,0.638,246,0.131,250,2.105,254,3.109,281,0.456,285,0.547,292,0.295,301,0.434,302,0.434,306,0.33,307,1.284,308,1.575,322,1.969,359,0.453,365,0.891,397,0.31,412,0.523,415,1.905,419,0.483,434,0.216,446,2.726,455,0.462,460,2.519,501,1.969,504,2.408,505,2.843,516,2.619,531,3.873,559,0.285,567,0.883,591,0.523,592,0.523,595,4.452,621,0.585,716,3.639,718,0.523,729,0.391,760,0.984,765,1.868,788,1.09,797,0.619,813,1.017,827,1.349,860,0.921,895,0.952,938,0.669,952,4.036,957,0.695,1015,0.523,1123,0.547,1168,3.873,1182,1.308,1260,0.547,1262,0.692,1357,1.268,1453,3.639,1625,0.594,1645,3.633,1655,4.153,1943,2.843,2009,0.594,2096,4.924,2179,2.519,2234,0.695,2288,3.757,2564,0.695,2766,6.085,2807,4.153,2856,2.843,3027,2.619,3073,3.477,3100,4.974,3215,4.153,3570,5.081,3738,4.974,3740,4.974,3747,4.974,3983,5.688,3984,6.958,3985,5.688,3986,5.688,3987,5.688,3988,5.688]],["t/71",[772,54.913]],["h/71",[84,2.554,87,18.567,138,27.894,143,3.276,219,6.674,242,6.358,246,1.32,261,5.686,266,6.354,315,10.958,397,4.535,419,5.347,434,2.398,472,28.824,561,8.704,565,13.047,567,10.564,645,5.73,667,7.328,759,11.768,772,27.92,827,19.753,1186,21.012,1272,23.79,1485,34.237,1788,47.804,1900,38.342,2201,36.88,2329,56.707]],["c/71",[5,0.107,20,0.01,23,1.222,32,0.658,33,0.898,35,0.275,38,0.274,43,1.495,46,2.569,47,0.543,48,1.256,49,0.183,55,1.071,59,0.262,62,0.057,63,0.538,64,0.246,67,0.727,72,0.56,73,0.757,80,0.581,84,0.219,87,1.746,89,1.195,94,0.531,101,1.714,104,1.625,109,0.731,110,1.126,113,0.227,116,1.139,119,1.139,123,0.878,133,0.928,136,1.123,138,2.498,142,1.092,143,0.274,145,1.029,159,1.552,162,1.064,164,1.317,176,1.425,179,0.349,185,1.904,191,1.268,193,0.228,203,1.625,205,3.242,210,0.849,219,0.642,224,1.683,231,1.027,242,0.559,243,2.063,246,0.101,257,0.466,259,1.064,261,0.305,266,0.559,279,1.1,281,0.238,285,0.286,287,1.1,292,0.311,300,1.1,301,0.227,302,0.227,305,1.652,306,0.345,307,1.377,308,1.982,309,1.064,311,1.625,314,2.025,315,1.071,316,1.162,322,1.029,323,0.774,334,0.849,336,1.71,344,1.545,355,2.211,359,0.291,365,0.466,386,1.855,397,0.43,402,1.317,403,1.064,405,2.699,407,1.402,408,2.982,410,0.996,412,0.274,415,0.996,416,2.7,419,0.431,421,1.162,431,1.425,434,0.215,438,1.139,441,1.977,443,1.625,451,3.077,455,0.44,456,1.317,460,1.317,461,1.652,462,1.894,463,1.798,465,1.317,472,2.408,478,1.71,483,2.126,490,1.771,495,2.025,503,0.705,515,2.055,520,1.652,540,1.369,543,1.551,549,1.562,553,1.222,559,0.261,561,0.623,565,1.373,567,0.851,568,1.509,571,2.053,572,1.268,574,0.585,581,1.835,589,1.631,591,0.274,592,0.274,621,0.375,638,1.425,641,1.323,642,1.6,645,0.369,658,2.441,663,1.425,667,0.612,674,1.029,680,1.369,694,2.738,696,1.369,697,2.871,700,2.626,701,2.468,702,1.855,703,2.374,707,1.236,709,1.835,718,0.274,723,1.486,729,0.307,737,2.446,739,2.331,740,2.331,744,1.317,759,1.124,760,0.773,765,1.198,772,1.938,780,1.707,782,1.552,783,2.025,786,2.374,787,1.425,788,1.202,797,0.486,798,2.7,807,0.904,813,1.065,815,1.855,816,1.611,817,1.275,827,1.873,836,1.977,860,1.186,863,1.545,870,1.275,881,1.486,885,2.126,886,1.683,889,1.268,895,1.199,917,1.652,931,3.088,938,0.35,939,1.317,957,0.363,958,1.317,966,2.055,969,1.798,979,2.025,986,4.245,987,1.369,1015,0.274,1034,1.903,1035,1.903,1036,1.369,1041,1.064,1071,1.179,1093,1.903,1095,1.486,1111,1.798,1118,1.425,1123,0.286,1182,1.37,1186,1.504,1227,2.451,1231,1.317,1245,1.064,1260,0.286,1262,0.617,1272,1.531,1297,2.7,1318,3.502,1357,1.424,1396,1.798,1411,2.33,1431,6.784,1444,1.486,1451,1.903,1471,2.231,1476,1.316,1485,2.626,1487,2.6,1625,0.311,1658,1.064,1681,1.552,1694,1.707,1705,4.202,1766,1.552,1788,3.85,1834,0.958,1889,3.077,1900,3.088,1935,2.441,1950,2.6,1951,2.6,1952,3.905,1953,1.625,1956,1.835,1963,1.552,1985,2.055,1987,1.552,2009,0.311,2051,6.522,2109,1.707,2114,1.275,2121,2.025,2129,2.563,2154,1.317,2201,3.17,2223,2.331,2234,0.363,2238,3.604,2329,4.567,2534,2.025,2564,0.363,2723,1.707,2743,1.425,2941,3.077,3001,1.918,3054,1.798,3055,1.798,3056,1.798,3057,1.798,3142,3.111,3198,1.486,3199,1.486,3200,1.486,3201,1.425,3202,1.625,3203,1.625,3228,2.355,3239,1.707,3240,1.625,3241,1.552,3242,1.798,3341,2.025,3343,2.355,3344,2.6,3476,3.26,3486,4.245,3537,2.679,3547,3.04,3548,2.171,3678,3.26,3679,2.355,3697,2.6,3705,1.903,3887,2.6,3888,2.355,3889,2.6,3989,2.973,3990,2.973,3991,2.973,3992,2.973,3993,5.959,3994,5.866,3995,2.973,3996,2.973,3997,2.973,3998,2.973,3999,2.973,4000,2.973,4001,2.973,4002,2.973,4003,2.973,4004,5.361,4005,2.973,4006,2.973,4007,4.465,4008,2.6,4009,3.905]],["t/72",[1436,109.936]],["h/72",[84,3.701,242,9.214,246,1.913,261,8.239,315,15.879,419,7.749,434,3.475,567,15.309,645,8.303,667,10.62,1272,34.475,1436,55.563]],["c/72",[5,0.094,20,0.012,22,1.433,23,2.195,32,0.632,33,0.894,35,0.412,38,0.491,47,0.503,48,1.05,49,0.274,59,0.47,62,0.056,63,0.632,64,0.271,67,1.306,72,0.503,73,0.728,80,0.584,84,0.224,109,0.728,113,0.407,116,2.045,143,0.21,179,0.436,193,0.272,219,0.614,235,2.277,242,0.636,246,0.125,257,0.837,261,0.457,266,0.407,281,0.428,285,0.513,292,0.297,301,0.407,302,0.407,306,0.388,307,1.235,309,1.911,315,1.075,316,1.741,359,0.436,365,0.837,397,0.291,405,2.448,408,2.704,410,1.789,412,0.491,419,0.469,434,0.21,455,0.471,462,1.851,543,1.39,547,0.837,559,0.274,565,1.314,567,1.021,574,1.05,589,2.449,591,0.491,592,0.491,621,0.562,641,0.894,645,0.503,663,2.559,667,0.727,694,2.448,697,1.976,707,1.479,718,0.491,723,2.669,729,0.367,759,1.033,772,1.539,788,1.145,797,0.581,817,1.911,836,2.154,860,0.865,895,0.894,911,1.848,938,0.628,957,0.653,1015,0.491,1123,0.513,1186,2.031,1227,2.223,1245,1.911,1260,0.513,1262,0.705,1272,2.087,1307,3.899,1357,1.492,1436,3.957,1476,1.574,1625,0.558,1834,0.954,1985,2.458,2009,0.558,2234,0.653,2247,3.636,2564,0.653,3023,3.065,3165,4.229,3198,2.669,3199,2.669,3200,2.669,3201,2.559,3907,6.899,4010,5.34]],["t/73",[2123,174.363]],["h/73",[84,3.525,143,6.694,215,16.243,242,8.776,261,7.848,419,9.755,664,55.095,1932,73.555,2123,83.936,3059,83.936,4011,100.53]],["c/73",[5,0.113,20,0.011,22,1.151,32,0.344,35,0.357,38,0.534,42,1.701,47,0.522,49,0.175,53,2.473,59,0.377,62,0.055,63,0.527,64,0.253,71,1.463,72,0.522,74,1.534,80,0.572,84,0.216,87,0.956,89,1.293,93,1.974,94,1.037,113,0.327,123,0.843,133,0.742,136,0.898,138,1.436,143,0.323,144,2.593,158,2.517,172,2.055,179,0.378,193,0.219,204,1.587,207,1.701,215,1.141,230,2.919,231,1.334,242,0.602,257,0.672,261,0.396,266,0.442,267,3.003,281,0.344,285,0.412,292,0.32,301,0.327,302,0.327,303,1.974,306,0.249,316,1.116,345,2.143,359,0.378,362,1.899,363,2.919,396,1.942,397,0.233,403,1.534,406,2.593,411,2.055,412,0.395,419,0.506,451,2.461,455,0.404,501,2.437,503,1.981,504,2.861,547,0.672,553,2.384,559,0.269,588,1.642,591,0.395,592,0.395,616,2.743,621,0.487,624,2.919,664,3.83,667,0.51,718,0.395,729,0.295,738,2.593,760,1.003,785,2.461,786,1.899,788,0.672,797,0.467,807,1.304,813,1.258,814,3.075,815,2.274,816,1.082,817,1.657,831,2.894,838,1.858,847,3.75,867,3.634,869,2.568,870,1.225,886,1.346,911,1.484,915,3.519,924,2.919,938,0.504,941,3.75,957,0.524,966,1.974,1015,0.395,1020,3.321,1053,2.919,1123,0.412,1131,2.238,1182,0.986,1245,1.534,1260,0.412,1262,0.605,1277,3.395,1295,3.395,1344,3.395,1381,3.028,1413,2.593,1469,3.525,1471,2.143,1476,1.264,1480,3.949,1483,3.137,1484,3.772,1625,0.448,1645,3.028,1661,3.507,1694,4.041,1728,3.75,1834,0.766,1906,2.283,1932,4.851,1943,3.284,2009,0.448,2114,1.877,2123,6.359,2154,1.899,2234,0.524,2260,1.642,2288,2.143,2501,2.743,2550,6.63,2564,0.709,2830,4.475,2855,4.592,2884,5.576,3059,5.952,3067,4.235,3073,3.789,3080,4.592,3082,4.592,3140,5.747,3204,2.593,3284,3.395,3427,3.75,3675,3.75,3714,3.131,4011,6.779,4012,4.287,4013,4.287,4014,4.287,4015,4.287,4016,4.287,4017,4.287,4018,5.799,4019,7.752,4020,3.75,4021,5.799,4022,5.072,4023,7.355,4024,4.287,4025,4.287,4026,4.287,4027,4.287,4028,4.287,4029,4.287,4030,4.287,4031,4.287,4032,4.287,4033,4.287,4034,4.287,4035,4.287,4036,6.157,4037,5.799,4038,4.287,4039,4.287,4040,7.582,4041,4.287,4042,6.572]],["t/74",[1428,130.543]],["h/74",[84,3.896,143,4.997,215,17.949,242,9.698,261,8.672,419,8.156,667,11.178,838,29.211,1251,66.322,1428,69.444]],["c/74",[5,0.076,20,0.012,35,0.437,38,0.654,47,0.545,49,0.241,59,0.518,62,0.055,63,0.569,64,0.244,72,0.545,73,0.641,80,0.598,84,0.234,109,1.041,133,1.019,143,0.328,179,0.497,193,0.3,196,1.735,215,1.196,231,1.354,242,0.642,261,0.485,266,0.582,292,0.222,293,2.179,301,0.449,302,0.449,306,0.341,323,1.532,336,2.255,359,0.463,397,0.321,412,0.542,419,0.529,421,1.532,455,0.437,545,3.074,547,0.922,559,0.241,568,1.158,591,0.542,592,0.542,621,0.597,667,0.725,678,3.379,718,0.542,729,0.405,838,1.895,869,3.146,1015,0.542,1123,0.566,1251,4.421,1260,0.566,1262,0.654,1413,3.56,1428,4.558,1625,0.615,1649,3.767,1834,1.052,2009,0.615,2114,2.18,2120,3.379,2155,3.56,2354,5.149,2509,4.662,3732,6.043,4043,5.887]],["t/75",[150,130.543]],["h/75",[84,3.291,87,23.922,89,23.922,143,5.707,150,58.66,242,8.192,246,1.701,261,7.325,419,9.316,434,3.089,561,11.214,567,13.611,589,32.641,667,9.442,827,25.45]],["c/75",[5,0.1,20,0.011,23,1.893,32,0.632,33,1.018,35,0.374,38,0.56,47,0.532,48,0.906,49,0.188,56,2.176,57,1.275,59,0.405,62,0.056,63,0.632,64,0.271,67,1.126,72,0.551,73,0.662,80,0.588,84,0.209,87,1.862,89,1.518,94,0.823,109,0.988,110,1.535,113,0.351,116,1.763,133,0.797,136,0.964,142,1.126,143,0.319,145,1.593,150,4.676,179,0.396,191,1.963,193,0.235,200,1.401,210,1.315,242,0.612,246,0.119,257,0.721,259,1.647,261,0.415,266,0.464,279,1.123,281,0.369,285,0.442,287,1.704,292,0.291,301,0.351,302,0.351,306,0.353,307,1.391,308,1.684,309,1.647,311,2.517,315,0.896,316,1.772,344,1.593,359,0.396,365,0.721,397,0.251,407,1.91,410,1.542,412,0.424,415,1.542,419,0.507,421,1.198,434,0.217,455,0.493,462,1.92,478,1.763,490,1.826,543,1.583,547,0.721,549,1.126,559,0.308,561,0.712,565,0.953,567,1.001,568,1.196,571,1.763,589,2.49,591,0.424,592,0.424,621,0.511,641,1.296,642,1.236,663,2.207,667,0.705,694,2.842,696,2.12,697,3.073,698,2.301,700,3.097,701,3.136,702,2.357,703,3.016,709,2.5,718,0.424,723,2.301,729,0.317,737,1.763,739,3.175,740,3.175,744,2.039,759,1.024,782,2.404,786,2.039,787,2.207,788,0.953,797,0.501,798,2.784,813,0.823,817,1.946,827,1.981,836,2.281,838,1.399,860,1.22,863,1.593,889,1.963,895,1.213,917,1.704,938,0.542,957,0.563,1015,0.424,1036,2.12,1123,0.442,1231,2.039,1245,2.176,1260,0.442,1262,0.726,1415,5.501,1430,3.646,1444,2.301,1457,4.026,1476,1.793,1625,0.481,1766,2.404,1834,1.087,1906,1.972,1963,2.404,1985,2.8,1987,2.404,2009,0.481,2234,0.563,2564,0.563,2723,2.643,2743,2.207,3001,1.647,3198,2.301,3199,2.301,3200,2.301,3201,2.207,3202,2.517,3203,2.517,3204,2.784,3238,4.026,3239,2.643,3240,2.517,3241,2.404,3242,2.784,4008,4.026,4044,4.604,4045,7.892]],["t/76",[1657,116.913,1658,65.373]],["h/76",[5,1.092,84,2.599,143,4.837,224,38.611,242,6.47,246,1.343,261,5.785,266,6.465,419,7.895,434,2.44,479,37.526,567,10.749,1272,35.123,1474,46.327,1657,78.678,1658,51.777,1721,44.244,1935,46.327,1955,48.641,1956,34.837,2154,37.526,3250,67.107]],["c/76",[5,0.111,17,2.76,20,0.01,21,1.448,22,1.791,25,2.2,32,0.613,35,0.327,38,0.566,47,0.548,48,1.383,49,0.155,53,1.612,59,0.333,62,0.055,63,0.563,64,0.263,71,0.954,72,0.542,73,0.726,80,0.588,84,0.205,89,1.185,94,0.676,101,1.651,109,0.91,113,0.288,123,0.744,133,0.92,136,1.114,143,0.316,165,1.554,172,1.812,185,2.267,193,0.193,200,1.15,215,1.145,219,0.535,224,2.624,229,2.355,242,0.584,243,1.308,246,0.111,251,1.889,257,0.833,261,0.498,266,0.572,279,0.698,281,0.303,285,0.363,292,0.31,293,1.399,300,1.399,301,0.288,302,0.288,305,1.399,306,0.219,307,0.698,312,2.17,315,0.878,322,1.84,335,1.974,355,1.308,359,0.346,365,0.592,397,0.206,402,1.674,403,2.2,406,2.286,412,0.348,419,0.491,421,1.384,434,0.21,438,1.448,455,0.433,456,1.674,479,3.686,494,1.612,500,3.237,501,2.647,502,2.623,503,1.459,504,2.128,515,2.448,517,2.76,540,1.74,543,1.6,544,1.226,550,2.066,559,0.288,565,0.592,567,0.892,591,0.348,592,0.348,600,2.776,621,0.447,641,0.633,667,0.659,673,2.574,674,2.911,683,2.528,693,2.066,696,2.448,718,0.348,724,1.612,729,0.26,760,1.064,765,1.651,772,1.223,788,0.592,797,0.411,807,1.15,810,1.612,813,0.676,815,1.84,816,1.684,825,3.83,831,1.554,836,1.114,838,1.617,860,0.861,867,3.666,870,1.08,885,2.109,886,1.67,895,0.89,904,1.74,906,4.035,917,1.968,925,3.198,938,0.445,947,2.17,948,2.548,957,0.462,1002,2.574,1006,3.052,1015,0.348,1020,1.554,1094,3.052,1097,4.87,1123,0.363,1149,3.306,1195,2.76,1258,2.17,1260,0.363,1262,0.647,1272,2.14,1278,2.548,1408,1.974,1469,2.623,1474,4.181,1476,1.114,1479,2.286,1480,2.574,1490,2.574,1512,3.882,1625,0.395,1651,1.674,1657,5.423,1658,3.124,1661,2.286,1721,3.211,1773,3.935,1906,1.724,1935,4.661,1955,4.036,1956,2.891,1975,2.993,2009,0.395,2028,3.306,2096,4.3,2154,3.318,2179,1.674,2234,0.462,2260,2.036,2436,4.035,2452,4.872,2564,0.462,2599,3.306,2716,4.491,2764,4.188,2774,4.65,2856,1.889,2874,3.882,2875,3.306,2877,4.21,2966,2.286,3001,1.352,3027,2.448,3074,4.87,3170,2.993,3250,6.565,3284,2.993,3537,2.657,3652,2.993,3654,2.993,3669,4.21,3771,3.306,3793,3.306,3882,3.306,4046,3.78,4047,3.78,4048,5.317,4049,5.317,4050,5.317,4051,3.78,4052,5.317,4053,5.317,4054,3.78,4055,3.78,4056,3.78,4057,3.78,4058,3.78,4059,3.78,4060,3.78,4061,3.78,4062,4.65,4063,3.78,4064,3.78,4065,3.78,4066,3.78,4067,3.78]],["t/77",[1186,46.098,1410,77.918]],["h/77",[25,24.169,57,25.716,84,2.848,143,3.653,242,7.091,246,1.472,261,6.341,367,50.775,419,8.43,434,2.674,561,9.707,645,6.39,674,32.145,815,32.145,1186,23.433,1410,77.32,1639,59.43,1688,44.515]],["c/77",[4,4.027,5,0.11,20,0.011,25,1.973,32,0.439,35,0.337,38,0.504,47,0.522,48,0.776,49,0.224,55,1.163,57,2.174,59,0.347,62,0.053,63,0.592,64,0.261,67,0.965,72,0.522,73,0.596,80,0.576,84,0.209,90,1.46,94,0.705,109,0.538,110,0.996,113,0.301,133,0.683,142,0.965,143,0.325,154,3.125,158,1.511,179,0.41,193,0.201,196,1.163,207,3.213,215,0.961,219,0.504,242,0.599,246,0.117,257,0.986,261,0.43,266,0.564,281,0.316,285,0.379,292,0.291,301,0.301,302,0.301,305,1.46,306,0.318,307,1.011,309,1.412,318,2.687,323,1.859,359,0.357,365,0.618,367,3.905,397,0.215,405,2.108,408,2.329,412,0.363,419,0.475,421,1.426,434,0.218,455,0.483,462,0.907,463,4.807,465,1.748,491,1.891,520,1.46,543,1.027,544,1.28,547,0.618,549,1.34,550,2.157,556,1.565,559,0.278,561,0.658,567,1.019,568,1.58,574,1.078,588,2.411,591,0.363,592,0.363,598,2.157,621,0.46,639,1.622,641,1.054,642,1.059,645,0.433,663,2.626,674,2.624,683,2.252,718,0.363,729,0.271,760,0.683,765,1.689,772,1.26,781,3.506,788,0.986,797,0.429,808,2.525,815,2.472,816,1.382,836,1.163,838,1.26,860,0.639,870,1.565,885,2.496,894,1.817,895,0.661,897,2.995,931,1.817,938,0.464,939,1.748,942,2.995,957,0.482,974,3.145,1015,0.363,1095,1.972,1123,0.379,1131,2.06,1181,2.525,1186,1.981,1227,1.915,1251,3.55,1260,0.379,1262,0.68,1297,2.386,1321,2.882,1357,0.88,1408,2.06,1409,3.313,1410,3.782,1447,3.451,1625,0.412,1639,5.086,1658,3.138,1672,4.792,1688,3.883,1784,2.265,1810,2.386,1834,0.705,1889,3.145,1953,2.157,1984,2.265,2009,0.412,2014,4.792,2114,1.798,2171,2.861,2201,3.163,2220,2.882,2234,0.482,2240,5.384,2247,3.731,2260,1.511,2564,0.482,2941,3.145,2952,4.792,2965,4.339,2966,3.313,3141,4.339,3142,2.861,3872,4.001,3905,4.792,4036,4.792,4068,3.946,4069,3.946,4070,3.946,4071,3.946,4072,3.946,4073,3.946,4074,3.946,4075,3.946,4076,3.946,4077,3.946,4078,3.946,4079,5.479,4080,5.479,4081,5.479,4082,5.479,4083,5.479,4084,5.479,4085,5.479,4086,3.946,4087,3.946,4088,3.946,4089,3.946,4090,3.946,4091,3.946]],["t/78",[1410,77.918,1658,65.373]],["h/78",[84,4.112,143,5.274,242,10.236,419,10.769,434,3.86,1410,57.175,1658,47.97]],["c/78",[1,2.515,5,0.092,20,0.012,32,0.473,35,0.438,38,0.655,47,0.406,49,0.241,57,1.633,59,0.519,62,0.056,63,0.635,64,0.273,72,0.406,80,0.554,84,0.234,113,0.45,143,0.328,179,0.463,193,0.301,207,2.821,242,0.642,261,0.403,281,0.473,285,0.567,292,0.222,301,0.45,302,0.45,306,0.342,323,1.535,334,1.685,359,0.463,397,0.321,412,0.543,419,0.529,434,0.22,455,0.507,463,4.301,547,0.924,559,0.312,567,0.902,591,0.543,592,0.543,621,0.598,641,0.988,707,1.633,718,0.543,729,0.406,760,1.231,797,0.642,810,2.515,813,1.054,860,0.955,863,2.041,895,0.988,938,0.694,957,0.721,1015,0.543,1123,0.567,1186,1.795,1260,0.567,1262,0.73,1410,3.693,1625,0.616,1658,3.03,1834,1.054,2009,0.616,2179,3.15,2234,0.721,2564,0.721,4062,6.679,4092,5.898]],["t/79",[1410,101.835]],["h/79",[84,4.229,242,10.528,246,2.186,419,8.854,434,3.97,645,9.487,1410,58.805]],["c/79",[1,2.451,5,0.09,20,0.012,32,0.461,35,0.431,38,0.529,49,0.286,55,1.199,57,2.176,59,0.506,62,0.056,63,0.63,64,0.27,80,0.548,84,0.241,94,1.027,113,0.439,142,1.406,143,0.226,179,0.492,193,0.293,219,0.605,242,0.644,246,0.128,261,0.392,281,0.461,285,0.552,292,0.303,301,0.439,302,0.439,306,0.333,307,1.061,316,1.496,334,1.642,359,0.456,365,0.9,397,0.313,412,0.529,419,0.485,434,0.217,455,0.496,547,0.9,559,0.286,567,0.888,568,1.131,574,1.131,591,0.529,592,0.529,621,0.588,628,3.142,639,2.363,641,0.962,645,0.52,703,2.545,707,1.591,718,0.529,729,0.395,759,0.812,772,1.322,797,0.625,807,1.748,810,2.451,860,1.223,885,3.291,894,2.646,895,1.265,938,0.676,957,0.702,987,2.646,1015,0.529,1123,0.552,1186,1.905,1260,0.552,1262,0.723,1410,3.674,1625,0.601,1639,4.832,1658,2.812,1834,1.027,1953,3.142,2009,0.601,2234,0.702,2564,0.702,3001,2.056,4093,5.748,4094,5.027,4095,5.748]],["t/80",[397,13.003]],["h/80",[84,3.796,242,9.45,246,1.962,261,8.45,397,6.74,419,7.947,434,3.564,549,30.279,645,8.515,667,10.892,1485,50.885]],["c/80",[5,0.112,20,0.012,32,0.612,35,0.41,38,0.488,41,1.469,47,0.526,48,1.044,49,0.273,55,1.193,57,1.469,59,0.467,62,0.056,63,0.612,64,0.263,72,0.526,80,0.591,84,0.234,89,1.183,94,0.948,109,0.724,113,0.405,134,2.9,143,0.209,154,4.201,179,0.475,185,2.842,193,0.271,219,0.584,242,0.635,246,0.127,261,0.455,281,0.425,285,0.51,292,0.307,301,0.405,302,0.405,306,0.307,307,0.979,318,3.612,359,0.434,365,0.831,397,0.459,412,0.488,419,0.468,434,0.21,455,0.47,461,1.963,479,2.951,501,1.836,502,3.107,503,1.258,531,3.612,547,0.831,549,2.101,559,0.273,568,1.044,574,1.044,591,0.488,592,0.488,621,0.56,639,2.181,645,0.501,667,0.707,718,0.488,729,0.365,759,0.75,760,1.261,765,1.789,772,1.22,797,0.577,817,2.296,824,3.825,827,1.258,843,3.479,860,1.08,866,3.395,894,2.442,895,1.116,938,0.624,943,3.045,957,0.648,1015,0.488,1123,0.51,1227,1.614,1245,2.734,1260,0.51,1262,0.703,1311,3.643,1410,2.262,1471,3.33,1476,2.253,1485,3.237,1625,0.554,1834,0.948,1953,2.9,2009,0.554,2114,1.515,2144,3.479,2234,0.648,2316,3.33,2564,0.648,3001,1.898,3022,4.64,3994,6.886,4094,4.64,4096,5.305,4097,5.305,4098,5.305,4099,6.664,4100,5.305]],["t/81",[773,137.066]],["h/81",[84,3.022,87,21.972,242,7.524,246,1.562,261,6.728,419,6.328,434,2.837,561,10.3,567,12.502,667,8.672,759,13.926,760,17.053,773,78.567,807,29.98,827,23.376,1318,51.456,1788,56.571,1900,45.373,2096,56.571,4101,86.19]],["c/81",[0,1.242,5,0.112,6,3.101,16,2.474,20,0.011,23,1.59,25,1.62,26,1.14,29,1.87,30,1.431,32,0.647,33,0.905,35,0.332,38,0.356,43,1.295,47,0.545,48,1.225,49,0.158,59,0.34,62,0.056,63,0.589,64,0.253,67,1.322,72,0.563,73,0.588,80,0.59,84,0.191,87,1.826,94,0.966,101,2.147,109,0.849,110,1.363,113,0.295,116,1.481,123,0.761,124,2.114,133,0.669,136,1.132,138,1.295,142,0.946,143,0.245,145,1.338,164,2.392,179,0.406,191,1.649,193,0.197,200,1.176,210,1.105,219,0.31,224,1.955,242,0.587,246,0.112,257,1.111,261,0.369,265,1.431,266,0.56,279,1.244,281,0.433,285,0.372,287,1.431,292,0.276,301,0.295,302,0.295,306,0.313,307,1.309,308,2.192,309,1.933,311,2.114,314,2.633,315,0.967,316,1.006,323,1.006,344,1.87,345,2.7,359,0.352,365,0.606,375,1.78,386,1.338,396,1.295,397,0.211,407,2.116,410,1.295,412,0.356,415,1.295,419,0.4,421,1.006,434,0.217,445,2.824,455,0.464,461,1.431,462,1.92,478,1.481,489,2.22,490,1.534,493,1.431,503,0.917,543,1.62,547,0.606,549,0.946,559,0.29,561,0.651,565,0.606,567,0.932,568,1.225,571,1.481,574,1.063,588,2.069,589,2.05,590,1.59,591,0.356,592,0.356,612,2.019,621,0.454,641,1.362,642,1.038,663,1.853,667,0.646,674,2.155,694,2.831,696,1.78,697,3.03,698,2.7,700,2.915,701,2.866,702,2.333,703,2.757,709,2.221,718,0.356,722,2.824,723,1.933,729,0.266,737,1.481,739,2.82,740,2.82,744,2.392,745,2.633,746,2.824,757,3.101,759,1.164,760,1.077,772,1.55,773,4.885,781,4.313,782,2.019,783,2.633,784,2.22,786,2.392,787,1.853,788,0.975,797,0.421,798,2.339,807,1.894,813,1.205,817,1.543,827,2.005,831,2.915,836,2.222,860,1.149,863,1.87,870,1.105,874,2.22,889,1.649,895,1.23,917,1.431,938,0.455,939,1.712,951,2.633,957,0.473,969,2.339,974,1.933,995,1.933,1006,2.22,1015,0.356,1036,1.78,1041,1.384,1071,1.534,1123,0.372,1206,2.824,1231,1.712,1245,1.384,1258,2.22,1260,0.372,1262,0.676,1318,3.251,1357,0.862,1408,2.82,1421,3.457,1444,1.933,1476,1.14,1488,2.633,1625,0.404,1674,2.22,1688,1.853,1766,2.019,1784,2.22,1788,4.217,1834,1.205,1900,3.471,1963,2.019,1968,3.062,1969,4.278,1984,2.22,1985,2.487,1987,2.019,2009,0.404,2093,2.824,2096,4.486,2114,1.543,2154,2.757,2174,2.633,2234,0.473,2260,1.481,2346,3.062,2376,2.633,2479,3.678,2564,0.473,2600,3.382,2723,2.22,2743,1.853,2787,3.062,2810,3.062,3001,1.933,3050,3.945,3142,2.019,3198,1.933,3199,1.933,3200,1.933,3201,1.853,3202,2.114,3203,2.114,3239,2.22,3240,2.114,3241,2.019,3242,2.339,3329,3.062,3341,2.633,3480,2.824,3526,3.062,3537,1.933,3681,3.382,3690,3.382,3691,3.382,3692,3.382,3693,3.382,3694,3.382,3698,3.382,3699,3.382,3700,3.382,3701,3.382,3702,3.382,3703,3.382,3705,2.474,4101,6.425,4102,3.867,4103,7.346]],["t/82",[244,114.449]],["h/82",[84,3.022,143,5.384,219,10.968,242,7.524,244,47.236,246,1.562,261,6.728,396,33.009,419,8.788,434,2.837,568,19.388,597,59.6,772,22.664,1014,63.063,1318,51.456,1333,67.107,1396,59.6,4104,78.047]],["c/82",[5,0.112,20,0.011,25,1.09,32,0.559,33,0.956,35,0.351,38,0.525,47,0.518,49,0.171,53,1.786,55,0.835,59,0.369,62,0.055,63,0.585,64,0.259,72,0.518,74,1.499,80,0.577,84,0.214,89,1.555,90,2.403,109,1.027,113,0.32,123,0.824,133,0.988,138,2.444,143,0.308,145,1.45,179,0.372,193,0.214,196,1.235,200,1.274,210,1.197,215,1.031,219,0.667,224,1.315,231,1.313,235,3.211,242,0.599,244,4.073,246,0.119,257,0.894,260,1.722,261,0.39,265,1.55,266,0.436,279,0.773,281,0.336,285,0.403,292,0.283,293,1.55,301,0.32,302,0.32,305,1.55,306,0.243,307,1.054,316,1.485,323,1.485,327,4.322,359,0.372,365,0.656,396,2.719,397,0.228,405,1.403,407,1.315,408,1.55,412,0.385,419,0.495,434,0.21,441,1.855,455,0.449,475,2.404,476,2.29,483,1.661,502,1.786,503,1.354,505,2.853,506,3.059,520,1.55,540,1.928,543,2.041,544,1.358,547,0.656,549,1.025,550,2.29,559,0.298,567,0.885,568,1.372,580,2.434,591,0.385,592,0.385,597,4.659,621,0.48,667,0.502,698,3.245,718,0.385,724,1.786,729,0.288,759,0.592,760,1.207,765,2.021,771,2.008,772,1.937,779,2.404,785,3.727,797,0.456,813,1.02,815,1.45,816,1.44,817,1.197,831,1.722,838,1.604,860,0.925,863,1.45,866,2.68,870,1.197,938,0.493,957,0.512,958,1.855,969,2.533,974,3.485,993,2.29,1014,4.462,1015,0.385,1022,2.533,1033,2.042,1123,0.403,1131,2.187,1180,2.852,1182,1.959,1183,2.852,1227,1.274,1260,0.403,1262,0.671,1318,4.199,1333,5.571,1363,3.059,1396,4.659,1417,3.059,1482,2.008,1493,2.404,1498,5.142,1625,0.438,1721,2.187,1751,3.059,1830,3.112,1834,0.749,2009,0.438,2114,1.197,2121,3.887,2154,1.855,2234,0.512,2501,2.68,2542,3.059,2543,2.68,2564,0.512,2971,3.317,3183,3.059,3204,2.533,3265,3.059,3291,3.663,3569,3.663,3714,4.168,3842,3.663,3857,3.317,3884,4.992,4104,6.672,4105,4.189,4106,3.663,4107,6.493,4108,6.973,4109,8.237,4110,6.493,4111,6.493,4112,6.493,4113,6.973,4114,6.973,4115,6.493,4116,6.493,4117,6.493,4118,6.493,4119,7.529,4120,3.663,4121,4.189,4122,4.189,4123,4.189,4124,4.189,4125,4.189,4126,4.189,4127,4.189,4128,4.189,4129,4.189,4130,4.189,4131,4.189,4132,4.189,4133,5.708,4134,4.189,4135,4.189,4136,4.189,4137,4.189,4138,4.189,4139,4.189,4140,4.189,4141,4.189,4142,4.189,4143,4.189,4144,4.189,4145,4.189,4146,4.189,4147,3.663,4148,4.189]],["t/83",[244,87.571,1182,42.016]],["h/83",[84,3.443,242,8.572,244,71.689,246,1.78,261,7.665,419,7.209,434,3.233,561,11.735,645,7.725,772,25.821,1182,34.396,1318,58.623,1721,58.623]],["c/83",[5,0.099,20,0.011,26,1.344,32,0.578,35,0.372,38,0.42,47,0.497,49,0.247,55,0.884,59,0.401,62,0.055,63,0.602,64,0.258,72,0.497,73,0.496,80,0.571,84,0.253,86,2.917,90,1.687,109,0.824,113,0.461,143,0.179,179,0.47,193,0.232,219,0.648,231,1.39,242,0.618,244,4.175,246,0.122,257,0.714,261,0.413,281,0.365,285,0.438,292,0.307,301,0.348,302,0.348,306,0.264,307,1.425,316,1.878,327,3.891,336,2.314,359,0.394,365,0.714,386,1.578,396,2.515,397,0.248,403,2.582,405,2.417,407,1.432,408,2.671,412,0.42,419,0.435,434,0.216,455,0.462,462,1.559,543,1.186,544,1.478,547,0.714,549,1.478,559,0.277,561,0.708,567,0.916,568,1.42,574,0.897,589,2.062,591,0.42,592,0.42,597,4.834,615,2.757,621,0.508,639,3.237,642,1.224,645,0.466,702,1.578,707,1.262,710,3.469,718,0.42,729,0.314,759,0.958,771,3.249,772,1.879,779,3.469,788,1.176,797,0.496,860,1.169,863,1.578,895,1.257,938,0.536,957,0.557,990,3.329,1015,0.42,1080,3.329,1123,0.438,1182,2.029,1227,2.195,1260,0.438,1262,0.691,1272,1.726,1318,4.439,1357,1.511,1396,4.761,1417,4.949,1428,3.946,1482,2.896,1625,0.476,1683,3.61,1721,3.768,1834,0.815,2009,0.476,2155,4.541,2234,0.557,2319,5.255,2542,5.27,2564,0.557,3001,1.631,3227,6.885,3714,3.329,3732,3.61,3857,4.785,4009,3.987,4104,4.785,4106,3.987,4120,6.312,4147,3.987,4149,4.559,4150,4.559,4151,4.559,4152,4.559,4153,4.559,4154,4.559,4155,4.559,4156,6.043,4157,4.559,4158,6.778,4159,4.559,4160,4.559,4161,4.559]],["t/84",[226,91.459]],["h/84",[56,32.605,72,6.269,84,2.795,143,3.585,226,49.616,231,20.956,242,6.957,246,1.444,261,6.221,266,6.953,367,49.818,419,8.318,434,2.624,549,22.292,561,9.524,645,6.269,715,59.64,838,20.956,2129,52.307,2171,47.578,2201,40.355,3537,45.542]],["c/84",[0,0.873,5,0.112,10,0.958,20,0.011,21,1.454,22,1.431,25,1.74,32,0.601,33,0.636,35,0.328,38,0.491,39,1.051,46,2.361,47,0.527,49,0.218,55,1.097,56,2.613,57,1.476,59,0.334,62,0.056,63,0.601,64,0.268,67,0.928,71,0.958,72,0.558,73,0.833,77,1.192,80,0.578,84,0.216,93,2.455,101,1.431,102,1.982,108,2.179,109,0.518,113,0.29,119,1.454,133,1.066,136,1.291,138,1.786,143,0.295,158,2.56,164,1.681,176,2.555,179,0.401,193,0.194,196,1.572,204,1.405,215,0.536,224,2.211,226,3.35,230,2.584,231,1.725,242,0.594,243,1.314,246,0.112,251,1.897,259,2.392,261,0.538,266,0.572,279,0.984,281,0.304,285,0.365,292,0.317,293,1.405,301,0.29,302,0.29,306,0.22,307,1.234,315,0.499,322,2.527,323,1.604,334,1.084,336,2.042,344,1.314,359,0.347,365,0.835,367,3.992,386,1.314,392,1.897,396,1.271,397,0.207,408,1.973,412,0.491,419,0.482,431,1.819,434,0.21,446,1.819,455,0.461,456,1.681,457,1.051,462,1.619,473,1.973,476,2.915,477,2.665,478,1.454,482,2.179,494,1.619,501,1.845,503,1.265,504,1.845,505,1.897,520,1.973,543,0.988,544,2.168,547,0.595,549,1.508,556,2.115,559,0.252,561,0.699,565,0.966,567,0.676,568,1.551,571,1.454,574,0.747,581,2.192,590,1.56,591,0.349,592,0.349,601,1.681,621,0.448,639,2.192,641,0.893,642,1.019,645,0.424,658,2.075,667,0.469,672,1.619,674,2.314,680,2.455,683,1.56,694,1.271,707,1.95,715,3.525,718,0.349,725,1.819,729,0.261,760,1.403,765,1.431,767,3.63,788,1.144,797,0.413,799,1.747,807,1.155,813,1.195,814,2.793,815,2.314,816,1.345,817,1.084,827,0.9,836,1.572,838,1.761,860,0.998,870,1.91,886,1.674,895,1.032,915,3.08,917,1.973,925,1.819,931,3.525,938,0.447,942,2.915,957,0.464,958,1.681,993,2.915,1000,2.429,1015,0.349,1048,4.663,1095,3.08,1097,3.006,1123,0.365,1157,2.429,1235,2.771,1252,2.179,1260,0.365,1262,0.69,1278,1.819,1357,1.374,1397,3.006,1405,4.222,1407,2.771,1439,2.295,1451,2.429,1474,2.915,1478,4.881,1483,1.619,1625,0.397,1637,3.006,1651,2.361,1658,1.358,1661,2.295,1681,3.49,1694,3.06,1705,2.179,1721,1.982,1723,4.63,1830,2.555,1834,0.678,1943,1.897,1956,2.192,2009,0.397,2109,3.06,2114,1.084,2129,4.395,2171,3.916,2179,1.681,2201,3.637,2223,2.784,2234,0.464,2235,3.319,2260,2.797,2335,2.429,2504,3.538,2560,3.006,2564,0.464,2632,4.222,2685,3.319,2852,3.319,2856,1.897,3054,2.295,3055,2.295,3056,2.295,3057,2.295,3080,3.006,3082,5.294,3141,3.006,3374,4.663,3377,5.332,3458,2.584,3476,2.771,3482,2.771,3487,3.006,3488,4.222,3537,3.08,3571,4.663,3605,3.319,3679,3.006,3826,3.319,4020,3.319,4022,3.319,4162,3.795,4163,3.795,4164,7.042,4165,5.332,4166,3.795,4167,3.795,4168,6.163,4169,3.795,4170,3.795,4171,3.795,4172,3.795,4173,5.332,4174,3.795]],["t/85",[556,72.473,966,84.117]],["h/85",[26,35.573,46,46.224,242,9.214,261,8.239,434,3.475,556,47.871,601,53.445,677,95.574,760,20.883,966,55.563,1214,69.275,1298,72.985]],["c/85",[0,1.308,5,0.073,6,3.265,20,0.011,26,2.368,35,0.428,43,1.905,46,3.077,47,0.517,49,0.233,54,1.969,59,0.5,62,0.055,63,0.456,64,0.196,73,0.619,77,2.185,80,0.505,83,3.44,87,1.268,90,2.105,94,1.017,102,2.97,122,4.504,123,1.119,151,3.203,168,4.153,169,2.843,186,3.265,193,0.29,196,1.676,200,1.73,219,0.456,242,0.638,257,1.227,261,0.513,292,0.214,301,0.434,302,0.434,306,0.33,309,2.489,330,4.504,359,0.453,397,0.31,412,0.523,429,2.726,434,0.216,455,0.35,515,3.203,523,4.153,525,2.843,540,2.619,556,3.284,559,0.233,591,0.523,592,0.523,601,3.329,612,2.97,621,0.585,677,5.51,680,2.619,707,1.575,718,0.523,726,4.153,729,0.391,759,0.983,760,1.466,813,1.017,827,1.349,836,2.216,879,3.265,880,3.44,911,1.969,913,3.639,931,3.203,960,4.153,966,3.848,1015,0.523,1041,2.489,1054,6.085,1056,3.754,1057,5.119,1071,2.982,1118,3.335,1123,0.547,1126,3.873,1214,4.315,1260,0.547,1262,0.523,1298,4.859,1342,4.504,1408,2.97,1410,2.426,1463,2.726,1625,0.594,1634,4.504,2009,0.594,2114,1.625,2195,4.974,2233,3.44,2397,4.504,2581,4.974,3023,3.265,3497,4.974,4175,5.688,4176,5.688,4177,5.688,4178,5.688,4179,5.688,4180,5.688,4181,5.688,4182,6.958]],["t/86",[1186,46.098,1436,84.117]],["h/86",[55,14.42,84,3.022,87,21.972,143,3.877,242,7.524,246,1.562,261,6.728,419,6.328,434,2.837,561,10.3,565,21.442,567,12.502,645,6.78,667,8.672,697,50.655,827,23.376,1186,24.866,1436,63.016]],["c/86",[5,0.112,20,0.011,29,1.408,32,0.633,33,0.681,35,0.344,38,0.374,43,1.874,47,0.513,48,0.8,49,0.229,54,1.408,55,1.224,59,0.358,62,0.056,63,0.579,64,0.248,65,1.278,72,0.544,73,0.696,80,0.573,84,0.211,87,1.839,94,1,109,0.872,110,1.738,113,0.427,123,0.8,133,0.704,136,1.172,138,1.363,142,0.995,143,0.284,145,1.408,179,0.265,191,1.735,193,0.207,210,1.162,229,2.143,235,2.386,242,0.603,246,0.121,254,2.224,257,0.637,261,0.382,266,0.526,279,1.181,281,0.326,282,2.45,285,0.391,287,1.506,292,0.288,301,0.31,302,0.31,306,0.236,307,1.181,308,1.907,309,1.456,311,2.224,314,2.771,315,0.906,316,1.059,332,2.461,344,2.214,355,1.937,359,0.364,365,0.637,397,0.222,403,1.456,405,2.419,407,1.757,408,2.762,412,0.515,415,1.363,419,0.411,421,1.059,434,0.22,438,1.558,455,0.47,462,1.873,471,2.034,478,1.558,490,1.614,493,1.506,543,1.456,544,1.319,559,0.282,561,0.72,565,1.334,567,0.874,568,1.101,571,1.558,572,1.735,574,0.8,580,1.735,589,2.096,591,0.374,592,0.374,621,0.47,641,1.28,642,1.092,645,0.44,667,0.685,672,1.735,694,2.857,696,1.873,697,3.136,698,2.797,700,3.202,701,2.945,702,2.214,703,2.832,707,1.549,709,3.249,718,0.374,729,0.28,737,1.558,739,2.922,740,2.922,744,1.802,759,1.101,765,1.939,770,2.971,772,1.584,774,4.432,775,3.581,776,4.432,786,2.478,787,2.682,788,1.002,789,3.222,797,0.443,807,1.702,812,3.558,813,1.291,817,1.599,827,1.957,860,0.907,863,1.408,889,1.735,895,0.681,911,1.408,915,2.797,917,2.071,932,2.971,938,0.479,957,0.497,979,3.81,1015,0.374,1036,1.873,1123,0.391,1186,2.119,1227,2.197,1231,1.802,1245,1.456,1260,0.391,1262,0.687,1272,1.162,1357,1.248,1436,3.991,1444,2.034,1476,1.199,1625,0.425,1641,4.086,1705,2.336,1739,3.558,1766,2.124,1834,1.143,1963,2.124,1987,2.124,2009,0.425,2099,2.771,2209,3.558,2234,0.497,2247,5.082,2564,0.497,2723,2.336,3202,2.224,3203,2.224,3228,3.222,3229,4.894,3240,2.224,3241,2.124,3242,2.461,3705,2.604,3797,3.558,4183,4.069,4184,4.069,4185,4.069,4186,4.069,4187,4.069,4188,4.069,4189,4.069,4190,4.069,4191,4.069,4192,4.069,4193,4.069]]],"invertedIndex":[["",{"_index":5,"t":{},"h":{"8":{},"10":{},"32":{},"52":{},"55":{},"58":{},"62":{},"76":{}},"c":{"0":{},"1":{},"2":{},"5":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"15":{},"17":{},"18":{},"20":{},"24":{},"26":{},"28":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["0",{"_index":503,"t":{},"h":{},"c":{"7":{},"9":{},"10":{},"17":{},"18":{},"20":{},"30":{},"31":{},"32":{},"36":{},"38":{},"41":{},"43":{},"47":{},"49":{},"50":{},"53":{},"54":{},"55":{},"60":{},"61":{},"63":{},"65":{},"66":{},"67":{},"68":{},"71":{},"73":{},"76":{},"80":{},"81":{},"82":{},"84":{}}}],["0.015em",{"_index":2920,"t":{},"h":{},"c":{"23":{}}}],["0.03em",{"_index":2919,"t":{},"h":{},"c":{"23":{}}}],["0.075em",{"_index":2922,"t":{},"h":{},"c":{"23":{}}}],["0.1",{"_index":511,"t":{},"h":{},"c":{"7":{}}}],["0.12.4",{"_index":2622,"t":{},"h":{},"c":{"18":{}}}],["0.125rem",{"_index":2875,"t":{},"h":{},"c":{"21":{},"76":{}}}],["0.14.40",{"_index":2345,"t":{},"h":{},"c":{"18":{}}}],["0.14.49",{"_index":2277,"t":{},"h":{},"c":{"18":{}}}],["0.14.50",{"_index":2268,"t":{},"h":{},"c":{"18":{}}}],["0.15.1",{"_index":2244,"t":{},"h":{},"c":{"18":{}}}],["0.15.14",{"_index":2191,"t":{},"h":{},"c":{"18":{}}}],["0.15em",{"_index":2923,"t":{},"h":{},"c":{"23":{}}}],["0.18.2",{"_index":1920,"t":{},"h":{},"c":{"18":{}}}],["0.1875rem",{"_index":1477,"t":{},"h":{},"c":{"16":{}}}],["0.2",{"_index":513,"t":{},"h":{},"c":{"7":{}}}],["0.25rem",{"_index":1478,"t":{},"h":{},"c":{"16":{},"21":{},"60":{},"84":{}}}],["0.3",{"_index":3304,"t":{},"h":{},"c":{"41":{}}}],["0.33",{"_index":518,"t":{},"h":{},"c":{"7":{}}}],["0.450",{"_index":3113,"t":{},"h":{},"c":{"32":{}}}],["0.460",{"_index":3112,"t":{},"h":{},"c":{"32":{}}}],["0.5",{"_index":3844,"t":{},"h":{},"c":{"61":{},"67":{},"68":{}}}],["0.5.2",{"_index":2314,"t":{},"h":{},"c":{"18":{}}}],["0.5.4",{"_index":2278,"t":{},"h":{},"c":{"18":{}}}],["0.5rem",{"_index":1480,"t":{},"h":{},"c":{"16":{},"21":{},"61":{},"73":{},"76":{}}}],["0.625rem",{"_index":2913,"t":{},"h":{},"c":{"23":{}}}],["0.75rem",{"_index":2876,"t":{},"h":{},"c":{"21":{},"23":{}}}],["0.8.54",{"_index":2694,"t":{},"h":{},"c":{"18":{}}}],["0.8.57",{"_index":2646,"t":{},"h":{},"c":{"18":{}}}],["0.875rem",{"_index":2864,"t":{},"h":{},"c":{"20":{},"23":{}}}],["0.940",{"_index":3114,"t":{},"h":{},"c":{"32":{}}}],["0002",{"_index":3176,"t":{},"h":{},"c":{"36":{}}}],["03/04/2020",{"_index":3556,"t":{},"h":{},"c":{"52":{},"69":{}}}],["0|1000",{"_index":2545,"t":{},"h":{},"c":{"18":{}}}],["0–0",{"_index":3538,"t":{},"h":{},"c":{"50":{}}}],["0–100",{"_index":4063,"t":{},"h":{},"c":{"76":{}}}],["0–20",{"_index":3535,"t":{},"h":{},"c":{"50":{}}}],["0–5",{"_index":3942,"t":{},"h":{},"c":{"68":{}}}],["1",{"_index":1227,"t":{},"h":{},"c":{"15":{},"18":{},"23":{},"32":{},"33":{},"37":{},"41":{},"43":{},"45":{},"47":{},"54":{},"58":{},"61":{},"62":{},"64":{},"66":{},"68":{},"69":{},"71":{},"72":{},"77":{},"80":{},"82":{},"83":{},"86":{}}}],["1,500",{"_index":3575,"t":{},"h":{},"c":{"54":{}}}],["1.0",{"_index":2840,"t":{},"h":{},"c":{"18":{}}}],["1.0.0",{"_index":2217,"t":{},"h":{},"c":{"18":{}}}],["1.0.1",{"_index":2216,"t":{},"h":{},"c":{"18":{}}}],["1.0.7",{"_index":2128,"t":{},"h":{},"c":{"18":{}}}],["1.1",{"_index":3362,"t":{},"h":{},"c":{"43":{},"61":{}}}],["1.1.0",{"_index":2072,"t":{},"h":{},"c":{"18":{}}}],["1.10.2",{"_index":2189,"t":{},"h":{},"c":{"18":{}}}],["1.10.3",{"_index":2088,"t":{},"h":{},"c":{"18":{}}}],["1.10.5",{"_index":1853,"t":{},"h":{},"c":{"18":{}}}],["1.11.0",{"_index":1825,"t":{},"h":{},"c":{"18":{}}}],["1.11.1",{"_index":1807,"t":{},"h":{},"c":{"18":{}}}],["1.125rem",{"_index":2866,"t":{},"h":{},"c":{"20":{},"36":{}}}],["1.14",{"_index":3124,"t":{},"h":{},"c":{"32":{}}}],["1.17.0–0",{"_index":2837,"t":{},"h":{},"c":{"18":{}}}],["1.17.1",{"_index":2832,"t":{},"h":{},"c":{"18":{}}}],["1.17.3",{"_index":2820,"t":{},"h":{},"c":{"18":{}}}],["1.2.1",{"_index":1982,"t":{},"h":{},"c":{"18":{}}}],["1.2.2",{"_index":2758,"t":{},"h":{},"c":{"18":{}}}],["1.25rem",{"_index":2878,"t":{},"h":{},"c":{"21":{},"23":{}}}],["1.3.0",{"_index":2745,"t":{},"h":{},"c":{"18":{}}}],["1.375rem",{"_index":2867,"t":{},"h":{},"c":{"20":{}}}],["1.4",{"_index":2925,"t":{},"h":{},"c":{"23":{}}}],["1.4.0",{"_index":2721,"t":{},"h":{},"c":{"18":{}}}],["1.4.1",{"_index":2669,"t":{},"h":{},"c":{"18":{}}}],["1.5.0",{"_index":2640,"t":{},"h":{},"c":{"18":{}}}],["1.5rem",{"_index":2915,"t":{},"h":{},"c":{"23":{},"32":{}}}],["1.6.1",{"_index":2494,"t":{},"h":{},"c":{"18":{}}}],["1.7.0",{"_index":2482,"t":{},"h":{},"c":{"18":{}}}],["1.7.1",{"_index":2477,"t":{},"h":{},"c":{"18":{}}}],["1.7.2",{"_index":2456,"t":{},"h":{},"c":{"18":{}}}],["1.75rem",{"_index":2880,"t":{},"h":{},"c":{"21":{}}}],["1.8",{"_index":2926,"t":{},"h":{},"c":{"23":{}}}],["1.8.1",{"_index":2423,"t":{},"h":{},"c":{"18":{}}}],["1.8.3",{"_index":2343,"t":{},"h":{},"c":{"18":{}}}],["1.875rem",{"_index":2850,"t":{},"h":{},"c":{"20":{}}}],["1.9.0",{"_index":2276,"t":{},"h":{},"c":{"18":{}}}],["1.9.1",{"_index":2269,"t":{},"h":{},"c":{"18":{}}}],["1/1",{"_index":3289,"t":{},"h":{},"c":{"41":{}}}],["10",{"_index":3872,"t":{},"h":{},"c":{"61":{},"63":{},"65":{},"77":{}}}],["100",{"_index":1020,"t":{},"h":{},"c":{"11":{},"12":{},"17":{},"18":{},"20":{},"32":{},"41":{},"48":{},"49":{},"53":{},"61":{},"63":{},"65":{},"66":{},"73":{},"76":{}}}],["1000",{"_index":1493,"t":{},"h":{},"c":{"17":{},"18":{},"25":{},"32":{},"43":{},"54":{},"61":{},"82":{}}}],["1000m",{"_index":2889,"t":{},"h":{},"c":{"22":{}}}],["1000px",{"_index":3670,"t":{},"h":{},"c":{"54":{}}}],["1006",{"_index":2157,"t":{},"h":{},"c":{"18":{}}}],["1007",{"_index":2160,"t":{},"h":{},"c":{"18":{}}}],["1009",{"_index":2159,"t":{},"h":{},"c":{"18":{}}}],["100b",{"_index":3518,"t":{},"h":{},"c":{"49":{}}}],["100m",{"_index":3360,"t":{},"h":{},"c":{"43":{}}}],["100px",{"_index":3074,"t":{},"h":{},"c":{"32":{},"61":{},"76":{}}}],["1011",{"_index":2133,"t":{},"h":{},"c":{"18":{}}}],["1013",{"_index":2151,"t":{},"h":{},"c":{"18":{}}}],["1018",{"_index":2183,"t":{},"h":{},"c":{"18":{}}}],["1020",{"_index":2134,"t":{},"h":{},"c":{"18":{}}}],["1023",{"_index":2126,"t":{},"h":{},"c":{"18":{}}}],["1024",{"_index":2125,"t":{},"h":{},"c":{"18":{}}}],["1026",{"_index":2127,"t":{},"h":{},"c":{"18":{}}}],["1030",{"_index":2107,"t":{},"h":{},"c":{"18":{}}}],["1035",{"_index":2108,"t":{},"h":{},"c":{"18":{}}}],["1036",{"_index":2112,"t":{},"h":{},"c":{"18":{}}}],["1037",{"_index":2113,"t":{},"h":{},"c":{"18":{}}}],["1046",{"_index":2105,"t":{},"h":{},"c":{"18":{}}}],["1050",{"_index":2097,"t":{},"h":{},"c":{"18":{}}}],["1051",{"_index":2095,"t":{},"h":{},"c":{"18":{}}}],["1061",{"_index":2094,"t":{},"h":{},"c":{"18":{}}}],["1063",{"_index":2084,"t":{},"h":{},"c":{"18":{}}}],["1071",{"_index":2090,"t":{},"h":{},"c":{"18":{}}}],["1072",{"_index":2091,"t":{},"h":{},"c":{"18":{}}}],["1076",{"_index":2080,"t":{},"h":{},"c":{"18":{}}}],["1082",{"_index":1980,"t":{},"h":{},"c":{"18":{}}}],["1086",{"_index":2078,"t":{},"h":{},"c":{"18":{}}}],["1090",{"_index":2087,"t":{},"h":{},"c":{"18":{}}}],["1096",{"_index":2081,"t":{},"h":{},"c":{"18":{}}}],["1097",{"_index":2086,"t":{},"h":{},"c":{"18":{}}}],["10px",{"_index":2914,"t":{},"h":{},"c":{"23":{},"36":{},"61":{}}}],["10rem",{"_index":3656,"t":{},"h":{},"c":{"54":{}}}],["11",{"_index":4080,"t":{},"h":{},"c":{"77":{}}}],["1103",{"_index":2082,"t":{},"h":{},"c":{"18":{}}}],["1107",{"_index":2040,"t":{},"h":{},"c":{"18":{}}}],["1109",{"_index":2046,"t":{},"h":{},"c":{"18":{}}}],["1110",{"_index":2059,"t":{},"h":{},"c":{"18":{}}}],["1113",{"_index":1999,"t":{},"h":{},"c":{"18":{}}}],["1114",{"_index":2006,"t":{},"h":{},"c":{"18":{}}}],["1117",{"_index":2047,"t":{},"h":{},"c":{"18":{}}}],["1119",{"_index":2050,"t":{},"h":{},"c":{"18":{}}}],["1121",{"_index":2060,"t":{},"h":{},"c":{"18":{}}}],["1122",{"_index":2005,"t":{},"h":{},"c":{"18":{}}}],["1125",{"_index":2041,"t":{},"h":{},"c":{"18":{}}}],["1130",{"_index":2042,"t":{},"h":{},"c":{"18":{}}}],["1132",{"_index":2063,"t":{},"h":{},"c":{"18":{}}}],["1134",{"_index":2062,"t":{},"h":{},"c":{"18":{}}}],["1135",{"_index":1979,"t":{},"h":{},"c":{"18":{}}}],["1138",{"_index":2052,"t":{},"h":{},"c":{"18":{}}}],["1139",{"_index":2066,"t":{},"h":{},"c":{"18":{}}}],["1141",{"_index":2058,"t":{},"h":{},"c":{"18":{}}}],["1142",{"_index":2045,"t":{},"h":{},"c":{"18":{}}}],["1143",{"_index":2053,"t":{},"h":{},"c":{"18":{}}}],["1147",{"_index":1991,"t":{},"h":{},"c":{"18":{}}}],["1154",{"_index":1992,"t":{},"h":{},"c":{"18":{}}}],["1157",{"_index":1995,"t":{},"h":{},"c":{"18":{}}}],["1164",{"_index":2001,"t":{},"h":{},"c":{"18":{}}}],["1165",{"_index":1996,"t":{},"h":{},"c":{"18":{}}}],["1167",{"_index":1986,"t":{},"h":{},"c":{"18":{}}}],["1169",{"_index":1998,"t":{},"h":{},"c":{"18":{}}}],["1175",{"_index":2008,"t":{},"h":{},"c":{"18":{}}}],["1177",{"_index":2003,"t":{},"h":{},"c":{"18":{}}}],["1178",{"_index":1997,"t":{},"h":{},"c":{"18":{}}}],["1180",{"_index":1964,"t":{},"h":{},"c":{"18":{}}}],["1183",{"_index":1962,"t":{},"h":{},"c":{"18":{}}}],["1195",{"_index":2002,"t":{},"h":{},"c":{"18":{}}}],["1197",{"_index":1967,"t":{},"h":{},"c":{"18":{}}}],["11ti",{"_index":212,"t":{},"h":{},"c":{"1":{}}}],["12",{"_index":2966,"t":{},"h":{"28":{}},"c":{"28":{},"33":{},"52":{},"58":{},"76":{},"77":{}}}],["12.1.6",{"_index":2988,"t":{},"h":{},"c":{"28":{}}}],["12.10",{"_index":2942,"t":{},"h":{},"c":{"26":{}}}],["1200",{"_index":1988,"t":{},"h":{},"c":{"18":{}}}],["1201",{"_index":1978,"t":{},"h":{},"c":{"18":{}}}],["1205",{"_index":1971,"t":{},"h":{},"c":{"18":{}}}],["1205restor",{"_index":1983,"t":{},"h":{},"c":{"18":{}}}],["1208",{"_index":1972,"t":{},"h":{},"c":{"18":{}}}],["1213",{"_index":1974,"t":{},"h":{},"c":{"18":{}}}],["1218",{"_index":1958,"t":{},"h":{},"c":{"18":{}}}],["1220",{"_index":1954,"t":{},"h":{},"c":{"18":{}}}],["1224",{"_index":1957,"t":{},"h":{},"c":{"18":{}}}],["1226",{"_index":1960,"t":{},"h":{},"c":{"18":{}}}],["1234",{"_index":1327,"t":{},"h":{},"c":{"15":{},"18":{}}}],["1235",{"_index":1944,"t":{},"h":{},"c":{"18":{}}}],["1236",{"_index":1924,"t":{},"h":{},"c":{"18":{}}}],["1243",{"_index":1928,"t":{},"h":{},"c":{"18":{}}}],["1244",{"_index":1930,"t":{},"h":{},"c":{"18":{}}}],["1246",{"_index":1926,"t":{},"h":{},"c":{"18":{}}}],["1258",{"_index":1917,"t":{},"h":{},"c":{"18":{}}}],["1260",{"_index":1934,"t":{},"h":{},"c":{"18":{}}}],["1262",{"_index":1939,"t":{},"h":{},"c":{"18":{}}}],["1272",{"_index":1931,"t":{},"h":{},"c":{"18":{}}}],["1274",{"_index":1927,"t":{},"h":{},"c":{"18":{}}}],["128",{"_index":2557,"t":{},"h":{},"c":{"18":{},"67":{}}}],["1282",{"_index":1938,"t":{},"h":{},"c":{"18":{}}}],["1284",{"_index":1946,"t":{},"h":{},"c":{"18":{}}}],["1287",{"_index":1947,"t":{},"h":{},"c":{"18":{}}}],["1288",{"_index":1936,"t":{},"h":{},"c":{"18":{}}}],["1292",{"_index":1937,"t":{},"h":{},"c":{"18":{}}}],["12px",{"_index":2877,"t":{},"h":{},"c":{"21":{},"23":{},"76":{}}}],["13",{"_index":4081,"t":{},"h":{},"c":{"77":{}}}],["13,000",{"_index":2030,"t":{},"h":{},"c":{"18":{}}}],["1301",{"_index":1925,"t":{},"h":{},"c":{"18":{}}}],["1302",{"_index":1942,"t":{},"h":{},"c":{"18":{}}}],["1310",{"_index":1910,"t":{},"h":{},"c":{"18":{}}}],["1317",{"_index":1907,"t":{},"h":{},"c":{"18":{}}}],["1318",{"_index":1897,"t":{},"h":{},"c":{"18":{}}}],["1336",{"_index":1912,"t":{},"h":{},"c":{"18":{}}}],["1338",{"_index":1915,"t":{},"h":{},"c":{"18":{}}}],["1339",{"_index":1913,"t":{},"h":{},"c":{"18":{}}}],["1341",{"_index":1901,"t":{},"h":{},"c":{"18":{}}}],["1343",{"_index":1898,"t":{},"h":{},"c":{"18":{}}}],["1364",{"_index":1899,"t":{},"h":{},"c":{"18":{}}}],["1369",{"_index":1896,"t":{},"h":{},"c":{"18":{}}}],["1380",{"_index":1903,"t":{},"h":{},"c":{"18":{}}}],["1384",{"_index":1905,"t":{},"h":{},"c":{"18":{}}}],["1387",{"_index":1891,"t":{},"h":{},"c":{"18":{}}}],["1391",{"_index":1890,"t":{},"h":{},"c":{"18":{}}}],["1395",{"_index":1894,"t":{},"h":{},"c":{"18":{}}}],["1399",{"_index":1874,"t":{},"h":{},"c":{"18":{}}}],["14",{"_index":2965,"t":{},"h":{"28":{}},"c":{"28":{},"77":{}}}],["14.17",{"_index":2421,"t":{},"h":{},"c":{"18":{}}}],["14.2.4",{"_index":2968,"t":{},"h":{},"c":{"28":{}}}],["1401",{"_index":1887,"t":{},"h":{},"c":{"18":{}}}],["1403",{"_index":1870,"t":{},"h":{},"c":{"18":{}}}],["1410",{"_index":1829,"t":{},"h":{},"c":{"18":{}}}],["1416",{"_index":1859,"t":{},"h":{},"c":{"18":{}}}],["1417",{"_index":1877,"t":{},"h":{},"c":{"18":{}}}],["1419",{"_index":1865,"t":{},"h":{},"c":{"18":{}}}],["1420",{"_index":1878,"t":{},"h":{},"c":{"18":{}}}],["1422",{"_index":1880,"t":{},"h":{},"c":{"18":{}}}],["1429",{"_index":1861,"t":{},"h":{},"c":{"18":{}}}],["1430",{"_index":1882,"t":{},"h":{},"c":{"18":{}}}],["1449",{"_index":1862,"t":{},"h":{},"c":{"18":{}}}],["1450",{"_index":1854,"t":{},"h":{},"c":{"18":{}}}],["1457",{"_index":1883,"t":{},"h":{},"c":{"18":{}}}],["1460",{"_index":1863,"t":{},"h":{},"c":{"18":{}}}],["1470",{"_index":1884,"t":{},"h":{},"c":{"18":{}}}],["1472",{"_index":1847,"t":{},"h":{},"c":{"18":{}}}],["1473",{"_index":1844,"t":{},"h":{},"c":{"18":{}}}],["1485",{"_index":1852,"t":{},"h":{},"c":{"18":{}}}],["1492",{"_index":1848,"t":{},"h":{},"c":{"18":{}}}],["1496",{"_index":1849,"t":{},"h":{},"c":{"18":{}}}],["14px",{"_index":2865,"t":{},"h":{},"c":{"20":{},"23":{}}}],["15",{"_index":2014,"t":{},"h":{},"c":{"18":{},"77":{}}}],["150",{"_index":2026,"t":{},"h":{},"c":{"18":{}}}],["150m",{"_index":2892,"t":{},"h":{},"c":{"22":{}}}],["150px",{"_index":3793,"t":{},"h":{},"c":{"61":{},"76":{}}}],["1521",{"_index":1838,"t":{},"h":{},"c":{"18":{}}}],["1523",{"_index":1837,"t":{},"h":{},"c":{"18":{}}}],["1526",{"_index":1835,"t":{},"h":{},"c":{"18":{}}}],["1531",{"_index":1842,"t":{},"h":{},"c":{"18":{}}}],["1537",{"_index":1832,"t":{},"h":{},"c":{"18":{}}}],["1540",{"_index":1816,"t":{},"h":{},"c":{"18":{}}}],["1542",{"_index":1824,"t":{},"h":{},"c":{"18":{}}}],["1548",{"_index":1821,"t":{},"h":{},"c":{"18":{}}}],["1550",{"_index":1801,"t":{},"h":{},"c":{"18":{}}}],["1563",{"_index":1813,"t":{},"h":{},"c":{"18":{}}}],["1571",{"_index":1812,"t":{},"h":{},"c":{"18":{}}}],["1572",{"_index":1819,"t":{},"h":{},"c":{"18":{}}}],["1583",{"_index":1797,"t":{},"h":{},"c":{"18":{}}}],["1586",{"_index":1798,"t":{},"h":{},"c":{"18":{}}}],["1599",{"_index":1799,"t":{},"h":{},"c":{"18":{}}}],["16",{"_index":4082,"t":{},"h":{},"c":{"77":{}}}],["16.13.1",{"_index":2987,"t":{},"h":{},"c":{"28":{}}}],["16.2.0",{"_index":353,"t":{},"h":{},"c":{"2":{}}}],["16/9",{"_index":3288,"t":{},"h":{},"c":{"41":{}}}],["1604",{"_index":1794,"t":{},"h":{},"c":{"18":{}}}],["1605",{"_index":1780,"t":{},"h":{},"c":{"18":{}}}],["1607",{"_index":1786,"t":{},"h":{},"c":{"18":{}}}],["160px",{"_index":3794,"t":{},"h":{},"c":{"61":{}}}],["1612",{"_index":1800,"t":{},"h":{},"c":{"18":{}}}],["1656",{"_index":1782,"t":{},"h":{},"c":{"18":{}}}],["1659",{"_index":1792,"t":{},"h":{},"c":{"18":{}}}],["1667",{"_index":1789,"t":{},"h":{},"c":{"18":{}}}],["1684",{"_index":1779,"t":{},"h":{},"c":{"18":{}}}],["1689",{"_index":1776,"t":{},"h":{},"c":{"18":{}}}],["169",{"_index":2742,"t":{},"h":{},"c":{"18":{}}}],["1692",{"_index":1718,"t":{},"h":{},"c":{"18":{}}}],["1696",{"_index":1770,"t":{},"h":{},"c":{"18":{}}}],["16px",{"_index":1475,"t":{},"h":{},"c":{"16":{},"18":{},"20":{},"21":{},"23":{}}}],["17",{"_index":4083,"t":{},"h":{},"c":{"77":{}}}],["1700",{"_index":1726,"t":{},"h":{},"c":{"18":{}}}],["1702",{"_index":1777,"t":{},"h":{},"c":{"18":{}}}],["1707",{"_index":1769,"t":{},"h":{},"c":{"18":{}}}],["1708",{"_index":1767,"t":{},"h":{},"c":{"18":{}}}],["1709",{"_index":1695,"t":{},"h":{},"c":{"18":{}}}],["1711",{"_index":1768,"t":{},"h":{},"c":{"18":{}}}],["1727",{"_index":1764,"t":{},"h":{},"c":{"18":{}}}],["1730",{"_index":1748,"t":{},"h":{},"c":{"18":{}}}],["1734",{"_index":1725,"t":{},"h":{},"c":{"18":{}}}],["1746",{"_index":1736,"t":{},"h":{},"c":{"18":{}}}],["1748",{"_index":1754,"t":{},"h":{},"c":{"18":{}}}],["1750",{"_index":1735,"t":{},"h":{},"c":{"18":{}}}],["1755",{"_index":1732,"t":{},"h":{},"c":{"18":{}}}],["1763",{"_index":1737,"t":{},"h":{},"c":{"18":{}}}],["1770",{"_index":1729,"t":{},"h":{},"c":{"18":{}}}],["1787",{"_index":1740,"t":{},"h":{},"c":{"18":{}}}],["1788",{"_index":1761,"t":{},"h":{},"c":{"18":{}}}],["1795",{"_index":1743,"t":{},"h":{},"c":{"18":{}}}],["18",{"_index":4084,"t":{},"h":{},"c":{"77":{}}}],["1800",{"_index":1713,"t":{},"h":{},"c":{"18":{}}}],["1805",{"_index":1747,"t":{},"h":{},"c":{"18":{}}}],["1813",{"_index":1741,"t":{},"h":{},"c":{"18":{}}}],["1823",{"_index":1742,"t":{},"h":{},"c":{"18":{}}}],["1831",{"_index":1749,"t":{},"h":{},"c":{"18":{}}}],["1835",{"_index":1722,"t":{},"h":{},"c":{"18":{}}}],["1839",{"_index":1699,"t":{},"h":{},"c":{"18":{}}}],["1852",{"_index":1711,"t":{},"h":{},"c":{"18":{}}}],["1860",{"_index":1712,"t":{},"h":{},"c":{"18":{}}}],["1862",{"_index":1716,"t":{},"h":{},"c":{"18":{}}}],["1874",{"_index":1682,"t":{},"h":{},"c":{"18":{}}}],["1877",{"_index":1692,"t":{},"h":{},"c":{"18":{}}}],["1878",{"_index":1693,"t":{},"h":{},"c":{"18":{}}}],["1880",{"_index":1700,"t":{},"h":{},"c":{"18":{}}}],["1886",{"_index":1701,"t":{},"h":{},"c":{"18":{}}}],["1887",{"_index":1707,"t":{},"h":{},"c":{"18":{}}}],["1893",{"_index":1678,"t":{},"h":{},"c":{"18":{}}}],["1895",{"_index":1690,"t":{},"h":{},"c":{"18":{}}}],["1897",{"_index":1704,"t":{},"h":{},"c":{"18":{}}}],["18px",{"_index":2089,"t":{},"h":{},"c":{"18":{},"20":{}}}],["19",{"_index":4085,"t":{},"h":{},"c":{"77":{}}}],["1922",{"_index":1730,"t":{},"h":{},"c":{"18":{}}}],["1926",{"_index":1709,"t":{},"h":{},"c":{"18":{}}}],["1927",{"_index":1687,"t":{},"h":{},"c":{"18":{}}}],["1935",{"_index":1685,"t":{},"h":{},"c":{"18":{}}}],["1937",{"_index":1684,"t":{},"h":{},"c":{"18":{}}}],["1942",{"_index":1660,"t":{},"h":{},"c":{"18":{}}}],["1947",{"_index":1665,"t":{},"h":{},"c":{"18":{}}}],["1967",{"_index":1662,"t":{},"h":{},"c":{"18":{}}}],["1974",{"_index":1666,"t":{},"h":{},"c":{"18":{}}}],["1979",{"_index":1676,"t":{},"h":{},"c":{"18":{}}}],["1985",{"_index":1667,"t":{},"h":{},"c":{"18":{}}}],["1992",{"_index":1650,"t":{},"h":{},"c":{"18":{}}}],["1]}\">",{"_index":1831,"t":{},"h":{},"c":{"18":{}}}],["slotchang",{"_index":1390,"t":{},"h":{},"c":{"15":{},"18":{}}}],["slotchange={this.handleslotchang",{"_index":1385,"t":{},"h":{},"c":{"15":{}}}],["slot’",{"_index":2116,"t":{},"h":{},"c":{"18":{}}}],["slovenian",{"_index":1677,"t":{},"h":{},"c":{"18":{}}}],["slow",{"_index":2888,"t":{},"h":{},"c":{"22":{}}}],["slower",{"_index":2218,"t":{},"h":{},"c":{"18":{}}}],["slpopup",{"_index":3769,"t":{},"h":{},"c":{"61":{}}}],["slprogressbar",{"_index":3908,"t":{},"h":{},"c":{"65":{}}}],["slprogressr",{"_index":3890,"t":{},"h":{},"c":{"63":{}}}],["slqrcode",{"_index":3919,"t":{},"h":{},"c":{"67":{}}}],["slradio",{"_index":4010,"t":{},"h":{},"c":{"72":{}}}],["slradiobutton",{"_index":3906,"t":{},"h":{},"c":{"64":{}}}],["slradiogroup",{"_index":4183,"t":{},"h":{},"c":{"86":{}}}],["slrang",{"_index":3914,"t":{},"h":{},"c":{"66":{}}}],["slrate",{"_index":3940,"t":{},"h":{},"c":{"68":{}}}],["slrelativetim",{"_index":3970,"t":{},"h":{},"c":{"69":{}}}],["slresizeobserv",{"_index":3983,"t":{},"h":{},"c":{"70":{}}}],["slselect",{"_index":3989,"t":{},"h":{},"c":{"71":{}}}],["slshow",{"_index":2816,"t":{},"h":{},"c":{"18":{}}}],["slskeleton",{"_index":4012,"t":{},"h":{},"c":{"73":{}}}],["slspinner",{"_index":4043,"t":{},"h":{},"c":{"74":{}}}],["slsplitpanel",{"_index":4046,"t":{},"h":{},"c":{"76":{}}}],["slswitch",{"_index":4044,"t":{},"h":{},"c":{"75":{}}}],["sltab",{"_index":4093,"t":{},"h":{},"c":{"79":{}}}],["sltabgroup",{"_index":4068,"t":{},"h":{},"c":{"77":{}}}],["sltabpanel",{"_index":4092,"t":{},"h":{},"c":{"78":{}}}],["sltag",{"_index":4096,"t":{},"h":{},"c":{"80":{}}}],["sltextarea",{"_index":4102,"t":{},"h":{},"c":{"81":{}}}],["sltooltip",{"_index":4162,"t":{},"h":{},"c":{"84":{}}}],["sltree",{"_index":4105,"t":{},"h":{},"c":{"82":{}}}],["sltreeitem",{"_index":4147,"t":{},"h":{},"c":{"82":{},"83":{}}}],["sluggish",{"_index":2004,"t":{},"h":{},"c":{"18":{}}}],["slvisuallyhidden",{"_index":4175,"t":{},"h":{},"c":{"85":{}}}],["small",{"_index":1476,"t":{},"h":{},"c":{"16":{},"18":{},"19":{},"20":{},"21":{},"23":{},"36":{},"37":{},"38":{},"40":{},"41":{},"42":{},"44":{},"54":{},"55":{},"64":{},"67":{},"68":{},"71":{},"72":{},"73":{},"75":{},"76":{},"80":{},"81":{},"86":{}}}],["smaller",{"_index":688,"t":{},"h":{},"c":{"8":{},"11":{},"18":{},"36":{},"46":{},"48":{}}}],["smartphon",{"_index":3922,"t":{},"h":{},"c":{"67":{}}}],["smile",{"_index":3962,"t":{},"h":{},"c":{"68":{}}}],["smooth",{"_index":339,"t":{},"h":{},"c":{"2":{},"18":{},"41":{}}}],["snap",{"_index":3250,"t":{},"h":{"76":{}},"c":{"41":{},"76":{}}}],["snap=\"100px",{"_index":4047,"t":{},"h":{},"c":{"76":{}}}],["snapthreshold",{"_index":4066,"t":{},"h":{},"c":{"76":{}}}],["snif",{"_index":2242,"t":{},"h":{},"c":{"18":{}}}],["snippet",{"_index":1123,"t":{},"h":{},"c":{"13":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["softwar",{"_index":1068,"t":{},"h":{},"c":{"12":{},"15":{}}}],["solid",{"_index":505,"t":{},"h":{},"c":{"7":{},"18":{},"20":{},"31":{},"43":{},"47":{},"54":{},"61":{},"70":{},"82":{},"84":{}}}],["solut",{"_index":849,"t":{},"h":{},"c":{"9":{},"15":{},"18":{}}}],["solv",{"_index":28,"t":{},"h":{"1":{}},"c":{"1":{},"9":{},"13":{},"18":{},"24":{}}}],["someon",{"_index":1257,"t":{},"h":{},"c":{"15":{}}}],["someth",{"_index":879,"t":{},"h":{},"c":{"9":{},"12":{},"13":{},"15":{},"18":{},"28":{},"31":{},"85":{}}}],["sometim",{"_index":1461,"t":{},"h":{},"c":{"15":{},"18":{},"46":{},"61":{}}}],["somewhat",{"_index":1078,"t":{},"h":{},"c":{"12":{}}}],["sonr",{"_index":3573,"t":{},"h":{"54":{}},"c":{"54":{}}}],["soon",{"_index":932,"t":{},"h":{},"c":{"10":{},"18":{},"40":{},"86":{}}}],["sorri",{"_index":3018,"t":{},"h":{},"c":{"30":{}}}],["sort",{"_index":3216,"t":{},"h":{},"c":{"38":{},"54":{}}}],["sourc",{"_index":47,"t":{},"h":{},"c":{"1":{},"7":{},"8":{},"9":{},"11":{},"13":{},"15":{},"18":{},"20":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["space",{"_index":816,"t":{"21":{}},"h":{"21":{},"23":{},"45":{}},"c":{"9":{},"15":{},"18":{},"20":{},"21":{},"23":{},"30":{},"37":{},"38":{},"41":{},"44":{},"45":{},"46":{},"47":{},"48":{},"54":{},"55":{},"60":{},"61":{},"62":{},"68":{},"71":{},"73":{},"76":{},"77":{},"82":{},"84":{}}}],["spacebar",{"_index":4087,"t":{},"h":{},"c":{"77":{}}}],["spam",{"_index":1238,"t":{},"h":{},"c":{"15":{}}}],["span",{"_index":532,"t":{},"h":{},"c":{"7":{},"18":{},"36":{},"45":{},"68":{}}}],["span.textcont",{"_index":3950,"t":{},"h":{},"c":{"68":{}}}],["span:empti",{"_index":3953,"t":{},"h":{},"c":{"68":{}}}],["span[slot='anchor",{"_index":3792,"t":{},"h":{},"c":{"61":{}}}],["spanish",{"_index":1135,"t":{},"h":{},"c":{"14":{},"18":{}}}],["spawn",{"_index":3448,"t":{},"h":{},"c":{"46":{},"48":{}}}],["speak",{"_index":1314,"t":{},"h":{},"c":{"15":{}}}],["spec",{"_index":1316,"t":{},"h":{},"c":{"15":{}}}],["special",{"_index":11,"t":{"1":{}},"h":{},"c":{"1":{},"15":{},"18":{},"55":{}}}],["specif",{"_index":21,"t":{},"h":{"1":{}},"c":{"1":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"14":{},"15":{},"18":{},"20":{},"36":{},"42":{},"60":{},"61":{},"76":{},"84":{}}}],["specifi",{"_index":939,"t":{},"h":{},"c":{"10":{},"11":{},"18":{},"41":{},"42":{},"47":{},"50":{},"52":{},"55":{},"60":{},"68":{},"71":{},"77":{},"81":{}}}],["spectrum",{"_index":2460,"t":{},"h":{},"c":{"18":{}}}],["speed",{"_index":2509,"t":{},"h":{},"c":{"18":{},"32":{},"74":{}}}],["spell",{"_index":2093,"t":{},"h":{},"c":{"18":{},"55":{},"58":{},"81":{}}}],["spellcheck",{"_index":2787,"t":{},"h":{},"c":{"18":{},"55":{},"81":{}}}],["spend",{"_index":128,"t":{},"h":{},"c":{"1":{}}}],["spin",{"_index":1271,"t":{},"h":{},"c":{"15":{},"18":{},"55":{}}}],["spinner",{"_index":1428,"t":{"74":{}},"h":{"74":{}},"c":{"15":{},"18":{},"36":{},"42":{},"58":{},"74":{},"83":{}}}],["spinner__bas",{"_index":1683,"t":{},"h":{},"c":{"18":{},"58":{},"83":{}}}],["spinner’",{"_index":3732,"t":{},"h":{},"c":{"58":{},"74":{},"83":{}}}],["split",{"_index":1657,"t":{"76":{}},"h":{"37":{},"76":{}},"c":{"18":{},"37":{},"76":{}}}],["splitpanel",{"_index":4055,"t":{},"h":{},"c":{"76":{}}}],["splitpanel.primari",{"_index":4056,"t":{},"h":{},"c":{"76":{}}}],["sponsor",{"_index":1198,"t":{},"h":{},"c":{"15":{}}}],["sprinkl",{"_index":1317,"t":{},"h":{},"c":{"15":{}}}],["sprite",{"_index":1817,"t":{},"h":{},"c":{"18":{}}}],["spritesheet",{"_index":1686,"t":{},"h":{},"c":{"18":{},"54":{}}}],["spruce",{"_index":4115,"t":{},"h":{},"c":{"82":{}}}],["squar",{"_index":3067,"t":{},"h":{},"c":{"31":{},"40":{},"43":{},"73":{}}}],["square::part(ind",{"_index":4030,"t":{},"h":{},"c":{"73":{}}}],["src",{"_index":620,"t":{},"h":{},"c":{"8":{},"18":{},"29":{},"51":{},"54":{},"57":{}}}],["src/components/library.system.t",{"_index":3599,"t":{},"h":{},"c":{"54":{}}}],["src/pages/index.astro",{"_index":2937,"t":{},"h":{},"c":{"24":{}}}],["src/setuptests.j",{"_index":364,"t":{},"h":{},"c":{"2":{}}}],["src/themes/light.css",{"_index":484,"t":{},"h":{},"c":{"7":{}}}],["src/translat",{"_index":1145,"t":{},"h":{},"c":{"14":{}}}],["src/translations/en.t",{"_index":1162,"t":{},"h":{},"c":{"14":{}}}],["src/utilities/index.t",{"_index":2639,"t":{},"h":{},"c":{"18":{}}}],["ssr",{"_index":2308,"t":{},"h":{"24":{}},"c":{"18":{},"24":{},"28":{}}}],["stabl",{"_index":1625,"t":{},"h":{},"c":{"18":{},"20":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"40":{},"42":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["stack",{"_index":1094,"t":{},"h":{"13":{},"30":{}},"c":{"13":{},"18":{},"23":{},"25":{},"30":{},"76":{}}}],["stale",{"_index":1306,"t":{},"h":{},"c":{"15":{},"18":{}}}],["standard",{"_index":116,"t":{},"h":{},"c":{"1":{},"2":{},"6":{},"8":{},"9":{},"10":{},"15":{},"18":{},"30":{},"40":{},"42":{},"55":{},"64":{},"66":{},"71":{},"72":{},"75":{},"81":{}}}],["star",{"_index":3968,"t":{},"h":{},"c":{"68":{}}}],["start",{"_index":25,"t":{},"h":{"1":{},"48":{},"77":{}},"c":{"1":{},"2":{},"4":{},"5":{},"6":{},"8":{},"11":{},"14":{},"15":{},"18":{},"24":{},"26":{},"28":{},"32":{},"38":{},"47":{},"48":{},"55":{},"58":{},"61":{},"62":{},"68":{},"76":{},"77":{},"81":{},"82":{},"84":{}}}],["started/instal",{"_index":2970,"t":{},"h":{},"c":{"28":{}}}],["startup",{"_index":1288,"t":{},"h":{},"c":{"15":{}}}],["stat",{"_index":2017,"t":{},"h":{},"c":{"18":{}}}],["state",{"_index":316,"t":{},"h":{"64":{}},"c":{"2":{},"9":{},"15":{},"18":{},"24":{},"30":{},"36":{},"40":{},"42":{},"43":{},"44":{},"46":{},"47":{},"48":{},"55":{},"58":{},"62":{},"64":{},"65":{},"66":{},"71":{},"72":{},"73":{},"75":{},"79":{},"81":{},"82":{},"83":{},"86":{}}}],["statement",{"_index":2957,"t":{},"h":{},"c":{"27":{}}}],["static",{"_index":616,"t":{},"h":{"27":{}},"c":{"8":{},"15":{},"18":{},"27":{},"73":{}}}],["statu",{"_index":878,"t":{},"h":{},"c":{"9":{},"18":{},"57":{},"65":{}}}],["status",{"_index":3137,"t":{},"h":{},"c":{"33":{}}}],["stay",{"_index":2573,"t":{},"h":{},"c":{"18":{},"47":{},"61":{}}}],["stayopenonselect",{"_index":3484,"t":{},"h":{},"c":{"47":{}}}],["stead",{"_index":4180,"t":{},"h":{},"c":{"85":{}}}],["steal",{"_index":2782,"t":{},"h":{},"c":{"18":{}}}],["stencil",{"_index":2697,"t":{},"h":{},"c":{"18":{}}}],["step",{"_index":1242,"t":{},"h":{"66":{}},"c":{"15":{},"24":{},"26":{},"27":{},"28":{},"55":{},"66":{}}}],["step=\"ani",{"_index":2255,"t":{},"h":{},"c":{"18":{}}}],["stepdown",{"_index":2150,"t":{},"h":{},"c":{"18":{},"55":{},"66":{}}}],["stepup",{"_index":2149,"t":{},"h":{},"c":{"18":{},"55":{},"66":{}}}],["stick",{"_index":606,"t":{},"h":{},"c":{"8":{},"18":{}}}],["still",{"_index":335,"t":{},"h":{},"c":{"2":{},"5":{},"6":{},"7":{},"12":{},"15":{},"18":{},"47":{},"51":{},"76":{}}}],["stolen",{"_index":1881,"t":{},"h":{},"c":{"18":{}}}],["stop",{"_index":1072,"t":{},"h":{},"c":{"12":{},"18":{},"32":{},"68":{}}}],["store",{"_index":3030,"t":{},"h":{},"c":{"30":{},"58":{}}}],["storybook",{"_index":1284,"t":{},"h":{},"c":{"15":{}}}],["strang",{"_index":1738,"t":{},"h":{},"c":{"18":{}}}],["strategi",{"_index":2109,"t":{},"h":{"61":{}},"c":{"18":{},"42":{},"43":{},"47":{},"61":{},"71":{},"84":{}}}],["streamlin",{"_index":1286,"t":{},"h":{},"c":{"15":{},"18":{}}}],["stretch",{"_index":3220,"t":{},"h":{},"c":{"38":{}}}],["stricter",{"_index":2411,"t":{},"h":{},"c":{"18":{}}}],["stride",{"_index":333,"t":{},"h":{},"c":{"2":{}}}],["string",{"_index":641,"t":{},"h":{},"c":{"8":{},"9":{},"10":{},"18":{},"29":{},"31":{},"32":{},"34":{},"35":{},"36":{},"37":{},"40":{},"42":{},"43":{},"44":{},"46":{},"48":{},"50":{},"51":{},"52":{},"54":{},"55":{},"57":{},"58":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"71":{},"72":{},"75":{},"76":{},"77":{},"78":{},"79":{},"81":{},"84":{},"86":{}}}],["strive",{"_index":1063,"t":{},"h":{},"c":{"12":{}}}],["stroke",{"_index":2508,"t":{},"h":{},"c":{"18":{}}}],["stroke=\"currentcolor",{"_index":3581,"t":{},"h":{},"c":{"54":{}}}],["strongli",{"_index":321,"t":{},"h":{},"c":{"2":{},"37":{},"52":{},"69":{}}}],["structur",{"_index":535,"t":{},"h":{"15":{}},"c":{"7":{},"15":{},"18":{}}}],["stuck",{"_index":2985,"t":{},"h":{},"c":{"28":{}}}],["studi",{"_index":1250,"t":{},"h":{},"c":{"15":{}}}],["studio",{"_index":967,"t":{},"h":{},"c":{"10":{}}}],["stuff",{"_index":2037,"t":{},"h":{},"c":{"18":{}}}],["style",{"_index":89,"t":{},"h":{"9":{},"36":{},"43":{},"69":{},"75":{}},"c":{"1":{},"7":{},"9":{},"10":{},"11":{},"15":{},"18":{},"20":{},"23":{},"29":{},"30":{},"32":{},"33":{},"36":{},"41":{},"43":{},"50":{},"51":{},"54":{},"55":{},"57":{},"61":{},"64":{},"69":{},"71":{},"73":{},"75":{},"76":{},"80":{},"82":{}}}],["style/anim",{"_index":2738,"t":{},"h":{},"c":{"18":{}}}],["style/loc",{"_index":1802,"t":{},"h":{},"c":{"18":{}}}],["style/react",{"_index":2641,"t":{},"h":{},"c":{"18":{}}}],["style=\"pad",{"_index":3999,"t":{},"h":{},"c":{"71":{}}}],["styles::part(button",{"_index":3359,"t":{},"h":{},"c":{"43":{}}}],["styles::part(button):act",{"_index":3363,"t":{},"h":{},"c":{"43":{}}}],["styles::part(button):focu",{"_index":3364,"t":{},"h":{},"c":{"43":{}}}],["styles::part(button):hov",{"_index":3361,"t":{},"h":{},"c":{"43":{}}}],["stylesheet",{"_index":477,"t":{},"h":{},"c":{"7":{},"8":{},"11":{},"15":{},"18":{},"26":{},"27":{},"28":{},"30":{},"61":{},"84":{}}}],["subitem",{"_index":4133,"t":{},"h":{},"c":{"82":{}}}],["subject",{"_index":1229,"t":{},"h":{},"c":{"15":{},"18":{},"29":{},"38":{}}}],["submenu",{"_index":1648,"t":{},"h":{"47":{},"59":{}},"c":{"18":{},"47":{},"58":{},"59":{}}}],["submiss",{"_index":723,"t":{},"h":{},"c":{"9":{},"15":{},"18":{},"40":{},"42":{},"55":{},"66":{},"71":{},"72":{},"75":{},"81":{}}}],["submit",{"_index":709,"t":{},"h":{"14":{}},"c":{"9":{},"10":{},"12":{},"14":{},"15":{},"18":{},"36":{},"40":{},"42":{},"55":{},"66":{},"71":{},"75":{},"81":{},"86":{}}}],["submitt",{"_index":2117,"t":{},"h":{},"c":{"18":{},"36":{}}}],["subpart",{"_index":1424,"t":{},"h":{},"c":{"15":{}}}],["subpath",{"_index":1948,"t":{},"h":{},"c":{"18":{}}}],["subsequ",{"_index":1000,"t":{},"h":{},"c":{"11":{},"28":{},"32":{},"46":{},"48":{},"84":{}}}],["subset",{"_index":552,"t":{},"h":{},"c":{"7":{},"54":{},"55":{}}}],["substanti",{"_index":111,"t":{},"h":{},"c":{"1":{},"15":{}}}],["subtl",{"_index":924,"t":{},"h":{},"c":{"10":{},"16":{},"18":{},"33":{},"73":{}}}],["subtractbutton",{"_index":3895,"t":{},"h":{},"c":{"63":{},"65":{}}}],["subtractbutton.addeventlistener('click",{"_index":3903,"t":{},"h":{},"c":{"63":{},"65":{}}}],["subtractbutton.nextelements",{"_index":3898,"t":{},"h":{},"c":{"63":{},"65":{}}}],["success",{"_index":843,"t":{},"h":{},"c":{"9":{},"15":{},"17":{},"18":{},"30":{},"33":{},"36":{},"43":{},"60":{},"80":{}}}],["successfulli",{"_index":3008,"t":{},"h":{},"c":{"29":{},"57":{}}}],["successlabel",{"_index":3370,"t":{},"h":{},"c":{"43":{}}}],["such",{"_index":77,"t":{},"h":{},"c":{"1":{},"2":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"12":{},"14":{},"15":{},"18":{},"20":{},"30":{},"32":{},"46":{},"48":{},"52":{},"58":{},"61":{},"62":{},"69":{},"84":{},"85":{}}}],["suffix",{"_index":2076,"t":{},"h":{"35":{},"36":{},"55":{},"58":{},"62":{},"64":{}},"c":{"18":{},"33":{},"34":{},"35":{},"36":{},"42":{},"47":{},"55":{},"58":{},"62":{},"64":{}}}],["sugar",{"_index":4110,"t":{},"h":{},"c":{"82":{}}}],["suggest",{"_index":1089,"t":{},"h":{},"c":{"12":{},"15":{},"24":{},"26":{},"27":{},"28":{}}}],["suitabl",{"_index":3825,"t":{},"h":{},"c":{"61":{}}}],["summari",{"_index":2184,"t":{},"h":{"44":{}},"c":{"18":{},"38":{},"44":{}}}],["super",{"_index":3014,"t":{},"h":{},"c":{"30":{}}}],["superflu",{"_index":2461,"t":{},"h":{},"c":{"18":{}}}],["superset",{"_index":1434,"t":{},"h":{},"c":{"15":{}}}],["suppli",{"_index":3108,"t":{},"h":{},"c":{"32":{}}}],["support",{"_index":30,"t":{},"h":{"1":{}},"c":{"1":{},"2":{},"5":{},"6":{},"7":{},"9":{},"10":{},"11":{},"13":{},"15":{},"18":{},"24":{},"28":{},"29":{},"37":{},"55":{},"59":{},"81":{}}}],["suppos",{"_index":795,"t":{},"h":{},"c":{"9":{}}}],["suppress",{"_index":748,"t":{},"h":{},"c":{"9":{},"58":{}}}],["sure",{"_index":402,"t":{},"h":{},"c":{"4":{},"8":{},"10":{},"14":{},"15":{},"27":{},"33":{},"51":{},"54":{},"57":{},"61":{},"64":{},"71":{},"76":{}}}],["surfac",{"_index":2471,"t":{},"h":{},"c":{"18":{}}}],["surround",{"_index":750,"t":{},"h":{},"c":{"9":{},"15":{},"29":{},"36":{}}}],["svg",{"_index":1446,"t":{},"h":{},"c":{"15":{},"18":{},"51":{},"53":{},"54":{}}}],["svg.setattribute('fil",{"_index":3595,"t":{},"h":{},"c":{"54":{}}}],["svg’",{"_index":3588,"t":{},"h":{},"c":{"54":{}}}],["swap",{"_index":2530,"t":{},"h":{},"c":{"18":{}}}],["swatch",{"_index":901,"t":{},"h":{"42":{}},"c":{"10":{},"17":{},"18":{},"42":{}}}],["swedish",{"_index":2253,"t":{},"h":{},"c":{"18":{}}}],["swipe",{"_index":1752,"t":{},"h":{},"c":{"18":{}}}],["switch",{"_index":150,"t":{"75":{}},"h":{"75":{}},"c":{"1":{},"18":{},"20":{},"40":{},"41":{},"61":{},"75":{}}}],["switch[name=\"act",{"_index":3777,"t":{},"h":{},"c":{"61":{}}}],["switch[name=\"arrow",{"_index":3778,"t":{},"h":{},"c":{"61":{}}}],["switcher",{"_index":1893,"t":{},"h":{},"c":{"18":{}}}],["switch’",{"_index":4045,"t":{},"h":{},"c":{"75":{}}}],["switzerland",{"_index":1153,"t":{},"h":{},"c":{"14":{},"18":{}}}],["symbol",{"_index":780,"t":{},"h":{"68":{}},"c":{"9":{},"18":{},"23":{},"50":{},"54":{},"68":{},"71":{}}}],["sync",{"_index":432,"t":{},"h":{"61":{},"69":{}},"c":{"5":{},"18":{},"41":{},"47":{},"61":{},"69":{}}}],["sync.addeventlistener('sl",{"_index":3811,"t":{},"h":{},"c":{"61":{}}}],["sync.valu",{"_index":3813,"t":{},"h":{},"c":{"61":{}}}],["synchron",{"_index":1941,"t":{},"h":{},"c":{"18":{}}}],["syntax",{"_index":751,"t":{},"h":{},"c":{"9":{},"15":{},"18":{}}}],["synthet",{"_index":2768,"t":{},"h":{},"c":{"18":{}}}],["system",{"_index":131,"t":{},"h":{"15":{},"54":{}},"c":{"1":{},"3":{},"15":{},"17":{},"18":{},"23":{},"54":{},"59":{}}}],["t",{"_index":2516,"t":{},"h":{},"c":{"18":{}}}],["t0",{"_index":2187,"t":{},"h":{},"c":{"18":{}}}],["tab",{"_index":1410,"t":{"77":{},"78":{},"79":{}},"h":{"77":{},"78":{},"79":{}},"c":{"15":{},"18":{},"46":{},"48":{},"77":{},"78":{},"79":{},"80":{},"85":{}}}],["tab.act",{"_index":4075,"t":{},"h":{},"c":{"77":{}}}],["tab.remov",{"_index":4077,"t":{},"h":{},"c":{"77":{}}}],["tab/window",{"_index":3188,"t":{},"h":{},"c":{"36":{}}}],["tabbabl",{"_index":1644,"t":{},"h":{},"c":{"18":{},"46":{},"48":{}}}],["tabgroup",{"_index":4069,"t":{},"h":{},"c":{"77":{}}}],["tabgroup.addeventlistener('sl",{"_index":4071,"t":{},"h":{},"c":{"77":{}}}],["tabgroup.queryselector(`sl",{"_index":4073,"t":{},"h":{},"c":{"77":{}}}],["tabgroup.show(tab.previouselementsibling.panel",{"_index":4076,"t":{},"h":{},"c":{"77":{}}}],["tabindex",{"_index":1643,"t":{},"h":{},"c":{"18":{}}}],["tabl",{"_index":2560,"t":{},"h":{},"c":{"18":{},"32":{},"84":{}}}],["tabler",{"_index":2318,"t":{},"h":{},"c":{"18":{}}}],["tab’",{"_index":4094,"t":{},"h":{},"c":{"79":{},"80":{}}}],["tackl",{"_index":2989,"t":{},"h":{},"c":{"28":{}}}],["tag",{"_index":397,"t":{"80":{}},"h":{"10":{},"26":{},"71":{},"80":{}},"c":{"4":{},"8":{},"10":{},"13":{},"15":{},"18":{},"26":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["tag.style.opac",{"_index":4099,"t":{},"h":{},"c":{"80":{}}}],["tag__bas",{"_index":1950,"t":{},"h":{},"c":{"18":{},"71":{}}}],["tag__cont",{"_index":1951,"t":{},"h":{},"c":{"18":{},"71":{}}}],["tag__remov",{"_index":1952,"t":{},"h":{},"c":{"18":{},"71":{}}}],["tag’",{"_index":3994,"t":{},"h":{},"c":{"71":{},"80":{}}}],["tailwind",{"_index":218,"t":{},"h":{},"c":{"1":{},"17":{}}}],["tailwind’",{"_index":2746,"t":{},"h":{},"c":{"18":{}}}],["take",{"_index":545,"t":{},"h":{},"c":{"7":{},"10":{},"11":{},"15":{},"18":{},"30":{},"31":{},"32":{},"43":{},"74":{}}}],["taken",{"_index":3158,"t":{},"h":{},"c":{"35":{}}}],["talent",{"_index":1115,"t":{},"h":{},"c":{"13":{}}}],["tap",{"_index":1412,"t":{},"h":{},"c":{"15":{},"18":{},"54":{}}}],["target",{"_index":322,"t":{},"h":{},"c":{"2":{},"7":{},"9":{},"15":{},"18":{},"29":{},"30":{},"32":{},"34":{},"36":{},"41":{},"43":{},"47":{},"50":{},"51":{},"60":{},"61":{},"70":{},"71":{},"76":{},"84":{}}}],["target.matches('.thumbnails__imag",{"_index":3313,"t":{},"h":{},"c":{"41":{}}}],["target.remov",{"_index":3756,"t":{},"h":{},"c":{"60":{}}}],["task",{"_index":272,"t":{},"h":{},"c":{"2":{},"4":{},"5":{},"6":{},"15":{}}}],["teal",{"_index":1505,"t":{},"h":{},"c":{"17":{}}}],["team",{"_index":1066,"t":{},"h":{},"c":{"12":{},"18":{}}}],["tear",{"_index":3798,"t":{},"h":{},"c":{"61":{}}}],["technic",{"_index":1304,"t":{},"h":{},"c":{"15":{},"18":{},"61":{}}}],["techniqu",{"_index":850,"t":{},"h":{},"c":{"9":{},"55":{}}}],["technolog",{"_index":122,"t":{},"h":{},"c":{"1":{},"12":{},"85":{}}}],["tel",{"_index":3681,"t":{},"h":{},"c":{"55":{},"81":{}}}],["tell",{"_index":375,"t":{},"h":{},"c":{"2":{},"5":{},"10":{},"30":{},"34":{},"36":{},"51":{},"55":{},"61":{},"63":{},"65":{},"68":{},"81":{}}}],["templ",{"_index":383,"t":{"3":{}},"h":{"3":{}},"c":{"3":{}}}],["templat",{"_index":451,"t":{},"h":{},"c":{"6":{},"15":{},"18":{},"27":{},"41":{},"54":{},"71":{},"73":{}}}],["templateresult",{"_index":4007,"t":{},"h":{},"c":{"71":{}}}],["tempor",{"_index":3394,"t":{},"h":{},"c":{"44":{}}}],["temporarili",{"_index":2289,"t":{},"h":{},"c":{"18":{},"46":{},"48":{}}}],["tend",{"_index":3816,"t":{},"h":{},"c":{"61":{}}}],["term",{"_index":97,"t":{},"h":{},"c":{"1":{},"9":{},"14":{},"18":{},"46":{},"48":{},"54":{},"68":{}}}],["termin",{"_index":1296,"t":{},"h":{},"c":{"15":{}}}],["terms').tolowercas",{"_index":3646,"t":{},"h":{},"c":{"54":{}}}],["terms.indexof(filt",{"_index":3647,"t":{},"h":{},"c":{"54":{}}}],["terms[event.detail.valu",{"_index":3951,"t":{},"h":{},"c":{"68":{}}}],["terribl",{"_index":3947,"t":{},"h":{},"c":{"68":{}}}],["test",{"_index":98,"t":{},"h":{"2":{},"15":{}},"c":{"1":{},"2":{},"12":{},"15":{},"18":{},"26":{},"27":{},"61":{}}}],["text",{"_index":827,"t":{},"h":{"20":{},"36":{},"40":{},"55":{},"66":{},"71":{},"75":{},"81":{},"86":{}},"c":{"9":{},"18":{},"20":{},"30":{},"35":{},"36":{},"40":{},"42":{},"43":{},"54":{},"55":{},"58":{},"60":{},"62":{},"66":{},"68":{},"70":{},"71":{},"75":{},"80":{},"81":{},"84":{},"85":{},"86":{}}}],["text/plain",{"_index":3197,"t":{},"h":{},"c":{"36":{}}}],["textarea",{"_index":773,"t":{"81":{}},"h":{"81":{}},"c":{"9":{},"10":{},"18":{},"20":{},"55":{},"81":{}}}],["textarea’",{"_index":4103,"t":{},"h":{},"c":{"81":{}}}],["textcont",{"_index":3086,"t":{},"h":{},"c":{"32":{},"43":{}}}],["text’",{"_index":3242,"t":{},"h":{},"c":{"40":{},"55":{},"66":{},"71":{},"75":{},"81":{},"86":{}}}],["thank",{"_index":75,"t":{},"h":{},"c":{"1":{},"12":{},"18":{},"28":{}}}],["that’",{"_index":425,"t":{},"h":{},"c":{"5":{},"6":{},"9":{},"15":{},"54":{}}}],["theme",{"_index":41,"t":{"11":{}},"h":{"8":{},"11":{},"17":{},"26":{},"27":{},"28":{},"37":{}},"c":{"1":{},"2":{},"4":{},"5":{},"6":{},"7":{},"8":{},"9":{},"11":{},"17":{},"18":{},"20":{},"26":{},"27":{},"28":{},"30":{},"33":{},"36":{},"37":{},"80":{}}}],["theme)var",{"_index":2849,"t":{},"h":{},"c":{"20":{}}}],["theme’",{"_index":988,"t":{},"h":{},"c":{"11":{}}}],["themselv",{"_index":670,"t":{},"h":{},"c":{"8":{},"42":{}}}],["then(icon",{"_index":3614,"t":{},"h":{},"c":{"54":{}}}],["then(r",{"_index":3612,"t":{},"h":{},"c":{"54":{}}}],["therefor",{"_index":1344,"t":{},"h":{},"c":{"15":{},"54":{},"73":{}}}],["there’",{"_index":170,"t":{},"h":{},"c":{"1":{},"5":{},"6":{},"12":{},"13":{},"14":{},"15":{},"28":{}}}],["they’d",{"_index":2611,"t":{},"h":{},"c":{"18":{}}}],["they’ll",{"_index":118,"t":{},"h":{},"c":{"1":{},"7":{},"15":{},"35":{}}}],["they’r",{"_index":102,"t":{},"h":{},"c":{"1":{},"7":{},"8":{},"15":{},"18":{},"33":{},"47":{},"54":{},"84":{},"85":{}}}],["thin",{"_index":3738,"t":{},"h":{},"c":{"60":{},"70":{}}}],["thing",{"_index":134,"t":{},"h":{},"c":{"1":{},"2":{},"9":{},"10":{},"11":{},"13":{},"15":{},"38":{},"80":{}}}],["think",{"_index":17,"t":{},"h":{"1":{}},"c":{"1":{},"7":{},"76":{}}}],["third",{"_index":1810,"t":{},"h":{},"c":{"18":{},"26":{},"28":{},"35":{},"46":{},"48":{},"77":{}}}],["thorough",{"_index":1285,"t":{},"h":{},"c":{"15":{}}}],["those",{"_index":554,"t":{},"h":{},"c":{"7":{},"15":{},"18":{},"20":{},"28":{},"32":{},"52":{}}}],["though",{"_index":4181,"t":{},"h":{},"c":{"85":{}}}],["thousand",{"_index":156,"t":{},"h":{},"c":{"1":{}}}],["three",{"_index":3026,"t":{},"h":{},"c":{"30":{},"54":{}}}],["threshold",{"_index":4048,"t":{},"h":{},"c":{"76":{}}}],["threw",{"_index":2409,"t":{},"h":{},"c":{"18":{}}}],["through",{"_index":460,"t":{},"h":{},"c":{"7":{},"9":{},"11":{},"14":{},"15":{},"18":{},"37":{},"41":{},"54":{},"57":{},"60":{},"61":{},"70":{},"71":{}}}],["throughout",{"_index":262,"t":{},"h":{},"c":{"2":{},"11":{},"15":{},"17":{},"18":{},"22":{},"23":{},"24":{}}}],["throw",{"_index":439,"t":{},"h":{},"c":{"6":{},"14":{},"18":{},"28":{}}}],["thrown",{"_index":1778,"t":{},"h":{},"c":{"18":{}}}],["thu",{"_index":3576,"t":{},"h":{},"c":{"54":{}}}],["thumb",{"_index":1415,"t":{},"h":{},"c":{"15":{},"18":{},"66":{},"75":{}}}],["thumb.classlist.toggle('act",{"_index":3320,"t":{},"h":{},"c":{"41":{}}}],["thumb.scrollintoview",{"_index":3321,"t":{},"h":{},"c":{"41":{}}}],["thumbnail",{"_index":3299,"t":{},"h":{},"c":{"41":{}}}],["thumbnails].foreach((thumb",{"_index":3319,"t":{},"h":{},"c":{"41":{}}}],["thumbnails].indexof(target",{"_index":3314,"t":{},"h":{},"c":{"41":{}}}],["thumbnails__imag",{"_index":3302,"t":{},"h":{},"c":{"41":{}}}],["thumbnails__image.act",{"_index":3305,"t":{},"h":{},"c":{"41":{}}}],["thumbnails__scrol",{"_index":3300,"t":{},"h":{},"c":{"41":{}}}],["ti",{"_index":1003,"t":{},"h":{},"c":{"11":{}}}],["ticker",{"_index":3585,"t":{},"h":{},"c":{"54":{}}}],["time",{"_index":196,"t":{"69":{}},"h":{"52":{},"69":{}},"c":{"1":{},"8":{},"9":{},"10":{},"12":{},"15":{},"18":{},"23":{},"30":{},"32":{},"41":{},"43":{},"44":{},"52":{},"54":{},"55":{},"57":{},"69":{},"74":{},"77":{},"82":{},"84":{},"85":{}}}],["timer",{"_index":3052,"t":{},"h":{},"c":{"30":{}}}],["timezon",{"_index":3560,"t":{},"h":{},"c":{"52":{},"69":{}}}],["timezonenam",{"_index":3565,"t":{},"h":{},"c":{"52":{}}}],["tini",{"_index":945,"t":{},"h":{},"c":{"10":{}}}],["tip",{"_index":338,"t":{},"h":{},"c":{"2":{},"15":{},"53":{}}}],["tip/inform",{"_index":1323,"t":{},"h":{},"c":{"15":{}}}],["titl",{"_index":1326,"t":{},"h":{},"c":{"15":{},"18":{},"38":{},"46":{},"48":{},"60":{}}}],["tl;dr",{"_index":69,"t":{},"h":{},"c":{"1":{},"8":{},"15":{}}}],["toast",{"_index":2296,"t":{},"h":{"30":{}},"c":{"18":{},"30":{}}}],["today",{"_index":3213,"t":{},"h":{},"c":{"38":{}}}],["todo",{"_index":389,"t":{},"h":{},"c":{"3":{}}}],["togeth",{"_index":1090,"t":{},"h":{},"c":{"12":{},"15":{}}}],["toggl",{"_index":259,"t":{},"h":{"20":{},"55":{}},"c":{"2":{},"10":{},"18":{},"20":{},"30":{},"40":{},"41":{},"42":{},"44":{},"46":{},"47":{},"48":{},"55":{},"58":{},"61":{},"71":{},"75":{},"84":{}}}],["toggle.addeventlistener('click",{"_index":4172,"t":{},"h":{},"c":{"84":{}}}],["toggle.addeventlistener('sl",{"_index":3255,"t":{},"h":{},"c":{"41":{}}}],["toggle.check",{"_index":3257,"t":{},"h":{},"c":{"41":{}}}],["token",{"_index":457,"t":{"17":{},"20":{},"21":{},"22":{},"25":{}},"h":{"7":{},"16":{},"17":{},"19":{},"20":{},"21":{},"22":{},"23":{},"25":{}},"c":{"7":{},"11":{},"15":{},"16":{},"17":{},"18":{},"19":{},"20":{},"21":{},"22":{},"23":{},"25":{},"36":{},"84":{}}}],["tomato",{"_index":497,"t":{},"h":{},"c":{"7":{},"61":{}}}],["tomorrow",{"_index":3981,"t":{},"h":{},"c":{"69":{}}}],["tool",{"_index":659,"t":{},"h":{},"c":{"8":{},"14":{},"15":{},"18":{}}}],["toolbar",{"_index":3205,"t":{},"h":{"37":{}},"c":{"37":{},"51":{}}}],["tooltip",{"_index":226,"t":{"84":{}},"h":{"20":{},"37":{},"51":{},"66":{},"84":{}},"c":{"1":{},"9":{},"18":{},"20":{},"25":{},"37":{},"43":{},"51":{},"54":{},"61":{},"66":{},"84":{}}}],["tooltip.appendchild(item",{"_index":3608,"t":{},"h":{},"c":{"54":{}}}],["tooltip.cont",{"_index":3601,"t":{},"h":{},"c":{"54":{}}}],["tooltip.dispatchevent(new",{"_index":3609,"t":{},"h":{},"c":{"54":{}}}],["tooltip.hid",{"_index":3605,"t":{},"h":{},"c":{"54":{},"84":{}}}],["tooltip.open",{"_index":4173,"t":{},"h":{},"c":{"84":{}}}],["tooltip.previouselements",{"_index":4171,"t":{},"h":{},"c":{"84":{}}}],["tooltip.show",{"_index":4174,"t":{},"h":{},"c":{"84":{}}}],["tooltip:first",{"_index":4165,"t":{},"h":{},"c":{"84":{}}}],["tooltip:nth",{"_index":4168,"t":{},"h":{},"c":{"84":{}}}],["tooltip[open]').foreach(tooltip",{"_index":3604,"t":{},"h":{},"c":{"54":{}}}],["tooltip__bas",{"_index":3376,"t":{},"h":{},"c":{"43":{}}}],["tooltip__base__arrow",{"_index":3379,"t":{},"h":{},"c":{"43":{}}}],["tooltip__base__popup",{"_index":3378,"t":{},"h":{},"c":{"43":{}}}],["tooltip__bodi",{"_index":3380,"t":{},"h":{},"c":{"43":{}}}],["tooltipformatt",{"_index":2439,"t":{},"h":{},"c":{"18":{},"66":{}}}],["tooltipplac",{"_index":3373,"t":{},"h":{},"c":{"43":{}}}],["tooltip’",{"_index":3377,"t":{},"h":{},"c":{"43":{},"47":{},"66":{},"84":{}}}],["top",{"_index":870,"t":{},"h":{"48":{}},"c":{"9":{},"18":{},"28":{},"29":{},"30":{},"32":{},"33":{},"35":{},"36":{},"41":{},"43":{},"47":{},"48":{},"54":{},"55":{},"61":{},"66":{},"67":{},"68":{},"71":{},"73":{},"76":{},"77":{},"81":{},"82":{},"84":{}}}],["topic",{"_index":1225,"t":{},"h":{},"c":{"15":{}}}],["top|bottom|left|right",{"_index":3885,"t":{},"h":{},"c":{"61":{}}}],["torn",{"_index":3868,"t":{},"h":{},"c":{"61":{}}}],["total",{"_index":3247,"t":{},"h":{},"c":{"41":{},"66":{}}}],["touch",{"_index":1976,"t":{},"h":{},"c":{"18":{},"41":{},"68":{}}}],["toward",{"_index":1309,"t":{},"h":{},"c":{"15":{}}}],["track",{"_index":1251,"t":{},"h":{"63":{},"66":{},"74":{}},"c":{"15":{},"18":{},"63":{},"65":{},"66":{},"74":{},"77":{}}}],["tracker",{"_index":1167,"t":{},"h":{"15":{}},"c":{"15":{},"18":{}}}],["tradeabl",{"_index":3583,"t":{},"h":{},"c":{"54":{}}}],["tradit",{"_index":591,"t":{},"h":{},"c":{"8":{},"18":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["train",{"_index":1212,"t":{},"h":{},"c":{"15":{}}}],["transform",{"_index":251,"t":{},"h":{"2":{}},"c":{"2":{},"18":{},"32":{},"36":{},"41":{},"47":{},"59":{},"61":{},"76":{},"84":{}}}],["transformignorepattern",{"_index":380,"t":{},"h":{},"c":{"2":{}}}],["transformorigin",{"_index":3116,"t":{},"h":{},"c":{"32":{}}}],["transit",{"_index":2144,"t":{"22":{}},"h":{"22":{}},"c":{"18":{},"22":{},"36":{},"41":{},"43":{},"54":{},"63":{},"80":{}}}],["transitionend",{"_index":2624,"t":{},"h":{},"c":{"18":{}}}],["translat",{"_index":1128,"t":{},"h":{"14":{}},"c":{"14":{},"18":{},"42":{},"43":{},"54":{},"61":{}}}],["translatex",{"_index":4051,"t":{},"h":{},"c":{"76":{}}}],["translatey(2px",{"_index":3181,"t":{},"h":{},"c":{"36":{}}}],["transpar",{"_index":1933,"t":{},"h":{},"c":{"18":{},"36":{},"67":{}}}],["transpil",{"_index":376,"t":{},"h":{},"c":{"2":{}}}],["transpos",{"_index":1990,"t":{},"h":{},"c":{"18":{}}}],["trap",{"_index":1733,"t":{},"h":{},"c":{"18":{},"46":{},"48":{}}}],["travel",{"_index":3161,"t":{},"h":{},"c":{"35":{}}}],["travers",{"_index":2331,"t":{},"h":{},"c":{"18":{}}}],["tree",{"_index":244,"t":{"82":{},"83":{}},"h":{"2":{},"82":{},"83":{}},"c":{"2":{},"8":{},"14":{},"15":{},"18":{},"82":{},"83":{}}}],["tree.queryselectorall('sl",{"_index":4125,"t":{},"h":{},"c":{"82":{}}}],["tree.select",{"_index":4128,"t":{},"h":{},"c":{"82":{}}}],["treeitem",{"_index":4134,"t":{},"h":{},"c":{"82":{}}}],["treeitem.innertext",{"_index":4135,"t":{},"h":{},"c":{"82":{}}}],["treeshak",{"_index":1866,"t":{},"h":{},"c":{"18":{}}}],["trendi",{"_index":2828,"t":{},"h":{},"c":{"18":{}}}],["tri",{"_index":53,"t":{},"h":{},"c":{"1":{},"8":{},"9":{},"11":{},"13":{},"15":{},"17":{},"18":{},"28":{},"41":{},"46":{},"48":{},"73":{},"76":{},"82":{}}}],["triag",{"_index":1196,"t":{},"h":{},"c":{"15":{}}}],["triangl",{"_index":1720,"t":{},"h":{},"c":{"18":{}}}],["triangle::part(ind",{"_index":4032,"t":{},"h":{},"c":{"73":{}}}],["trick",{"_index":3606,"t":{},"h":{},"c":{"54":{}}}],["tricki",{"_index":731,"t":{},"h":{},"c":{"9":{},"28":{}}}],["trigger",{"_index":715,"t":{},"h":{"84":{}},"c":{"9":{},"10":{},"18":{},"36":{},"37":{},"42":{},"43":{},"46":{},"47":{},"48":{},"61":{},"84":{}}}],["trigger’",{"_index":2360,"t":{},"h":{},"c":{"18":{}}}],["trivial",{"_index":1253,"t":{},"h":{},"c":{"15":{}}}],["troll",{"_index":1224,"t":{},"h":{},"c":{"15":{}}}],["troubl",{"_index":342,"t":{},"h":{},"c":{"2":{},"18":{}}}],["troubleshoot",{"_index":1125,"t":{},"h":{},"c":{"13":{},"15":{},"18":{}}}],["true",{"_index":863,"t":{},"h":{},"c":{"9":{},"10":{},"11":{},"15":{},"18":{},"30":{},"32":{},"36":{},"40":{},"42":{},"54":{},"55":{},"65":{},"66":{},"71":{},"75":{},"78":{},"81":{},"82":{},"83":{},"86":{}}}],["true/fals",{"_index":896,"t":{},"h":{},"c":{"10":{}}}],["true|fals",{"_index":2773,"t":{},"h":{},"c":{"18":{}}}],["truncat",{"_index":1839,"t":{},"h":{},"c":{"18":{}}}],["trust",{"_index":3547,"t":{},"h":{},"c":{"51":{},"54":{},"57":{},"68":{},"71":{}}}],["tsconfig.json",{"_index":284,"t":{},"h":{},"c":{"2":{},"6":{},"18":{}}}],["tune",{"_index":1026,"t":{},"h":{},"c":{"11":{}}}],["turkish",{"_index":2140,"t":{},"h":{},"c":{"18":{}}}],["turn",{"_index":2795,"t":{},"h":{},"c":{"18":{},"50":{}}}],["tutori",{"_index":2725,"t":{},"h":{},"c":{"18":{},"24":{}}}],["tweet",{"_index":1121,"t":{},"h":{},"c":{"13":{}}}],["twice",{"_index":1858,"t":{},"h":{},"c":{"18":{}}}],["twitter",{"_index":1096,"t":{},"h":{"13":{}},"c":{"13":{}}}],["two",{"_index":172,"t":{},"h":{"5":{},"6":{}},"c":{"1":{},"5":{},"6":{},"8":{},"11":{},"15":{},"18":{},"54":{},"73":{},"76":{}}}],["type",{"_index":281,"t":{},"h":{"6":{},"9":{},"55":{}},"c":{"2":{},"6":{},"7":{},"9":{},"10":{},"18":{},"28":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"86":{}}}],["type=\"button",{"_index":2824,"t":{},"h":{},"c":{"18":{}}}],["type=\"checkbox",{"_index":2077,"t":{},"h":{},"c":{"18":{}}}],["type=\"d",{"_index":1872,"t":{},"h":{},"c":{"18":{}}}],["type=\"numb",{"_index":2256,"t":{},"h":{},"c":{"18":{}}}],["type=\"password",{"_index":1970,"t":{},"h":{},"c":{"18":{}}}],["type=\"reset",{"_index":2281,"t":{},"h":{},"c":{"18":{}}}],["type=\"submit",{"_index":2424,"t":{},"h":{},"c":{"18":{}}}],["type=\"{{typ",{"_index":3695,"t":{},"h":{},"c":{"55":{}}}],["type='fil",{"_index":3667,"t":{},"h":{},"c":{"54":{}}}],["type='outlin",{"_index":3665,"t":{},"h":{},"c":{"54":{}}}],["typedoc",{"_index":2576,"t":{},"h":{},"c":{"18":{}}}],["types.json",{"_index":976,"t":{},"h":{},"c":{"10":{},"18":{}}}],["types/res",{"_index":2757,"t":{},"h":{},"c":{"18":{}}}],["typescript",{"_index":289,"t":{},"h":{},"c":{"2":{},"14":{},"15":{},"18":{}}}],["typetoselect",{"_index":2367,"t":{},"h":{},"c":{"18":{}}}],["typic",{"_index":1307,"t":{},"h":{},"c":{"15":{},"17":{},"64":{},"72":{}}}],["typo",{"_index":1254,"t":{},"h":{},"c":{"15":{},"18":{}}}],["typographi",{"_index":2894,"t":{"23":{}},"h":{"23":{}},"c":{"23":{}}}],["ui",{"_index":127,"t":{},"h":{},"c":{"1":{},"18":{},"23":{},"61":{}}}],["ui/dom",{"_index":1981,"t":{},"h":{},"c":{"18":{}}}],["ui’",{"_index":2111,"t":{},"h":{},"c":{"18":{}}}],["ullamco",{"_index":3405,"t":{},"h":{},"c":{"44":{}}}],["unabl",{"_index":373,"t":{},"h":{},"c":{"2":{},"15":{}}}],["unaffect",{"_index":2496,"t":{},"h":{},"c":{"18":{}}}],["unawar",{"_index":877,"t":{},"h":{},"c":{"9":{}}}],["unbundl",{"_index":1895,"t":{},"h":{},"c":{"18":{}}}],["uncheck",{"_index":3237,"t":{},"h":{},"c":{"40":{},"58":{}}}],["unclos",{"_index":2819,"t":{},"h":{},"c":{"18":{}}}],["undefin",{"_index":600,"t":{},"h":{},"c":{"8":{},"10":{},"18":{},"32":{},"34":{},"36":{},"47":{},"51":{},"54":{},"76":{}}}],["under",{"_index":201,"t":{},"h":{},"c":{"1":{},"7":{},"8":{},"18":{},"36":{},"54":{},"61":{}}}],["underli",{"_index":319,"t":{},"h":{},"c":{"2":{},"18":{},"36":{},"51":{}}}],["underscor",{"_index":1795,"t":{},"h":{},"c":{"18":{}}}],["understand",{"_index":650,"t":{},"h":{},"c":{"8":{},"10":{},"11":{},"15":{},"18":{},"54":{}}}],["undertak",{"_index":1005,"t":{},"h":{},"c":{"11":{}}}],["underw",{"_index":347,"t":{},"h":{},"c":{"2":{}}}],["undesir",{"_index":1028,"t":{},"h":{},"c":{"11":{},"18":{},"46":{},"48":{}}}],["undet",{"_index":1042,"t":{},"h":{},"c":{"12":{}}}],["undo",{"_index":3478,"t":{},"h":{},"c":{"47":{},"59":{}}}],["undocu",{"_index":2503,"t":{},"h":{},"c":{"18":{}}}],["undraw",{"_index":223,"t":{},"h":{},"c":{"1":{}}}],["unexpect",{"_index":927,"t":{},"h":{},"c":{"10":{},"18":{}}}],["unexpectedli",{"_index":2173,"t":{},"h":{},"c":{"18":{}}}],["unfamiliar",{"_index":752,"t":{},"h":{},"c":{"9":{}}}],["unfortun",{"_index":99,"t":{},"h":{},"c":{"1":{},"6":{},"41":{}}}],["uniform",{"_index":2750,"t":{},"h":{},"c":{"18":{},"51":{}}}],["unintend",{"_index":2553,"t":{},"h":{},"c":{"18":{}}}],["uniqu",{"_index":3723,"t":{},"h":{},"c":{"58":{},"62":{}}}],["unit",{"_index":1473,"t":{},"h":{},"c":{"16":{},"18":{},"23":{},"49":{}}}],["unix",{"_index":2100,"t":{},"h":{},"c":{"18":{}}}],["unless",{"_index":1252,"t":{},"h":{},"c":{"15":{},"18":{},"30":{},"46":{},"47":{},"48":{},"61":{},"84":{}}}],["unlik",{"_index":3186,"t":{},"h":{},"c":{"36":{},"48":{},"54":{}}}],["unnatur",{"_index":3253,"t":{},"h":{},"c":{"41":{}}}],["unnecessari",{"_index":2231,"t":{},"h":{},"c":{"18":{}}}],["unnecessarili",{"_index":3817,"t":{},"h":{},"c":{"61":{}}}],["unregist",{"_index":596,"t":{},"h":{},"c":{"8":{},"15":{}}}],["unsanit",{"_index":4002,"t":{},"h":{},"c":{"71":{}}}],["unseen",{"_index":1909,"t":{},"h":{},"c":{"18":{}}}],["unset",{"_index":1378,"t":{},"h":{},"c":{"15":{},"34":{}}}],["unsight",{"_index":4182,"t":{},"h":{},"c":{"85":{}}}],["unspecifi",{"_index":3934,"t":{},"h":{},"c":{"67":{}}}],["unsupport",{"_index":2529,"t":{},"h":{},"c":{"18":{}}}],["until",{"_index":550,"t":{},"h":{},"c":{"7":{},"9":{},"18":{},"32":{},"58":{},"61":{},"76":{},"77":{},"82":{}}}],["unus",{"_index":2122,"t":{},"h":{},"c":{"18":{}}}],["unwant",{"_index":1663,"t":{},"h":{},"c":{"18":{}}}],["up",{"_index":392,"t":{},"h":{"4":{}},"c":{"4":{},"8":{},"11":{},"14":{},"15":{},"18":{},"28":{},"54":{},"69":{},"84":{}}}],["up/down",{"_index":2393,"t":{},"h":{},"c":{"18":{}}}],["updat",{"_index":113,"t":{},"h":{"4":{},"10":{}},"c":{"1":{},"2":{},"4":{},"8":{},"10":{},"13":{},"14":{},"15":{},"18":{},"27":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"57":{},"58":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"86":{}}}],["updatecomplet",{"_index":957,"t":{},"h":{},"c":{"10":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"57":{},"58":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"86":{}}}],["upgrad",{"_index":149,"t":{},"h":{"2":{}},"c":{"1":{},"2":{},"18":{}}}],["upon",{"_index":1414,"t":{},"h":{},"c":{"15":{},"46":{},"48":{}}}],["uppercas",{"_index":2831,"t":{},"h":{},"c":{"18":{},"42":{},"47":{},"59":{}}}],["upset",{"_index":2207,"t":{},"h":{},"c":{"18":{}}}],["upstream",{"_index":1081,"t":{},"h":{},"c":{"12":{},"14":{},"18":{}}}],["uri",{"_index":3598,"t":{},"h":{},"c":{"54":{}}}],["url",{"_index":784,"t":{},"h":{},"c":{"9":{},"18":{},"28":{},"34":{},"51":{},"54":{},"55":{},"81":{}}}],["urlencod",{"_index":3195,"t":{},"h":{},"c":{"36":{}}}],["us",{"_index":62,"t":{},"h":{"10":{},"11":{},"15":{},"28":{},"32":{}},"c":{"1":{},"2":{},"4":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"13":{},"14":{},"15":{},"16":{},"17":{},"18":{},"19":{},"20":{},"21":{},"22":{},"23":{},"24":{},"25":{},"26":{},"27":{},"28":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["usabl",{"_index":2180,"t":{},"h":{},"c":{"18":{}}}],["usag",{"_index":241,"t":{"10":{}},"h":{"2":{},"5":{},"6":{},"10":{},"28":{}},"c":{"2":{},"5":{},"6":{},"10":{},"18":{},"28":{},"61":{}}}],["usd",{"_index":3528,"t":{},"h":{},"c":{"50":{}}}],["useeffect",{"_index":2995,"t":{},"h":{},"c":{"28":{}}}],["uselayouteffect",{"_index":2994,"t":{},"h":{},"c":{"28":{}}}],["user",{"_index":257,"t":{},"h":{},"c":{"2":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"13":{},"15":{},"18":{},"30":{},"31":{},"32":{},"34":{},"35":{},"36":{},"37":{},"40":{},"41":{},"42":{},"43":{},"46":{},"47":{},"48":{},"51":{},"53":{},"54":{},"55":{},"58":{},"59":{},"64":{},"65":{},"66":{},"67":{},"68":{},"71":{},"72":{},"73":{},"75":{},"76":{},"77":{},"81":{},"82":{},"83":{},"85":{},"86":{}}}],["user’",{"_index":608,"t":{},"h":{"11":{}},"c":{"8":{},"11":{},"35":{},"46":{},"48":{},"52":{},"69":{}}}],["usual",{"_index":494,"t":{},"h":{},"c":{"7":{},"8":{},"9":{},"10":{},"15":{},"32":{},"34":{},"35":{},"40":{},"46":{},"47":{},"48":{},"61":{},"76":{},"84":{}}}],["ut",{"_index":3396,"t":{},"h":{},"c":{"44":{}}}],["util",{"_index":429,"t":{},"h":{},"c":{"5":{},"6":{},"8":{},"9":{},"15":{},"18":{},"28":{},"30":{},"46":{},"48":{},"61":{},"85":{}}}],["utilities/animation.j",{"_index":2704,"t":{},"h":{},"c":{"18":{}}}],["utilities/bas",{"_index":2713,"t":{},"h":{},"c":{"18":{}}}],["utilities/icon",{"_index":2706,"t":{},"h":{},"c":{"18":{},"54":{}}}],["ux",{"_index":756,"t":{},"h":{},"c":{"9":{},"46":{},"47":{},"48":{},"59":{}}}],["v",{"_index":422,"t":{},"h":{},"c":{"5":{},"6":{}}}],["v18.17.1",{"_index":2933,"t":{},"h":{},"c":{"24":{}}}],["v19",{"_index":2936,"t":{},"h":{},"c":{"24":{}}}],["v2.0.1",{"_index":1843,"t":{},"h":{},"c":{"18":{}}}],["v2.5.0",{"_index":691,"t":{},"h":{},"c":{"8":{}}}],["v20.11.1",{"_index":2967,"t":{},"h":{},"c":{"28":{}}}],["v20.3.0",{"_index":2934,"t":{},"h":{},"c":{"24":{}}}],["valid",{"_index":697,"t":{},"h":{"9":{},"40":{},"86":{}},"c":{"9":{},"15":{},"18":{},"36":{},"40":{},"42":{},"52":{},"55":{},"66":{},"67":{},"69":{},"71":{},"72":{},"75":{},"81":{},"86":{}}}],["valid]::part(bas",{"_index":840,"t":{},"h":{},"c":{"9":{}}}],["valid]::part(combobox",{"_index":841,"t":{},"h":{},"c":{"9":{}}}],["valid]::part(control",{"_index":842,"t":{},"h":{},"c":{"9":{}}}],["valid]::part(form",{"_index":844,"t":{},"h":{},"c":{"9":{}}}],["valid]::part(label",{"_index":845,"t":{},"h":{},"c":{"9":{}}}],["validationmessag",{"_index":1987,"t":{},"h":{},"c":{"18":{},"36":{},"40":{},"42":{},"55":{},"66":{},"71":{},"75":{},"81":{},"86":{}}}],["valu",{"_index":315,"t":{},"h":{"42":{},"43":{},"58":{},"63":{},"65":{},"68":{},"71":{},"72":{}},"c":{"2":{},"9":{},"10":{},"11":{},"13":{},"15":{},"16":{},"17":{},"18":{},"20":{},"21":{},"22":{},"23":{},"25":{},"32":{},"36":{},"40":{},"41":{},"42":{},"43":{},"47":{},"49":{},"50":{},"52":{},"55":{},"58":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"71":{},"72":{},"75":{},"76":{},"81":{},"84":{},"86":{}}}],["value1",{"_index":742,"t":{},"h":{},"c":{"9":{}}}],["value2",{"_index":743,"t":{},"h":{},"c":{"9":{}}}],["valueasd",{"_index":1871,"t":{},"h":{},"c":{"18":{},"55":{}}}],["valueasnumb",{"_index":1940,"t":{},"h":{},"c":{"18":{},"55":{}}}],["value’",{"_index":3340,"t":{},"h":{},"c":{"42":{},"66":{}}}],["var",{"_index":501,"t":{},"h":{},"c":{"7":{},"9":{},"20":{},"30":{},"31":{},"32":{},"36":{},"37":{},"38":{},"41":{},"44":{},"47":{},"54":{},"55":{},"61":{},"68":{},"70":{},"73":{},"76":{},"80":{},"84":{}}}],["var(–sl",{"_index":3884,"t":{},"h":{},"c":{"61":{},"82":{}}}],["vari",{"_index":658,"t":{},"h":{},"c":{"8":{},"15":{},"20":{},"41":{},"42":{},"47":{},"61":{},"71":{},"84":{}}}],["variabl",{"_index":317,"t":{},"h":{},"c":{"2":{},"7":{},"15":{},"18":{}}}],["variant",{"_index":2316,"t":{},"h":{"30":{},"33":{},"36":{}},"c":{"18":{},"20":{},"30":{},"33":{},"36":{},"37":{},"60":{},"80":{}}}],["variants.length",{"_index":3745,"t":{},"h":{},"c":{"60":{}}}],["variants[click",{"_index":3744,"t":{},"h":{},"c":{"60":{}}}],["variat",{"_index":1280,"t":{},"h":{},"c":{"15":{},"18":{},"36":{},"54":{}}}],["varieti",{"_index":2538,"t":{},"h":{},"c":{"18":{}}}],["variou",{"_index":912,"t":{},"h":{},"c":{"10":{},"11":{},"12":{},"15":{},"18":{},"41":{},"46":{},"48":{},"54":{},"62":{},"67":{}}}],["veget",{"_index":3709,"t":{},"h":{},"c":{"56":{}}}],["veniam",{"_index":3401,"t":{},"h":{},"c":{"44":{}}}],["verb",{"_index":1382,"t":{},"h":{},"c":{"15":{}}}],["verbatimmodulesyntax",{"_index":1827,"t":{},"h":{},"c":{"18":{}}}],["verbos",{"_index":426,"t":{},"h":{},"c":{"5":{},"6":{},"7":{},"15":{},"18":{}}}],["veri",{"_index":880,"t":{},"h":{},"c":{"9":{},"15":{},"18":{},"30":{},"38":{},"41":{},"85":{}}}],["verifi",{"_index":2417,"t":{},"h":{"27":{}},"c":{"18":{},"27":{}}}],["version",{"_index":173,"t":{"5":{}},"h":{"5":{}},"c":{"1":{},"2":{},"5":{},"7":{},"8":{},"11":{},"14":{},"15":{},"18":{},"20":{}}}],["version(",{"_index":1011,"t":{},"h":{},"c":{"11":{}}}],["vertic",{"_index":2154,"t":{},"h":{"41":{},"45":{},"76":{}},"c":{"18":{},"30":{},"41":{},"45":{},"61":{},"66":{},"71":{},"73":{},"76":{},"81":{},"82":{}}}],["vertical::part(bas",{"_index":3283,"t":{},"h":{},"c":{"41":{}}}],["vertical::part(navig",{"_index":3286,"t":{},"h":{},"c":{"41":{}}}],["vertical::part(pagin",{"_index":3285,"t":{},"h":{},"c":{"41":{}}}],["via",{"_index":378,"t":{},"h":{},"c":{"2":{},"8":{},"15":{},"18":{},"52":{},"54":{},"61":{},"69":{}}}],["video",{"_index":1731,"t":{},"h":{},"c":{"18":{}}}],["view",{"_index":1734,"t":{},"h":{"41":{}},"c":{"18":{},"41":{},"61":{},"68":{}}}],["viewport",{"_index":2223,"t":{},"h":{},"c":{"18":{},"30":{},"32":{},"41":{},"46":{},"47":{},"48":{},"61":{},"71":{},"84":{}}}],["violet",{"_index":1510,"t":{},"h":{},"c":{"17":{},"41":{}}}],["virtual",{"_index":1421,"t":{},"h":{"61":{}},"c":{"15":{},"18":{},"55":{},"61":{},"81":{}}}],["virtualel",{"_index":1680,"t":{},"h":{},"c":{"18":{},"61":{}}}],["visibl",{"_index":515,"t":{},"h":{},"c":{"7":{},"10":{},"15":{},"18":{},"30":{},"36":{},"41":{},"43":{},"55":{},"58":{},"71":{},"76":{},"85":{}}}],["vision",{"_index":1058,"t":{},"h":{},"c":{"12":{}}}],["visit",{"_index":1634,"t":{},"h":{},"c":{"18":{},"67":{},"85":{}}}],["visual",{"_index":966,"t":{"85":{}},"h":{"85":{}},"c":{"10":{},"17":{},"18":{},"37":{},"42":{},"45":{},"53":{},"58":{},"71":{},"73":{},"85":{}}}],["vite",{"_index":2951,"t":{},"h":{"27":{}},"c":{"27":{}}}],["vite.config.j",{"_index":2959,"t":{},"h":{},"c":{"27":{}}}],["voiceov",{"_index":2435,"t":{},"h":{},"c":{"18":{}}}],["vote",{"_index":1234,"t":{},"h":{},"c":{"15":{}}}],["vs",{"_index":887,"t":{},"h":{"10":{},"15":{}},"c":{"10":{},"15":{},"18":{}}}],["vscode",{"_index":972,"t":{},"h":{},"c":{"10":{}}}],["vscode.html",{"_index":964,"t":{},"h":{},"c":{"10":{},"18":{}}}],["vue",{"_index":79,"t":{"5":{},"6":{}},"h":{"5":{},"6":{}},"c":{"1":{},"5":{},"6":{},"8":{}}}],["vue.j",{"_index":436,"t":{},"h":{},"c":{"6":{}}}],["vue’",{"_index":1403,"t":{},"h":{},"c":{"15":{},"18":{}}}],["vulner",{"_index":4003,"t":{},"h":{},"c":{"71":{}}}],["wait",{"_index":767,"t":{},"h":{"10":{}},"c":{"9":{},"10":{},"14":{},"84":{}}}],["walk",{"_index":3221,"t":{},"h":{},"c":{"38":{}}}],["want",{"_index":74,"t":{},"h":{},"c":{"1":{},"2":{},"7":{},"8":{},"9":{},"10":{},"14":{},"15":{},"18":{},"24":{},"28":{},"30":{},"34":{},"35":{},"38":{},"46":{},"48":{},"54":{},"73":{},"82":{}}}],["warm",{"_index":2470,"t":{},"h":{},"c":{"18":{}}}],["warn",{"_index":1311,"t":{},"h":{},"c":{"15":{},"17":{},"18":{},"28":{},"30":{},"33":{},"36":{},"60":{},"80":{}}}],["wash",{"_index":2474,"t":{},"h":{},"c":{"18":{}}}],["wasn’t",{"_index":1702,"t":{},"h":{},"c":{"18":{}}}],["watch",{"_index":595,"t":{},"h":{},"c":{"8":{},"15":{},"18":{},"32":{},"60":{},"70":{}}}],["watcher",{"_index":2728,"t":{},"h":{},"c":{"18":{}}}],["way",{"_index":65,"t":{},"h":{"5":{},"6":{}},"c":{"1":{},"4":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"11":{},"13":{},"14":{},"15":{},"17":{},"18":{},"27":{},"46":{},"48":{},"54":{},"55":{},"58":{},"68":{},"86":{}}}],["we'r",{"_index":3102,"t":{},"h":{},"c":{"32":{}}}],["web",{"_index":19,"t":{},"h":{"1":{}},"c":{"1":{},"2":{},"7":{},"10":{},"12":{},"13":{},"15":{},"18":{},"32":{},"35":{}}}],["webkit",{"_index":3301,"t":{},"h":{},"c":{"41":{}}}],["webkit’",{"_index":2815,"t":{},"h":{},"c":{"18":{}}}],["webp",{"_index":2998,"t":{},"h":{"29":{}},"c":{"29":{}}}],["webpack",{"_index":660,"t":{},"h":{"26":{},"28":{}},"c":{"8":{},"26":{},"27":{},"28":{}}}],["webpag",{"_index":1074,"t":{},"h":{},"c":{"12":{}}}],["websit",{"_index":1043,"t":{},"h":{},"c":{"12":{},"15":{},"35":{},"43":{},"54":{},"67":{}}}],["website’",{"_index":3153,"t":{},"h":{},"c":{"35":{}}}],["webstorm/phpstorm",{"_index":2391,"t":{},"h":{},"c":{"18":{}}}],["week",{"_index":2031,"t":{},"h":{},"c":{"18":{},"38":{}}}],["weekday",{"_index":3562,"t":{},"h":{},"c":{"52":{}}}],["weight",{"_index":2859,"t":{},"h":{"23":{}},"c":{"20":{},"23":{}}}],["welcom",{"_index":978,"t":{},"h":{},"c":{"10":{},"13":{},"14":{},"15":{}}}],["well",{"_index":368,"t":{},"h":{},"c":{"2":{},"15":{},"18":{},"20":{},"32":{},"35":{},"45":{},"47":{},"54":{},"59":{},"61":{},"68":{}}}],["weren’t",{"_index":2049,"t":{},"h":{},"c":{"18":{}}}],["we’d",{"_index":1099,"t":{},"h":{},"c":{"13":{}}}],["we’ll",{"_index":269,"t":{},"h":{},"c":{"2":{},"4":{},"5":{},"6":{},"13":{},"28":{}}}],["we’r",{"_index":290,"t":{},"h":{},"c":{"2":{},"10":{},"15":{},"18":{},"30":{}}}],["we’v",{"_index":2975,"t":{},"h":{},"c":{"28":{}}}],["what’",{"_index":1269,"t":{},"h":{},"c":{"15":{},"18":{}}}],["wherea",{"_index":486,"t":{},"h":{},"c":{"7":{},"15":{},"17":{}}}],["whether",{"_index":164,"t":{},"h":{},"c":{"1":{},"18":{},"30":{},"44":{},"46":{},"47":{},"48":{},"52":{},"55":{},"60":{},"61":{},"71":{},"81":{},"84":{}}}],["whichev",{"_index":2939,"t":{},"h":{},"c":{"24":{}}}],["white",{"_index":1343,"t":{},"h":{},"c":{"15":{},"17":{},"18":{},"36":{},"43":{},"67":{}}}],["whitespac",{"_index":2055,"t":{},"h":{},"c":{"18":{}}}],["who’",{"_index":2034,"t":{},"h":{},"c":{"18":{}}}],["wider",{"_index":4067,"t":{},"h":{},"c":{"76":{}}}],["width",{"_index":838,"t":{},"h":{"29":{},"36":{},"45":{},"46":{},"63":{},"74":{},"84":{}},"c":{"9":{},"15":{},"18":{},"20":{},"29":{},"32":{},"36":{},"38":{},"41":{},"42":{},"45":{},"46":{},"47":{},"48":{},"53":{},"54":{},"55":{},"61":{},"63":{},"67":{},"73":{},"74":{},"75":{},"76":{},"77":{},"82":{},"84":{}}}],["width/height",{"_index":3833,"t":{},"h":{},"c":{"61":{}}}],["width=\"1em",{"_index":3629,"t":{},"h":{},"c":{"54":{}}}],["width|alpha",{"_index":2549,"t":{},"h":{},"c":{"18":{}}}],["will",{"_index":994,"t":{},"h":{},"c":{"11":{},"15":{}}}],["window",{"_index":1298,"t":{},"h":{"85":{}},"c":{"15":{},"18":{},"36":{},"46":{},"48":{},"85":{}}}],["window.fetch",{"_index":3715,"t":{},"h":{},"c":{"57":{}}}],["window.matchmedia",{"_index":361,"t":{},"h":{},"c":{"2":{}}}],["window.open(location.href",{"_index":3444,"t":{},"h":{},"c":{"46":{},"48":{}}}],["wish",{"_index":655,"t":{},"h":{},"c":{"8":{},"15":{}}}],["within",{"_index":904,"t":{},"h":{},"c":{"10":{},"12":{},"15":{},"18":{},"37":{},"39":{},"43":{},"54":{},"60":{},"61":{},"62":{},"66":{},"76":{}}}],["within[data",{"_index":833,"t":{},"h":{},"c":{"9":{}}}],["without",{"_index":151,"t":{},"h":{"30":{}},"c":{"1":{},"6":{},"7":{},"8":{},"10":{},"12":{},"15":{},"18":{},"30":{},"32":{},"61":{},"85":{}}}],["wobbl",{"_index":2166,"t":{},"h":{},"c":{"18":{}}}],["women’",{"_index":3157,"t":{},"h":{},"c":{"35":{}}}],["wonder",{"_index":2996,"t":{},"h":{},"c":{"28":{}}}],["won’t",{"_index":680,"t":{},"h":{},"c":{"8":{},"11":{},"14":{},"15":{},"18":{},"32":{},"37":{},"41":{},"48":{},"61":{},"71":{},"84":{},"85":{}}}],["word",{"_index":722,"t":{},"h":{},"c":{"9":{},"55":{},"58":{},"81":{}}}],["work",{"_index":33,"t":{},"h":{"28":{}},"c":{"1":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"13":{},"14":{},"15":{},"18":{},"20":{},"24":{},"28":{},"29":{},"30":{},"31":{},"35":{},"36":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"54":{},"55":{},"59":{},"61":{},"66":{},"68":{},"71":{},"72":{},"75":{},"81":{},"82":{},"84":{},"86":{}}}],["workaround",{"_index":804,"t":{},"h":{},"c":{"9":{},"61":{}}}],["world",{"_index":2581,"t":{},"h":{},"c":{"18":{},"85":{}}}],["worri",{"_index":686,"t":{},"h":{},"c":{"8":{},"9":{}}}],["worth",{"_index":1077,"t":{},"h":{},"c":{"12":{}}}],["wouldn’t",{"_index":1435,"t":{},"h":{},"c":{"15":{},"18":{}}}],["wrap",{"_index":1357,"t":{},"h":{},"c":{"15":{},"18":{},"30":{},"31":{},"32":{},"34":{},"36":{},"37":{},"38":{},"40":{},"41":{},"43":{},"44":{},"46":{},"47":{},"48":{},"51":{},"53":{},"54":{},"55":{},"58":{},"60":{},"61":{},"62":{},"64":{},"66":{},"67":{},"70":{},"71":{},"72":{},"77":{},"81":{},"83":{},"84":{},"86":{}}}],["wrapper",{"_index":1834,"t":{},"h":{},"c":{"18":{},"30":{},"31":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"40":{},"41":{},"42":{},"44":{},"46":{},"47":{},"48":{},"51":{},"53":{},"55":{},"56":{},"58":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"71":{},"72":{},"73":{},"74":{},"75":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"86":{}}}],["wrapwithtooltip(item",{"_index":3600,"t":{},"h":{},"c":{"54":{}}}],["write",{"_index":1183,"t":{},"h":{"15":{},"28":{}},"c":{"15":{},"28":{},"82":{}}}],["written",{"_index":1194,"t":{},"h":{},"c":{"15":{}}}],["wrong",{"_index":1374,"t":{},"h":{},"c":{"15":{},"18":{}}}],["www",{"_index":3194,"t":{},"h":{},"c":{"36":{}}}],["x",{"_index":1482,"t":{},"h":{},"c":{"16":{},"18":{},"19":{},"20":{},"21":{},"22":{},"23":{},"37":{},"41":{},"61":{},"82":{},"83":{}}}],["xss",{"_index":3548,"t":{},"h":{},"c":{"51":{},"54":{},"57":{},"71":{}}}],["xx",{"_index":2522,"t":{},"h":{},"c":{"18":{}}}],["xxx",{"_index":2518,"t":{},"h":{},"c":{"18":{}}}],["xxxx",{"_index":2523,"t":{},"h":{},"c":{"18":{}}}],["y",{"_index":3857,"t":{},"h":{},"c":{"61":{},"82":{},"83":{}}}],["yaml",{"_index":2847,"t":{},"h":{},"c":{"20":{}}}],["ye",{"_index":1052,"t":{},"h":{},"c":{"12":{}}}],["year",{"_index":120,"t":{},"h":{},"c":{"1":{},"52":{}}}],["yellow",{"_index":1501,"t":{},"h":{},"c":{"17":{},"41":{}}}],["yesterday",{"_index":3980,"t":{},"h":{},"c":{"69":{}}}],["you'r",{"_index":794,"t":{},"h":{},"c":{"9":{}}}],["yourself",{"_index":363,"t":{},"h":{},"c":{"2":{},"15":{},"46":{},"48":{},"73":{}}}],["you’d",{"_index":271,"t":{},"h":{},"c":{"2":{},"4":{},"5":{},"6":{},"15":{},"43":{},"58":{}}}],["you’ll",{"_index":362,"t":{},"h":{},"c":{"2":{},"5":{},"8":{},"10":{},"11":{},"13":{},"15":{},"18":{},"24":{},"26":{},"28":{},"35":{},"54":{},"73":{}}}],["you’r",{"_index":193,"t":{},"h":{},"c":{"1":{},"2":{},"5":{},"6":{},"8":{},"9":{},"10":{},"11":{},"13":{},"14":{},"15":{},"18":{},"28":{},"29":{},"30":{},"31":{},"32":{},"33":{},"34":{},"35":{},"36":{},"37":{},"38":{},"39":{},"40":{},"41":{},"42":{},"43":{},"44":{},"45":{},"46":{},"47":{},"48":{},"49":{},"50":{},"51":{},"52":{},"53":{},"54":{},"55":{},"56":{},"57":{},"58":{},"59":{},"60":{},"61":{},"62":{},"63":{},"64":{},"65":{},"66":{},"67":{},"68":{},"69":{},"70":{},"71":{},"72":{},"73":{},"74":{},"75":{},"76":{},"77":{},"78":{},"79":{},"80":{},"81":{},"82":{},"83":{},"84":{},"85":{},"86":{}}}],["you’v",{"_index":618,"t":{},"h":{},"c":{"8":{},"11":{},"15":{},"18":{},"28":{}}}],["z",{"_index":779,"t":{"25":{}},"h":{"25":{}},"c":{"9":{},"18":{},"25":{},"61":{},"82":{},"83":{}}}],["zone",{"_index":3566,"t":{},"h":{},"c":{"52":{}}}],["zoom",{"_index":1697,"t":{},"h":{},"c":{"18":{}}}],["zucchini",{"_index":3712,"t":{},"h":{},"c":{"56":{}}}]],"pipeline":["stemmer"]},"map":{"0":{"title":"Page Not Found","url":"/404.html"},"1":{"title":"Nebula: A specialized fork of Nebula for Crypto and Blockchain interfaces.","url":"/"},"2":{"title":"React","url":"/frameworks/react/"},"3":{"title":"Templ","url":"/frameworks/templ/"},"4":{"title":"Angular","url":"/frameworks/angular/"},"5":{"title":"Vue (version 2)","url":"/frameworks/vue-2/"},"6":{"title":"Vue","url":"/frameworks/vue/"},"7":{"title":"Customizing","url":"/getting-started/customizing/"},"8":{"title":"Installation","url":"/getting-started/installation/"},"9":{"title":"Form Controls","url":"/getting-started/form-controls/"},"10":{"title":"Usage","url":"/getting-started/usage/"},"11":{"title":"Themes","url":"/getting-started/themes/"},"12":{"title":"Accessibility Commitment","url":"/resources/accessibility/"},"13":{"title":"Community","url":"/resources/community/"},"14":{"title":"Localization","url":"/getting-started/localization/"},"15":{"title":"Contributing","url":"/resources/contributing/"},"16":{"title":"Border Radius","url":"/tokens/border-radius/"},"17":{"title":"Color Tokens","url":"/tokens/color/"},"18":{"title":"Changelog","url":"/resources/changelog/"},"19":{"title":"Elevation","url":"/tokens/elevation/"},"20":{"title":"More Design Tokens","url":"/tokens/more/"},"21":{"title":"Spacing Tokens","url":"/tokens/spacing/"},"22":{"title":"Transition Tokens","url":"/tokens/transition/"},"23":{"title":"Typography","url":"/tokens/typography/"},"24":{"title":"Integrating with Astro","url":"/tutorials/integrating-with-astro/"},"25":{"title":"Z-Index Tokens","url":"/tokens/z-index/"},"26":{"title":"Integrating with Rails","url":"/tutorials/integrating-with-rails/"},"27":{"title":"Integrating with Laravel","url":"/tutorials/integrating-with-laravel/"},"28":{"title":"Integrating with NextJS","url":"/tutorials/integrating-with-nextjs/"},"29":{"title":"Animated Image","url":"/components/animated-image/"},"30":{"title":"Alert","url":"/components/alert/"},"31":{"title":"Avatar","url":"/components/avatar/"},"32":{"title":"Animation","url":"/components/animation/"},"33":{"title":"Badge","url":"/components/badge/"},"34":{"title":"Breadcrumb Item","url":"/components/breadcrumb-item/"},"35":{"title":"Breadcrumb","url":"/components/breadcrumb/"},"36":{"title":"Button","url":"/components/button/"},"37":{"title":"Button Group","url":"/components/button-group/"},"38":{"title":"Card","url":"/components/card/"},"39":{"title":"Carousel Item","url":"/components/carousel-item/"},"40":{"title":"Checkbox","url":"/components/checkbox/"},"41":{"title":"Carousel","url":"/components/carousel/"},"42":{"title":"Color Picker","url":"/components/color-picker/"},"43":{"title":"Copy Button","url":"/components/copy-button/"},"44":{"title":"Details","url":"/components/details/"},"45":{"title":"Divider","url":"/components/divider/"},"46":{"title":"Dialog","url":"/components/dialog/"},"47":{"title":"Dropdown","url":"/components/dropdown/"},"48":{"title":"Drawer","url":"/components/drawer/"},"49":{"title":"Format Bytes","url":"/components/format-bytes/"},"50":{"title":"Format Number","url":"/components/format-number/"},"51":{"title":"Icon Button","url":"/components/icon-button/"},"52":{"title":"Format Date","url":"/components/format-date/"},"53":{"title":"Image Comparer","url":"/components/image-comparer/"},"54":{"title":"Icon","url":"/components/icon/"},"55":{"title":"Input","url":"/components/input/"},"56":{"title":"Menu Label","url":"/components/menu-label/"},"57":{"title":"Include","url":"/components/include/"},"58":{"title":"Menu Item","url":"/components/menu-item/"},"59":{"title":"Menu","url":"/components/menu/"},"60":{"title":"Mutation Observer","url":"/components/mutation-observer/"},"61":{"title":"Popup","url":"/components/popup/"},"62":{"title":"Option","url":"/components/option/"},"63":{"title":"Progress Ring","url":"/components/progress-ring/"},"64":{"title":"Radio Button","url":"/components/radio-button/"},"65":{"title":"Progress Bar","url":"/components/progress-bar/"},"66":{"title":"Range","url":"/components/range/"},"67":{"title":"QR Code","url":"/components/qr-code/"},"68":{"title":"Rating","url":"/components/rating/"},"69":{"title":"Relative Time","url":"/components/relative-time/"},"70":{"title":"Resize Observer","url":"/components/resize-observer/"},"71":{"title":"Select","url":"/components/select/"},"72":{"title":"Radio","url":"/components/radio/"},"73":{"title":"Skeleton","url":"/components/skeleton/"},"74":{"title":"Spinner","url":"/components/spinner/"},"75":{"title":"Switch","url":"/components/switch/"},"76":{"title":"Split Panel","url":"/components/split-panel/"},"77":{"title":"Tab Group","url":"/components/tab-group/"},"78":{"title":"Tab Panel","url":"/components/tab-panel/"},"79":{"title":"Tab","url":"/components/tab/"},"80":{"title":"Tag","url":"/components/tag/"},"81":{"title":"Textarea","url":"/components/textarea/"},"82":{"title":"Tree","url":"/components/tree/"},"83":{"title":"Tree Item","url":"/components/tree-item/"},"84":{"title":"Tooltip","url":"/components/tooltip/"},"85":{"title":"Visually Hidden","url":"/components/visually-hidden/"},"86":{"title":"Radio Group","url":"/components/radio-group/"}}} \ No newline at end of file diff --git a/components/alert/index.html b/components/alert/index.html new file mode 100644 index 00000000..383623b5 --- /dev/null +++ b/components/alert/index.html @@ -0,0 +1,1897 @@ + + + + + + + Alert + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Alert

+ +
+ <sl-alert> | SlAlert +
+ +
+ Since 2.0 + stable +
+
+ +

+ Alerts are used to display important messages inline or as toast notifications. +

+ +
+
+ + + This is a standard alert. You can customize its content and even the icon. + + +
+ +
+
+ +
+
+ 
<sl-alert open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  This is a standard alert. You can customize its content and even the icon.
+</sl-alert>
+
+
+ +
+ 
import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <SlAlert open>
+    <SlIcon slot="icon" name="info-circle" />
+    This is a standard alert. You can customize its content and even the icon.
+  </SlAlert>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Variants +

+

Set the variant attribute to change the alert’s variant.

+ +
+
+ + + This is super informative
+ You can tell by how pretty the alert is. + + +
+ + + + Your changes have been saved
+ You can safely exit the app now. + + +
+ + + + Your settings have been updated
+ Settings will take effect on next login. + + +
+ + + + Your session has ended
+ Please login again to continue. + + +
+ + + + Your account has been deleted
+ We’re very sorry to see you go! + + +
+ +
+
+ +
+
+ 
<sl-alert variant="primary" open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  <strong>This is super informative</strong><br />
+  You can tell by how pretty the alert is.
+</sl-alert>
+
+<br />
+
+<sl-alert variant="success" open>
+  <sl-icon slot="icon" name="check2-circle"></sl-icon>
+  <strong>Your changes have been saved</strong><br />
+  You can safely exit the app now.
+</sl-alert>
+
+<br />
+
+<sl-alert variant="neutral" open>
+  <sl-icon slot="icon" name="gear"></sl-icon>
+  <strong>Your settings have been updated</strong><br />
+  Settings will take effect on next login.
+</sl-alert>
+
+<br />
+
+<sl-alert variant="warning" open>
+  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+  <strong>Your session has ended</strong><br />
+  Please login again to continue.
+</sl-alert>
+
+<br />
+
+<sl-alert variant="danger" open>
+  <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+  <strong>Your account has been deleted</strong><br />
+  We're very sorry to see you go!
+</sl-alert>
+
+
+ +
+ 
import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <SlAlert variant="primary" open>
+      <SlIcon slot="icon" name="info-circle" />
+      <strong>This is super informative</strong>
+      <br />
+      You can tell by how pretty the alert is.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert variant="success" open>
+      <SlIcon slot="icon" name="check2-circle" />
+      <strong>Your changes have been saved</strong>
+      <br />
+      You can safely exit the app now.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert variant="neutral" open>
+      <SlIcon slot="icon" name="gear" />
+      <strong>Your settings have been updated</strong>
+      <br />
+      Settings will take effect on next login.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert variant="warning" open>
+      <SlIcon slot="icon" name="exclamation-triangle" />
+      <strong>Your session has ended</strong>
+      <br />
+      Please login again to continue.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert variant="danger" open>
+      <SlIcon slot="icon" name="exclamation-octagon" />
+      <strong>Your account has been deleted</strong>
+      <br />
+      We're very sorry to see you go!
+    </SlAlert>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Closable +

+

Add the closable attribute to show a close button that will hide the alert.

+ +
+
+ + + You can close this alert any time! + + + + +
+ +
+
+ +
+
+ 
<sl-alert variant="primary" open closable class="alert-closable">
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  You can close this alert any time!
+</sl-alert>
+
+<script>
+  const alert = document.querySelector('.alert-closable');
+  alert.addEventListener('sl-after-hide', () => {
+    setTimeout(() => (alert.open = true), 2000);
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => {
+  const [open, setOpen] = useState(true);
+
+  function handleHide() {
+    setOpen(false);
+    setTimeout(() => setOpen(true), 2000);
+  }
+
+  return (
+    <SlAlert open={open} closable onSlAfterHide={handleHide}>
+      <SlIcon slot="icon" name="info-circle" />
+      You can close this alert any time!
+    </SlAlert>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Without Icons +

+

Icons are optional. Simply omit the icon slot if you don’t want them.

+ +
+
+ Nothing fancy here, just a simple alert. + +
+ +
+
+ +
+
+ 
<sl-alert variant="primary" open> Nothing fancy here, just a simple alert. </sl-alert>
+
+
+ +
+ 
import SlAlert from '@onsonr/nebula/dist/react/alert';
+
+const App = () => (
+  <SlAlert variant="primary" open>
+    Nothing fancy here, just a simple alert.
+  </SlAlert>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Duration +

+

+ Set the duration attribute to automatically hide an alert after a period of time. This is + useful for alerts that don’t require acknowledgement. +

+ +
+
+
+ Show Alert + + + + This alert will automatically hide itself after three seconds, unless you interact with it. + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="alert-duration">
+  <sl-button variant="primary">Show Alert</sl-button>
+
+  <sl-alert variant="primary" duration="3000" closable>
+    <sl-icon slot="icon" name="info-circle"></sl-icon>
+    This alert will automatically hide itself after three seconds, unless you interact with it.
+  </sl-alert>
+</div>
+
+<script>
+  const container = document.querySelector('.alert-duration');
+  const button = container.querySelector('sl-button');
+  const alert = container.querySelector('sl-alert');
+
+  button.addEventListener('click', () => alert.show());
+</script>
+
+<style>
+  .alert-duration sl-alert {
+    margin-top: var(--sl-spacing-medium);
+  }
+</style>
+
+
+ +
+ 
import { useState } from 'react';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const css = `
+  .alert-duration sl-alert {
+    margin-top: var(--sl-spacing-medium);
+  }
+`;
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <div className="alert-duration">
+        <SlButton variant="primary" onClick={() => setOpen(true)}>
+          Show Alert
+        </SlButton>
+
+        <SlAlert variant="primary" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
+          <SlIcon slot="icon" name="info-circle" />
+          This alert will automatically hide itself after three seconds, unless you interact with it.
+        </SlAlert>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Toast Notifications +

+

+ To display an alert as a toast notification, or “toast”, create the alert and call its + toast() method. This will move the alert out of its position in the DOM and into + the toast stack where it will be shown. Once dismissed, it will be removed + from the DOM completely. To reuse a toast, store a reference to it and call toast() again later + on. +

+

+ You should always use the closable attribute so users can dismiss the notification. It’s also + common to set a reasonable duration when the notification doesn’t require acknowledgement. +

+ +
+
+
+ Primary + Success + Neutral + Warning + Danger + + + + This is super informative
+ You can tell by how pretty the alert is. + + + + + Your changes have been saved
+ You can safely exit the app now. + + + + + Your settings have been updated
+ Settings will take effect on next login. + + + + + Your session has ended
+ Please login again to continue. + + + + + Your account has been deleted
+ We’re very sorry to see you go! + +
+ + + +
+ +
+
+ +
+
+ 
<div class="alert-toast">
+  <sl-button variant="primary">Primary</sl-button>
+  <sl-button variant="success">Success</sl-button>
+  <sl-button variant="neutral">Neutral</sl-button>
+  <sl-button variant="warning">Warning</sl-button>
+  <sl-button variant="danger">Danger</sl-button>
+
+  <sl-alert variant="primary" duration="3000" closable>
+    <sl-icon slot="icon" name="info-circle"></sl-icon>
+    <strong>This is super informative</strong><br />
+    You can tell by how pretty the alert is.
+  </sl-alert>
+
+  <sl-alert variant="success" duration="3000" closable>
+    <sl-icon slot="icon" name="check2-circle"></sl-icon>
+    <strong>Your changes have been saved</strong><br />
+    You can safely exit the app now.
+  </sl-alert>
+
+  <sl-alert variant="neutral" duration="3000" closable>
+    <sl-icon slot="icon" name="gear"></sl-icon>
+    <strong>Your settings have been updated</strong><br />
+    Settings will take effect on next login.
+  </sl-alert>
+
+  <sl-alert variant="warning" duration="3000" closable>
+    <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+    <strong>Your session has ended</strong><br />
+    Please login again to continue.
+  </sl-alert>
+
+  <sl-alert variant="danger" duration="3000" closable>
+    <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+    <strong>Your account has been deleted</strong><br />
+    We're very sorry to see you go!
+  </sl-alert>
+</div>
+
+<script>
+  const container = document.querySelector('.alert-toast');
+
+  ['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
+    const button = container.querySelector(`sl-button[variant="${variant}"]`);
+    const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
+
+    button.addEventListener('click', () => alert.toast());
+  });
+</script>
+
+
+ +
+ 
import { useRef } from 'react';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+function showToast(alert) {
+  alert.toast();
+}
+
+const App = () => {
+  const primary = useRef(null);
+  const success = useRef(null);
+  const neutral = useRef(null);
+  const warning = useRef(null);
+  const danger = useRef(null);
+
+  return (
+    <>
+      <SlButton variant="primary" onClick={() => primary.current.toast()}>
+        Primary
+      </SlButton>
+
+      <SlButton variant="success" onClick={() => success.current.toast()}>
+        Success
+      </SlButton>
+
+      <SlButton variant="neutral" onClick={() => neutral.current.toast()}>
+        Neutral
+      </SlButton>
+
+      <SlButton variant="warning" onClick={() => warning.current.toast()}>
+        Warning
+      </SlButton>
+
+      <SlButton variant="danger" onClick={() => danger.current.toast()}>
+        Danger
+      </SlButton>
+
+      <SlAlert ref={primary} variant="primary" duration="3000" closable>
+        <SlIcon slot="icon" name="info-circle" />
+        <strong>This is super informative</strong>
+        <br />
+        You can tell by how pretty the alert is.
+      </SlAlert>
+
+      <SlAlert ref={success} variant="success" duration="3000" closable>
+        <SlIcon slot="icon" name="check2-circle" />
+        <strong>Your changes have been saved</strong>
+        <br />
+        You can safely exit the app now.
+      </SlAlert>
+
+      <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
+        <SlIcon slot="icon" name="gear" />
+        <strong>Your settings have been updated</strong>
+        <br />
+        Settings will take effect on next login.
+      </SlAlert>
+
+      <SlAlert ref={warning} variant="warning" duration="3000" closable>
+        <SlIcon slot="icon" name="exclamation-triangle" />
+        <strong>Your session has ended</strong>
+        <br />
+        Please login again to continue.
+      </SlAlert>
+
+      <SlAlert ref={danger} variant="danger" duration="3000" closable>
+        <SlIcon slot="icon" name="exclamation-octagon" />
+        <strong>Your account has been deleted</strong>
+        <br />
+        We're very sorry to see you go!
+      </SlAlert>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Creating Toasts Imperatively +

+

+ For convenience, you can create a utility that emits toast notifications with a function call rather than + composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call + the toast() method as shown in the example below. +

+ +
+
+
+ Create Toast +
+ + + +
+ +
+
+ +
+
+ 
<div class="alert-toast-wrapper">
+  <sl-button variant="primary">Create Toast</sl-button>
+</div>
+
+<script>
+  const container = document.querySelector('.alert-toast-wrapper');
+  const button = container.querySelector('sl-button');
+  let count = 0;
+
+  // Always escape HTML for text arguments!
+  function escapeHtml(html) {
+    const div = document.createElement('div');
+    div.textContent = html;
+    return div.innerHTML;
+  }
+
+  // Custom function to emit toast notifications
+  function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
+    const alert = Object.assign(document.createElement('sl-alert'), {
+      variant,
+      closable: true,
+      duration: duration,
+      innerHTML: `
+        <sl-icon name="${icon}" slot="icon"></sl-icon>
+        ${escapeHtml(message)}
+      `
+    });
+
+    document.body.append(alert);
+    return alert.toast();
+  }
+
+  button.addEventListener('click', () => {
+    notify(`This is custom toast #${++count}`);
+  });
+</script>
+
+
+
+ +
+ + + +
+
+ +

+ The Toast Stack +

+

+ The toast stack is a fixed position singleton element created and managed internally by the alert component. + It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is + visible, they will stack vertically in the toast stack. +

+

+ By default, the toast stack is positioned at the top-right of the viewport. You can change its position by + targeting .sl-toast-stack in your stylesheet. To make toasts appear at the top-left of the + viewport, for example, use the following styles. +

+ 
.sl-toast-stack {
+  left: 0;
+  right: auto;
+}
+
+ + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/alert/alert.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/alert/alert.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/alert/alert.js';
+ + + +

To import this component as a React component:

+ 
import SlAlert from '@onsonr/nebula/dist/react/alert';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default)The alert’s main content.
+ icon + An icon to show in the alert. Works best with <sl-icon>.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ open + + Indicates whether or not the alert is open. You can toggle this attribute to show and hide the + alert, or you can use the show() and hide() methods and this attribute + will reflect the alert’s open state. + + + + boolean + + false +
+ closable + Enables a close button that allows the user to dismiss the alert. + + + boolean + + false +
+ variant + The alert’s theme variant. + + + 'primary' | 'success' | 'neutral' | 'warning' | 'danger' + + 'primary' +
+ duration + + The length of time, in milliseconds, the alert will show before closing itself. If the user + interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. + Defaults to Infinity, meaning the alert will not close on its own. + - + Infinity +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-showonSlShowEmitted when the alert opens.-
sl-after-showonSlAfterShowEmitted after the alert opens and all animations are complete.-
sl-hideonSlHideEmitted when the alert closes.-
sl-after-hideonSlAfterHideEmitted after the alert closes and all animations are complete.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the alert.-
hide()Hides the alert-
toast() + Displays the alert as a toast notification. This will move the alert out of its position in the DOM + and, when dismissed, it will be removed from the DOM completely. By storing a reference to the + alert, you can reuse it by calling this method again. The returned promise will resolve after the + alert is hidden. + -
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
iconThe container that wraps the optional icon.
messageThe container that wraps the alert’s main content.
close-buttonThe close button, an <sl-icon-button>.
close-button__baseThe close button’s exported base part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
alert.showThe animation to use when showing the alert.
alert.hideThe animation to use when hiding the alert.
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • +
+
+
+
+ + diff --git a/components/animated-image/index.html b/components/animated-image/index.html new file mode 100644 index 00000000..34e41324 --- /dev/null +++ b/components/animated-image/index.html @@ -0,0 +1,1162 @@ + + + + + + + Animated Image + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Animated Image

+ +
+ <sl-animated-image> | SlAnimatedImage +
+ +
+ Since 2.0 + stable +
+
+ +

+ A component for displaying animated GIFs and WEBPs that play and pause on interaction. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-animated-image
+  src="https://shoelace.style/assets/images/walk.gif"
+  alt="Animation of untied shoes walking on pavement"
+></sl-animated-image>
+
+
+ +
+ 
import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
+
+const App = () => (
+  <SlAnimatedImage
+    src="https://shoelace.style/assets/images/walk.gif"
+    alt="Animation of untied shoes walking on pavement"
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ WEBP Images +

+

Both GIF and WEBP images are supported.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-animated-image
+  src="https://shoelace.style/assets/images/tie.webp"
+  alt="Animation of a shoe being tied"
+></sl-animated-image>
+
+
+ +
+ 
import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
+
+const App = () => (
+  <SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Setting a Width and Height +

+

To set a custom size, apply a width and/or height to the host element.

+ +
+
+ + + +
+ +
+
+ +
+
+ 
<sl-animated-image
+  src="https://shoelace.style/assets/images/walk.gif"
+  alt="Animation of untied shoes walking on pavement"
+  style="width: 150px; height: 200px;"
+>
+</sl-animated-image>
+
+
+ +
+ 
import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
+
+const App = () => (
+  <SlAnimatedImage
+    src="https://shoelace.style/assets/images/walk.gif"
+    alt="Animation of untied shoes walking on pavement"
+    style={{ width: '150px', height: '200px' }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing the Control Box +

+

+ You can change the appearance and location of the control box by targeting the control-box part + in your styles. +

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-animated-image
+  src="https://shoelace.style/assets/images/walk.gif"
+  alt="Animation of untied shoes walking on pavement"
+  class="animated-image-custom-control-box"
+></sl-animated-image>
+
+<style>
+  .animated-image-custom-control-box::part(control-box) {
+    top: auto;
+    right: auto;
+    bottom: 1rem;
+    left: 1rem;
+    background-color: deeppink;
+    border: none;
+    color: pink;
+  }
+</style>
+
+
+ +
+ 
import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
+
+const css = `
+  .animated-image-custom-control-box::part(control-box) {
+    top: auto;
+    right: auto;
+    bottom: 1rem;
+    left: 1rem;
+    background-color: deeppink;
+    border: none;
+    color: pink;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlAnimatedImage
+      className="animated-image-custom-control-box"
+      src="https://shoelace.style/assets/images/walk.gif"
+      alt="Animation of untied shoes walking on pavement"
+    />
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/animated-image/animated-image.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/animated-image/animated-image.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/animated-image/animated-image.js';
+ + + +

To import this component as a React component:

+ 
import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
+ play-icon + + Optional play icon to use instead of the default. Works best with <sl-icon>. +
+ pause-icon + + Optional pause icon to use instead of the default. Works best with <sl-icon>. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ src + The path to the image to load. + string + -
+ alt + A description of the image used by assistive devices. + string + -
+ play + Plays the animation. When this attribute is remove, the animation will pause. + + + boolean + -
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-loadonSlLoadEmitted when the image loads successfully.-
sl-erroronSlErrorEmitted when the image fails to load.-
+
+ +

+ Learn more about events. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--control-box-sizeThe size of the icon box.
--icon-sizeThe size of the play/pause icons.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
control-boxThe container that surrounds the pause/play icons and provides their background.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/animation/index.html b/components/animation/index.html new file mode 100644 index 00000000..202192a9 --- /dev/null +++ b/components/animation/index.html @@ -0,0 +1,1755 @@ + + + + + + + Animation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Animation

+ +
+ <sl-animation> | SlAnimation +
+ +
+ Since 2.0 + stable +
+
+ +

+ Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. + Powered by the + Web Animations API. +

+ +

+ To animate an element, wrap it in <sl-animation> and set an animation name. + The animation will not start until you add the play attribute. Refer to the + properties table for a list of all animation options. +

+ +
+
+
+
+
+
+
+
+ + + +
+ +
+
+ +
+
+ 
<div class="animation-overview">
+  <sl-animation name="bounce" duration="2000" play><div class="box"></div></sl-animation>
+  <sl-animation name="jello" duration="2000" play><div class="box"></div></sl-animation>
+  <sl-animation name="heartBeat" duration="2000" play><div class="box"></div></sl-animation>
+  <sl-animation name="flip" duration="2000" play><div class="box"></div></sl-animation>
+</div>
+
+<style>
+  .animation-overview .box {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+    margin: 1.5rem;
+  }
+</style>
+
+
+ +
+ 
import SlAnimation from '@onsonr/nebula/dist/react/animation';
+
+const css = `
+  .animation-overview .box {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+    margin: 1.5rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div class="animation-overview">
+      <SlAnimation name="bounce" duration={2000} play>
+        <div class="box" />
+      </SlAnimation>
+      <SlAnimation name="jello" duration={2000} play>
+        <div class="box" />
+      </SlAnimation>
+      <SlAnimation name="heartBeat" duration={2000} play>
+        <div class="box" />
+      </SlAnimation>
+      <SlAnimation name="flip" duration={2000} play>
+        <div class="box" />
+      </SlAnimation>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Animations & Easings +

+

+ This example demonstrates all of the baked-in animations and easings. Animations are based on those found in + the popular + Animate.css + library. +

+ +
+
+
+ +
+ + +
+ + + +
+
+ + + + + +
+ +
+
+ +
+
+ 
<div class="animation-sandbox">
+  <sl-animation name="bounce" easing="ease-in-out" duration="2000" play>
+    <div class="box"></div>
+  </sl-animation>
+
+  <div class="controls">
+    <sl-select label="Animation" value="bounce"></sl-select>
+    <sl-select label="Easing" value="linear"></sl-select>
+    <sl-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1"></sl-input>
+  </div>
+</div>
+
+<script type="module">
+  import { getAnimationNames, getEasingNames } from '/dist/utilities/animation.js';
+
+  const container = document.querySelector('.animation-sandbox');
+  const animation = container.querySelector('sl-animation');
+  const animationName = container.querySelector('.controls sl-select:nth-child(1)');
+  const easingName = container.querySelector('.controls sl-select:nth-child(2)');
+  const playbackRate = container.querySelector('sl-input[type="number"]');
+  const animations = getAnimationNames();
+  const easings = getEasingNames();
+
+  animations.map(name => {
+    const option = Object.assign(document.createElement('sl-option'), {
+      textContent: name,
+      value: name
+    });
+    animationName.appendChild(option);
+  });
+
+  easings.map(name => {
+    const option = Object.assign(document.createElement('sl-option'), {
+      textContent: name,
+      value: name
+    });
+    easingName.appendChild(option);
+  });
+
+  animationName.addEventListener('sl-change', () => (animation.name = animationName.value));
+  easingName.addEventListener('sl-change', () => (animation.easing = easingName.value));
+  playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value));
+</script>
+
+<style>
+  .animation-sandbox .box {
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .animation-sandbox .controls {
+    max-width: 300px;
+    margin-top: 2rem;
+  }
+
+  .animation-sandbox .controls sl-select {
+    margin-bottom: 1rem;
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ +

+ Using Intersection Observer +

+

+ Use an + Intersection Observer + to control the animation when an element enters or exits the viewport. For example, scroll the box below in + and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters + the viewport. +

+ +
+
+
+
+
+ + + + + +
+ +
+
+ +
+
+ 
<div class="animation-scroll">
+  <sl-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></sl-animation>
+</div>
+
+<script>
+  const container = document.querySelector('.animation-scroll');
+  const animation = container.querySelector('sl-animation');
+  const box = animation.querySelector('.box');
+
+  // Watch for the box to enter and exit the viewport. Note that we're observing the box, not the animation element!
+  const observer = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting) {
+      // Start the animation when the box enters the viewport
+      animation.play = true;
+    } else {
+      animation.play = false;
+      animation.currentTime = 0;
+    }
+  });
+  observer.observe(box);
+</script>
+
+<style>
+  .animation-scroll .box {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+  }
+</style>
+
+
+ +
+ 
import { useEffect, useRef, useState } from 'react';
+import SlAnimation from '@onsonr/nebula/dist/react/animation';
+
+const css = `
+  .animation-scroll {
+    height: calc(100vh + 100px);
+  }
+
+  .animation-scroll .box {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+  }
+`;
+
+const App = () => {
+  const animation = useRef(null);
+  const box = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        animation.current.play = true;
+      } else {
+        animation.current.play = false;
+        animation.current.currentTime = 0;
+      }
+    });
+
+    if (box.current) {
+      observer.observe(box.current);
+    }
+  }, [box]);
+
+  return (
+    <>
+      <div class="animation-scroll">
+        <SlAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
+          <div ref={box} class="box" />
+        </SlAnimation>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Keyframe Formats +

+

+ Supply your own + keyframe formats + to build custom animations. +

+ +
+
+
+ +
+ +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="animation-keyframes">
+  <sl-animation easing="ease-in-out" duration="2000" play>
+    <div class="box"></div>
+  </sl-animation>
+</div>
+
+<script>
+  const animation = document.querySelector('.animation-keyframes sl-animation');
+  animation.keyframes = [
+    {
+      offset: 0,
+      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+      fillMode: 'both',
+      transformOrigin: 'center center',
+      transform: 'rotate(0)'
+    },
+    {
+      offset: 1,
+      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+      fillMode: 'both',
+      transformOrigin: 'center center',
+      transform: 'rotate(90deg)'
+    }
+  ];
+</script>
+
+<style>
+  .animation-keyframes .box {
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+  }
+</style>
+
+
+ +
+ 
import SlAnimation from '@onsonr/nebula/dist/react/animation';
+
+const css = `
+  .animation-keyframes .box {
+    width: 100px;
+    height: 100px;
+    background-color: var(--sl-color-primary-600);
+  }
+`;
+
+const App = () => (
+  <>
+    <div class="animation-keyframes">
+      <SlAnimation
+        easing="ease-in-out"
+        duration={2000}
+        play
+        keyframes={[
+          {
+            offset: 0,
+            easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+            fillMode: 'both',
+            transformOrigin: 'center center',
+            transform: 'rotate(0)'
+          },
+          {
+            offset: 1,
+            easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+            fillMode: 'both',
+            transformOrigin: 'center center',
+            transform: 'rotate(90deg)'
+          }
+        ]}
+      >
+        <div class="box" />
+      </SlAnimation>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Playing Animations on Demand +

+

+ Animations won’t play until you apply the play attribute. You can omit it initially, then apply + it on demand such as after a user interaction. In this example, the button will animate once every time the + button is clicked. +

+ +
+
+
+ + Click me + +
+ + + +
+ +
+
+ +
+
+ 
<div class="animation-form">
+  <sl-animation name="rubberBand" duration="1000" iterations="1">
+    <sl-button variant="primary">Click me</sl-button>
+  </sl-animation>
+</div>
+
+<script>
+  const container = document.querySelector('.animation-form');
+  const animation = container.querySelector('sl-animation');
+  const button = container.querySelector('sl-button');
+
+  button.addEventListener('click', () => {
+    animation.play = true;
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlAnimation from '@onsonr/nebula/dist/react/animation';
+import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => {
+  const [play, setPlay] = useState(false);
+
+  return (
+    <div class="animation-form">
+      <SlAnimation name="rubberBand" duration={1000} iterations={1} play={play} onSlFinish={() => setPlay(false)}>
+        <SlButton variant="primary" onClick={() => setPlay(true)}>
+          Click me
+        </SlButton>
+      </SlAnimation>
+    </div>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/animation/animation.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/animation/animation.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/animation/animation.js';
+ + + +

To import this component as a React component:

+ 
import SlAnimation from '@onsonr/nebula/dist/react/animation';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default) + The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. + To animate multiple elements, either wrap them in a single container or use multiple + <sl-animation> elements. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + + The name of the built-in animation to use. For custom animations, use the + keyframes prop. + + string + + 'none' +
+ play + + Plays the animation. When omitted, the animation will be paused. This attribute will be + automatically removed when the animation finishes or gets canceled. + + + + boolean + + false +
+ delay + The number of milliseconds to delay the start of the animation. + number + + 0 +
+ direction + + Determines the direction of playback as well as the behavior when reaching the end of an iteration. + Learn more + + PlaybackDirection + + 'normal' +
+ duration + The number of milliseconds each iteration of the animation takes to complete. + number + + 1000 +
+ easing + + The easing function to use for the animation. This can be a Shoelace easing function or a custom + easing function such as cubic-bezier(0, 1, .76, 1.14). + + string + + 'linear' +
+ endDelay + +
+ + + end-delay + + + 		The number of milliseconds to delay after the active period of an animation sequence. + number + + 0 +
+ fill + Sets how the animation applies styles to its target before and after its execution. + FillMode + + 'auto' +
+ iterations + + The number of iterations to run before the animation completes. Defaults to Infinity, + which loops. + - + Infinity +
+ iterationStart + +
+ + + iteration-start + + + 		The offset at which to start the animation, usually between 0 (start) and 1 (end). + number + + 0 +
+ keyframes + The keyframes to use for the animation. If this is set, name will be ignored. + Keyframe[] | undefined + -
+ playbackRate + +
+ + + playback-rate + + + 		+ Sets the animation’s playback rate. The default is 1, which plays the animation at a + normal speed. Setting this to 2, for example, will double the animation’s speed. A + negative value can be used to reverse the animation. This value can be changed without causing the + animation to restart. + + number + + 1 +
+ currentTime + Gets and sets the current animation time. + CSSNumberish + -
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-cancelonSlCancelEmitted when the animation is canceled.-
sl-finishonSlFinishEmitted when the animation finishes.-
sl-startonSlStartEmitted when the animation starts or restarts.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
cancel()Clears all keyframe effects caused by this animation and aborts its playback.-
finish() + Sets the playback time to the end of the animation corresponding to the current playback direction. + -
+
+ +

+ Learn more about methods. +

+
+
+
+ + diff --git a/components/avatar/index.html b/components/avatar/index.html new file mode 100644 index 00000000..13f383b8 --- /dev/null +++ b/components/avatar/index.html @@ -0,0 +1,1376 @@ + + + + + + + Avatar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Avatar

+ +
+ <sl-avatar> | SlAvatar +
+ +
+ Since 2.0 + stable +
+
+ +

Avatars are used to represent a person or object.

+ +

+ By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and + images. You should always provide a label for assistive devices. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-avatar label="User avatar"></sl-avatar>
+
+
+ +
+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+
+const App = () => <SlAvatar label="User avatar" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Images

+

+ To use an image for the avatar, set the image and label attributes. This will take + priority and be shown over initials and icons. Avatar images can be lazily loaded by setting the + loading attribute to lazy. +

+ +
+
+ + + +
+ +
+
+ +
+
+ 
<sl-avatar
+  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a gray tabby kitten looking down"
+></sl-avatar>
+<sl-avatar
+  image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a white and grey kitten on grey textile"
+  loading="lazy"
+></sl-avatar>
+
+
+ +
+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+
+const App = () => (
+  <SlAvatar
+    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+    label="Avatar of a gray tabby kitten looking down"
+  />
+  <SlAvatar
+    image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+    label="Avatar of a white and grey kitten on grey textile"
+    loading="lazy"
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Initials +

+

+ When you don’t have an image to use, you can set the initials attribute to show something more + personalized than an icon. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-avatar initials="SL" label="Avatar with initials: SL"></sl-avatar>
+
+
+ +
+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+
+const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Icons +

+

+ When no image or initials are set, an icon will be shown. The default avatar shows a generic “user” icon, + but you can customize this with the icon slot. +

+ +
+
+ + + + + + + + + + + + +
+ +
+
+ +
+
+ 
<sl-avatar label="Avatar with an image icon">
+  <sl-icon slot="icon" name="image"></sl-icon>
+</sl-avatar>
+
+<sl-avatar label="Avatar with an archive icon">
+  <sl-icon slot="icon" name="archive"></sl-icon>
+</sl-avatar>
+
+<sl-avatar label="Avatar with a briefcase icon">
+  <sl-icon slot="icon" name="briefcase"></sl-icon>
+</sl-avatar>
+
+
+ +
+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <SlAvatar label="Avatar with an image icon">
+      <SlIcon slot="icon" name="image" />
+    </SlAvatar>
+
+    <SlAvatar label="Avatar with an archive icon">
+      <SlIcon slot="icon" name="archive" />
+    </SlAvatar>
+
+    <SlAvatar label="Avatar with a briefcase icon">
+      <SlIcon slot="icon" name="briefcase" />
+    </SlAvatar>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Shapes

+

Avatars can be shaped using the shape attribute.

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-avatar shape="square" label="Square avatar"></sl-avatar>
+<sl-avatar shape="rounded" label="Rounded avatar"></sl-avatar>
+<sl-avatar shape="circle" label="Circle avatar"></sl-avatar>
+
+
+ +
+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <SlAvatar shape="square" label="Square avatar" />
+    <SlAvatar shape="rounded" label="Rounded avatar" />
+    <SlAvatar shape="circle" label="Circle avatar" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Avatar Groups +

+

You can group avatars with a few lines of CSS.

+ +
+
+
+ + + + + + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="avatar-group">
+  <sl-avatar
+    image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
+    label="Avatar 1 of 4"
+  ></sl-avatar>
+
+  <sl-avatar
+    image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
+    label="Avatar 2 of 4"
+  ></sl-avatar>
+
+  <sl-avatar
+    image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
+    label="Avatar 3 of 4"
+  ></sl-avatar>
+
+  <sl-avatar
+    image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
+    label="Avatar 4 of 4"
+  ></sl-avatar>
+</div>
+
+<style>
+  .avatar-group sl-avatar:not(:first-of-type) {
+    margin-left: -1rem;
+  }
+
+  .avatar-group sl-avatar::part(base) {
+    border: solid 2px var(--sl-color-neutral-0);
+  }
+</style>
+
+
+ +
+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const css = `
+  .avatar-group sl-avatar:not(:first-of-type) {
+    margin-left: -1rem;
+  }
+
+  .avatar-group sl-avatar::part(base) {
+    border: solid 2px var(--sl-color-neutral-0);
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="avatar-group">
+      <SlAvatar
+        image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
+        label="Avatar 1 of 4"
+      />
+
+      <SlAvatar
+        image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
+        label="Avatar 2 of 4"
+      />
+
+      <SlAvatar
+        image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
+        label="Avatar 3 of 4"
+      />
+
+      <SlAvatar
+        image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
+        label="Avatar 4 of 4"
+      />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/avatar/avatar.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/avatar/avatar.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/avatar/avatar.js';
+ + + +

To import this component as a React component:

+ 
import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
+ icon + + The default icon to use when no image or initials are present. Works best with + <sl-icon>. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ image + The image source to use for the avatar. + string + + '' +
+ label + A label to use to describe the avatar to assistive devices. + string + + '' +
+ initials + Initials to use as a fallback when no image is available (1–2 characters max recommended). + string + + '' +
+ loading + Indicates how the browser should load the image. + 'eager' | 'lazy' + + 'eager' +
+ shape + The shape of the avatar. + + + 'circle' | 'square' | 'rounded' + + 'circle' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionDefault
--sizeThe size of the avatar.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
iconThe container that wraps the avatar’s icon.
initialsThe container that wraps the avatar’s initials.
imageThe avatar image. Only shown when the image attribute is set.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/badge/index.html b/components/badge/index.html new file mode 100644 index 00000000..adbaf92d --- /dev/null +++ b/components/badge/index.html @@ -0,0 +1,1292 @@ + + + + + + + Badge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Badge

+ +
+ <sl-badge> | SlBadge +
+ +
+ Since 2.0 + stable +
+
+ +

Badges are used to draw attention and display statuses or counts.

+ +
+
+ Badge + +
+ +
+
+ +
+
+ 
<sl-badge>Badge</sl-badge>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+
+const App = () => <SlBadge>Badge</SlBadge>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Variants +

+

Set the variant attribute to change the badge’s variant.

+ +
+
+ Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-badge variant="primary">Primary</sl-badge>
+<sl-badge variant="success">Success</sl-badge>
+<sl-badge variant="neutral">Neutral</sl-badge>
+<sl-badge variant="warning">Warning</sl-badge>
+<sl-badge variant="danger">Danger</sl-badge>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+
+const App = () => (
+  <>
+    <SlBadge variant="primary">Primary</SlBadge>
+    <SlBadge variant="success">Success</SlBadge>
+    <SlBadge variant="neutral">Neutral</SlBadge>
+    <SlBadge variant="warning">Warning</SlBadge>
+    <SlBadge variant="danger">Danger</SlBadge>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Pill Badges +

+

Use the pill attribute to give badges rounded edges.

+ +
+
+ Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-badge variant="primary" pill>Primary</sl-badge>
+<sl-badge variant="success" pill>Success</sl-badge>
+<sl-badge variant="neutral" pill>Neutral</sl-badge>
+<sl-badge variant="warning" pill>Warning</sl-badge>
+<sl-badge variant="danger" pill>Danger</sl-badge>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+
+const App = () => (
+  <>
+    <SlBadge variant="primary" pill>
+      Primary
+    </SlBadge>
+    <SlBadge variant="success" pill>
+      Success
+    </SlBadge>
+    <SlBadge variant="neutral" pill>
+      Neutral
+    </SlBadge>
+    <SlBadge variant="warning" pill>
+      Warning
+    </SlBadge>
+    <SlBadge variant="danger" pill>
+      Danger
+    </SlBadge>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Pulsating Badges +

+

Use the pulse attribute to draw attention to the badge with a subtle animation.

+ +
+
+
+ 1 + 1 + 1 + 1 + 1 +
+ + + +
+ +
+
+ +
+
+ 
<div class="badge-pulse">
+  <sl-badge variant="primary" pill pulse>1</sl-badge>
+  <sl-badge variant="success" pill pulse>1</sl-badge>
+  <sl-badge variant="neutral" pill pulse>1</sl-badge>
+  <sl-badge variant="warning" pill pulse>1</sl-badge>
+  <sl-badge variant="danger" pill pulse>1</sl-badge>
+</div>
+
+<style>
+  .badge-pulse sl-badge:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+</style>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+
+const css = `
+  .badge-pulse sl-badge:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="badge-pulse">
+      <SlBadge variant="primary" pill pulse>
+        1
+      </SlBadge>
+      <SlBadge variant="success" pill pulse>
+        1
+      </SlBadge>
+      <SlBadge variant="neutral" pill pulse>
+        1
+      </SlBadge>
+      <SlBadge variant="warning" pill pulse>
+        1
+      </SlBadge>
+      <SlBadge variant="danger" pill pulse>
+        1
+      </SlBadge>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ With Buttons +

+

+ One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will + be automatically positioned at the top-right when they’re a child of a button. +

+ +
+
+ + Requests + 30 + + + + Warnings + 8 + + + + Errors + 6 + + +
+ +
+
+ +
+
+ 
<sl-button>
+  Requests
+  <sl-badge pill>30</sl-badge>
+</sl-button>
+
+<sl-button style="margin-inline-start: 1rem;">
+  Warnings
+  <sl-badge variant="warning" pill>8</sl-badge>
+</sl-button>
+
+<sl-button style="margin-inline-start: 1rem;">
+  Errors
+  <sl-badge variant="danger" pill>6</sl-badge>
+</sl-button>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton>
+      Requests
+      <SlBadge pill>30</SlBadge>
+    </SlButton>
+
+    <SlButton style={{ marginInlineStart: '1rem' }}>
+      Warnings
+      <SlBadge variant="warning" pill>
+        8
+      </SlBadge>
+    </SlButton>
+
+    <SlButton style={{ marginInlineStart: '1rem' }}>
+      Errors
+      <SlBadge variant="danger" pill>
+        6
+      </SlBadge>
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ With Menu Items +

+

+ When including badges in menu items, use the suffix slot to make sure they’re aligned + correctly. +

+ +
+
+ + Messages + Comments 4 + Replies 12 + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 240px;">
+  <sl-menu-label>Messages</sl-menu-label>
+  <sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
+  <sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+import SlMenuLabel from '@onsonr/nebula/dist/react/menu-label';
+
+const App = () => (
+  <SlMenu
+    style={{
+      maxWidth: '240px',
+      border: 'solid 1px var(--sl-panel-border-color)',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuLabel>Messages</SlMenuLabel>
+    <SlMenuItem>
+      Comments
+      <SlBadge slot="suffix" variant="neutral" pill>
+        4
+      </SlBadge>
+    </SlMenuItem>
+    <SlMenuItem>
+      Replies
+      <SlBadge slot="suffix" variant="neutral" pill>
+        12
+      </SlBadge>
+    </SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/badge/badge.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/badge/badge.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/badge/badge.js';
+ + + +

To import this component as a React component:

+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The badge’s content.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ variant + The badge’s theme variant. + + + 'primary' | 'success' | 'neutral' | 'warning' | 'danger' + + 'primary' +
+ pill + Draws a pill-style badge with rounded edges. + + + boolean + + false +
+ pulse + Makes the badge pulsate to draw attention. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/breadcrumb-item/index.html b/components/breadcrumb-item/index.html new file mode 100644 index 00000000..93be424c --- /dev/null +++ b/components/breadcrumb-item/index.html @@ -0,0 +1,801 @@ + + + + + + + Breadcrumb Item + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Breadcrumb Item

+ +
+ <sl-breadcrumb-item> | SlBreadcrumbItem +
+ +
+ Since 2.0 + stable +
+
+ +

+ Breadcrumb Items are used inside breadcrumbs to represent different + links. +

+ +
+
+ + + + Home + + Clothing + Shirts + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-breadcrumb-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
+    Home
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>
+      <SlIcon slot="prefix" name="house"></SlIcon>
+      Home
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/breadcrumb-item/breadcrumb-item.js';
+ + + +

To import this component as a React component:

+ 
import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The breadcrumb item’s label.
+ prefix + An optional prefix, usually an icon or icon button.
+ suffix + An optional suffix, usually an icon or icon button.
+ separator + + The separator to use for the breadcrumb item. This will only change the separator for this item. If + you want to change it for all items in the group, set the separator on + <sl-breadcrumb> instead. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ href + + Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be + rendered internally. When unset, a button will be rendered instead. + + string | undefined + -
+ target + Tells the browser where to open the link. Only used when href is set. + '_blank' | '_parent' | '_self' | '_top' | undefined + -
+ rel + The rel attribute to use on the link. Only used when href is set. + string + + 'noreferrer noopener' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
labelThe breadcrumb item’s label.
prefixThe container that wraps the prefix.
suffixThe container that wraps the suffix.
separatorThe container that wraps the separator.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html new file mode 100644 index 00000000..f2e1c00a --- /dev/null +++ b/components/breadcrumb/index.html @@ -0,0 +1,1356 @@ + + + + + + + Breadcrumb + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Breadcrumb

+ +
+ <sl-breadcrumb> | SlBreadcrumb +
+ +
+ Since 2.0 + stable +
+
+ +

+ Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy. +

+ +

+ Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the + user’s position in the navigation. +

+ +
+
+ + Catalog + Clothing + Women’s + Shirts & Tops + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Women's</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Shirts &amp; Tops</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Women's</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Shirts &amp; Tops</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+ +

+ By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page + applications. In this case, you’ll need to add event listeners to handle clicks. +

+

+ For websites, you’ll probably want to use links instead. You can make any breadcrumb item a link by applying + an href attribute to it. Now, when the user activates it, they’ll be taken to the corresponding + page — no event listeners required. +

+ +
+
+ + Homepage + + Our Services + + Digital Media + + Web Design + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-breadcrumb-item href="https://example.com/home">Homepage</sl-breadcrumb-item>
+
+  <sl-breadcrumb-item href="https://example.com/home/services">Our Services</sl-breadcrumb-item>
+
+  <sl-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</sl-breadcrumb-item>
+
+  <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem href="https://example.com/home">Homepage</SlBreadcrumbItem>
+
+    <SlBreadcrumbItem href="https://example.com/home/services">Our Services</SlBreadcrumbItem>
+
+    <SlBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</SlBreadcrumbItem>
+
+    <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Separators +

+

+ Use the separator slot to change the separator that goes between breadcrumb items. Icons work + well, but you can also use text or an image. +

+ +
+
+ + + First + Second + Third + + +
+ + + + First + Second + Third + + +
+ + + / + First + Second + Third + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-icon name="dot" slot="separator"></sl-icon>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+<br />
+
+<sl-breadcrumb>
+  <sl-icon name="arrow-right" slot="separator"></sl-icon>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+<br />
+
+<sl-breadcrumb>
+  <span slot="separator">/</span>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import '@onsonr/nebula/dist/components/icon/icon.js';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+
+const App = () => (
+  <>
+    <SlBreadcrumb>
+      <sl-icon name="dot" slot="separator" />
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
+    </SlBreadcrumb>
+
+    <br />
+
+    <SlBreadcrumb>
+      <sl-icon name="arrow-right" slot="separator" />
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
+    </SlBreadcrumb>
+
+    <br />
+
+    <SlBreadcrumb>
+      <span slot="separator">/</span>
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem>
+    </SlBreadcrumb>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prefixes +

+

Use the prefix slot to add content before any breadcrumb item.

+ +
+
+ + + + Home + + Articles + Traveling + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-breadcrumb-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
+    Home
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Articles</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>
+      <SlIcon slot="prefix" name="house" />
+      Home
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Articles</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Suffixes +

+

Use the suffix slot to add content after any breadcrumb item.

+ +
+
+ + Documents + Policies + + Security + + + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
+  <sl-breadcrumb-item>
+    Security
+    <sl-icon slot="suffix" name="shield-lock"></sl-icon>
+  </sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Documents</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Policies</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
+      Security
+      <SlIcon slot="suffix" name="shield-lock"></SlIcon>
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ With Dropdowns +

+

Dropdown menus can be placed in a prefix or suffix slot to provide additional options.

+ +
+
+ + Homepage + Our Services + Digital Media + + Web Design + + + + + + Web Design + Web Development + Marketing + + + + + +
+ +
+
+ +
+
+ 
<sl-breadcrumb>
+  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
+  <sl-breadcrumb-item>
+    Web Design
+    <sl-dropdown slot="suffix">
+      <sl-button slot="trigger" size="small" circle>
+        <sl-icon label="More options" name="three-dots"></sl-icon>
+      </sl-button>
+      <sl-menu>
+        <sl-menu-item type="checkbox" checked>Web Design</sl-menu-item>
+        <sl-menu-item type="checkbox">Web Development</sl-menu-item>
+        <sl-menu-item type="checkbox">Marketing</sl-menu-item>
+      </sl-menu>
+    </sl-dropdown>
+  </sl-breadcrumb-item>
+</sl-breadcrumb>
+
+
+ +
+ 
import {
+  SlBreadcrumb,
+  SlBreadcrumbItem,
+  SlButton,
+  SlDropdown,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@onsonr/nebula/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
+      Web Design
+      <SlDropdown slot="suffix">
+        <SlButton slot="trigger" size="small" circle>
+          <SlIcon label="More options" name="three-dots"></SlIcon>
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem type="checkbox" checked>
+            Web Design
+          </SlMenuItem>
+          <SlMenuItem type="checkbox">Web Development</SlMenuItem>
+          <SlMenuItem type="checkbox">Marketing</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb/breadcrumb.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb/breadcrumb.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/breadcrumb/breadcrumb.js';
+ + + +

To import this component as a React component:

+ 
import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default)One or more breadcrumb items to display.
+ separator + The separator to use between breadcrumb items. Works best with <sl-icon>.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ label + + The label to use for the breadcrumb control. This will not be shown on the screen, but it will be + announced by screen readers and other assistive devices to provide more context for users. + + string + + '' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/button-group/index.html b/components/button-group/index.html new file mode 100644 index 00000000..30326bc9 --- /dev/null +++ b/components/button-group/index.html @@ -0,0 +1,1793 @@ + + + + + + + Button Group + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Button Group

+ +
+ <sl-button-group> | SlButtonGroup +
+ +
+ Since 2.0 + stable +
+
+ +

Button groups can be used to group related buttons into sections.

+ +
+
+ + Left + Center + Right + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Alignment">
+  <sl-button>Left</sl-button>
+  <sl-button>Center</sl-button>
+  <sl-button>Right</sl-button>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+
+const App = () => (
+  <SlButtonGroup label="Alignment">
+    <SlButton>Left</SlButton>
+    <SlButton>Center</SlButton>
+    <SlButton>Right</SlButton>
+  </SlButtonGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Button Sizes +

+

All button sizes are supported, but avoid mixing sizes within the same button group.

+ +
+
+ + Left + Center + Right + + +

+ + + Left + Center + Right + + +

+ + + Left + Center + Right + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Alignment">
+  <sl-button size="small">Left</sl-button>
+  <sl-button size="small">Center</sl-button>
+  <sl-button size="small">Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button size="medium">Left</sl-button>
+  <sl-button size="medium">Center</sl-button>
+  <sl-button size="medium">Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button size="large">Left</sl-button>
+  <sl-button size="large">Center</sl-button>
+  <sl-button size="large">Right</sl-button>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+
+const App = () => (
+  <>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="small">Left</SlButton>
+      <SlButton size="small">Center</SlButton>
+      <SlButton size="small">Right</SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton size="medium">Left</SlButton>
+      <SlButton size="medium">Center</SlButton>
+      <SlButton size="medium">Right</SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton size="large">Left</SlButton>
+      <SlButton size="large">Center</SlButton>
+      <SlButton size="large">Right</SlButton>
+    </SlButtonGroup>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Theme Buttons +

+

Theme buttons are supported through the button’s variant attribute.

+ +
+
+ + Left + Center + Right + + +

+ + + Left + Center + Right + + +

+ + + Left + Center + Right + + +

+ + + Left + Center + Right + + +

+ + + Left + Center + Right + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Alignment">
+  <sl-button variant="primary">Left</sl-button>
+  <sl-button variant="primary">Center</sl-button>
+  <sl-button variant="primary">Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button variant="success">Left</sl-button>
+  <sl-button variant="success">Center</sl-button>
+  <sl-button variant="success">Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button variant="neutral">Left</sl-button>
+  <sl-button variant="neutral">Center</sl-button>
+  <sl-button variant="neutral">Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button variant="warning">Left</sl-button>
+  <sl-button variant="warning">Center</sl-button>
+  <sl-button variant="warning">Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button variant="danger">Left</sl-button>
+  <sl-button variant="danger">Center</sl-button>
+  <sl-button variant="danger">Right</sl-button>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+
+const App = () => (
+  <>
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="primary">Left</SlButton>
+      <SlButton variant="primary">Center</SlButton>
+      <SlButton variant="primary">Right</SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="success">Left</SlButton>
+      <SlButton variant="success">Center</SlButton>
+      <SlButton variant="success">Right</SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="neutral">Left</SlButton>
+      <SlButton variant="neutral">Center</SlButton>
+      <SlButton variant="neutral">Right</SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="warning">Left</SlButton>
+      <SlButton variant="warning">Center</SlButton>
+      <SlButton variant="warning">Right</SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton variant="danger">Left</SlButton>
+      <SlButton variant="danger">Center</SlButton>
+      <SlButton variant="danger">Right</SlButton>
+    </SlButtonGroup>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Pill Buttons +

+

Pill buttons are supported through the button’s pill attribute.

+ +
+
+ + Left + Center + Right + + +

+ + + Left + Center + Right + + +

+ + + Left + Center + Right + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Alignment">
+  <sl-button size="small" pill>Left</sl-button>
+  <sl-button size="small" pill>Center</sl-button>
+  <sl-button size="small" pill>Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button size="medium" pill>Left</sl-button>
+  <sl-button size="medium" pill>Center</sl-button>
+  <sl-button size="medium" pill>Right</sl-button>
+</sl-button-group>
+
+<br /><br />
+
+<sl-button-group label="Alignment">
+  <sl-button size="large" pill>Left</sl-button>
+  <sl-button size="large" pill>Center</sl-button>
+  <sl-button size="large" pill>Right</sl-button>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+
+const App = () => (
+  <>
+    <SlButtonGroup label="Alignment">
+      <SlButton size="small" pill>
+        Left
+      </SlButton>
+      <SlButton size="small" pill>
+        Center
+      </SlButton>
+      <SlButton size="small" pill>
+        Right
+      </SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton size="medium" pill>
+        Left
+      </SlButton>
+      <SlButton size="medium" pill>
+        Center
+      </SlButton>
+      <SlButton size="medium" pill>
+        Right
+      </SlButton>
+    </SlButtonGroup>
+
+    <br />
+    <br />
+
+    <SlButtonGroup label="Alignment">
+      <SlButton size="large" pill>
+        Left
+      </SlButton>
+      <SlButton size="large" pill>
+        Center
+      </SlButton>
+      <SlButton size="large" pill>
+        Right
+      </SlButton>
+    </SlButtonGroup>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Dropdowns can be placed inside button groups as long as the trigger is an + <sl-button> element. +

+ +
+
+ + Button + Button + + Dropdown + + Item 1 + Item 2 + Item 3 + + + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Example Button Group">
+  <sl-button>Button</sl-button>
+  <sl-button>Button</sl-button>
+  <sl-dropdown>
+    <sl-button slot="trigger" caret>Dropdown</sl-button>
+    <sl-menu>
+      <sl-menu-item>Item 1</sl-menu-item>
+      <sl-menu-item>Item 2</sl-menu-item>
+      <sl-menu-item>Item 3</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlButtonGroup label="Example Button Group">
+    <SlButton>Button</SlButton>
+    <SlButton>Button</SlButton>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>
+        Dropdown
+      </SlButton>
+      <SlMenu>
+        <SlMenuItem>Item 1</SlMenuItem>
+        <SlMenuItem>Item 2</SlMenuItem>
+        <SlMenuItem>Item 3</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </SlButtonGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Split Buttons +

+

+ Create a split button using a button and a dropdown. Use a + visually hidden label to ensure the dropdown is accessible to + users with assistive devices. +

+ +
+
+ + Save + + + More options + + + Save + Save as… + Save all + + + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Example Button Group">
+  <sl-button variant="primary">Save</sl-button>
+  <sl-dropdown placement="bottom-end">
+    <sl-button slot="trigger" variant="primary" caret>
+      <sl-visually-hidden>More options</sl-visually-hidden>
+    </sl-button>
+    <sl-menu>
+      <sl-menu-item>Save</sl-menu-item>
+      <sl-menu-item>Save as&hellip;</sl-menu-item>
+      <sl-menu-item>Save all</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlButtonGroup label="Example Button Group">
+    <SlButton variant="primary">Save</SlButton>
+    <SlDropdown placement="bottom-end">
+      <SlButton slot="trigger" variant="primary" caret></SlButton>
+      <SlMenu>
+        <SlMenuItem>Save</SlMenuItem>
+        <SlMenuItem>Save as&hellip;</SlMenuItem>
+        <SlMenuItem>Save all</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </SlButtonGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Tooltips in Button Groups +

+

Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.

+ +
+
+ + + Left + + + + Center + + + + Right + + + +
+ +
+
+ +
+
+ 
<sl-button-group label="Alignment">
+  <sl-tooltip content="I'm on the left">
+    <sl-button>Left</sl-button>
+  </sl-tooltip>
+
+  <sl-tooltip content="I'm in the middle">
+    <sl-button>Center</sl-button>
+  </sl-tooltip>
+
+  <sl-tooltip content="I'm on the right">
+    <sl-button>Right</sl-button>
+  </sl-tooltip>
+</sl-button-group>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <>
+    <SlButtonGroup label="Alignment">
+      <SlTooltip content="I'm on the left">
+        <SlButton>Left</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="I'm in the middle">
+        <SlButton>Center</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="I'm on the right">
+        <SlButton>Right</SlButton>
+      </SlTooltip>
+    </SlButtonGroup>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Toolbar Example +

+

Create interactive toolbars with button groups.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="button-group-toolbar">
+  <sl-button-group label="History">
+    <sl-tooltip content="Undo">
+      <sl-button><sl-icon name="arrow-counterclockwise" label="Undo"></sl-icon></sl-button>
+    </sl-tooltip>
+    <sl-tooltip content="Redo">
+      <sl-button><sl-icon name="arrow-clockwise" label="Redo"></sl-icon></sl-button>
+    </sl-tooltip>
+  </sl-button-group>
+
+  <sl-button-group label="Formatting">
+    <sl-tooltip content="Bold">
+      <sl-button><sl-icon name="type-bold" label="Bold"></sl-icon></sl-button>
+    </sl-tooltip>
+    <sl-tooltip content="Italic">
+      <sl-button><sl-icon name="type-italic" label="Italic"></sl-icon></sl-button>
+    </sl-tooltip>
+    <sl-tooltip content="Underline">
+      <sl-button><sl-icon name="type-underline" label="Underline"></sl-icon></sl-button>
+    </sl-tooltip>
+  </sl-button-group>
+
+  <sl-button-group label="Alignment">
+    <sl-tooltip content="Align Left">
+      <sl-button><sl-icon name="justify-left" label="Align Left"></sl-icon></sl-button>
+    </sl-tooltip>
+    <sl-tooltip content="Align Center">
+      <sl-button><sl-icon name="justify" label="Align Center"></sl-icon></sl-button>
+    </sl-tooltip>
+    <sl-tooltip content="Align Right">
+      <sl-button><sl-icon name="justify-right" label="Align Right"></sl-icon></sl-button>
+    </sl-tooltip>
+  </sl-button-group>
+</div>
+
+<style>
+  .button-group-toolbar sl-button-group:not(:last-of-type) {
+    margin-right: var(--sl-spacing-x-small);
+  }
+</style>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const css = `
+  .button-group-toolbar sl-button-group:not(:last-of-type) {
+    margin-right: var(--sl-spacing-x-small);
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="button-group-toolbar">
+      <SlButtonGroup label="History">
+        <SlTooltip content="Undo">
+          <SlButton>
+            <SlIcon name="arrow-counterclockwise"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+        <SlTooltip content="Redo">
+          <SlButton>
+            <SlIcon name="arrow-clockwise"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+      </SlButtonGroup>
+
+      <SlButtonGroup label="Formatting">
+        <SlTooltip content="Bold">
+          <SlButton>
+            <SlIcon name="type-bold"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+        <SlTooltip content="Italic">
+          <SlButton>
+            <SlIcon name="type-italic"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+        <SlTooltip content="Underline">
+          <SlButton>
+            <SlIcon name="type-underline"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+      </SlButtonGroup>
+
+      <SlButtonGroup label="Alignment">
+        <SlTooltip content="Align Left">
+          <SlButton>
+            <SlIcon name="justify-left"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+        <SlTooltip content="Align Center">
+          <SlButton>
+            <SlIcon name="justify"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+        <SlTooltip content="Align Right">
+          <SlButton>
+            <SlIcon name="justify-right"></SlIcon>
+          </SlButton>
+        </SlTooltip>
+      </SlButtonGroup>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/button-group/button-group.js';
+ + + +

To import this component as a React component:

+ 
import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)One or more <sl-button> elements to display in the button group.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ label + + A label to use for the button group. This won’t be displayed on the screen, but it will be announced + by assistive devices when interacting with the control and is strongly recommended. + + string + + '' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/button/index.html b/components/button/index.html new file mode 100644 index 00000000..e9f6f6ef --- /dev/null +++ b/components/button/index.html @@ -0,0 +1,2715 @@ + + + + + + + Button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Button

+ +
+ <sl-button> | SlButton +
+ +
+ Since 2.0 + stable +
+
+ +

Buttons represent actions that are available to the user.

+ +
+
+ Button + +
+ +
+
+ +
+
+ 
<sl-button>Button</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => <SlButton>Button</SlButton>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Variants +

+

Use the variant attribute to set the button’s variant.

+ +
+
+ Default + Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-button variant="default">Default</sl-button>
+<sl-button variant="primary">Primary</sl-button>
+<sl-button variant="success">Success</sl-button>
+<sl-button variant="neutral">Neutral</sl-button>
+<sl-button variant="warning">Warning</sl-button>
+<sl-button variant="danger">Danger</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton variant="default">Default</SlButton>
+    <SlButton variant="primary">Primary</SlButton>
+    <SlButton variant="success">Success</SlButton>
+    <SlButton variant="neutral">Neutral</SlButton>
+    <SlButton variant="warning">Warning</SlButton>
+    <SlButton variant="danger">Danger</SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change a button’s size.

+ +
+
+ Small + Medium + Large + +
+ +
+
+ +
+
+ 
<sl-button size="small">Small</sl-button>
+<sl-button size="medium">Medium</sl-button>
+<sl-button size="large">Large</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton size="small">Small</SlButton>
+    <SlButton size="medium">Medium</SlButton>
+    <SlButton size="large">Large</SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Outline Buttons +

+

Use the outline attribute to draw outlined buttons with transparent backgrounds.

+ +
+
+ Default + Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-button variant="default" outline>Default</sl-button>
+<sl-button variant="primary" outline>Primary</sl-button>
+<sl-button variant="success" outline>Success</sl-button>
+<sl-button variant="neutral" outline>Neutral</sl-button>
+<sl-button variant="warning" outline>Warning</sl-button>
+<sl-button variant="danger" outline>Danger</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton variant="default" outline>
+      Default
+    </SlButton>
+    <SlButton variant="primary" outline>
+      Primary
+    </SlButton>
+    <SlButton variant="success" outline>
+      Success
+    </SlButton>
+    <SlButton variant="neutral" outline>
+      Neutral
+    </SlButton>
+    <SlButton variant="warning" outline>
+      Warning
+    </SlButton>
+    <SlButton variant="danger" outline>
+      Danger
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Pill Buttons +

+

Use the pill attribute to give buttons rounded edges.

+ +
+
+ Small + Medium + Large + +
+ +
+
+ +
+
+ 
<sl-button size="small" pill>Small</sl-button>
+<sl-button size="medium" pill>Medium</sl-button>
+<sl-button size="large" pill>Large</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton size="small" pill>
+      Small
+    </SlButton>
+    <SlButton size="medium" pill>
+      Medium
+    </SlButton>
+    <SlButton size="large" pill>
+      Large
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Circle Buttons +

+

+ Use the circle attribute to create circular icon buttons. When this attribute is set, the + button expects a single <sl-icon> in the default slot. +

+ +
+
+ + + + + + + + + + + + +
+ +
+
+ +
+
+ 
<sl-button variant="default" size="small" circle>
+  <sl-icon name="gear" label="Settings"></sl-icon>
+</sl-button>
+
+<sl-button variant="default" size="medium" circle>
+  <sl-icon name="gear" label="Settings"></sl-icon>
+</sl-button>
+
+<sl-button variant="default" size="large" circle>
+  <sl-icon name="gear" label="Settings"></sl-icon>
+</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <SlButton variant="default" size="small" circle>
+      <SlIcon name="gear" />
+    </SlButton>
+    <SlButton variant="default" size="medium" circle>
+      <SlIcon name="gear" />
+    </SlButton>
+    <SlButton variant="default" size="large" circle>
+      <SlIcon name="gear" />
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Text Buttons +

+

+ Use the text variant to create text buttons that share the same size as regular buttons but + don’t have backgrounds or borders. +

+ +
+
+ Text + Text + Text + +
+ +
+
+ +
+
+ 
<sl-button variant="text" size="small">Text</sl-button>
+<sl-button variant="text" size="medium">Text</sl-button>
+<sl-button variant="text" size="large">Text</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton variant="text" size="small">
+      Text
+    </SlButton>
+    <SlButton variant="text" size="medium">
+      Text
+    </SlButton>
+    <SlButton variant="text" size="large">
+      Text
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ It’s often helpful to have a button that works like a link. This is possible by setting the + href attribute, which will make the component render an <a> under the hood. + This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + + CLICK) and exposes the target and download attributes. +

+ +
+
+ Link + New Window + Download + Disabled + +
+ +
+
+ +
+
+ 
<sl-button href="https://example.com/">Link</sl-button>
+<sl-button href="https://example.com/" target="_blank">New Window</sl-button>
+<sl-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</sl-button>
+<sl-button href="https://example.com/" disabled>Disabled</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton href="https://example.com/">Link</SlButton>
+    <SlButton href="https://example.com/" target="_blank">
+      New Window
+    </SlButton>
+    <SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">
+      Download
+    </SlButton>
+    <SlButton href="https://example.com/" disabled>
+      Disabled
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Setting a Custom Width +

+

+ As expected, buttons can be given a custom width by passing inline styles to the component (or using a + class). This is useful for making buttons span the full width of their container on smaller screens. +

+ +
+
+ Small + Medium + Large + +
+ +
+
+ +
+
+ 
<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
+<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
+<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
+      Small
+    </SlButton>
+    <SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
+      Medium
+    </SlButton>
+    <SlButton variant="default" size="large" style={{ width: '100%' }}>
+      Large
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prefix and Suffix Icons +

+

Use the prefix and suffix slots to add icons.

+ +
+
+ + + Settings + + + + + Refresh + + + + + + Open + + +

+ + + + Settings + + + + + Refresh + + + + + + Open + + +

+ + + + Settings + + + + + Refresh + + + + + + Open + + +
+ +
+
+ +
+
+ 
<sl-button variant="default" size="small">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+
+<sl-button variant="default" size="small">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+  Refresh
+</sl-button>
+
+<sl-button variant="default" size="small">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+  Open
+</sl-button>
+
+<br /><br />
+
+<sl-button variant="default">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+
+<sl-button variant="default">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+  Refresh
+</sl-button>
+
+<sl-button variant="default">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+  Open
+</sl-button>
+
+<br /><br />
+
+<sl-button variant="default" size="large">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+
+<sl-button variant="default" size="large">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+  Refresh
+</sl-button>
+
+<sl-button variant="default" size="large">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+  Open
+</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <SlButton variant="default" size="small">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
+      Settings
+    </SlButton>
+
+    <SlButton variant="default" size="small">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+      Refresh
+    </SlButton>
+
+    <SlButton variant="default" size="small">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+      Open
+    </SlButton>
+
+    <br />
+    <br />
+
+    <SlButton variant="default">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
+      Settings
+    </SlButton>
+
+    <SlButton variant="default">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+      Refresh
+    </SlButton>
+
+    <SlButton variant="default">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+      Open
+    </SlButton>
+
+    <br />
+    <br />
+
+    <SlButton variant="default" size="large">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
+      Settings
+    </SlButton>
+
+    <SlButton variant="default" size="large">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+      Refresh
+    </SlButton>
+
+    <SlButton variant="default" size="large">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+      Open
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Caret

+

+ Use the caret attribute to add a dropdown indicator when a button will trigger a dropdown, + menu, or popover. +

+ +
+
+ Small + Medium + Large + +
+ +
+
+ +
+
+ 
<sl-button size="small" caret>Small</sl-button>
+<sl-button size="medium" caret>Medium</sl-button>
+<sl-button size="large" caret>Large</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton size="small" caret>
+      Small
+    </SlButton>
+    <SlButton size="medium" caret>
+      Medium
+    </SlButton>
+    <SlButton size="large" caret>
+      Large
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Loading +

+

+ Use the loading attribute to make a button busy. The width will remain the same as before, + preventing adjacent elements from moving around. +

+ +
+
+ Default + Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-button variant="default" loading>Default</sl-button>
+<sl-button variant="primary" loading>Primary</sl-button>
+<sl-button variant="success" loading>Success</sl-button>
+<sl-button variant="neutral" loading>Neutral</sl-button>
+<sl-button variant="warning" loading>Warning</sl-button>
+<sl-button variant="danger" loading>Danger</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton variant="default" loading>
+      Default
+    </SlButton>
+    <SlButton variant="primary" loading>
+      Primary
+    </SlButton>
+    <SlButton variant="success" loading>
+      Success
+    </SlButton>
+    <SlButton variant="neutral" loading>
+      Neutral
+    </SlButton>
+    <SlButton variant="warning" loading>
+      Warning
+    </SlButton>
+    <SlButton variant="danger" loading>
+      Danger
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable a button.

+ +
+
+ Default + Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-button variant="default" disabled>Default</sl-button>
+<sl-button variant="primary" disabled>Primary</sl-button>
+<sl-button variant="success" disabled>Success</sl-button>
+<sl-button variant="neutral" disabled>Neutral</sl-button>
+<sl-button variant="warning" disabled>Warning</sl-button>
+<sl-button variant="danger" disabled>Danger</sl-button>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const App = () => (
+  <>
+    <SlButton variant="default" disabled>
+      Default
+    </SlButton>
+
+    <SlButton variant="primary" disabled>
+      Primary
+    </SlButton>
+
+    <SlButton variant="success" disabled>
+      Success
+    </SlButton>
+
+    <SlButton variant="neutral" disabled>
+      Neutral
+    </SlButton>
+
+    <SlButton variant="warning" disabled>
+      Warning
+    </SlButton>
+
+    <SlButton variant="danger" disabled>
+      Danger
+    </SlButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Styling Buttons +

+

+ This example demonstrates how to style buttons using a custom class. This is the recommended approach if you + need to add additional variations. To customize an existing variation, modify the selector to target the + button’s variant attribute instead of a class (e.g. sl-button[variant="primary"]). +

+ +
+
+ Pink Button + + + +
+ +
+
+ +
+
+ 
<sl-button class="pink">Pink Button</sl-button>
+
+<style>
+  sl-button.pink::part(base) {
+    /* Set design tokens for height and border width */
+    --sl-input-height-medium: 48px;
+    --sl-input-border-width: 4px;
+
+    border-radius: 0;
+    background-color: #ff1493;
+    border-top-color: #ff7ac1;
+    border-left-color: #ff7ac1;
+    border-bottom-color: #ad005c;
+    border-right-color: #ad005c;
+    color: white;
+    font-size: 1.125rem;
+    box-shadow: 0 2px 10px #0002;
+    transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
+  }
+
+  sl-button.pink::part(base):hover {
+    transform: scale(1.05) rotate(-1deg);
+  }
+
+  sl-button.pink::part(base):active {
+    border-top-color: #ad005c;
+    border-right-color: #ff7ac1;
+    border-bottom-color: #ff7ac1;
+    border-left-color: #ad005c;
+    transform: scale(1.05) rotate(-1deg) translateY(2px);
+  }
+
+  sl-button.pink::part(base):focus-visible {
+    outline: dashed 2px deeppink;
+    outline-offset: 4px;
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/button/button.js';
+ + + +

To import this component as a React component:

+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The button’s label.
+ prefix + A presentational prefix icon or similar element.
+ suffix + A presentational suffix icon or similar element.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ variant + The button’s theme variant. + + + 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' + + 'default' +
+ size + The button’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ caret + + Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar + behavior. + + + + boolean + + false +
+ disabled + Disables the button. + + + boolean + + false +
+ loading + Draws the button in a loading state. + + + boolean + + false +
+ outline + Draws an outlined button. + + + boolean + + false +
+ pill + Draws a pill-style button with rounded edges. + + + boolean + + false +
+ circle + + Draws a circular icon button. When this attribute is present, the button expects a single + <sl-icon> in the default slot. + + + + boolean + + false +
+ type + + The type of button. Note that the default value is button instead of + submit, which is opposite of how native <button> elements behave. + When the type is submit, the button will submit the surrounding form. + + 'button' | 'submit' | 'reset' + + 'button' +
+ name + + The name of the button, submitted as a name/value pair with form data, but only when this button is + the submitter. This attribute is ignored when href is present. + + string + + '' +
+ value + + The value of the button, submitted as a pair with the button’s name as part of the form data, but + only when this button is the submitter. This attribute is ignored when href is present. + + string + + '' +
+ href + + When set, the underlying button will be rendered as an <a> with this + href instead of a <button>. + + string + + '' +
+ target + Tells the browser where to open the link. Only used when href is present. + '_blank' | '_parent' | '_self' | '_top' + -
+ rel + + When using href, this attribute will map to the underlying link’s + rel attribute. Unlike regular links, the default is noreferrer noopener to + prevent security exploits. However, if you’re using target to point to a specific + tab/window, this will prevent that from working correctly. You can remove or change the default + value by setting the attribute to an empty string or a value of your choice, respectively. + + string + + 'noreferrer noopener' +
+ download + + Tells the browser to download the linked file as this filename. Only used when href is + present. + + string | undefined + -
+ form + + The “form owner” to associate the button with. If omitted, the closest containing form will be used + instead. The value of this attribute must be an id of a form in the same document or shadow root as + the button. + + string + -
+ formAction + +
+ + + formaction + + + 		Used to override the form owner’s action attribute. + string + -
+ formEnctype + +
+ + + formenctype + + + 		Used to override the form owner’s enctype attribute. + 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' + -
+ formMethod + +
+ + + formmethod + + + 		Used to override the form owner’s method attribute. + 'post' | 'get' + -
+ formNoValidate + +
+ + + formnovalidate + + + 		Used to override the form owner’s novalidate attribute. + boolean + -
+ formTarget + +
+ + + formtarget + + + 		Used to override the form owner’s target attribute. + '_self' | '_blank' | '_parent' | '_top' | string + -
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the button loses focus.-
sl-focusonSlFocusEmitted when the button gains focus.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
click()Simulates a click on the button.-
focus()Sets focus on the button. + options: FocusOptions +
blur()Removes focus from the button.-
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
prefixThe container that wraps the prefix.
labelThe button’s label.
suffixThe container that wraps the suffix.
caretThe button’s caret icon, an <sl-icon> element.
spinnerThe spinner that shows when the button is in the loading state.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-spinner>
    • +
+
+
+
+ + diff --git a/components/card/index.html b/components/card/index.html new file mode 100644 index 00000000..11950a78 --- /dev/null +++ b/components/card/index.html @@ -0,0 +1,1367 @@ + + + + + + + Card + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Card

+ +
+ <sl-card> | SlCard +
+ +
+ Since 2.0 + stable +
+
+ +

Cards can be used to group related subjects in a container.

+ +
+
+ + A kitten sits patiently between a terracotta pot and decorative grasses. + + Mittens
+ This kitten is as cute as he is playful. Bring him home today!
+ 6 weeks old + +
+ More Info + +
+ + + + +
+ +
+
+ +
+
+ 
<sl-card class="card-overview">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
+
+  <strong>Mittens</strong><br />
+  This kitten is as cute as he is playful. Bring him home today!<br />
+  <small>6 weeks old</small>
+
+  <div slot="footer">
+    <sl-button variant="primary" pill>More Info</sl-button>
+    <sl-rating></sl-rating>
+  </div>
+</sl-card>
+
+<style>
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--sl-color-neutral-500);
+  }
+
+  .card-overview [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlCard from '@onsonr/nebula/dist/react/card';
+import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const css = `
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--sl-color-neutral-500);
+  }
+
+  .card-overview [slot="footer"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-overview">
+      <img
+        slot="image"
+        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+        alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+      />
+      <strong>Mittens</strong>
+      <br />
+      This kitten is as cute as he is playful. Bring him home today!
+      <br />
+      <small>6 weeks old</small>
+      <div slot="footer">
+        <SlButton variant="primary" pill>
+          More Info
+        </SlButton>
+        <SlRating></SlRating>
+      </div>
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Basic Card +

+

Basic cards aren’t very exciting, but they can display any content you want them to.

+ +
+
+ + This is just a basic card. No image, no header, and no footer. Just your content. + + + + +
+ +
+
+ +
+
+ 
<sl-card class="card-basic">
+  This is just a basic card. No image, no header, and no footer. Just your content.
+</sl-card>
+
+<style>
+  .card-basic {
+    max-width: 300px;
+  }
+</style>
+
+
+ +
+ 
import SlCard from '@onsonr/nebula/dist/react/card';
+
+const css = `
+  .card-basic {
+    max-width: 300px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-basic">
+      This is just a basic card. No image, no header, and no footer. Just your content.
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Card with Header +

+

Headers can be used to display titles and more.

+ +
+
+ +
+ Header Title + +
+ + This card has a header. You can put all sorts of things in it! + + + + +
+ +
+
+ +
+
+ 
<sl-card class="card-header">
+  <div slot="header">
+    Header Title
+    <sl-icon-button name="gear" label="Settings"></sl-icon-button>
+  </div>
+
+  This card has a header. You can put all sorts of things in it!
+</sl-card>
+
+<style>
+  .card-header {
+    max-width: 300px;
+  }
+
+  .card-header [slot='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-header h3 {
+    margin: 0;
+  }
+
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
+  }
+</style>
+
+
+ +
+ 
import SlCard from '@onsonr/nebula/dist/react/card';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const css = `
+  .card-header {
+    max-width: 300px;
+  }
+
+  .card-header [slot="header"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .card-header h3 {
+    margin: 0;
+  }
+
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-header">
+      <div slot="header">
+        Header Title
+        <SlIconButton name="gear"></SlIconButton>
+      </div>
+      This card has a header. You can put all sorts of things in it!
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

Footers can be used to display actions, summaries, or other relevant content.

+ +
+
+ + This card has a footer. You can put all sorts of things in it! + +
+ + Preview +
+ + + + +
+ +
+
+ +
+
+ 
<sl-card class="card-footer">
+  This card has a footer. You can put all sorts of things in it!
+
+  <div slot="footer">
+    <sl-rating></sl-rating>
+    <sl-button variant="primary">Preview</sl-button>
+  </div>
+</sl-card>
+
+<style>
+  .card-footer {
+    max-width: 300px;
+  }
+
+  .card-footer [slot='footer'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlCard from '@onsonr/nebula/dist/react/card';
+import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const css = `
+  .card-footer {
+    max-width: 300px;
+  }
+
+  .card-footer [slot="footer"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-footer">
+      This card has a footer. You can put all sorts of things in it!
+      <div slot="footer">
+        <SlRating></SlRating>
+        <SlButton slot="footer" variant="primary">
+          Preview
+        </SlButton>
+      </div>
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Images

+

Cards accept an image slot. The image is displayed atop the card and stretches to fit.

+ +
+
+ + A kitten walks towards camera on top of pallet. + This is a kitten, but not just any kitten. This kitten likes walking along pallets. + + + + +
+ +
+
+ +
+
+ 
<sl-card class="card-image">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
+    alt="A kitten walks towards camera on top of pallet."
+  />
+  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+</sl-card>
+
+<style>
+  .card-image {
+    max-width: 300px;
+  }
+</style>
+
+
+ +
+ 
import SlCard from '@onsonr/nebula/dist/react/card';
+
+const css = `
+  .card-image {
+    max-width: 300px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-image">
+      <img
+        slot="image"
+        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
+        alt="A kitten walks towards camera on top of pallet."
+      />
+      This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/card/card.js';
+ + + +

To import this component as a React component:

+ 
import SlCard from '@onsonr/nebula/dist/react/card';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The card’s main content.
+ header + An optional header for the card.
+ footer + An optional footer for the card.
+ image + An optional image to render at the start of the card.
+
+ +

+ Learn more about using slots. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--border-colorThe card’s border color, including borders that occur inside the card.
--border-radiusThe border radius for the card’s edges.
--border-widthThe width of the card’s borders.
--paddingThe padding to use for the card’s sections.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
imageThe container that wraps the card’s image.
headerThe container that wraps the card’s header.
bodyThe container that wraps the card’s main content.
footerThe container that wraps the card’s footer.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/carousel-item/index.html b/components/carousel-item/index.html new file mode 100644 index 00000000..8e42a6a1 --- /dev/null +++ b/components/carousel-item/index.html @@ -0,0 +1,749 @@ + + + + + + + Carousel Item + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Carousel Item

+ +
+ <sl-carousel-item> | SlCarouselItem +
+ +
+ Since 2.0 + experimental +
+
+ +

+ A carousel item represent a slide within a carousel. +

+ +
+
+ + + The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash + + + A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash + + + The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash + + + A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash + + + A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash + + + +
+ +
+
+ +
+
+ 
<sl-carousel pagination>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <SlCarousel pagination>
+    <SlCarouselItem>
+      <img
+        alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
+        src="/assets/examples/carousel/mountains.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
+        src="/assets/examples/carousel/waterfall.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
+        src="/assets/examples/carousel/sunset.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
+        src="/assets/examples/carousel/field.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
+        src="/assets/examples/carousel/valley.jpg"
+      />
+    </SlCarouselItem>
+  </SlCarousel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/carousel-item/carousel-item.js';
+ + + +

To import this component as a React component:

+ 
import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The carousel item’s content..
+
+ +

+ Learn more about using slots. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionDefault
--aspect-ratioThe slide’s aspect ratio. Inherited from the carousel by default.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+
+
+
+ + diff --git a/components/carousel/index.html b/components/carousel/index.html new file mode 100644 index 00000000..582a2fc8 --- /dev/null +++ b/components/carousel/index.html @@ -0,0 +1,3532 @@ + + + + + + + Carousel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Carousel

+ +
+ <sl-carousel> | SlCarousel +
+ +
+ Since 2.2 + experimental +
+
+ +

+ Carousels display an arbitrary number of content slides along a horizontal or vertical axis. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+ +
+
+ +
+
+ 
<sl-carousel pagination navigation mouse-dragging loop>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <>
+    <SlCarousel pagination mouse-dragging>
+      <SlCarouselItem>
+        <img
+          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+          src="/assets/examples/carousel/mountains.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+          src="/assets/examples/carousel/waterfall.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+          src="/assets/examples/carousel/sunset.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+          src="/assets/examples/carousel/field.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+          src="/assets/examples/carousel/valley.jpg"
+        />
+      </SlCarouselItem>
+    </SlCarousel>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Pagination +

+

+ Use the pagination attribute to show the total number of slides and the current slide as a set + of interactive dots. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+ +
+
+ +
+
+ 
<sl-carousel pagination>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <SlCarousel pagination>
+    <SlCarouselItem>
+      <img
+        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+        src="/assets/examples/carousel/mountains.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+        src="/assets/examples/carousel/waterfall.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+        src="/assets/examples/carousel/sunset.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+        src="/assets/examples/carousel/field.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+        src="/assets/examples/carousel/valley.jpg"
+      />
+    </SlCarouselItem>
+  </SlCarousel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

Use the navigation attribute to show previous and next buttons.

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+ +
+
+ +
+
+ 
<sl-carousel navigation>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <SlCarousel navigation>
+    <SlCarouselItem>
+      <img
+        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+        src="/assets/examples/carousel/mountains.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+        src="/assets/examples/carousel/waterfall.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+        src="/assets/examples/carousel/sunset.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+        src="/assets/examples/carousel/field.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+        src="/assets/examples/carousel/valley.jpg"
+      />
+    </SlCarouselItem>
+  </SlCarousel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Looping +

+

+ By default, the carousel will not advanced beyond the first and last slides. You can change this behavior + and force the carousel to “wrap” with the loop attribute. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+ +
+
+ +
+
+ 
<sl-carousel loop navigation pagination>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <SlCarousel loop navigation pagination>
+    <SlCarouselItem>
+      <img
+        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+        src="/assets/examples/carousel/mountains.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+        src="/assets/examples/carousel/waterfall.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+        src="/assets/examples/carousel/sunset.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+        src="/assets/examples/carousel/field.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+        src="/assets/examples/carousel/valley.jpg"
+      />
+    </SlCarouselItem>
+  </SlCarousel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Autoplay +

+

+ The carousel will automatically advance when the autoplay attribute is used. To change how long + a slide is shown before advancing, set autoplay-interval to the desired number of milliseconds. + For best results, use the loop attribute when autoplay is enabled. Note that autoplay will + pause while the user interacts with the carousel. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+ +
+
+ +
+
+ 
<sl-carousel autoplay loop pagination>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <SlCarousel autoplay loop pagination>
+    <SlCarouselItem>
+      <img
+        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+        src="/assets/examples/carousel/mountains.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+        src="/assets/examples/carousel/waterfall.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+        src="/assets/examples/carousel/sunset.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+        src="/assets/examples/carousel/field.jpg"
+      />
+    </SlCarouselItem>
+    <SlCarouselItem>
+      <img
+        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+        src="/assets/examples/carousel/valley.jpg"
+      />
+    </SlCarouselItem>
+  </SlCarousel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Mouse Dragging +

+

+ The carousel uses + scroll snap + to position slides at various snap positions. This allows users to scroll through the slides very naturally, + especially on touch devices. Unfortunately, desktop users won’t be able to click and drag with a mouse, + which can feel unnatural. Adding the mouse-dragging attribute can help with this. +

+

+ This example is best demonstrated using a mouse. Try clicking and dragging the slide to move it. Then toggle + the switch and try again. +

+ +
+
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + + + + Enable mouse dragging +
+ + + +
+ +
+
+ +
+
+ 
<div class="mouse-dragging">
+  <sl-carousel pagination>
+    <sl-carousel-item>
+      <img
+        alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+        src="/assets/examples/carousel/mountains.jpg"
+      />
+    </sl-carousel-item>
+    <sl-carousel-item>
+      <img
+        alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+        src="/assets/examples/carousel/waterfall.jpg"
+      />
+    </sl-carousel-item>
+    <sl-carousel-item>
+      <img
+        alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+        src="/assets/examples/carousel/sunset.jpg"
+      />
+    </sl-carousel-item>
+    <sl-carousel-item>
+      <img
+        alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+        src="/assets/examples/carousel/field.jpg"
+      />
+    </sl-carousel-item>
+    <sl-carousel-item>
+      <img
+        alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+        src="/assets/examples/carousel/valley.jpg"
+      />
+    </sl-carousel-item>
+  </sl-carousel>
+
+  <sl-divider></sl-divider>
+
+  <sl-switch>Enable mouse dragging</sl-switch>
+</div>
+
+<script>
+  const container = document.querySelector('.mouse-dragging');
+  const carousel = container.querySelector('sl-carousel');
+  const toggle = container.querySelector('sl-switch');
+
+  toggle.addEventListener('sl-change', () => {
+    carousel.toggleAttribute('mouse-dragging', toggle.checked);
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const App = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  return (
+    <>
+      <SlCarousel navigation mouseDragging={isEnabled}>
+        <SlCarouselItem>
+          <img
+            alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+            src="/assets/examples/carousel/mountains.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+            src="/assets/examples/carousel/waterfall.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+            src="/assets/examples/carousel/sunset.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+            src="/assets/examples/carousel/field.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+            src="/assets/examples/carousel/valley.jpg"
+          />
+        </SlCarouselItem>
+      </SlCarousel>
+
+      <SlDivider></SlDivider>
+
+      <SlSwitch checked={isEnabled} onSlInput={() => setIsEnabled(!isEnabled)}>
+        Enable mouse dragging
+      </SlSwitch>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Multiple Slides Per View +

+

+ The slides-per-page attribute makes it possible to display multiple slides at a time. You can + also use the slides-per-move attribute to advance more than once slide at a time, if desired. +

+ +
+
+ + Slide 1 + Slide 2 + Slide 3 + Slide 4 + Slide 5 + Slide 6 + + +
+ +
+
+ +
+
+ 
<sl-carousel navigation pagination slides-per-page="2" slides-per-move="2">
+  <sl-carousel-item style="background: var(--sl-color-red-200);">Slide 1</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-orange-200);">Slide 2</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-yellow-200);">Slide 3</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-green-200);">Slide 4</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-blue-200);">Slide 5</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-violet-200);">Slide 6</sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const App = () => (
+  <SlCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
+    <SlCarouselItem style={{ background: 'var(--sl-color-red-200)' }}>Slide 1</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'var(--sl-color-orange-200)' }}>Slide 2</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'var(--sl-color-yellow-200)' }}>Slide 3</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'var(--sl-color-green-200)' }}>Slide 4</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'var(--sl-color-blue-200)' }}>Slide 5</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'var(--sl-color-violet-200)' }}>Slide 6</SlCarouselItem>
+  </SlCarousel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Adding and Removing Slides +

+

+ The content of the carousel can be changed by adding or removing carousel items. The carousel will update + itself automatically. +

+ +
+
+ + Slide 1 + Slide 2 + Slide 3 + + +
+ Add slide + Remove slide +
+ + + + + +
+ +
+
+ +
+
+ 
<sl-carousel class="dynamic-carousel" pagination navigation>
+  <sl-carousel-item style="background: var(--sl-color-red-200)">Slide 1</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-orange-200)">Slide 2</sl-carousel-item>
+  <sl-carousel-item style="background: var(--sl-color-yellow-200)">Slide 3</sl-carousel-item>
+</sl-carousel>
+
+<div class="carousel-options">
+  <sl-button id="dynamic-add">Add slide</sl-button>
+  <sl-button id="dynamic-remove">Remove slide</sl-button>
+</div>
+
+<style>
+  .dynamic-carousel {
+    --aspect-ratio: 3 / 2;
+  }
+
+  .dynamic-carousel ~ .carousel-options {
+    display: flex;
+    justify-content: center;
+    gap: var(--sl-spacing-x-small);
+    margin-top: var(--sl-spacing-large);
+  }
+
+  .dynamic-carousel sl-carousel-item {
+    flex: 0 0 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--sl-font-size-2x-large);
+  }
+</style>
+
+<script>
+  (() => {
+    const dynamicCarousel = document.querySelector('.dynamic-carousel');
+    const dynamicAdd = document.querySelector('#dynamic-add');
+    const dynamicRemove = document.querySelector('#dynamic-remove');
+    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
+    let colorIndex = 2;
+
+    const addSlide = () => {
+      const slide = document.createElement('sl-carousel-item');
+      const color = colors[++colorIndex % colors.length];
+      slide.innerText = `Slide ${dynamicCarousel.children.length + 1}`;
+      slide.style.setProperty('background', `var(--sl-color-${color}-200)`);
+      dynamicCarousel.appendChild(slide);
+      dynamicRemove.disabled = false;
+    };
+
+    const removeSlide = () => {
+      const slide = dynamicCarousel.children[dynamicCarousel.children.length - 1];
+      const numSlides = dynamicCarousel.querySelectorAll('sl-carousel-item').length;
+
+      if (numSlides > 1) {
+        slide.remove();
+        colorIndex--;
+      }
+
+      dynamicRemove.disabled = numSlides - 1 <= 1;
+    };
+
+    dynamicAdd.addEventListener('click', addSlide);
+    dynamicRemove.addEventListener('click', removeSlide);
+  })();
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const css = `
+  .dynamic-carousel {
+    --aspect-ratio: 3 / 2;
+  }
+
+  .dynamic-carousel ~ .carousel-options {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--sl-spacing-large);
+  }
+
+  .dynamic-carousel sl-carousel-item {
+    flex: 0 0 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: var(--sl-font-size-2x-large);
+  }
+`;
+
+const App = () => {
+  const [slides, setSlides] = useState(['#204ed8', '#be133d', '#6e28d9']);
+  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
+
+  const addSlide = () => {
+    setSlides([...slides, getRandomColor()]);
+  };
+
+  const removeSlide = () => {
+    setSlides(slides.slice(0, -1));
+  };
+
+  return (
+    <>
+      <SlCarousel className="dynamic-carousel" pagination navigation>
+        {slides.map((color, i) => (
+          <SlCarouselItem style={{ background: colors[i % colors.length }}>
+            Slide {i}
+          </SlCarouselItem>
+        ))}
+      </SlCarousel>
+
+      <div className="carousel-options">
+        <SlButton onClick={addSlide}>Add slide</SlButton>
+        <SlButton onClick={removeSlide}>Remove slide</SlButton>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Vertical Scrolling +

+

+ Setting the orientation attribute to vertical will render the carousel in a + vertical layout. If the content of your slides vary in height, you will need to set amn explicit + height or max-height on the carousel using CSS. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + + +
+ +
+
+ +
+
+ 
<sl-carousel class="vertical" pagination orientation="vertical">
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+<style>
+  .vertical {
+    max-height: 400px;
+  }
+
+  .vertical::part(base) {
+    grid-template-areas: 'slides slides pagination';
+  }
+
+  .vertical::part(pagination) {
+    flex-direction: column;
+  }
+
+  .vertical::part(navigation) {
+    transform: rotate(90deg);
+    display: flex;
+  }
+</style>
+
+
+ +
+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+
+const css = `
+  .vertical {
+    max-height: 400px;
+  }
+
+  .vertical::part(base) {
+    grid-template-areas: 'slides slides pagination';
+  }
+
+  .vertical::part(pagination) {
+    flex-direction: column;
+  }
+
+  .vertical::part(navigation) {
+    transform: rotate(90deg);
+    display: flex;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCarousel className="vertical" loop pagination orientation="vertical">
+      <SlCarouselItem>
+        <img
+          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+          src="/assets/examples/carousel/mountains.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+          src="/assets/examples/carousel/waterfall.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+          src="/assets/examples/carousel/sunset.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+          src="/assets/examples/carousel/field.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+          src="/assets/examples/carousel/valley.jpg"
+        />
+      </SlCarouselItem>
+    </SlCarousel>
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Aspect Ratio +

+

+ Use the --aspect-ratio custom property to customize the size of the carousel’s viewport from + the default value of 16/9. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + + + + + 1/1 + 3/2 + 16/9 + + + + +
+ +
+
+ +
+
+ 
<sl-carousel class="aspect-ratio" navigation pagination style="--aspect-ratio: 3/2;">
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+<sl-divider></sl-divider>
+
+<sl-select label="Aspect ratio" name="aspect" value="3/2">
+  <sl-option value="1/1">1/1</sl-option>
+  <sl-option value="3/2">3/2</sl-option>
+  <sl-option value="16/9">16/9</sl-option>
+</sl-select>
+
+<script>
+  (() => {
+    const carousel = document.querySelector('sl-carousel.aspect-ratio');
+    const aspectRatio = document.querySelector('sl-select[name="aspect"]');
+
+    aspectRatio.addEventListener('sl-change', () => {
+      carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
+    });
+  })();
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlOption from '@onsonr/nebula/dist/react/option';
+
+const App = () => {
+  const [aspectRatio, setAspectRatio] = useState('3/2');
+
+  return (
+    <>
+      <SlCarousel className="aspect-ratio" navigation pagination style={{ '--aspect-ratio': aspectRatio }}>
+        <SlCarouselItem>
+          <img
+            alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+            src="/assets/examples/carousel/mountains.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+            src="/assets/examples/carousel/waterfall.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+            src="/assets/examples/carousel/sunset.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+            src="/assets/examples/carousel/field.jpg"
+          />
+        </SlCarouselItem>
+        <SlCarouselItem>
+          <img
+            alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+            src="/assets/examples/carousel/valley.jpg"
+          />
+        </SlCarouselItem>
+      </SlCarousel>
+
+      <SlDivider />
+
+      <SlSelect
+        label="Aspect ratio"
+        name="aspect"
+        value={aspectRatio}
+        onSlChange={event => setAspectRatio(event.target.value)}
+      >
+        <SlOption value="1 / 1">1 / 1</SlOption>
+        <SlOption value="3 / 2">3 / 2</SlOption>
+        <SlOption value="16 / 9">16 / 9</SlOption>
+      </SlSelect>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Scroll Hint +

+

+ Use the --scroll-hint custom property to add inline padding in horizontal carousels and block + padding in vertical carousels. This will make the closest slides slightly visible, hinting that there are + more items in the carousel. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+ +
+
+ +
+
+ 
<sl-carousel class="scroll-hint" pagination style="--scroll-hint: 10%;">
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+
+ +
+ 
import { useState } from 'react';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => (
+  <>
+    <SlCarousel className="scroll-hint" pagination style={{ '--scroll-hint': '10%' }}>
+      <SlCarouselItem>
+        <img
+          alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+          src="/assets/examples/carousel/mountains.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+          src="/assets/examples/carousel/waterfall.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+          src="/assets/examples/carousel/sunset.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+          src="/assets/examples/carousel/field.jpg"
+        />
+      </SlCarouselItem>
+      <SlCarouselItem>
+        <img
+          alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+          src="/assets/examples/carousel/valley.jpg"
+        />
+      </SlCarouselItem>
+    </SlCarousel>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ The carousel has a robust API that makes it possible to extend and customize. This example syncs the active + slide with a set of thumbnails, effectively creating a gallery-style carousel. +

+ +
+
+ + + The sun shines on the mountains and trees (by Adam Kool on Unsplash) + + + A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) + + + The sun is setting over a lavender field (by Leonard Cotte on Unsplash) + + + A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) + + + A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) + + + +
+
+ Thumbnail by 1 + Thumbnail by 2 + Thumbnail by 3 + Thumbnail by 4 + Thumbnail by 5 +
+
+ + + + + +
+ +
+
+ +
+
+ 
<sl-carousel class="carousel-thumbnails" navigation loop>
+  <sl-carousel-item>
+    <img
+      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
+      src="/assets/examples/carousel/mountains.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
+      src="/assets/examples/carousel/waterfall.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
+      src="/assets/examples/carousel/sunset.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
+      src="/assets/examples/carousel/field.jpg"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <img
+      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
+      src="/assets/examples/carousel/valley.jpg"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/mountains.jpg" />
+    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/waterfall.jpg" />
+    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/sunset.jpg" />
+    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/field.jpg" />
+    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/valley.jpg" />
+  </div>
+</div>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--sl-spacing-small);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--sl-spacing-small);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+</style>
+
+<script>
+  {
+    const carousel = document.querySelector('.carousel-thumbnails');
+    const scroller = document.querySelector('.thumbnails__scroller');
+    const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+    scroller.addEventListener('click', e => {
+      const target = e.target;
+
+      if (target.matches('.thumbnails__image')) {
+        const index = [...thumbnails].indexOf(target);
+        carousel.goToSlide(index);
+      }
+    });
+
+    carousel.addEventListener('sl-slide-change', e => {
+      const slideIndex = e.detail.index;
+
+      [...thumbnails].forEach((thumb, i) => {
+        thumb.classList.toggle('active', i === slideIndex);
+        if (i === slideIndex) {
+          thumb.scrollIntoView({
+            block: 'nearest'
+          });
+        }
+      });
+    });
+  }
+</script>
+
+
+ +
+ 
import { useRef } from 'react';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlRange from '@onsonr/nebula/dist/react/range';
+
+const css = `
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    gap: var(--sl-spacing-small);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--sl-spacing-small);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+`;
+
+const images = [
+  {
+    src: '/assets/examples/carousel/mountains.jpg',
+    alt: 'The sun shines on the mountains and trees (by Adam Kool on Unsplash'
+  },
+  {
+    src: '/assets/examples/carousel/waterfall.jpg',
+    alt: 'A waterfall in the middle of a forest (by Thomas Kelly on Unsplash'
+  },
+  {
+    src: '/assets/examples/carousel/sunset.jpg',
+    alt: 'The sun is setting over a lavender field (by Leonard Cotte on Unsplash'
+  },
+  {
+    src: '/assets/examples/carousel/field.jpg',
+    alt: 'A field of grass with the sun setting in the background (by Sapan Patel on Unsplash'
+  },
+  {
+    src: '/assets/examples/carousel/valley.jpg',
+    alt: 'A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash'
+  }
+];
+
+const App = () => {
+  const carouselRef = useRef();
+  const thumbnailsRef = useRef();
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(() => {
+    const thumbnails = Array.from(thumbnailsRef.current.querySelectorAll('.thumbnails__image'));
+
+    thumbnails[currentSlide]..scrollIntoView({
+      block: 'nearest'
+    });
+  }, [currentSlide]);
+
+  const handleThumbnailClick = (index) => {
+    carouselRef.current.goToSlide(index);
+  }
+
+  const handleSlideChange = (event) => {
+    const slideIndex = e.detail.index;
+    setCurrentSlide(slideIndex);
+  }
+
+  return (
+    <>
+      <SlCarousel className="carousel-thumbnails" navigation loop onSlSlideChange={handleSlideChange}>
+        {images.map({ src, alt }) => (
+          <SlCarouselItem>
+            <img
+              alt={alt}
+              src={src}
+            />
+          </SlCarouselItem>
+        )}
+      </SlCarousel>
+
+      <div class="thumbnails">
+        <div class="thumbnails__scroller">
+          {images.map({ src, alt }, i) => (
+            <img
+              alt={`Thumbnail by ${i + 1}`}
+              className={`thumbnails__image ${i === currentSlide ? 'active' : ''}`}
+              onClick={() => handleThumbnailClick(i)}
+              src={src}
+            />
+          )}
+        </div>
+      </div>
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/carousel/carousel.js';
+ + + +

To import this component as a React component:

+ 
import SlCarousel from '@onsonr/nebula/dist/react/carousel';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The carousel’s main content, one or more <sl-carousel-item> elements.
+ next-icon + + Optional next icon to use instead of the default. Works best with <sl-icon>. +
+ previous-icon + + Optional previous icon to use instead of the default. Works best with <sl-icon>. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ loop + When set, allows the user to navigate the carousel in the same direction indefinitely. + + + boolean + + false +
+ navigation + When set, show the carousel’s navigation. + + + boolean + + false +
+ pagination + When set, show the carousel’s pagination indicators. + + + boolean + + false +
+ autoplay + When set, the slides will scroll automatically when the user is not interacting with them. + + + boolean + + false +
+ autoplayInterval + +
+ + + autoplay-interval + + + 		Specifies the amount of time, in milliseconds, between each automatic scroll. + number + + 3000 +
+ slidesPerPage + +
+ + + slides-per-page + + + 		Specifies how many slides should be shown at a given time. + number + + 1 +
+ slidesPerMove + +
+ + + slides-per-move + + + 		+ Specifies the number of slides the carousel will advance when scrolling, useful when specifying a + slides-per-page greater than one. It can’t be higher than slides-per-page. + + number + + 1 +
+ orientation + Specifies the orientation in which the carousel will lay out. + 'horizontal' | 'vertical' + + 'horizontal' +
+ mouseDragging + +
+ + + mouse-dragging + + + 		When set, it is possible to scroll through the slides by dragging them with the mouse. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-slide-changeonSlSlideChangeEmitted when the active slide changes. + { index: number, slide: SlCarouselItem } +
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
previous()Move the carousel backward by slides-per-move slides. + behavior: ScrollBehavior +
next()Move the carousel forward by slides-per-move slides. + behavior: ScrollBehavior +
goToSlide()Scrolls the carousel to the slide specified by index. + index: number, behavior: ScrollBehavior +
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--slide-gapThe space between each slide.
--aspect-ratioThe aspect ratio of each slide.16/9
--scroll-hint + The amount of padding to apply to the scroll area, allowing adjacent slides to become partially + visible as a scroll hint. +
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe carousel’s internal wrapper.
scroll-containerThe scroll container that wraps the slides.
paginationThe pagination indicators wrapper.
pagination-itemThe pagination indicator.
pagination-item--activeApplied when the item is active.
navigationThe navigation wrapper.
navigation-buttonThe navigation button.
navigation-button--previousApplied to the previous button.
navigation-button--nextApplied to the next button.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/checkbox/index.html b/components/checkbox/index.html new file mode 100644 index 00000000..6e259cac --- /dev/null +++ b/components/checkbox/index.html @@ -0,0 +1,1625 @@ + + + + + + + Checkbox + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Checkbox

+ +
+ <sl-checkbox> | SlCheckbox +
+ +
+ Since 2.0 + stable +
+
+ +

Checkboxes allow the user to toggle an option on or off.

+ +
+
+ Checkbox + +
+ +
+
+ +
+
+ 
<sl-checkbox>Checkbox</sl-checkbox>
+
+
+ +
+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Checked +

+

Use the checked attribute to activate the checkbox.

+ +
+
+ Checked + +
+ +
+
+ +
+
+ 
<sl-checkbox checked>Checked</sl-checkbox>
+
+
+ +
+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Indeterminate +

+

Use the indeterminate attribute to make the checkbox indeterminate.

+ +
+
+ Indeterminate + +
+ +
+
+ +
+
+ 
<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
+
+
+ +
+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable the checkbox.

+ +
+
+ Disabled + +
+ +
+
+ +
+
+ 
<sl-checkbox disabled>Disabled</sl-checkbox>
+
+
+ +
+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change a checkbox’s size.

+ +
+
+ Small +
+ Medium +
+ Large + +
+ +
+
+ +
+
+ 
<sl-checkbox size="small">Small</sl-checkbox>
+<br />
+<sl-checkbox size="medium">Medium</sl-checkbox>
+<br />
+<sl-checkbox size="large">Large</sl-checkbox>
+
+
+ +
+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => (
+  <>
+    <SlCheckbox size="small">Small</SlCheckbox>
+    <br />
+    <SlCheckbox size="medium">Medium</SlCheckbox>
+    <br />
+    <SlCheckbox size="large">Large</SlCheckbox>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Help Text +

+

+ Add descriptive help text to a switch with the help-text attribute. For help texts that contain + HTML, use the help-text slot instead. +

+ +
+
+ Label + +
+ +
+
+ +
+
+ 
<sl-checkbox help-text="What should the user know about the checkbox?">Label</sl-checkbox>
+
+
+ +
+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => <SlCheckbox help-text="What should the user know about the switch?">Label</SlCheckbox>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Validity +

+

+ Use the setCustomValidity() method to set a custom validation message. This will prevent the + form from submitting and make the browser display the error message you provide. To clear the error, call + this function with an empty string. +

+ +
+
+
+ Check me +
+ Submit +
+ + +
+ +
+
+ +
+
+ 
<form class="custom-validity">
+  <sl-checkbox>Check me</sl-checkbox>
+  <br />
+  <sl-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</sl-button>
+</form>
+<script>
+  const form = document.querySelector('.custom-validity');
+  const checkbox = form.querySelector('sl-checkbox');
+  const errorMessage = `Don't forget to check me!`;
+
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('sl-checkbox').then(async () => {
+    await checkbox.updateComplete;
+    checkbox.setCustomValidity(errorMessage);
+  });
+
+  // Update validity on change
+  checkbox.addEventListener('sl-change', () => {
+    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
+  });
+
+  // Handle submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
+  });
+</script>
+
+
+ +
+ 
import { useEffect, useRef } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => {
+  const checkbox = useRef(null);
+  const errorMessage = `Don't forget to check me!`;
+
+  function handleChange() {
+    checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  useEffect(() => {
+    checkbox.current.setCustomValidity(errorMessage);
+  }, []);
+
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlCheckbox ref={checkbox} onSlChange={handleChange}>
+        Check me
+      </SlCheckbox>
+      <br />
+      <SlButton type="submit" variant="primary" style={{ marginTop: '1rem' }}>
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/checkbox/checkbox.js';
+ + + +

To import this component as a React component:

+ 
import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default)The checkbox’s label.
+ help-text + + Text that describes how to use the checkbox. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the checkbox, submitted as a name/value pair with form data. + string + + '' +
+ value + The current value of the checkbox, submitted as a name/value pair with form data. + string + -
+ size + The checkbox’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ disabled + Disables the checkbox. + + + boolean + + false +
+ checked + Draws the checkbox in a checked state. + + + boolean + + false +
+ indeterminate + + Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents + a “select all/none” behavior when associated checkboxes have a mix of checked and unchecked states. + + + + boolean + + false +
+ defaultChecked + The default value of the form control. Primarily used for resetting the form control. + boolean + + false +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + Makes the checkbox a required field. + + + boolean + + false +
+ helpText + +
+ + + help-text + + + 		+ The checkbox’s help text. If you need to display HTML, use the help-text slot instead. + + string + + '' +
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the checkbox loses focus.-
sl-changeonSlChangeEmitted when the checked state changes.-
sl-focusonSlFocusEmitted when the checkbox gains focus.-
sl-inputonSlInputEmitted when the checkbox receives input.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
click()Simulates a click on the checkbox.-
focus()Sets focus on the checkbox. + options: FocusOptions +
blur()Removes focus from the checkbox.-
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity() + Sets a custom validation message. The value provided will be shown to the user when the form is + submitted. To clear the custom validation message, call this method with an empty string. + + message: string +
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
controlThe square container that wraps the checkbox’s checked state.
control--checkedMatches the control part when the checkbox is checked.
control--indeterminateMatches the control part when the checkbox is indeterminate.
checked-iconThe checked icon, an <sl-icon> element.
indeterminate-iconThe indeterminate icon, an <sl-icon> element.
labelThe container that wraps the checkbox’s label.
form-control-help-textThe help text’s wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/color-picker/index.html b/components/color-picker/index.html new file mode 100644 index 00000000..55b44e71 --- /dev/null +++ b/components/color-picker/index.html @@ -0,0 +1,1819 @@ + + + + + + + Color Picker + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Color Picker

+ +
+ <sl-color-picker> | SlColorPicker +
+ +
+ Since 2.0 + stable +
+
+ +

Color pickers allow the user to select a color.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-color-picker label="Select a color"></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => <SlColorPicker label="Select a color" />;
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Initial Value +

+

Use the value attribute to set an initial value for the color picker.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-color-picker value="#4a90e2" label="Select a color"></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Opacity +

+

+ Use the opacity attribute to enable the opacity slider. When this is enabled, the value will be + displayed as HEXA, RGBA, HSLA, or HSVA based on format. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-color-picker value="#f5a623ff" opacity label="Select a color"></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => <SlColorPicker opacity label="Select a color" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Formats +

+

+ Set the color picker’s format with the format attribute. Valid options include + hex, rgb, hsl, and hsv. Note that the color picker’s + input will accept any parsable format (including CSS color names) regardless of this option. +

+

To prevent users from toggling the format themselves, add the no-format-toggle attribute.

+ +
+
+ + + + + +
+ +
+
+ +
+
+ 
<sl-color-picker format="hex" value="#4a90e2" label="Select a color"></sl-color-picker>
+<sl-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></sl-color-picker>
+<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></sl-color-picker>
+<sl-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => (
+  <>
+    <SlColorPicker format="hex" value="#4a90e2" />
+    <SlColorPicker format="rgb" value="rgb(80, 227, 194)" />
+    <SlColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
+    <SlColorPicker format="hsv" value="hsv(55, 89%, 97%)" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Swatches +

+

+ Use the swatches attribute to add convenient presets to the color picker. Any format the color + picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon + (;). Alternatively, you can pass an array of color values to this property using JavaScript. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-color-picker
+  label="Select a color"
+  swatches="
+    #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
+    #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
+  "
+></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => (
+  <SlColorPicker
+    label="Select a color"
+    swatches="
+      #d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
+      #4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
+    "
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change the color picker’s trigger size.

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-color-picker size="small" label="Select a color"></sl-color-picker>
+<sl-color-picker size="medium" label="Select a color"></sl-color-picker>
+<sl-color-picker size="large" label="Select a color"></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => (
+  <>
+    <SlColorPicker size="small" label="Select a color" />
+    <SlColorPicker size="medium" label="Select a color" />
+    <SlColorPicker size="large" label="Select a color" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Inline

+

+ The color picker can be rendered inline instead of in a dropdown using the inline attribute. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-color-picker inline label="Select a color"></sl-color-picker>
+
+
+ +
+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+
+const App = () => <SlColorPicker inline label="Select a color" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/color-picker/color-picker.js';
+ + + +

To import this component as a React component:

+ 
import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
+ label + The color picker’s form label. Alternatively, you can use the label attribute.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + + The current value of the color picker. The value’s format will vary based the + format attribute. To get the value in a specific format, use the + getFormattedValue() method. The value is submitted as a name/value pair with form data. + + string + + '' +
+ defaultValue + The default value of the form control. Primarily used for resetting the form control. + string + + '' +
+ label + + The color picker’s label. This will not be displayed, but it will be announced by assistive devices. + If you need to display HTML, you can use the label slot` instead. + + string + + '' +
+ format + + The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA + respectively. The color picker will accept user input in any format (including CSS color names) and + convert it to the desired format. + + 'hex' | 'rgb' | 'hsl' | 'hsv' + + 'hex' +
+ inline + Renders the color picker inline rather than in a dropdown. + + + boolean + + false +
+ size + + Determines the size of the color picker’s trigger. This has no effect on inline color pickers. + + + + 'small' | 'medium' | 'large' + + 'medium' +
+ noFormatToggle + +
+ + + no-format-toggle + + + 		Removes the button that lets users toggle between format. + boolean + + false +
+ name + The name of the form control, submitted as a name/value pair with form data. + string + + '' +
+ disabled + Disables the color picker. + + + boolean + + false +
+ hoist + + Enable this option to prevent the panel from being clipped when the component is placed inside a + container with + overflow: auto|scroll. Hoisting uses a fixed positioning strategy that works in many, + but not all, scenarios. + + boolean + + false +
+ opacity + + Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. + + boolean + + false +
+ uppercase + By default, values are lowercase. With this attribute, values will be uppercase instead. + boolean + + false +
+ swatches + + One or more predefined color swatches to display as presets in the color picker. Can include any + format the color picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. + Each color must be separated by a semicolon (;). Alternatively, you can pass an array + of color values to this property using JavaScript. + + string | string[] + + '' +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + Makes the color picker a required field. + + + boolean + + false +
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the color picker loses focus.-
sl-changeonSlChangeEmitted when the color picker’s value changes.-
sl-focusonSlFocusEmitted when the color picker receives focus.-
sl-inputonSlInputEmitted when the color picker receives input.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
focus()Sets focus on the color picker. + options: FocusOptions +
blur()Removes focus from the color picker.-
getFormattedValue()Returns the current value as a string in the specified format. + format: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva' +
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--grid-widthThe width of the color grid.
--grid-heightThe height of the color grid.
--grid-handle-sizeThe size of the color grid’s handle.
--slider-heightThe height of the hue and alpha sliders.
--slider-handle-sizeThe diameter of the slider’s handle.
--swatch-sizeThe size of each predefined color swatch.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
triggerThe color picker’s dropdown trigger.
swatchesThe container that holds the swatches.
swatchEach individual swatch.
gridThe color grid.
grid-handleThe color grid’s handle.
sliderHue and opacity sliders.
slider-handleHue and opacity slider handles.
hue-sliderThe hue slider.
hue-slider-handleThe hue slider’s handle.
opacity-sliderThe opacity slider.
opacity-slider-handleThe opacity slider’s handle.
previewThe preview color.
inputThe text input.
eye-dropper-buttonThe eye dropper button.
eye-dropper-button__baseThe eye dropper button’s exported button part.
eye-dropper-button__prefixThe eye dropper button’s exported prefix part.
eye-dropper-button__labelThe eye dropper button’s exported label part.
eye-dropper-button__suffixThe eye dropper button’s exported suffix part.
eye-dropper-button__caretThe eye dropper button’s exported caret part.
format-buttonThe format button.
format-button__baseThe format button’s exported button part.
format-button__prefixThe format button’s exported prefix part.
format-button__labelThe format button’s exported label part.
format-button__suffixThe format button’s exported suffix part.
format-button__caretThe format button’s exported caret part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-button>
    • + +
  • <sl-button-group>
    • + +
  • <sl-dropdown>
    • + +
  • <sl-icon>
    • + +
  • <sl-input>
    • + +
  • <sl-popup>
    • + +
  • <sl-spinner>
    • + +
  • <sl-visually-hidden>
    • +
+
+
+
+ + diff --git a/components/copy-button/index.html b/components/copy-button/index.html new file mode 100644 index 00000000..94eb9ea7 --- /dev/null +++ b/components/copy-button/index.html @@ -0,0 +1,1810 @@ + + + + + + + Copy Button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Copy Button

+ +
+ <sl-copy-button> | SlCopyButton +
+ +
+ Since 2.7 + experimental +
+
+ +

Copies text data to the clipboard when the user clicks the trigger.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-copy-button value="Nebula rocks!"></sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+
+const App = () => (
+  <SlCopyButton value="Nebula rocks!" />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Custom Labels +

+

+ Copy Buttons display feedback in a tooltip. You can customize the labels using the copy-label, + success-label, and error-label attributes. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-copy-button
+  value="Custom labels are easy"
+  copy-label="Click to copy"
+  success-label="You did it!"
+  error-label="Whoops, your browser doesn't support this!"
+></sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+
+const App = () => (
+  <SlCopyButton
+    value="Custom labels are easy"
+    copy-label="Click to copy"
+    success-label="You did it!"
+    error-label="Whoops, your browser doesn't support this!"
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Icons +

+

+ Use the copy-icon, success-icon, and error-icon slots to customize + the icons that get displayed for each state. You can use + <sl-icon> or your own images. +

+ +
+
+ + + + + + +
+ +
+
+ +
+
+ 
<sl-copy-button value="Copied from a custom button">
+  <sl-icon slot="copy-icon" name="clipboard"></sl-icon>
+  <sl-icon slot="success-icon" name="clipboard-check"></sl-icon>
+  <sl-icon slot="error-icon" name="clipboard-x"></sl-icon>
+</sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+import { SlIcon } from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <SlCopyButton value="Copied from a custom button">
+      <SlIcon slot="copy-icon" name="clipboard" />
+      <SlIcon slot="success-icon" name="clipboard-check" />
+      <SlIcon slot="error-icon" name="clipboard-x" />
+    </SlCopyButton>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Copying Values From Other Elements +

+

+ Normally, the data that gets copied will come from the component’s value attribute, but you can + copy data from any element within the same document by providing its id to the + from attribute. +

+

+ When using the from attribute, the element’s + textContent + will be copied by default. Passing an attribute or property modifier will let you copy data from one of the + element’s attributes or properties instead. +

+

+ To copy data from an attribute, use from="id[attr]" where id is the id of the + target element and attr is the name of the attribute you’d like to copy. To copy data from a + property, use from="id.prop" where id is the id of the target element and + prop is the name of the property you’d like to copy. +

+ +
+
+ + +1 (234) 456–7890 + + +

+ + + + + +

+ + + Nebula Website + + +
+ +
+
+ +
+
+ 
<!-- Copies the span's textContent -->
+<span id="my-phone">+1 (234) 456-7890</span>
+<sl-copy-button from="my-phone"></sl-copy-button>
+
+<br><br>
+
+<!-- Copies the input's "value" property -->
+<sl-input id="my-input" type="text" value="User input" style="display: inline-block; max-width: 300px;"></sl-input>
+<sl-copy-button from="my-input.value"></sl-copy-button>
+
+<br><br>
+
+<!-- Copies the link's "href" attribute -->
+<a id="my-link" href="https://shoelace.style/">Nebula Website</a>
+<sl-copy-button from="my-link[href]"></sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+import { SlInput } from '@onsonr/nebula/dist/react/input';
+
+const App = () => (
+  <>
+    {/* Copies the span's textContent */}
+    <span id="my-phone">+1 (234) 456-7890</span>
+    <SlCopyButton from="my-phone" />
+
+    <br /><br />
+
+    {/* Copies the input's "value" property */}
+    <SlInput id="my-input" type="text" />
+    <SlCopyButton from="my-input.value" />
+
+    <br /><br />
+
+    {/* Copies the link's "href" attribute */}
+    <a id="my-link" href="https://shoelace.style/">Nebula Website</a>
+    <SlCopyButton from="my-link[href]" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Handling Errors +

+

+ A copy error will occur if the value is an empty string, if the from attribute points to an id + that doesn’t exist, or if the browser rejects the operation for any reason. When this happens, the + sl-error event will be emitted. +

+

+ This example demonstrates what happens when a copy error occurs. You can customize the error label and icon + using the error-label attribute and the error-icon slot, respectively. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-copy-button from="i-do-not-exist"></sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+
+const App = () => (
+  <SlCopyButton from="i-do-not-exist" />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Copy buttons can be disabled by adding the disabled attribute.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-copy-button value="You can't copy me" disabled></sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+
+const App = () => (
+  <SlCopyButton value="You can't copy me" disabled />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Changing Feedback Duration +

+

+ A success indicator is briefly shown after copying. You can customize the length of time the indicator is + shown using the feedback-duration attribute. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-copy-button value="Nebula rocks!" feedback-duration="250"></sl-copy-button>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+
+const App = () => (
+  <SlCopyButton value="Nebula rocks!" feedback-duration={250} />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Styles +

+

You can customize the button to your liking with CSS.

+ +
+
+ + + + + + + + +
+ +
+
+ +
+
+ 
<sl-copy-button value="I'm so stylish" class="custom-styles">
+  <sl-icon slot="copy-icon" name="asterisk"></sl-icon>
+  <sl-icon slot="success-icon" name="check-lg"></sl-icon>
+  <sl-icon slot="error-icon" name="x-lg"></sl-icon>
+</sl-copy-button>
+
+<style>
+  .custom-styles {
+    --success-color: white;
+    --error-color: white;
+    color: white;
+  }
+
+  .custom-styles::part(button) {
+    background-color: #ff1493;
+    border: solid 4px #ff7ac1;
+    border-right-color: #ad005c;
+    border-bottom-color: #ad005c;
+    border-radius: 0;
+    transition: 100ms scale ease-in-out, 100ms translate ease-in-out;
+  }
+
+  .custom-styles::part(button):hover {
+    scale: 1.1;
+  }
+
+  .custom-styles::part(button):active {
+    translate: 0 2px;
+  }
+
+  .custom-styles::part(button):focus-visible {
+    outline: dashed 2px deeppink;
+    outline-offset: 4px;
+  }
+</style>
+
+
+ +
+ 
import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
+
+const css = `
+  .custom-styles {
+    --success-color: white;
+    --error-color: white;
+    color: white;
+  }
+
+  .custom-styles::part(button) {
+    background-color: #ff1493;
+    border: solid 4px #ff7ac1;
+    border-right-color: #ad005c;
+    border-bottom-color: #ad005c;
+    border-radius: 0;
+    transition: 100ms scale ease-in-out, 100ms translate ease-in-out;
+  }
+
+  .custom-styles::part(button):hover {
+    scale: 1.1;
+  }
+
+  .custom-styles::part(button):active {
+    translate: 0 2px;
+  }
+
+  .custom-styles::part(button):focus-visible {
+    outline: dashed 2px deeppink;
+    outline-offset: 4px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCopyButton value="I'm so stylish" className="custom-styles" />
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/copy-button/copy-button.js';
+ + + +

To import this component as a React component:

+ 
import SlCopyButton from '@onsonr/nebula/dist/react/copy-button';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
+ copy-icon + The icon to show in the default copy state. Works best with <sl-icon>.
+ success-icon + The icon to show when the content is copied. Works best with <sl-icon>.
+ error-icon + The icon to show when a copy error occurs. Works best with <sl-icon>.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The text value to copy. + string + + '' +
+ from + + An id that references an element in the same document from which data will be copied. If both this + and value are present, this value will take precedence. By default, the target + element’s textContent will be copied. To copy an attribute, append the attribute name + wrapped in square brackets, e.g. from="el[value]". To copy a property, append a dot and + the property name, e.g. from="el.value". + + string + + '' +
+ disabled + Disables the copy button. + + + boolean + + false +
+ copyLabel + +
+ + + copy-label + + + 		A custom label to show in the tooltip. + string + + '' +
+ successLabel + +
+ + + success-label + + + 		A custom label to show in the tooltip after copying. + string + + '' +
+ errorLabel + +
+ + + error-label + + + 		A custom label to show in the tooltip when a copy error occurs. + string + + '' +
+ feedbackDuration + +
+ + + feedback-duration + + + 		The length of time to show feedback before restoring the default trigger. + number + + 1000 +
+ tooltipPlacement + +
+ + + tooltip-placement + + + 		The preferred placement of the tooltip. + 'top' | 'right' | 'bottom' | 'left' + + 'top' +
+ hoist + + Enable this option to prevent the tooltip from being clipped when the component is placed inside a + container with + overflow: auto|hidden|scroll. Hoisting uses a fixed positioning strategy that works in + many, but not all, scenarios. + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-copyonSlCopyEmitted when the data has been copied.-
sl-erroronSlErrorEmitted when the data could not be copied.-
+
+ +

+ Learn more about events. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--success-colorThe color to use for success feedback.
--error-colorThe color to use for error feedback.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
buttonThe internal <button> element.
copy-iconThe container that holds the copy icon.
success-iconThe container that holds the success icon.
error-iconThe container that holds the error icon.
tooltip__baseThe tooltip’s exported base part.
tooltip__base__popupThe tooltip’s exported popup part.
tooltip__base__arrowThe tooltip’s exported arrow part.
tooltip__bodyThe tooltip’s exported body part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
copy.inThe animation to use when feedback icons animate in.
copy.outThe animation to use when feedback icons animate out.
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-popup>
    • + +
  • <sl-tooltip>
    • +
+
+
+
+ + diff --git a/components/details/index.html b/components/details/index.html new file mode 100644 index 00000000..742bd2d6 --- /dev/null +++ b/components/details/index.html @@ -0,0 +1,1275 @@ + + + + + + + Details + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Details

+ +
+ <sl-details> | SlDetails +
+ +
+ Since 2.0 + stable +
+
+ +

Details show a brief summary and expand to show additional content.

+ + + +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + +
+ +
+
+ +
+
+ 
<sl-details summary="Toggle Me">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</sl-details>
+
+
+ +
+ 
import SlDetails from '@onsonr/nebula/dist/react/details';
+
+const App = () => (
+  <SlDetails summary="Toggle Me">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SlDetails>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Disabled +

+

Use the disable attribute to prevent the details from expanding.

+ +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + +
+ +
+
+ +
+
+ 
<sl-details summary="Disabled" disabled>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</sl-details>
+
+
+ +
+ 
import SlDetails from '@onsonr/nebula/dist/react/details';
+
+const App = () => (
+  <SlDetails summary="Disabled" disabled>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SlDetails>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing the Summary Icon +

+

+ Use the expand-icon and collapse-icon slots to change the expand and collapse + icons, respectively. To disable the animation, override the rotate property on the + summary-icon part as shown below. +

+ +
+
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. + + + + +
+ +
+
+ +
+
+ 
<sl-details summary="Toggle Me" class="custom-icons">
+  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</sl-details>
+
+<style>
+  sl-details.custom-icons::part(summary-icon) {
+    /* Disable the expand/collapse animation */
+    rotate: none;
+  }
+</style>
+
+
+ +
+ 
import SlDetails from '@onsonr/nebula/dist/react/details';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const css = `
+  sl-details.custom-icon::part(summary-icon) {
+    /* Disable the expand/collapse animation */
+    rotate: none;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlDetails summary="Toggle Me" class="custom-icon">
+      <SlIcon name="plus-square" slot="expand-icon" />
+      <SlIcon name="dash-square" slot="collapse-icon" />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </SlDetails>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Grouping Details +

+

+ Details are designed to function independently, but you can simulate a group or “accordion” where only one + is shown at a time by listening for the sl-show event. +

+ +
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="details-group-example">
+  <sl-details summary="First" open>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </sl-details>
+
+  <sl-details summary="Second">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </sl-details>
+
+  <sl-details summary="Third">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </sl-details>
+</div>
+
+<script>
+  const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('sl-show', event => {
+    if (event.target.localName === 'sl-details') {
+      [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+    }
+  });
+</script>
+
+<style>
+  .details-group-example sl-details:not(:last-of-type) {
+    margin-bottom: var(--sl-spacing-2x-small);
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/details/details.js';
+ + + +

To import this component as a React component:

+ 
import SlDetails from '@onsonr/nebula/dist/react/details';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The details’ main content.
+ summary + The details’ summary. Alternatively, you can use the summary attribute.
+ expand-icon + + Optional expand icon to use instead of the default. Works best with <sl-icon>. +
+ collapse-icon + + Optional collapse icon to use instead of the default. Works best with <sl-icon>. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ open + + Indicates whether or not the details is open. You can toggle this attribute to show and hide the + details, or you can use the show() and hide() methods and this attribute + will reflect the details’ open state. + + + + boolean + + false +
+ summary + + The summary to show in the header. If you need to display HTML, use the summary slot + instead. + + string + -
+ disabled + Disables the details so it can’t be toggled. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-showonSlShowEmitted when the details opens.-
sl-after-showonSlAfterShowEmitted after the details opens and all animations are complete.-
sl-hideonSlHideEmitted when the details closes.-
sl-after-hideonSlAfterHideEmitted after the details closes and all animations are complete.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the details.-
hide()Hides the details-
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
headerThe header that wraps both the summary and the expand/collapse icon.
summaryThe container that wraps the summary.
summary-iconThe container that wraps the expand/collapse icons.
contentThe details content.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
details.show + The animation to use when showing details. You can use height: auto with this + animation. +
details.hide + The animation to use when hiding details. You can use height: auto with this animation. +
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/dialog/index.html b/components/dialog/index.html new file mode 100644 index 00000000..7a9b6696 --- /dev/null +++ b/components/dialog/index.html @@ -0,0 +1,1807 @@ + + + + + + + Dialog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Dialog

+ +
+ <sl-dialog> | SlDialog +
+ +
+ Since 2.0 + stable +
+
+ +

+ Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention. +

+ + + +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + + + Open Dialog + + + +
+ +
+
+ +
+
+ 
<sl-dialog label="Dialog" class="dialog-overview">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
+
+<sl-button>Open Dialog</sl-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-overview');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Custom Width +

+

Use the --width custom property to set the dialog’s width.

+ +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + + + Open Dialog + + + +
+ +
+
+ +
+
+ 
<sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
+
+<sl-button>Open Dialog</sl-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-width');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Scrolling +

+

+ By design, a dialog’s height will never exceed that of the viewport. As such, dialogs will not scroll with + the page ensuring the header and footer are always accessible to the user. +

+ +
+
+ +
+

Scroll down and give it a try! 👇

+
+ Close + + + Open Dialog + + + +
+ +
+
+ +
+
+ 
<sl-dialog label="Dialog" class="dialog-scrolling">
+  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
+    <p>Scroll down and give it a try! 👇</p>
+  </div>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
+
+<sl-button>Open Dialog</sl-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-scrolling');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <div
+          style={{
+            height: '150vh',
+            border: 'dashed 2px var(--sl-color-neutral-200)',
+            padding: '0 1rem'
+          }}
+        >
+          <p>Scroll down and give it a try! 👇</p>
+        </div>
+
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Header Actions +

+

+ The header shows a functional close button by default. You can use the header-actions slot to + add additional icon buttons if needed. +

+ +
+
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + + + Open Dialog + + + +
+ +
+
+ +
+
+ 
<sl-dialog label="Dialog" class="dialog-header-actions">
+  <sl-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></sl-icon-button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
+
+<sl-button>Open Dialog</sl-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-header-actions');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+  const newWindowButton = dialog.querySelector('.new-window');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+  newWindowButton.addEventListener('click', () => window.open(location.href));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlIconButton
+          class="new-window"
+          slot="header-actions"
+          name="box-arrow-up-right"
+          onClick={() => window.open(location.href)}
+        />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Preventing the Dialog from Closing +

+

+ By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the + Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, + there are situations where this may be undesirable, such as when data loss will occur. +

+

+ To keep the dialog open in such cases, you can cancel the sl-request-close event. When + canceled, the dialog will remain open and pulse briefly to draw the user’s attention to it. +

+

+ You can use event.detail.source to determine what triggered the request to close. This example + prevents the dialog from closing when the overlay is clicked, but allows the close button or + Escape to dismiss it. +

+ +
+
+ + This dialog will not close when you click on the overlay. + Close + + + Open Dialog + + + +
+ +
+
+ +
+
+ 
<sl-dialog label="Dialog" class="dialog-deny-close">
+  This dialog will not close when you click on the overlay.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
+
+<sl-button>Open Dialog</sl-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-deny-close');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+
+  // Prevent the dialog from closing when the user clicks on the overlay
+  dialog.addEventListener('sl-request-close', event => {
+    if (event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  // Prevent the dialog from closing when the user clicks on the overlay
+  function handleRequestClose(event) {
+    if (event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  }
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
+        This dialog will not close when you click on the overlay.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing Initial Focus +

+

+ By default, the dialog’s panel will gain focus when opened. This allows a subsequent tab press to focus on + the first tabbable element in the dialog. If you want a different element to have focus, add the + autofocus attribute to it as shown below. +

+ +
+
+ + + Close + + + Open Dialog + + + +
+ +
+
+ +
+
+ 
<sl-dialog label="Dialog" class="dialog-focus">
+  <sl-input autofocus placeholder="I will have focus when the dialog is opened"></sl-input>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-dialog>
+
+<sl-button>Open Dialog</sl-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-focus');
+  const input = dialog.querySelector('sl-input');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('sl-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlInput autofocus placeholder="I will have focus when the dialog is opened" />
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/dialog/dialog.js';
+ + + +

To import this component as a React component:

+ 
import SlDialog from '@onsonr/nebula/dist/react/dialog';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The dialog’s main content.
+ label + The dialog’s label. Alternatively, you can use the label attribute.
+ header-actions + Optional actions to add to the header. Works best with <sl-icon-button>.
+ footer + The dialog’s footer, usually one or more buttons representing various options.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ modal + + Exposes the internal modal utility that controls focus trapping. To temporarily disable focus + trapping and allow third-party modals spawned from an active Shoelace modal, call + modal.activateExternal() when the third-party modal opens. Upon closing, call + modal.deactivateExternal() to restore Shoelace’s focus trapping. + - + new Modal(this) +
+ open + + Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the + dialog, or you can use the show() and hide() methods and this attribute + will reflect the dialog’s open state. + + + + boolean + + false +
+ label + + The dialog’s label as displayed in the header. You should always include a relevant label even when + using + no-header, as it is required for proper accessibility. If you need to display HTML, use + the label slot instead. + + + + string + + '' +
+ noHeader + +
+ + + no-header + + + 		+ Disables the header. This will also remove the default close button, so please ensure you provide an + easy, accessible way for users to dismiss the dialog. + + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-showonSlShowEmitted when the dialog opens.-
sl-after-showonSlAfterShowEmitted after the dialog opens and all animations are complete.-
sl-hideonSlHideEmitted when the dialog closes.-
sl-after-hideonSlAfterHideEmitted after the dialog closes and all animations are complete.-
sl-initial-focusonSlInitialFocus + Emitted when the dialog opens and is ready to receive focus. Calling + event.preventDefault() will prevent focusing and allow you to set it on a different + element, such as an input. + -
sl-request-closeonSlRequestClose + Emitted when the user attempts to close the dialog by clicking the close button, clicking the + overlay, or pressing escape. Calling event.preventDefault() will keep the dialog open. + Avoid using this unless closing the dialog will result in destructive behavior such as data loss. + + { source: 'close-button' | 'keyboard' | 'overlay' } +
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the dialog.-
hide()Hides the dialog-
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--width + The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. +
--header-spacingThe amount of padding to use for the header.
--body-spacingThe amount of padding to use for the body.
--footer-spacingThe amount of padding to use for the footer.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
overlayThe overlay that covers the screen behind the dialog.
panelThe dialog’s panel (where the dialog and its content are rendered).
headerThe dialog’s header. This element wraps the title and header actions.
header-actionsOptional actions to add to the header. Works best with <sl-icon-button>.
titleThe dialog’s title.
close-buttonThe close button, an <sl-icon-button>.
close-button__baseThe close button’s exported base part.
bodyThe dialog’s body.
footerThe dialog’s footer.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
dialog.showThe animation to use when showing the dialog.
dialog.hideThe animation to use when hiding the dialog.
dialog.denyCloseThe animation to use when a request to close the dialog is denied.
dialog.overlay.showThe animation to use when showing the dialog’s overlay.
dialog.overlay.hideThe animation to use when hiding the dialog’s overlay.
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • +
+
+
+
+ + diff --git a/components/divider/index.html b/components/divider/index.html new file mode 100644 index 00000000..453496dc --- /dev/null +++ b/components/divider/index.html @@ -0,0 +1,1143 @@ + + + + + + + Divider + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Divider

+ +
+ <sl-divider> | SlDivider +
+ +
+ Since 2.0 + stable +
+
+ +

Dividers are used to visually separate or group elements.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-divider></sl-divider>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+
+const App = () => <SlDivider />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Width

+

Use the --width custom property to change the width of the divider.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-divider style="--width: 4px;"></sl-divider>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+
+const App = () => <SlDivider style={{ '--width': '4px' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Color

+

Use the --color custom property to change the color of the divider.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-divider style="--color: tomato;"></sl-divider>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+
+const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Spacing +

+

+ Use the --spacing custom property to change the amount of space between the divider and it’s + neighboring elements. +

+ +
+
+
+ Above + + Below +
+ +
+ +
+
+ +
+
+ 
<div style="text-align: center;">
+  Above
+  <sl-divider style="--spacing: 2rem;"></sl-divider>
+  Below
+</div>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+
+const App = () => (
+  <>
+    Above
+    <SlDivider style={{ '--spacing': '2rem' }} />
+    Below
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Vertical +

+

+ Add the vertical attribute to draw the divider in a vertical orientation. The divider will span + the full height of its container. Vertical dividers work especially well inside of a flex container. +

+ +
+
+
+ First + + Middle + + Last +
+ +
+ +
+
+ +
+
+ 
<div style="display: flex; align-items: center; height: 2rem;">
+  First
+  <sl-divider vertical></sl-divider>
+  Middle
+  <sl-divider vertical></sl-divider>
+  Last
+</div>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+
+const App = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      height: '2rem'
+    }}
+  >
+    First
+    <SlDivider vertical />
+    Middle
+    <SlDivider vertical />
+    Last
+  </div>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

Use dividers in menus to visually group menu items.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + Option 4 + Option 5 + Option 6 + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item value="1">Option 1</sl-menu-item>
+  <sl-menu-item value="2">Option 2</sl-menu-item>
+  <sl-menu-item value="3">Option 3</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item value="4">Option 4</sl-menu-item>
+  <sl-menu-item value="5">Option 5</sl-menu-item>
+  <sl-menu-item value="6">Option 6</sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem value="1">Option 1</SlMenuItem>
+    <SlMenuItem value="2">Option 2</SlMenuItem>
+    <SlMenuItem value="3">Option 3</SlMenuItem>
+    <sl-divider />
+    <SlMenuItem value="4">Option 4</SlMenuItem>
+    <SlMenuItem value="5">Option 5</SlMenuItem>
+    <SlMenuItem value="6">Option 6</SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/divider/divider.js';
+ + + +

To import this component as a React component:

+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ vertical + Draws the divider in a vertical orientation. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--colorThe color of the divider.
--widthThe width of the divider.
--spacingThe spacing of the divider.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+
+
+
+ + diff --git a/components/drawer/index.html b/components/drawer/index.html new file mode 100644 index 00000000..ea258e0d --- /dev/null +++ b/components/drawer/index.html @@ -0,0 +1,2425 @@ + + + + + + + Drawer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Drawer

+ +
+ <sl-drawer> | SlDrawer +
+ +
+ Since 2.0 + stable +
+
+ +

+ Drawers slide in from a container to expose additional options and information. +

+ + + +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" class="drawer-overview">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-overview');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Slide in From Start +

+

+ By default, drawers slide in from the end. To make the drawer slide in from the start, set the + placement attribute to start. +

+ +
+
+ + This drawer slides in from the start. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
+  This drawer slides in from the start.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-placement-start');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" placement="start" open={open} onSlAfterHide={() => setOpen(false)}>
+        This drawer slides in from the start.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Slide in From Top +

+

To make the drawer slide in from the top, set the placement attribute to top.

+ +
+
+ + This drawer slides in from the top. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
+  This drawer slides in from the top.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-placement-top');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" placement="top" open={open} onSlAfterHide={() => setOpen(false)}>
+        This drawer slides in from the top.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Slide in From Bottom +

+

+ To make the drawer slide in from the bottom, set the placement attribute to + bottom. +

+ +
+
+ + This drawer slides in from the bottom. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
+  This drawer slides in from the bottom.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-placement-bottom');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" placement="bottom" open={open} onSlAfterHide={() => setOpen(false)}>
+        This drawer slides in from the bottom.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Contained to an Element +

+

+ By default, drawers slide out of their + containing block, which is usually the viewport. To make a drawer slide out of a parent element, add the + contained attribute to the drawer and apply position: relative to its parent. +

+

+ Unlike normal drawers, contained drawers are not modal. This means they do not show an overlay, they do not + trap focus, and they are not dismissible with Escape. This is intentional to allow users to + interact with elements outside of the drawer. +

+ +
+
+
+ The drawer will be contained to this box. This content won’t shift or be affected in any way when the + drawer opens. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + +
+ + Toggle Drawer + + + +
+ +
+
+ +
+
+ 
<div
+  style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
+>
+  The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
+
+  <sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <sl-button slot="footer" variant="primary">Close</sl-button>
+  </sl-drawer>
+</div>
+
+<sl-button>Toggle Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-contained');
+  const openButton = drawer.parentElement.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => (drawer.open = !drawer.open));
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'relative',
+          border: 'solid 2px var(--sl-panel-border-color)',
+          height: '300px',
+          padding: '1rem',
+          marginBottom: '1rem'
+        }}
+      >
+        The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer
+        opens.
+        <SlDrawer
+          label="Drawer"
+          contained
+          no-modal
+          open={open}
+          onSlAfterHide={() => setOpen(false)}
+          style={{ '--size': '50%' }}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+            Close
+          </SlButton>
+        </SlDrawer>
+      </div>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Size +

+

+ Use the --size custom property to set the drawer’s size. This will be applied to the drawer’s + width or height depending on its placement. +

+ +
+
+ + This drawer is always 50% of the viewport. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
+  This drawer is always 50% of the viewport.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-custom-size');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
+        This drawer is always 50% of the viewport.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Scrolling +

+

+ By design, a drawer’s height will never exceed 100% of its container. As such, drawers will not scroll with + the page to ensure the header and footer are always accessible to the user. +

+ +
+
+ +
+

Scroll down and give it a try! 👇

+
+ Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" class="drawer-scrolling">
+  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
+    <p>Scroll down and give it a try! 👇</p>
+  </div>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-scrolling');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        <div
+          style={{
+            height: '150vh',
+            border: 'dashed 2px var(--sl-color-neutral-200)',
+            padding: '0 1rem'
+          }}
+        >
+          <p>Scroll down and give it a try! 👇</p>
+        </div>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Header Actions +

+

+ The header shows a functional close button by default. You can use the header-actions slot to + add additional icon buttons if needed. +

+ +
+
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" class="drawer-header-actions">
+  <sl-icon-button class="new-window" slot="header-actions" name="box-arrow-up-right"></sl-icon-button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-header-actions');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+  const newWindowButton = drawer.querySelector('.new-window');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+  newWindowButton.addEventListener('click', () => window.open(location.href));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlIconButton slot="header-actions" name="box-arrow-up-right" onClick={() => window.open(location.href)} />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Preventing the Drawer from Closing +

+

+ By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the + Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, + there are situations where this may be undesirable, such as when data loss will occur. +

+

+ To keep the drawer open in such cases, you can cancel the sl-request-close event. When + canceled, the drawer will remain open and pulse briefly to draw the user’s attention to it. +

+

+ You can use event.detail.source to determine what triggered the request to close. This example + prevents the drawer from closing when the overlay is clicked, but allows the close button or + Escape to dismiss it. +

+ +
+
+ + This drawer will not close when you click on the overlay. + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" class="drawer-deny-close">
+  This drawer will not close when you click on the overlay.
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-deny-close');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+
+  // Prevent the drawer from closing when the user clicks on the overlay
+  drawer.addEventListener('sl-request-close', event => {
+    if (event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  // Prevent the drawer from closing when the user clicks on the overlay
+  function handleRequestClose(event) {
+    if (event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  }
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
+        This drawer will not close when you click on the overlay.
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Save &amp; Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing Initial Focus +

+

+ By default, the drawer’s panel will gain focus when opened. This allows a subsequent tab press to focus on + the first tabbable element in the drawer. If you want a different element to have focus, add the + autofocus attribute to it as shown below. +

+ +
+
+ + + Close + + + Open Drawer + + + +
+ +
+
+ +
+
+ 
<sl-drawer label="Drawer" class="drawer-focus">
+  <sl-input autofocus placeholder="I will have focus when the drawer is opened"></sl-input>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
+</sl-drawer>
+
+<sl-button>Open Drawer</sl-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-focus');
+  const input = drawer.querySelector('sl-input');
+  const openButton = drawer.nextElementSibling;
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
+
+  openButton.addEventListener('click', () => drawer.show());
+  closeButton.addEventListener('click', () => drawer.hide());
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlInput autofocus placeholder="I will have focus when the drawer is opened" />
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/drawer/drawer.js';
+ + + +

To import this component as a React component:

+ 
import SlDrawer from '@onsonr/nebula/dist/react/drawer';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The drawer’s main content.
+ label + The drawer’s label. Alternatively, you can use the label attribute.
+ header-actions + Optional actions to add to the header. Works best with <sl-icon-button>.
+ footer + The drawer’s footer, usually one or more buttons representing various options.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ modal + + Exposes the internal modal utility that controls focus trapping. To temporarily disable focus + trapping and allow third-party modals spawned from an active Shoelace modal, call + modal.activateExternal() when the third-party modal opens. Upon closing, call + modal.deactivateExternal() to restore Shoelace’s focus trapping. + - + new Modal(this) +
+ open + + Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the + drawer, or you can use the show() and hide() methods and this attribute + will reflect the drawer’s open state. + + + + boolean + + false +
+ label + + The drawer’s label as displayed in the header. You should always include a relevant label even when + using + no-header, as it is required for proper accessibility. If you need to display HTML, use + the label slot instead. + + + + string + + '' +
+ placement + The direction from which the drawer will open. + + + 'top' | 'end' | 'bottom' | 'start' + + 'end' +
+ contained + + By default, the drawer slides out of its containing block (usually the viewport). To make the drawer + slide out of its parent element, set this attribute and add position: relative to the + parent. + + + + boolean + + false +
+ noHeader + +
+ + + no-header + + + 		+ Removes the header. This will also remove the default close button, so please ensure you provide an + easy, accessible way for users to dismiss the drawer. + + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-showonSlShowEmitted when the drawer opens.-
sl-after-showonSlAfterShowEmitted after the drawer opens and all animations are complete.-
sl-hideonSlHideEmitted when the drawer closes.-
sl-after-hideonSlAfterHideEmitted after the drawer closes and all animations are complete.-
sl-initial-focusonSlInitialFocus + Emitted when the drawer opens and is ready to receive focus. Calling + event.preventDefault() will prevent focusing and allow you to set it on a different + element, such as an input. + -
sl-request-closeonSlRequestClose + Emitted when the user attempts to close the drawer by clicking the close button, clicking the + overlay, or pressing escape. Calling event.preventDefault() will keep the drawer open. + Avoid using this unless closing the drawer will result in destructive behavior such as data loss. + + { source: 'close-button' | 'keyboard' | 'overlay' } +
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the drawer.-
hide()Hides the drawer-
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--size + The preferred size of the drawer. This will be applied to the drawer’s width or height depending on + its placement. Note that the drawer will shrink to accommodate smaller screens. +
--header-spacingThe amount of padding to use for the header.
--body-spacingThe amount of padding to use for the body.
--footer-spacingThe amount of padding to use for the footer.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
overlayThe overlay that covers the screen behind the drawer.
panelThe drawer’s panel (where the drawer and its content are rendered).
headerThe drawer’s header. This element wraps the title and header actions.
header-actionsOptional actions to add to the header. Works best with <sl-icon-button>.
titleThe drawer’s title.
close-buttonThe close button, an <sl-icon-button>.
close-button__baseThe close button’s exported base part.
bodyThe drawer’s body.
footerThe drawer’s footer.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
drawer.showTopThe animation to use when showing a drawer with top placement.
drawer.showEndThe animation to use when showing a drawer with end placement.
drawer.showBottomThe animation to use when showing a drawer with bottom placement.
drawer.showStartThe animation to use when showing a drawer with start placement.
drawer.hideTopThe animation to use when hiding a drawer with top placement.
drawer.hideEndThe animation to use when hiding a drawer with end placement.
drawer.hideBottomThe animation to use when hiding a drawer with bottom placement.
drawer.hideStartThe animation to use when hiding a drawer with start placement.
drawer.denyCloseThe animation to use when a request to close the drawer is denied.
drawer.overlay.showThe animation to use when showing the drawer’s overlay.
drawer.overlay.hideThe animation to use when hiding the drawer’s overlay.
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • +
+
+
+
+ + diff --git a/components/dropdown/index.html b/components/dropdown/index.html new file mode 100644 index 00000000..1273a07d --- /dev/null +++ b/components/dropdown/index.html @@ -0,0 +1,2094 @@ + + + + + + + Dropdown + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Dropdown

+ +
+ <sl-dropdown> | SlDropdown +
+ +
+ Since 2.0 + stable +
+
+ +

Dropdowns expose additional content that “drops down” in a panel.

+ +

+ Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and + interacting outside of the panel will close it. +

+

+ Dropdowns are designed to work well with menus to provide a list of options + the user can select from. However, dropdowns can also be used in lower-level applications (e.g. + color picker). The API gives you complete control over showing, + hiding, and positioning the panel. +

+ +
+
+ + Dropdown + + Dropdown Item 1 + Dropdown Item 2 + Dropdown Item 3 + + Checkbox + Disabled + + + Prefix + + + + Suffix Icon + + + + + +
+ +
+
+ +
+
+ 
<sl-dropdown>
+  <sl-button slot="trigger" caret>Dropdown</sl-button>
+  <sl-menu>
+    <sl-menu-item>Dropdown Item 1</sl-menu-item>
+    <sl-menu-item>Dropdown Item 2</sl-menu-item>
+    <sl-menu-item>Dropdown Item 3</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item type="checkbox" checked>Checkbox</sl-menu-item>
+    <sl-menu-item disabled>Disabled</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>
+      Prefix
+      <sl-icon slot="prefix" name="gift"></sl-icon>
+    </sl-menu-item>
+    <sl-menu-item>
+      Suffix Icon
+      <sl-icon slot="suffix" name="heart"></sl-icon>
+    </sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlDropdown>
+    <SlButton slot="trigger" caret>
+      Dropdown
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Dropdown Item 1</SlMenuItem>
+      <SlMenuItem>Dropdown Item 2</SlMenuItem>
+      <SlMenuItem>Dropdown Item 3</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem type="checkbox" checked>
+        Checkbox
+      </SlMenuItem>
+      <SlMenuItem disabled>Disabled</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>
+        Prefix
+        <SlIcon slot="prefix" name="gift" />
+      </SlMenuItem>
+      <SlMenuItem>
+        Suffix Icon
+        <SlIcon slot="suffix" name="heart" />
+      </SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Getting the Selected Item +

+

+ When dropdowns are used with menus, you can listen for the + sl-select event to determine which menu item was + selected. The menu item element will be exposed in event.detail.item. You can set + value props to make it easier to identify commands. +

+ +
+
+
+ + Edit + + Cut + Copy + Paste + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="dropdown-selection">
+  <sl-dropdown>
+    <sl-button slot="trigger" caret>Edit</sl-button>
+    <sl-menu>
+      <sl-menu-item value="cut">Cut</sl-menu-item>
+      <sl-menu-item value="copy">Copy</sl-menu-item>
+      <sl-menu-item value="paste">Paste</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</div>
+
+<script>
+  const container = document.querySelector('.dropdown-selection');
+  const dropdown = container.querySelector('sl-dropdown');
+
+  dropdown.addEventListener('sl-select', event => {
+    const selectedItem = event.detail.item;
+    console.log(selectedItem.value);
+  });
+</script>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => {
+  function handleSelect(event) {
+    const selectedItem = event.detail.item;
+    console.log(selectedItem.value);
+  }
+
+  return (
+    <SlDropdown>
+      <SlButton slot="trigger" caret>
+        Edit
+      </SlButton>
+      <SlMenu onSlSelect={handleSelect}>
+        <SlMenuItem value="cut">Cut</SlMenuItem>
+        <SlMenuItem value="copy">Copy</SlMenuItem>
+        <SlMenuItem value="paste">Paste</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Alternatively, you can listen for the click event on individual menu items. Note that, using + this approach, disabled menu items will still emit a click event. +

+ +
+
+
+ + Edit + + Cut + Copy + Paste + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="dropdown-selection-alt">
+  <sl-dropdown>
+    <sl-button slot="trigger" caret>Edit</sl-button>
+    <sl-menu>
+      <sl-menu-item value="cut">Cut</sl-menu-item>
+      <sl-menu-item value="copy">Copy</sl-menu-item>
+      <sl-menu-item value="paste">Paste</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</div>
+
+<script>
+  const container = document.querySelector('.dropdown-selection-alt');
+  const cut = container.querySelector('sl-menu-item[value="cut"]');
+  const copy = container.querySelector('sl-menu-item[value="copy"]');
+  const paste = container.querySelector('sl-menu-item[value="paste"]');
+
+  cut.addEventListener('click', () => console.log('cut'));
+  copy.addEventListener('click', () => console.log('copy'));
+  paste.addEventListener('click', () => console.log('paste'));
+</script>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => {
+  function handleCut() {
+    console.log('cut');
+  }
+
+  function handleCopy() {
+    console.log('copy');
+  }
+
+  function handlePaste() {
+    console.log('paste');
+  }
+
+  return (
+    <SlDropdown>
+      <SlButton slot="trigger" caret>
+        Edit
+      </SlButton>
+      <SlMenu>
+        <SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
+        <SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
+        <SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Placement +

+

+ The preferred placement of the dropdown can be set with the placement attribute. Note that the + actual position may vary to ensure the panel remains in the viewport. +

+ +
+
+ + Edit + + Cut + Copy + Paste + + Find + Replace + + + +
+ +
+
+ +
+
+ 
<sl-dropdown placement="top-start">
+  <sl-button slot="trigger" caret>Edit</sl-button>
+  <sl-menu>
+    <sl-menu-item>Cut</sl-menu-item>
+    <sl-menu-item>Copy</sl-menu-item>
+    <sl-menu-item>Paste</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>Find</sl-menu-item>
+    <sl-menu-item>Replace</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlDropdown placement="top-start">
+    <SlButton slot="trigger" caret>
+      Edit
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Distance +

+

+ The distance from the panel to the trigger can be customized using the distance attribute. This + value is specified in pixels. +

+ +
+
+ + Edit + + Cut + Copy + Paste + + Find + Replace + + + +
+ +
+
+ +
+
+ 
<sl-dropdown distance="30">
+  <sl-button slot="trigger" caret>Edit</sl-button>
+  <sl-menu>
+    <sl-menu-item>Cut</sl-menu-item>
+    <sl-menu-item>Copy</sl-menu-item>
+    <sl-menu-item>Paste</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>Find</sl-menu-item>
+    <sl-menu-item>Replace</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlDropdown distance={30}>
+    <SlButton slot="trigger" caret>
+      Edit
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Skidding +

+

+ The offset of the panel along the trigger can be customized using the skidding attribute. This + value is specified in pixels. +

+ +
+
+ + Edit + + Cut + Copy + Paste + + Find + Replace + + + +
+ +
+
+ +
+
+ 
<sl-dropdown skidding="30">
+  <sl-button slot="trigger" caret>Edit</sl-button>
+  <sl-menu>
+    <sl-menu-item>Cut</sl-menu-item>
+    <sl-menu-item>Copy</sl-menu-item>
+    <sl-menu-item>Paste</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>Find</sl-menu-item>
+    <sl-menu-item>Replace</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlDropdown skidding={30}>
+    <SlButton slot="trigger" caret>
+      Edit
+    </SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ To create a submenu, nest an <sl-menu slot="submenu"> element in a + menu item. +

+ +
+
+ + Edit + + + Undo + Redo + + Cut + Copy + Paste + + + Find + + Find… + Find Next + Find Previous + + + + Transformations + + Make uppercase + Make lowercase + Capitalize + + + + + +
+ +
+
+ +
+
+ 
<sl-dropdown>
+  <sl-button slot="trigger" caret>Edit</sl-button>
+
+  <sl-menu style="max-width: 200px;">
+    <sl-menu-item value="undo">Undo</sl-menu-item>
+    <sl-menu-item value="redo">Redo</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item>
+      Find
+      <sl-menu slot="submenu">
+        <sl-menu-item value="find">Find…</sl-menu-item>
+        <sl-menu-item value="find-previous">Find Next</sl-menu-item>
+        <sl-menu-item value="find-next">Find Previous</sl-menu-item>
+      </sl-menu>
+    </sl-menu-item>
+    <sl-menu-item>
+      Transformations
+      <sl-menu slot="submenu">
+        <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
+        <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
+        <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
+      </sl-menu>
+    </sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const css = `
+  .dropdown-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>Edit</SlButton>
+
+      <SlMenu style="max-width: 200px;">
+        <SlMenuItem value="undo">Undo</SlMenuItem>
+        <SlMenuItem value="redo">Redo</SlMenuItem>
+        <SlDivider />
+        <SlMenuItem value="cut">Cut</SlMenuItem>
+        <SlMenuItem value="copy">Copy</SlMenuItem>
+        <SlMenuItem value="paste">Paste</SlMenuItem>
+        <SlDivider />
+        <SlMenuItem>
+          Find
+          <SlMenu slot="submenu">
+            <SlMenuItem value="find">Find…</SlMenuItem>
+            <SlMenuItem value="find-previous">Find Next</SlMenuItem>
+            <SlMenuItem value="find-next">Find Previous</SlMenuItem>
+          </SlMenu>
+        </SlMenuItem>
+        <SlMenuItem>
+          Transformations
+          <SlMenu slot="submenu">
+            <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
+            <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
+            <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
+          </SlMenu>
+        </SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Hoisting +

+

+ Dropdown panels will be clipped if they’re inside a container that has overflow: auto|hidden. + The hoist attribute forces the panel to use a fixed positioning strategy, allowing it to break + out of the container. In this case, the panel will be positioned relative to its + containing block, which is usually the viewport unless an ancestor uses a transform, perspective, + or filter. + Refer to this page + for more details. +

+ +
+
+
+ + No Hoist + + Item 1 + Item 2 + Item 3 + + + + + Hoist + + Item 1 + Item 2 + Item 3 + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="dropdown-hoist">
+  <sl-dropdown>
+    <sl-button slot="trigger" caret>No Hoist</sl-button>
+    <sl-menu>
+      <sl-menu-item>Item 1</sl-menu-item>
+      <sl-menu-item>Item 2</sl-menu-item>
+      <sl-menu-item>Item 3</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+
+  <sl-dropdown hoist>
+    <sl-button slot="trigger" caret>Hoist</sl-button>
+    <sl-menu>
+      <sl-menu-item>Item 1</sl-menu-item>
+      <sl-menu-item>Item 2</sl-menu-item>
+      <sl-menu-item>Item 3</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</div>
+
+<style>
+  .dropdown-hoist {
+    position: relative;
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+  }
+</style>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const css = `
+  .dropdown-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="dropdown-hoist">
+      <SlDropdown>
+        <SlButton slot="trigger" caret>
+          No Hoist
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem>Item 1</SlMenuItem>
+          <SlMenuItem>Item 2</SlMenuItem>
+          <SlMenuItem>Item 3</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+
+      <SlDropdown hoist>
+        <SlButton slot="trigger" caret>
+          Hoist
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem>Item 1</SlMenuItem>
+          <SlMenuItem>Item 2</SlMenuItem>
+          <SlMenuItem>Item 3</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/dropdown/dropdown.js';
+ + + +

To import this component as a React component:

+ 
import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default)The dropdown’s main content.
+ trigger + The dropdown’s trigger, usually a <sl-button> element.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ open + + Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the + dropdown, or you can use the show() and hide() methods and this attribute + will reflect the dropdown’s open state. + + + + boolean + + false +
+ placement + + The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to + keep the panel inside of the viewport. + + + + + 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | + 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' + + 'bottom-start' +
+ disabled + Disables the dropdown so the panel will not open. + + + boolean + + false +
+ stayOpenOnSelect + +
+ + + stay-open-on-select + + + 		+ By default, the dropdown is closed when an item is selected. This attribute will keep it open + instead. Useful for dropdowns that allow for multiple interactions. + + + + boolean + + false +
+ containingElement + + The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for + composing other components that use a dropdown internally. + + HTMLElement | undefined + -
+ distance + The distance in pixels from which to offset the panel away from its trigger. + number + + 0 +
+ skidding + The distance in pixels from which to offset the panel along its trigger. + number + + 0 +
+ hoist + + Enable this option to prevent the panel from being clipped when the component is placed inside a + container with + overflow: auto|scroll. Hoisting uses a fixed positioning strategy that works in many, + but not all, scenarios. + + boolean + + false +
+ sync + Syncs the popup width or height to that of the trigger element. + + + 'width' | 'height' | 'both' | undefined + + undefined +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-showonSlShowEmitted when the dropdown opens.-
sl-after-showonSlAfterShowEmitted after the dropdown opens and all animations are complete.-
sl-hideonSlHideEmitted when the dropdown closes.-
sl-after-hideonSlAfterHideEmitted after the dropdown closes and all animations are complete.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the dropdown panel.-
hide()Hides the dropdown panel-
reposition() + Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes + when the menu is activated. + -
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper, an <sl-popup> element.
base__popup + The popup’s exported popup part. Use this to target the tooltip’s popup container. +
triggerThe container that wraps the trigger.
panelThe panel that gets shown when the dropdown is open.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
dropdown.showThe animation to use when showing the dropdown.
dropdown.hideThe animation to use when hiding the dropdown.
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-popup>
    • +
+
+
+
+ + diff --git a/components/format-bytes/index.html b/components/format-bytes/index.html new file mode 100644 index 00000000..0068562b --- /dev/null +++ b/components/format-bytes/index.html @@ -0,0 +1,996 @@ + + + + + + + Format Bytes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Format Bytes

+ +
+ <sl-format-bytes> | SlFormatBytes +
+ +
+ Since 2.0 + stable +
+
+ +

Formats a number as a human readable bytes value.

+ +
+
+
+ The file is in size.

+ +
+ + + +
+ +
+
+ +
+
+ 
<div class="format-bytes-overview">
+  The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. <br /><br />
+  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
+</div>
+
+<script>
+  const container = document.querySelector('.format-bytes-overview');
+  const formatter = container.querySelector('sl-format-bytes');
+  const input = container.querySelector('sl-input');
+
+  input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  const [value, setValue] = useState(1000);
+
+  return (
+    <>
+      The file is <SlFormatBytes value={value} /> in size.
+      <br />
+      <br />
+      <SlInput
+        type="number"
+        value={value}
+        label="Number to Format"
+        style={{ maxWidth: '180px' }}
+        onSlInput={event => setValue(event.target.value)}
+      />
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Formatting Bytes +

+

Set the value attribute to a number to get the value in bytes.

+ +
+
+
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-format-bytes value="12"></sl-format-bytes><br />
+<sl-format-bytes value="1200"></sl-format-bytes><br />
+<sl-format-bytes value="1200000"></sl-format-bytes><br />
+<sl-format-bytes value="1200000000"></sl-format-bytes>
+
+
+ +
+ 
import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
+
+const App = () => (
+  <>
+    <SlFormatBytes value="12" />
+    <br />
+    <SlFormatBytes value="1200" />
+    <br />
+    <SlFormatBytes value="1200000" />
+    <br />
+    <SlFormatBytes value="1200000000" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Formatting Bits +

+

To get the value in bits, set the unit attribute to bit.

+ +
+
+
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-format-bytes value="12" unit="bit"></sl-format-bytes><br />
+<sl-format-bytes value="1200" unit="bit"></sl-format-bytes><br />
+<sl-format-bytes value="1200000" unit="bit"></sl-format-bytes><br />
+<sl-format-bytes value="1200000000" unit="bit"></sl-format-bytes>
+
+
+ +
+ 
import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
+
+const App = () => (
+  <>
+    <SlFormatBytes value="12" unit="bit" />
+    <br />
+    <SlFormatBytes value="1200" unit="bit" />
+    <br />
+    <SlFormatBytes value="1200000" unit="bit" />
+    <br />
+    <SlFormatBytes value="1200000000" unit="bit" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Localization +

+

Use the lang attribute to set the number formatting locale.

+ +
+
+
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-format-bytes value="12" lang="de"></sl-format-bytes><br />
+<sl-format-bytes value="1200" lang="de"></sl-format-bytes><br />
+<sl-format-bytes value="1200000" lang="de"></sl-format-bytes><br />
+<sl-format-bytes value="1200000000" lang="de"></sl-format-bytes>
+
+
+ +
+ 
import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
+
+const App = () => (
+  <>
+    <SlFormatBytes value="12" lang="de" />
+    <br />
+    <SlFormatBytes value="1200" lang="de" />
+    <br />
+    <SlFormatBytes value="1200000" lang="de" />
+    <br />
+    <SlFormatBytes value="1200000000" lang="de" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/format-bytes/format-bytes.js';
+ + + +

To import this component as a React component:

+ 
import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The number to format in bytes. + number + + 0 +
+ unit + The type of unit to display. + 'byte' | 'bit' + + 'byte' +
+ display + Determines how to display the result, e.g. “100 bytes”, “100 b”, or “100b”. + 'long' | 'short' | 'narrow' + + 'short' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+
+
+
+ + diff --git a/components/format-date/index.html b/components/format-date/index.html new file mode 100644 index 00000000..ee58e311 --- /dev/null +++ b/components/format-date/index.html @@ -0,0 +1,1181 @@ + + + + + + + Format Date + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Format Date

+ +
+ <sl-format-date> | SlFormatDate +
+ +
+ Since 2.0 + stable +
+
+ +

Formats a date/time using the specified locale and options.

+ +

+ Localization is handled by the browser’s + Intl.DateTimeFormat API. No language packs are required. +

+ +
+
+ + + +
+ +
+
+ +
+
+ 
<!-- Nebula 2 release date 🎉 -->
+<sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
+
+
+ +
+ 
import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
+
+const App = () => <SlFormatDate date="2020-07-15T09:17:00-04:00" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ The date attribute determines the date/time to use when formatting. It must be a string that + Date.parse() + can interpret or a + Date + object set via JavaScript. If omitted, the current date/time will be assumed. +

+ +

+ Examples +

+

+ Date & Time Formatting +

+

+ Formatting options are based on those found in the + Intl.DateTimeFormat API. When formatting options are provided, the date/time will be formatted according to those values. When no + formatting options are provided, a localized, numeric date will be displayed instead. +

+ +
+
+ +
+ + +
+ + +
+ + +
+ + +
+ + + + +
+ +
+
+ +
+
+ 
<!-- Human-readable date -->
+<sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br />
+
+<!-- Time -->
+<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br />
+
+<!-- Weekday -->
+<sl-format-date weekday="long"></sl-format-date><br />
+
+<!-- Month -->
+<sl-format-date month="long"></sl-format-date><br />
+
+<!-- Year -->
+<sl-format-date year="numeric"></sl-format-date><br />
+
+<!-- No formatting options -->
+<sl-format-date></sl-format-date>
+
+
+ +
+ 
import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
+
+const App = () => (
+  <>
+    {/* Human-readable date */}
+    <SlFormatDate month="long" day="numeric" year="numeric" />
+    <br />
+
+    {/* Time */}
+    <SlFormatDate hour="numeric" minute="numeric" />
+    <br />
+
+    {/* Weekday */}
+    <SlFormatDate weekday="long" />
+    <br />
+
+    {/* Month */}
+    <SlFormatDate month="long" />
+    <br />
+
+    {/* Year */}
+    <SlFormatDate year="numeric" />
+    <br />
+
+    {/* No formatting options */}
+    <SlFormatDate />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Hour Formatting +

+

+ By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, + set the hour-format attribute to 12 or 24. +

+ +
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br />
+<sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
+
+
+ +
+ 
import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
+
+const App = () => (
+  <>
+    <SlFormatDate hour="numeric" minute="numeric" hour-format="12" />
+    <br />
+    <SlFormatDate hour="numeric" minute="numeric" hour-format="24" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Localization +

+

Use the lang attribute to set the date/time formatting locale.

+ +
+
+ English:
+ French:
+ Russian: + +
+ +
+
+ +
+
+ 
English: <sl-format-date lang="en"></sl-format-date><br />
+French: <sl-format-date lang="fr"></sl-format-date><br />
+Russian: <sl-format-date lang="ru"></sl-format-date>
+
+
+ +
+ 
import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
+
+const App = () => (
+  <>
+    English: <SlFormatDate lang="en" />
+    <br />
+    French: <SlFormatDate lang="fr" />
+    <br />
+    Russian: <SlFormatDate lang="ru" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/format-date/format-date.js';
+ + + +

To import this component as a React component:

+ 
import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ date + + The date/time to format. If not set, the current date and time will be used. When passing a string, + it’s strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To + convert a date to this format in JavaScript, use + date.toISOString(). + + Date | string + + new Date() +
+ weekday + The format for displaying the weekday. + 'narrow' | 'short' | 'long' + -
+ era + The format for displaying the era. + 'narrow' | 'short' | 'long' + -
+ year + The format for displaying the year. + 'numeric' | '2-digit' + -
+ month + The format for displaying the month. + 'numeric' | '2-digit' | 'narrow' | 'short' | 'long' + -
+ day + The format for displaying the day. + 'numeric' | '2-digit' + -
+ hour + The format for displaying the hour. + 'numeric' | '2-digit' + -
+ minute + The format for displaying the minute. + 'numeric' | '2-digit' + -
+ second + The format for displaying the second. + 'numeric' | '2-digit' + -
+ timeZoneName + +
+ + + time-zone-name + + + 		The format for displaying the time. + 'short' | 'long' + -
+ timeZone + +
+ + + time-zone + + + 		The time zone to express the time in. + string + -
+ hourFormat + +
+ + + hour-format + + + 		The format for displaying the hour. + 'auto' | '12' | '24' + + 'auto' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+
+
+
+ + diff --git a/components/format-number/index.html b/components/format-number/index.html new file mode 100644 index 00000000..07083e0f --- /dev/null +++ b/components/format-number/index.html @@ -0,0 +1,1163 @@ + + + + + + + Format Number + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Format Number

+ +
+ <sl-format-number> | SlFormatNumber +
+ +
+ Since 2.0 + stable +
+
+ +

Formats a number using the specified locale and options.

+ +

+ Localization is handled by the browser’s + Intl.NumberFormat API. No language packs are required. +

+ +
+
+
+ +

+ +
+ + + +
+ +
+
+ +
+
+ 
<div class="format-number-overview">
+  <sl-format-number value="1000"></sl-format-number>
+  <br /><br />
+  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
+</div>
+
+<script>
+  const container = document.querySelector('.format-number-overview');
+  const formatter = container.querySelector('sl-format-number');
+  const input = container.querySelector('sl-input');
+
+  input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  const [value, setValue] = useState(1000);
+
+  return (
+    <>
+      <SlFormatNumber value={value} />
+      <br />
+      <br />
+      <SlInput
+        type="number"
+        value={value}
+        label="Number to Format"
+        style={{ maxWidth: '180px' }}
+        onSlInput={event => setValue(event.target.value)}
+      />
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Percentages +

+

To get the value as a percent, set the type attribute to percent.

+ +
+
+
+
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-format-number type="percent" value="0"></sl-format-number><br />
+<sl-format-number type="percent" value="0.25"></sl-format-number><br />
+<sl-format-number type="percent" value="0.50"></sl-format-number><br />
+<sl-format-number type="percent" value="0.75"></sl-format-number><br />
+<sl-format-number type="percent" value="1"></sl-format-number>
+
+
+ +
+ 
import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
+
+const App = () => (
+  <>
+    <SlFormatNumber type="percent" value={0} />
+    <br />
+    <SlFormatNumber type="percent" value={0.25} />
+    <br />
+    <SlFormatNumber type="percent" value={0.5} />
+    <br />
+    <SlFormatNumber type="percent" value={0.75} />
+    <br />
+    <SlFormatNumber type="percent" value={1} />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Localization +

+

Use the lang attribute to set the number formatting locale.

+ +
+
+ English:
+ German:
+ Russian: + +
+ +
+
+ +
+
+ 
English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br />
+German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br />
+Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number>
+
+
+ +
+ 
import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
+
+const App = () => (
+  <>
+    English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
+    <br />
+    German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
+    <br />
+    Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Currency +

+

+ To format a number as a monetary value, set the type attribute to currency and set + the currency attribute to the desired ISO 4217 currency code. You should also specify + lang to ensure the the number is formatted correctly for the target locale. +

+ +
+
+
+
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br />
+<sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br />
+<sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br />
+<sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br />
+<sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number>
+
+
+ +
+ 
import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
+
+const App = () => (
+  <>
+    <SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
+    <br />
+    <SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
+    <br />
+    <SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
+    <br />
+    <SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
+    <br />
+    <SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/format-number/format-number.js';
+ + + +

To import this component as a React component:

+ 
import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The number to format. + number + + 0 +
+ type + The formatting style to use. + 'currency' | 'decimal' | 'percent' + + 'decimal' +
+ noGrouping + +
+ + + no-grouping + + + 		Turns off grouping separators. + boolean + + false +
+ currency + + The + ISO 4217 + currency code to use when formatting. + + string + + 'USD' +
+ currencyDisplay + +
+ + + currency-display + + + 		How to display the currency. + 'symbol' | 'narrowSymbol' | 'code' | 'name' + + 'symbol' +
+ minimumIntegerDigits + +
+ + + minimum-integer-digits + + + 		The minimum number of integer digits to use. Possible values are 1–21. + number + -
+ minimumFractionDigits + +
+ + + minimum-fraction-digits + + + 		The minimum number of fraction digits to use. Possible values are 0–20. + number + -
+ maximumFractionDigits + +
+ + + maximum-fraction-digits + + + 		The maximum number of fraction digits to use. Possible values are 0–0. + number + -
+ minimumSignificantDigits + +
+ + + minimum-significant-digits + + + 		The minimum number of significant digits to use. Possible values are 1–21. + number + -
+ maximumSignificantDigits + +
+ + + maximum-significant-digits + + + 		The maximum number of significant digits to use,. Possible values are 1–21. + number + -
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+
+
+
+ + diff --git a/components/icon-button/index.html b/components/icon-button/index.html new file mode 100644 index 00000000..ab7b93b5 --- /dev/null +++ b/components/icon-button/index.html @@ -0,0 +1,1337 @@ + + + + + + + Icon Button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Icon Button

+ +
+ <sl-icon-button> | SlIconButton +
+ +
+ Since 2.0 + stable +
+
+ +

+ Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. +

+ +

+ For a full list of icons that come bundled with Nebula, refer to the + icon component. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-icon-button name="gear" label="Settings"></sl-icon-button>
+
+
+ +
+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const App = () => <SlIconButton name="gear" label="Settings" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Sizes

+

Icon buttons inherit their parent element’s font-size.

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></sl-icon-button>
+<sl-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></sl-icon-button>
+<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
+
+
+ +
+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const App = () => (
+  <>
+    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
+    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
+    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Colors

+

+ Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can + still customize them by styling the base part. +

+ +
+
+
+ + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="icon-button-color">
+  <sl-icon-button name="type-bold" label="Bold"></sl-icon-button>
+  <sl-icon-button name="type-italic" label="Italic"></sl-icon-button>
+  <sl-icon-button name="type-underline" label="Underline"></sl-icon-button>
+</div>
+
+<style>
+  .icon-button-color sl-icon-button::part(base) {
+    color: #b00091;
+  }
+
+  .icon-button-color sl-icon-button::part(base):hover,
+  .icon-button-color sl-icon-button::part(base):focus {
+    color: #c913aa;
+  }
+
+  .icon-button-color sl-icon-button::part(base):active {
+    color: #960077;
+  }
+</style>
+
+
+ +
+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const css = `
+  .icon-button-color sl-icon-button::part(base) {
+    color: #b00091;
+  }
+
+  .icon-button-color sl-icon-button::part(base):hover,
+  .icon-button-color sl-icon-button::part(base):focus {
+    color: #c913aa;
+  }
+
+  .icon-button-color sl-icon-button::part(base):active {
+    color: #960077;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="icon-button-color">
+      <SlIconButton name="type-bold" label="Bold" />
+      <SlIconButton name="type-italic" label="Italic" />
+      <SlIconButton name="type-underline" label="Underline" />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

Use the href attribute to convert the button to a link.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
+
+
+ +
+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Icon Button with Tooltip +

+

Wrap a tooltip around an icon button to provide contextual information to the user.

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-tooltip content="Settings">
+  <sl-icon-button name="gear" label="Settings"></sl-icon-button>
+</sl-tooltip>
+
+
+ +
+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <SlTooltip content="Settings">
+    <SlIconButton name="gear" label="Settings" />
+  </SlTooltip>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable the icon button.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
+
+
+ +
+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+
+const App = () => <SlIconButton name="gear" label="Settings" disabled />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/icon-button/icon-button.js';
+ + + +

To import this component as a React component:

+ 
import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the icon to draw. Available names depend on the icon library being used. + string | undefined + -
+ library + The name of a registered custom icon library. + string | undefined + -
+ src + + An external URL of an SVG file. Be sure you trust the content you are including, as it will be + executed as code and can result in XSS attacks. + + string | undefined + -
+ href + + When set, the underlying button will be rendered as an <a> with this + href instead of a <button>. + + string | undefined + -
+ target + Tells the browser where to open the link. Only used when href is set. + '_blank' | '_parent' | '_self' | '_top' | undefined + -
+ download + + Tells the browser to download the linked file as this filename. Only used when href is + set. + + string | undefined + -
+ label + + A description that gets read by assistive devices. For optimal accessibility, you should always + include a label that describes what the icon button does. + + string + + '' +
+ disabled + Disables the button. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the icon button loses focus.-
sl-focusonSlFocusEmitted when the icon button gains focus.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
click()Simulates a click on the icon button.-
focus()Sets focus on the icon button. + options: FocusOptions +
blur()Removes focus from the icon button.-
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/icon/index.html b/components/icon/index.html new file mode 100644 index 00000000..8459ae10 --- /dev/null +++ b/components/icon/index.html @@ -0,0 +1,1699 @@ + + + + + + + Icon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Icon

+ +
+ <sl-icon> | SlIcon +
+ +
+ Since 2.0 + stable +
+
+ +

+ Icons are symbols that can be used to represent various options within an application. +

+ +

+ Nebula comes bundled with over 1,500 icons courtesy of the + Bootstrap Icons + project. These icons are part of the default icon library. If you prefer, you can register + custom icon libraries as well. +

+ +

+ Default Icons +

+

+ All available icons in the default icon library are shown below. Click or tap on any icon to + copy its name, then you can use it in your HTML like this. +

+ 
<sl-icon name="icon-name-here"></sl-icon>
+
+
+
+ + + + + Outlined + Filled + All icons + +
+
+ +
+

+ Examples +

+

Colors

+

+ Icons inherit their color from the current text color. Thus, you can set the color property on + the <sl-icon> element or an ancestor to change the color. +

+ +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ +
+ +
+
+ +
+
+ 
<div style="color: #4a90e2;">
+  <sl-icon name="exclamation-triangle"></sl-icon>
+  <sl-icon name="archive"></sl-icon>
+  <sl-icon name="battery-charging"></sl-icon>
+  <sl-icon name="bell"></sl-icon>
+</div>
+<div style="color: #9013fe;">
+  <sl-icon name="clock"></sl-icon>
+  <sl-icon name="cloud"></sl-icon>
+  <sl-icon name="download"></sl-icon>
+  <sl-icon name="file-earmark"></sl-icon>
+</div>
+<div style="color: #417505;">
+  <sl-icon name="flag"></sl-icon>
+  <sl-icon name="heart"></sl-icon>
+  <sl-icon name="image"></sl-icon>
+  <sl-icon name="lightning"></sl-icon>
+</div>
+<div style="color: #f5a623;">
+  <sl-icon name="mic"></sl-icon>
+  <sl-icon name="search"></sl-icon>
+  <sl-icon name="star"></sl-icon>
+  <sl-icon name="trash"></sl-icon>
+</div>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <>
+    <div style={{ color: '#4a90e2' }}>
+      <SlIcon name="exclamation-triangle"></SlIcon>
+      <SlIcon name="archive"></SlIcon>
+      <SlIcon name="battery-charging"></SlIcon>
+      <SlIcon name="bell"></SlIcon>
+    </div>
+    <div style={{ color: '#9013fe' }}>
+      <SlIcon name="clock"></SlIcon>
+      <SlIcon name="cloud"></SlIcon>
+      <SlIcon name="download"></SlIcon>
+      <SlIcon name="file-earmark"></SlIcon>
+    </div>
+    <div style={{ color: '#417505' }}>
+      <SlIcon name="flag"></SlIcon>
+      <SlIcon name="heart"></SlIcon>
+      <SlIcon name="image"></SlIcon>
+      <SlIcon name="lightning"></SlIcon>
+    </div>
+    <div style={{ color: '#f5a623' }}>
+      <SlIcon name="mic"></SlIcon>
+      <SlIcon name="search"></SlIcon>
+      <SlIcon name="star"></SlIcon>
+      <SlIcon name="trash"></SlIcon>
+    </div>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizing

+

+ Icons are sized relative to the current font size. To change their size, set the + font-size property on the icon itself or on a parent element as shown below. +

+ +
+
+
+ + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ 
<div style="font-size: 32px;">
+  <sl-icon name="exclamation-triangle"></sl-icon>
+  <sl-icon name="archive"></sl-icon>
+  <sl-icon name="battery-charging"></sl-icon>
+  <sl-icon name="bell"></sl-icon>
+  <sl-icon name="clock"></sl-icon>
+  <sl-icon name="cloud"></sl-icon>
+  <sl-icon name="download"></sl-icon>
+  <sl-icon name="file-earmark"></sl-icon>
+  <sl-icon name="flag"></sl-icon>
+  <sl-icon name="heart"></sl-icon>
+  <sl-icon name="image"></sl-icon>
+  <sl-icon name="lightning"></sl-icon>
+  <sl-icon name="mic"></sl-icon>
+  <sl-icon name="search"></sl-icon>
+  <sl-icon name="star"></sl-icon>
+  <sl-icon name="trash"></sl-icon>
+</div>
+
+
+
+ +
+ + + +
+
+ +

Labels

+

For non-decorative icons, use the label attribute to announce it to assistive devices.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-icon name="star-fill" label="Add to favorites"></sl-icon>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Icon Libraries +

+

+ You can register additional icons to use with the <sl-icon> component through icon + libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how + many icon libraries you can register and there is no cost associated with registering them, as individual + icons are only requested when they’re used. +

+

+ Nebula ships with two built-in icon libraries, default and system. The + default icon library contains all of the icons in the + Bootstrap Icons project. The system icon library contains only + a small subset of icons that are used internally by Nebula components. +

+

+ To register an additional icon library, use the registerIconLibrary() function that’s exported + from utilities/icon-library.js. At a minimum, you must provide a name and a resolver function. + The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the + examples below to better understand how it works. +

+

+ If necessary, a mutator function can be used to mutate the SVG element before rendering. This is necessary + for some libraries due to the many possible ways SVGs are crafted. For example, icons should ideally inherit + the current text color via currentColor, so you may need to apply + fill="currentColor or stroke="currentColor" to the SVG element using this + function. +

+

+ The following examples demonstrate how to register a number of popular, open source icon libraries via CDN. + Feel free to adapt the code as you see fit to use your own origin or naming conventions. +

+

+ Sonr Icons +

+

Icons sourced from our internal style guide.

+
+

These are pre-packaged with Nebula and are not available for custom registration.

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ 
<div style="font-size: 24px;">
+  <sl-icon library="sonr" name="passkey"></sl-icon>
+  <sl-icon library="sonr" name="docs"></sl-icon>
+  <sl-icon library="sonr" name="social-github"></sl-icon>
+  <sl-icon library="sonr" name="social-twitter"></sl-icon>
+  <sl-icon library="sonr" name="social-youtube"></sl-icon>
+  <sl-icon library="sonr" name="error-blockchain"></sl-icon>
+  <sl-icon library="sonr" name="error-network"></sl-icon>
+  <sl-icon library="sonr" name="swap-coins"></sl-icon>
+  <sl-icon library="sonr" name="scanner-qr"></sl-icon>
+  <sl-icon library="sonr" name="external-link"></sl-icon>
+  <sl-icon library="sonr" name="face-id"></sl-icon>
+  <sl-icon library="sonr" name="lock-access"></sl-icon>
+  <sl-icon library="sonr" name="check-shield"></sl-icon>
+  <sl-icon library="sonr" name="vault"></sl-icon>
+  <sl-icon library="sonr" name="coin-assets"></sl-icon>
+  <sl-icon library="sonr" name="coins-hand"></sl-icon>
+  <sl-icon library="sonr" name="coins-stack"></sl-icon>
+  <sl-icon library="sonr" name="currency-dollar"></sl-icon>
+  <sl-icon library="sonr" name="currency-euro"></sl-icon>
+  <sl-icon library="sonr" name="currency-pound"></sl-icon>
+  <sl-icon library="sonr" name="currency-rupee"></sl-icon>
+  <sl-icon library="sonr" name="currency-yen"></sl-icon>
+  <sl-icon library="sonr" name="sonr"></sl-icon>
+  <sl-icon library="sonr" name="sonr-fill"></sl-icon>
+  <sl-icon library="sonr" name="osmo"></sl-icon>
+  <sl-icon library="sonr" name="btc"></sl-icon>
+  <sl-icon library="sonr" name="sol"></sl-icon>
+  <sl-icon library="sonr" name="usdc"></sl-icon>
+ </div>
+
+
+
+ +
+ + + +
+
+ +

+ Crypto Icons +

+

+ A collection of icons for cryptocurrencies which are tradeable on the Sonr network. Provide the All Caps + ticker symbol for the icon. +

+
+

These are pre-packaged with Nebula and are not available for custom registration.

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ 
<div style="font-size: 24px;">
+  <sl-icon library="crypto" name="SNR"></sl-icon>
+  <sl-icon library="crypto" name="BTC"></sl-icon>
+  <sl-icon library="crypto" name="ETH"></sl-icon>
+  <sl-icon library="crypto" name="LTC"></sl-icon>
+  <sl-icon library="crypto" name="XRP"></sl-icon>
+  <sl-icon library="crypto" name="BCH"></sl-icon>
+  <sl-icon library="crypto" name="BNB"></sl-icon>
+  <sl-icon library="crypto" name="LINK"></sl-icon>
+  <sl-icon library="crypto" name="DOT"></sl-icon>
+  <sl-icon library="crypto" name="SOL"></sl-icon>
+  <sl-icon library="crypto" name="USDT"></sl-icon>
+  <sl-icon library="crypto" name="USDC"></sl-icon>
+  <sl-icon library="crypto" name="EVMOS"></sl-icon>
+  <sl-icon library="crypto" name="FIL"></sl-icon>
+  <sl-icon library="crypto" name="ATOM"></sl-icon>
+  <sl-icon library="crypto" name="AXL"></sl-icon>
+  <sl-icon library="crypto" name="HNS"></sl-icon>
+  <sl-icon library="crypto" name="AKT"></sl-icon>
+  <sl-icon library="crypto" name="DOGE"></sl-icon>
+  <sl-icon library="crypto" name="SOL"></sl-icon>
+  <sl-icon library="crypto" name="STARZ"></sl-icon>
+</div>
+
+
+
+ +
+ + + +
+
+ +

+ Font Awesome +

+

+ This will register the + Font Awesome Free + library using the jsDelivr CDN. This library has three variations: regular (far-*), solid + (fas-*), and brands (fab-*). A mutator function is required to set the SVG’s + fill to currentColor. +

+

+ Icons in this library are licensed under the + Font Awesome Free License. Some of the icons that appear on the Font Awesome website require a license and are therefore not + available in the CDN. +

+ +
+
+ + +
+ + + + + + +
+ + + + + + +
+ + + + + + +
+ +
+ +
+
+ +
+
+ 
<script type="module">
+  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
+
+  registerIconLibrary('fa', {
+    resolver: name => {
+      const filename = name.replace(/^fa[rbs]-/, '');
+      let folder = 'regular';
+      if (name.substring(0, 4) === 'fas-') folder = 'solid';
+      if (name.substring(0, 4) === 'fab-') folder = 'brands';
+      return `https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/${folder}/${filename}.svg`;
+    },
+    mutator: svg => svg.setAttribute('fill', 'currentColor')
+  });
+</script>
+
+<div style="font-size: 24px;">
+  <sl-icon library="fa" name="far-bell"></sl-icon>
+  <sl-icon library="fa" name="far-comment"></sl-icon>
+  <sl-icon library="fa" name="far-hand-point-right"></sl-icon>
+  <sl-icon library="fa" name="far-hdd"></sl-icon>
+  <sl-icon library="fa" name="far-heart"></sl-icon>
+  <sl-icon library="fa" name="far-star"></sl-icon>
+  <br />
+  <sl-icon library="fa" name="fas-archive"></sl-icon>
+  <sl-icon library="fa" name="fas-book"></sl-icon>
+  <sl-icon library="fa" name="fas-chess-knight"></sl-icon>
+  <sl-icon library="fa" name="fas-dice"></sl-icon>
+  <sl-icon library="fa" name="fas-pizza-slice"></sl-icon>
+  <sl-icon library="fa" name="fas-scroll"></sl-icon>
+  <br />
+  <sl-icon library="fa" name="fab-apple"></sl-icon>
+  <sl-icon library="fa" name="fab-chrome"></sl-icon>
+  <sl-icon library="fa" name="fab-edge"></sl-icon>
+  <sl-icon library="fa" name="fab-firefox"></sl-icon>
+  <sl-icon library="fa" name="fab-opera"></sl-icon>
+  <sl-icon library="fa" name="fab-microsoft"></sl-icon>
+</div>
+
+
+
+ +
+ + + +
+
+ +

+ Customizing the System Library +

+

+ The system library contains only the icons used internally by Nebula components. Unlike the default icon + library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs + into the resolver to ensure their availability. +

+

+ If you want to change the icons Nebula uses internally, you can register an icon library using the + system name and a custom resolver. If you choose to do this, it’s your responsibility to + provide all of the icons that are required by components. You can reference + src/components/library.system.ts for a complete list of system icons used by Nebula. +

+ 
<script type="module">
+  import { registerIconLibrary } from '/dist/utilities/icon-library.js';
+
+  registerIconLibrary('system', {
+    resolver: name => `/path/to/custom/icons/${name}.svg`
+  });
+</script>
+
+ + + + 

+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/icon/icon.js';
+ + + +

To import this component as a React component:

+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the icon to draw. Available names depend on the icon library being used. + + + string | undefined + -
+ src + + An external URL of an SVG file. Be sure you trust the content you are including, as it will be + executed as code and can result in XSS attacks. + + string | undefined + -
+ label + + An alternate description to use for assistive devices. If omitted, the icon will be considered + presentational and ignored by assistive devices. + + string + + '' +
+ library + The name of a registered custom icon library. + + + string + + 'default' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-loadonSlLoad + Emitted when the icon has loaded. When using spriteSheet: true this will not emit. + -
sl-erroronSlError + Emitted when the icon fails to load due to an error. When using spriteSheet: true this + will not emit. + -
+
+ +

+ Learn more about events. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
svgThe internal SVG element.
use + The element generated when using spriteSheet: true +
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/image-comparer/index.html b/components/image-comparer/index.html new file mode 100644 index 00000000..3391bcc2 --- /dev/null +++ b/components/image-comparer/index.html @@ -0,0 +1,965 @@ + + + + + + + Image Comparer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Image Comparer

+ +
+ <sl-image-comparer> | SlImageComparer +
+ +
+ Since 2.0 + stable +
+
+ +

Compare visual differences between similar photos with a sliding panel.

+ +

+ For best results, use images that share the same dimensions. The slider can be controlled by dragging or + pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, + or home + end to jump to the beginning or end.) +

+ +
+
+ + Grayscale version of kittens in a basket looking around. + Color version of kittens in a basket looking around. + + +
+ +
+
+ +
+
+ 
<sl-image-comparer>
+  <img
+    slot="before"
+    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
+    alt="Grayscale version of kittens in a basket looking around."
+  />
+  <img
+    slot="after"
+    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
+    alt="Color version of kittens in a basket looking around."
+  />
+</sl-image-comparer>
+
+
+ +
+ 
import SlImageComparer from '@onsonr/nebula/dist/react/image-comparer';
+
+const App = () => (
+  <SlImageComparer>
+    <img
+      slot="before"
+      src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
+      alt="Grayscale version of kittens in a basket looking around."
+    />
+    <img
+      slot="after"
+      src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
+      alt="Color version of kittens in a basket looking around."
+    />
+  </SlImageComparer>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Initial Position +

+

+ Use the position attribute to set the initial position of the slider. This is a percentage from + 0 to 100. +

+ +
+
+ + A person sitting on bricks wearing untied boots. + A person sitting on a yellow curb tying shoelaces on a boot. + + +
+ +
+
+ +
+
+ 
<sl-image-comparer position="25">
+  <img
+    slot="before"
+    src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
+    alt="A person sitting on bricks wearing untied boots."
+  />
+  <img
+    slot="after"
+    src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+    alt="A person sitting on a yellow curb tying shoelaces on a boot."
+  />
+</sl-image-comparer>
+
+
+ +
+ 
import SlImageComparer from '@onsonr/nebula/dist/react/image-comparer';
+
+const App = () => (
+  <SlImageComparer position={25}>
+    <img
+      slot="before"
+      src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
+      alt="A person sitting on bricks wearing untied boots."
+    />
+    <img
+      slot="after"
+      src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
+      alt="A person sitting on a yellow curb tying shoelaces on a boot."
+    />
+  </SlImageComparer>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/image-comparer/image-comparer.js';
+ + + +

To import this component as a React component:

+ 
import SlImageComparer from '@onsonr/nebula/dist/react/image-comparer';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
+ before + The before image, an <img> or <svg> element.
+ after + The after image, an <img> or <svg> element.
+ handle + The icon used inside the handle.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ position + The position of the divider as a percentage. + + + number + + 50 +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-changeonSlChangeEmitted when the position changes.-
+
+ +

+ Learn more about events. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--divider-widthThe width of the dividing line.
--handle-sizeThe size of the compare handle.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
beforeThe container that wraps the before image.
afterThe container that wraps the after image.
dividerThe divider that separates the images.
handleThe handle that the user drags to expose the after image.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/include/index.html b/components/include/index.html new file mode 100644 index 00000000..8b58fbb6 --- /dev/null +++ b/components/include/index.html @@ -0,0 +1,765 @@ + + + + + + + Include + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Include

+ +
+ <sl-include> | SlInclude +
+ +
+ Since 2.0 + stable +
+
+ +

Includes give you the power to embed external HTML files into the page.

+ +

+ Included files are asynchronously requested using window.fetch(). Requests are cached, so the + same file can be included multiple times, but only one request will be made. +

+

+ The included content will be inserted into the <sl-include> element’s default slot so it + can be easily accessed and styled through the light DOM. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
+
+
+ +
+ 
import SlInclude from '@onsonr/nebula/dist/react/include';
+
+const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Listening for Events +

+

+ When an include file loads successfully, the sl-load event will be emitted. You can listen for + this event to add custom loading logic to your includes. +

+

+ If the request fails, the sl-error event will be emitted. In this case, + event.detail.status will contain the resulting HTTP status code of the request, e.g. 404 (not + found). +

+ 
<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
+
+<script>
+  const include = document.querySelector('sl-include');
+
+  include.addEventListener('sl-load', event => {
+    if (event.eventPhase === Event.AT_TARGET) {
+      console.log('Success');
+    }
+  });
+
+  include.addEventListener('sl-error', event => {
+    if (event.eventPhase === Event.AT_TARGET) {
+      console.log('Error', event.detail.status);
+    }
+  });
+</script>
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/include/include.js';
+ + + +

To import this component as a React component:

+ 
import SlInclude from '@onsonr/nebula/dist/react/include';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ src + + The location of the HTML file to include. Be sure you trust the content you are including as it will + be executed as code and can result in XSS attacks. + + string + -
+ mode + The fetch mode to use. + 'cors' | 'no-cors' | 'same-origin' + + 'cors' +
+ allowScripts + +
+ + + allow-scripts + + + 		+ Allows included scripts to be executed. Be sure you trust the content you are including as it will + be executed as code and can result in XSS attacks. + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-loadonSlLoadEmitted when the included file is loaded.-
sl-erroronSlErrorEmitted when the included file fails to load due to an error. + { status: number } +
+
+ +

+ Learn more about events. +

+
+
+
+ + diff --git a/components/input/index.html b/components/input/index.html new file mode 100644 index 00000000..04d5e92c --- /dev/null +++ b/components/input/index.html @@ -0,0 +1,2566 @@ + + + + + + + Input + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Input

+ +
+ <sl-input> | SlInput +
+ +
+ Since 2.0 + stable +
+
+ +

Inputs collect data from the user.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput />;
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

Labels

+

+ Use the label attribute to give the input an accessible label. For labels that contain HTML, + use the label slot instead. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input label="What is your name?"></sl-input>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput label="What is your name?" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Help Text +

+

+ Add descriptive help text to an input with the help-text attribute. For help texts that contain + HTML, use the help-text slot instead. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Placeholders +

+

Use the placeholder attribute to add a placeholder.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Type something"></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput placeholder="Type something" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Clearable +

+

Add the clearable attribute to add a clear button when the input has content.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Clearable" clearable></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput placeholder="Clearable" clearable />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Toggle Password +

+

+ Add the password-toggle attribute to add a toggle button that will show the password when + activated. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input type="password" placeholder="Password Toggle" password-toggle></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Filled Inputs +

+

Add the filled attribute to draw a filled input.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Type something" filled></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput placeholder="Type something" filled />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable an input.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Disabled" disabled></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => <SlInput placeholder="Disabled" disabled />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change an input’s size.

+ +
+
+ +
+ +
+ + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Small" size="small"></sl-input>
+<br />
+<sl-input placeholder="Medium" size="medium"></sl-input>
+<br />
+<sl-input placeholder="Large" size="large"></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Small" size="small" />
+    <br />
+    <SlInput placeholder="Medium" size="medium" />
+    <br />
+    <SlInput placeholder="Large" size="large" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Pill

+

Use the pill attribute to give inputs rounded edges.

+ +
+
+ +
+ +
+ + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Small" size="small" pill></sl-input>
+<br />
+<sl-input placeholder="Medium" size="medium" pill></sl-input>
+<br />
+<sl-input placeholder="Large" size="large" pill></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Small" size="small" pill />
+    <br />
+    <SlInput placeholder="Medium" size="medium" pill />
+    <br />
+    <SlInput placeholder="Large" size="large" pill />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Input Types +

+

The type attribute controls the type of input the browser renders.

+ +
+
+ +
+ +
+ + +
+ +
+
+ +
+
+ 
<sl-input type="email" placeholder="Email"></sl-input>
+<br />
+<sl-input type="number" placeholder="Number"></sl-input>
+<br />
+<sl-input type="date" placeholder="Date"></sl-input>
+
+
+ +
+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => (
+  <>
+    <SlInput type="email" placeholder="Email" />
+    <br />
+    <SlInput type="number" placeholder="Number" />
+    <br />
+    <SlInput type="date" placeholder="Date" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prefix & Suffix Icons +

+

Use the prefix and suffix slots to add icons.

+ +
+
+ + + + +
+ + + + +
+ + + + + +
+ +
+
+ +
+
+ 
<sl-input placeholder="Small" size="small">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-input>
+<br />
+<sl-input placeholder="Medium" size="medium">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-input>
+<br />
+<sl-input placeholder="Large" size="large">
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-icon name="chat" slot="suffix"></sl-icon>
+</sl-input>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Small" size="small">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
+    <br />
+    <SlInput placeholder="Medium" size="medium">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
+    <br />
+    <SlInput placeholder="Large" size="large">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing Label Position +

+

+ Use CSS parts to customize the way form controls are drawn. This example uses CSS + grid to position the label to the left of the control, but the possible orientations are nearly endless. The + same technique works for inputs, textareas, radio groups, and similar form controls. +

+ +
+
+ + + + + + +
+ +
+
+ +
+
+ 
<sl-input class="label-on-left" label="Name" help-text="Enter your name"></sl-input>
+<sl-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></sl-input>
+<sl-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></sl-textarea>
+
+<style>
+  .label-on-left {
+    --label-width: 3.75rem;
+    --gap-width: 1rem;
+  }
+
+  .label-on-left + .label-on-left {
+    margin-top: var(--sl-spacing-medium);
+  }
+
+  .label-on-left::part(form-control) {
+    display: grid;
+    grid: auto / var(--label-width) 1fr;
+    gap: var(--sl-spacing-3x-small) var(--gap-width);
+    align-items: center;
+  }
+
+  .label-on-left::part(form-control-label) {
+    text-align: right;
+  }
+
+  .label-on-left::part(form-control-help-text) {
+    grid-column-start: 2;
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/input/input.js';
+ + + +

To import this component as a React component:

+ 
import SlInput from '@onsonr/nebula/dist/react/input';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
+ label + The input’s label. Alternatively, you can use the label attribute.
+ prefix + Used to prepend a presentational icon or similar element to the input.
+ suffix + Used to append a presentational icon or similar element to the input.
+ clear-icon + An icon to use in lieu of the default clear icon.
+ show-password-icon + An icon to use in lieu of the default show password icon.
+ hide-password-icon + An icon to use in lieu of the default hide password icon.
+ help-text + + Text that describes how to use the input. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ type + + The type of input. Works the same as a native <input> element, but only a subset + of types are supported. Defaults to text. + + + + + 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | + 'url' + + 'text' +
+ name + The name of the input, submitted as a name/value pair with form data. + string + + '' +
+ value + The current value of the input, submitted as a name/value pair with form data. + string + + '' +
+ defaultValue + The default value of the form control. Primarily used for resetting the form control. + string + + '' +
+ size + The input’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ filled + Draws a filled input. + + + boolean + + false +
+ pill + Draws a pill-style input with rounded edges. + + + boolean + + false +
+ label + The input’s label. If you need to display HTML, use the label slot instead. + string + + '' +
+ helpText + +
+ + + help-text + + + 		+ The input’s help text. If you need to display HTML, use the help-text slot instead. + + string + + '' +
+ clearable + Adds a clear button when the input is not empty. + boolean + + false +
+ disabled + Disables the input. + + + boolean + + false +
+ placeholder + Placeholder text to show as a hint when the input is empty. + string + + '' +
+ readonly + Makes the input readonly. + + + boolean + + false +
+ passwordToggle + +
+ + + password-toggle + + + 		Adds a button to toggle the password’s visibility. Only applies to password types. + boolean + + false +
+ passwordVisible + +
+ + + password-visible + + + 		+ Determines whether or not the password is currently visible. Only applies to password input types. + + boolean + + false +
+ noSpinButtons + +
+ + + no-spin-buttons + + + 		Hides the browser’s built-in increment/decrement spin buttons for number inputs. + boolean + + false +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + Makes the input a required field. + + + boolean + + false +
+ pattern + A regular expression pattern to validate input against. + string + -
+ minlength + The minimum length of input that will be considered valid. + number + -
+ maxlength + The maximum length of input that will be considered valid. + number + -
+ min + The input’s minimum value. Only applies to date and number input types. + number | string + -
+ max + The input’s maximum value. Only applies to date and number input types. + number | string + -
+ step + + Specifies the granularity that the value must adhere to, or the special value any which + means no stepping is implied, allowing any numeric value. Only applies to date and number input + types. + + number | 'any' + -
+ autocapitalize + + Controls whether and how text input is automatically capitalized as it is entered by the user. + + 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' + -
+ autocorrect + Indicates whether the browser’s autocorrect feature is on or off. + 'off' | 'on' + -
+ autocomplete + + Specifies what permission the browser has to provide assistance in filling out form field values. + Refer to + this page on MDN + for available values. + + string + -
+ autofocus + Indicates that the input should receive focus on page load. + boolean + -
+ enterkeyhint + Used to customize the label or icon of the Enter key on virtual keyboards. + 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' + -
+ spellcheck + Enables spell checking on the input. + boolean + + true +
+ inputmode + + Tells the browser what type of data will be entered by the user, allowing it to display the + appropriate virtual keyboard on supportive devices. + + 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' + -
+ valueAsDate + + Gets or sets the current value as a Date object. Returns null if the value + can’t be converted. This will use the native + <input type="{{type}}"> implementation and may result in an error. + --
+ valueAsNumber + + Gets or sets the current value as a number. Returns NaN if the value can’t be + converted. + --
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the control loses focus.-
sl-changeonSlChangeEmitted when an alteration to the control’s value is committed by the user.-
sl-clearonSlClearEmitted when the clear button is activated.-
sl-focusonSlFocusEmitted when the control gains focus.-
sl-inputonSlInputEmitted when the control receives input.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
focus()Sets focus on the input. + options: FocusOptions +
blur()Removes focus from the input.-
select()Selects all the text in the input.-
setSelectionRange()Sets the start and end positions of the text selection (0-based). + + selectionStart: number, selectionEnd: number, selectionDirection: 'forward' | 'backward' | 'none' + +
setRangeText()Replaces a range of text with a new string. + + replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | + 'preserve' + +
showPicker() + Displays the browser picker for an input element (only works if the browser supports it for the + input type). + -
stepUp()Increments the value of a numeric input type by the value of the step attribute.-
stepDown()Decrements the value of a numeric input type by the value of the step attribute.-
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
form-controlThe form control that wraps the label, input, and help text.
form-control-labelThe label’s wrapper.
form-control-inputThe input’s wrapper.
form-control-help-textThe help text’s wrapper.
baseThe component’s base wrapper.
inputThe internal <input> control.
prefixThe container that wraps the prefix.
clear-buttonThe clear button.
password-toggle-buttonThe password toggle button.
suffixThe container that wraps the suffix.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/menu-item/index.html b/components/menu-item/index.html new file mode 100644 index 00000000..cac851d9 --- /dev/null +++ b/components/menu-item/index.html @@ -0,0 +1,1522 @@ + + + + + + + Menu Item + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Menu Item

+ +
+ <sl-menu-item> | SlMenuItem +
+ +
+ Since 2.0 + stable +
+
+ +

Menu items provide options for the user to pick from in a menu.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + Checkbox + Disabled + + + Prefix Icon + + + + Suffix Icon + + + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item>Option 1</sl-menu-item>
+  <sl-menu-item>Option 2</sl-menu-item>
+  <sl-menu-item>Option 3</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item type="checkbox" checked>Checkbox</sl-menu-item>
+  <sl-menu-item disabled>Disabled</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item>
+    Prefix Icon
+    <sl-icon slot="prefix" name="gift"></sl-icon>
+  </sl-menu-item>
+  <sl-menu-item>
+    Suffix Icon
+    <sl-icon slot="suffix" name="heart"></sl-icon>
+  </sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem type="checkbox" checked>
+      Checkbox
+    </SlMenuItem>
+    <SlMenuItem disabled>Disabled</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem>
+      Prefix Icon
+      <SlIcon slot="prefix" name="gift" />
+    </SlMenuItem>
+    <SlMenuItem>
+      Suffix Icon
+      <SlIcon slot="suffix" name="heart" />
+    </SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Prefix & Suffix +

+

+ Add content to the start and end of menu items using the prefix and suffix slots. +

+ +
+
+ + + + Home + + + + + Messages + 12 + + + + + + + Settings + + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
+    Home
+  </sl-menu-item>
+
+  <sl-menu-item>
+    <sl-icon slot="prefix" name="envelope"></sl-icon>
+    Messages
+    <sl-badge slot="suffix" variant="primary" pill>12</sl-badge>
+  </sl-menu-item>
+
+  <sl-divider></sl-divider>
+
+  <sl-menu-item>
+    <sl-icon slot="prefix" name="gear"></sl-icon>
+    Settings
+  </sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlBadge from '@onsonr/nebula/dist/react/badge';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="house" />
+      Home
+    </SlMenuItem>
+
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="envelope" />
+      Messages
+      <SlBadge slot="suffix" variant="primary" pill>
+        12
+      </SlBadge>
+    </SlMenuItem>
+
+    <SlDivider />
+
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="gear" />
+      Settings
+    </SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Add the disabled attribute to disable the menu item so it cannot be selected.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item>Option 1</sl-menu-item>
+  <sl-menu-item disabled>Option 2</sl-menu-item>
+  <sl-menu-item>Option 3</sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem disabled>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Loading +

+

+ Use the loading attribute to indicate that a menu item is busy. Like a disabled menu item, + clicks will be suppressed until the loading state is removed. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item>Option 1</sl-menu-item>
+  <sl-menu-item loading>Option 2</sl-menu-item>
+  <sl-menu-item>Option 3</sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem loading>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Checkbox Menu Items +

+

+ Set the type attribute to checkbox to create a menu item that will toggle on and + off when selected. You can use the checked attribute to set the initial state. +

+

+ Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is + primarily inferred from context, much like you’d find in the menu of a native app. +

+ +
+
+ + Autosave + Check Spelling + Word Wrap + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item type="checkbox">Autosave</sl-menu-item>
+  <sl-menu-item type="checkbox" checked>Check Spelling</sl-menu-item>
+  <sl-menu-item type="checkbox">Word Wrap</sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem type="checkbox">Autosave</SlMenuItem>
+    <SlMenuItem type="checkbox" checked>
+      Check Spelling
+    </SlMenuItem>
+    <SlMenuItem type="checkbox">Word Wrap</SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Value & Selection +

+

+ The value attribute can be used to assign a hidden value, such as a unique identifier, to a + menu item. When an item is selected, the sl-select event will be emitted and a reference to the + item will be available at event.detail.item. You can use this reference to access the selected + item’s value, its checked state, and more. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + Checkbox 4 + Checkbox 5 + Checkbox 6 + + + + +
+ +
+
+ +
+
+ 
<sl-menu class="menu-value" style="max-width: 200px;">
+  <sl-menu-item value="opt-1">Option 1</sl-menu-item>
+  <sl-menu-item value="opt-2">Option 2</sl-menu-item>
+  <sl-menu-item value="opt-3">Option 3</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item type="checkbox" value="opt-4">Checkbox 4</sl-menu-item>
+  <sl-menu-item type="checkbox" value="opt-5">Checkbox 5</sl-menu-item>
+  <sl-menu-item type="checkbox" value="opt-6">Checkbox 6</sl-menu-item>
+</sl-menu>
+
+<script>
+  const menu = document.querySelector('.menu-value');
+
+  menu.addEventListener('sl-select', event => {
+    const item = event.detail.item;
+
+    // Log value
+    if (item.type === 'checkbox') {
+      console.log(`Selected value: ${item.value} (${item.checked ? 'checked' : 'unchecked'})`);
+    } else {
+      console.log(`Selected value: ${item.value}`);
+    }
+  });
+</script>
+
+
+ +
+ 
import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => {
+  function handleSelect(event) {
+    const item = event.detail.item;
+
+    // Toggle checked state
+    item.checked = !item.checked;
+
+    // Log value
+    console.log(`Selected value: ${item.value}`);
+  }
+
+  return (
+    <SlMenu style={{ maxWidth: '200px' }} onSlSelect={handleSelect}>
+      <SlMenuItem value="opt-1">Option 1</SlMenuItem>
+      <SlMenuItem value="opt-2">Option 2</SlMenuItem>
+      <SlMenuItem value="opt-3">Option 3</SlMenuItem>
+    </SlMenu>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/menu-item/menu-item.js';
+ + + +

To import this component as a React component:

+ 
import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The menu item’s label.
+ prefix + Used to prepend an icon or similar element to the menu item.
+ suffix + Used to append an icon or similar element to the menu item.
+ submenu + Used to denote a nested menu.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ type + + The type of menu item to render. To use checked, this value must be set to + checkbox. + + 'normal' | 'checkbox' + + 'normal' +
+ checked + Draws the item in a checked state. + + + boolean + + false +
+ value + + A unique value to store in the menu item. This can be used as a way to identify menu items when + selected. + + string + + '' +
+ loading + Draws the menu item in a loading state. + + + boolean + + false +
+ disabled + Draws the menu item in a disabled state, preventing selection. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionArguments
getTextLabel()Returns a text label based on the contents of the menu item’s default slot.-
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionDefault
--submenu-offsetThe distance submenus shift to overlap the parent menu.-2px
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
checked-iconThe checked icon, which is only visible when the menu item is checked.
prefixThe prefix container.
labelThe menu item label.
suffixThe suffix container.
spinnerThe spinner that shows when the menu item is in the loading state.
spinner__baseThe spinner’s base part.
submenu-iconThe submenu icon, visible only when the menu item has a submenu (not yet implemented).
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-popup>
    • + +
  • <sl-spinner>
    • +
+
+
+
+ + diff --git a/components/menu-label/index.html b/components/menu-label/index.html new file mode 100644 index 00000000..750fcab1 --- /dev/null +++ b/components/menu-label/index.html @@ -0,0 +1,675 @@ + + + + + + + Menu Label + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Menu Label

+ +
+ <sl-menu-label> | SlMenuLabel +
+ +
+ Since 2.0 + stable +
+
+ +

Menu labels are used to describe a group of menu items.

+ +
+
+ + Fruits + Apple + Banana + Orange + + Vegetables + Broccoli + Carrot + Zucchini + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-label>Fruits</sl-menu-label>
+  <sl-menu-item value="apple">Apple</sl-menu-item>
+  <sl-menu-item value="banana">Banana</sl-menu-item>
+  <sl-menu-item value="orange">Orange</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-label>Vegetables</sl-menu-label>
+  <sl-menu-item value="broccoli">Broccoli</sl-menu-item>
+  <sl-menu-item value="carrot">Carrot</sl-menu-item>
+  <sl-menu-item value="zucchini">Zucchini</sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuLabel from '@onsonr/nebula/dist/react/menu-label';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuLabel>Fruits</SlMenuLabel>
+    <SlMenuItem value="apple">Apple</SlMenuItem>
+    <SlMenuItem value="banana">Banana</SlMenuItem>
+    <SlMenuItem value="orange">Orange</SlMenuItem>
+    <SlDivider />
+    <SlMenuLabel>Vegetables</SlMenuLabel>
+    <SlMenuItem value="broccoli">Broccoli</SlMenuItem>
+    <SlMenuItem value="carrot">Carrot</SlMenuItem>
+    <SlMenuItem value="zucchini">Zucchini</SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/menu-label/menu-label.js';
+ + + +

To import this component as a React component:

+ 
import SlMenuLabel from '@onsonr/nebula/dist/react/menu-label';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The menu label’s content.
+
+ +

+ Learn more about using slots. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/menu/index.html b/components/menu/index.html new file mode 100644 index 00000000..88b4fbfa --- /dev/null +++ b/components/menu/index.html @@ -0,0 +1,952 @@ + + + + + + + Menu + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Menu

+ +
+ <sl-menu> | SlMenu +
+ +
+ Since 2.0 + stable +
+
+ +

Menus provide a list of options for the user to choose from.

+ +

+ You can use menu items, + menu labels, and dividers to compose + a menu. Menus support keyboard interactions, including type-to-select an option. +

+ +
+
+ + Undo + Redo + + Cut + Copy + Paste + Delete + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item value="undo">Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-menu-item value="delete">Delete</sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem value="undo">Undo</SlMenuItem>
+    <SlMenuItem value="redo">Redo</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="cut">Cut</SlMenuItem>
+    <SlMenuItem value="copy">Copy</SlMenuItem>
+    <SlMenuItem value="paste">Paste</SlMenuItem>
+    <SlMenuItem value="delete">Delete</SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ In Dropdowns +

+

Menus work really well when used inside dropdowns.

+ +
+
+ + Edit + + Cut + Copy + Paste + + + +
+ +
+
+ +
+
+ 
<sl-dropdown>
+  <sl-button slot="trigger" caret>Edit</sl-button>
+  <sl-menu>
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlDropdown>
+    <SlButton slot="trigger" caret>Edit</SlButton>
+    <SlMenu>
+      <SlMenuItem value="cut">Cut</SlMenuItem>
+      <SlMenuItem value="copy">Copy</SlMenuItem>
+      <SlMenuItem value="paste">Paste</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ To create a submenu, nest an <sl-menu slot="submenu"> in any + menu item. +

+ +
+
+ + Undo + Redo + + Cut + Copy + Paste + + + Find + + Find… + Find Next + Find Previous + + + + Transformations + + Make uppercase + Make lowercase + Capitalize + + + + +
+ +
+
+ +
+
+ 
<sl-menu style="max-width: 200px;">
+  <sl-menu-item value="undo">Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item>
+    Find
+    <sl-menu slot="submenu">
+      <sl-menu-item value="find">Find…</sl-menu-item>
+      <sl-menu-item value="find-previous">Find Next</sl-menu-item>
+      <sl-menu-item value="find-next">Find Previous</sl-menu-item>
+    </sl-menu>
+  </sl-menu-item>
+  <sl-menu-item>
+    Transformations
+    <sl-menu slot="submenu">
+      <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
+      <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
+      <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
+    </sl-menu>
+  </sl-menu-item>
+</sl-menu>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem value="undo">Undo</SlMenuItem>
+    <SlMenuItem value="redo">Redo</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="cut">Cut</SlMenuItem>
+    <SlMenuItem value="copy">Copy</SlMenuItem>
+    <SlMenuItem value="paste">Paste</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem>
+      Find
+      <SlMenu slot="submenu">
+        <SlMenuItem value="find">Find…</SlMenuItem>
+        <SlMenuItem value="find-previous">Find Next</SlMenuItem>
+        <SlMenuItem value="find-next">Find Previous</SlMenuItem>
+      </SlMenu>
+    </SlMenuItem>
+    <SlMenuItem>
+      Transformations
+      <SlMenu slot="submenu">
+        <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
+        <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
+        <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
+      </SlMenu>
+    </SlMenuItem>
+  </SlMenu>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/menu/menu.js';
+ + + +

To import this component as a React component:

+ 
import SlMenu from '@onsonr/nebula/dist/react/menu';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The menu’s content, including menu items, menu labels, and dividers.
+
+ +

+ Learn more about using slots. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-selectonSlSelectEmitted when a menu item is selected. + { item: SlMenuItem } +
+
+ +

+ Learn more about events. +

+
+
+
+ + diff --git a/components/mutation-observer/index.html b/components/mutation-observer/index.html new file mode 100644 index 00000000..90bd3d3a --- /dev/null +++ b/components/mutation-observer/index.html @@ -0,0 +1,1167 @@ + + + + + + + Mutation Observer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Mutation Observer

+ +
+ <sl-mutation-observer> | SlMutationObserver +
+ +
+ Since 2.0 + stable +
+
+ +

+ The Mutation Observer component offers a thin, declarative interface to the + MutationObserver API. +

+ +

+ The mutation observer will report changes to the content it wraps through the + sl-mutation event. When emitted, a collection of + MutationRecord + objects will be attached to event.detail that contains information about how it changed. +

+ +
+
+
+ + Click to mutate + + +
+ 👆 Click the button and watch the console + + + + +
+ +
+ +
+
+ +
+
+ 
<div class="mutation-overview">
+  <sl-mutation-observer attr="variant">
+    <sl-button variant="primary">Click to mutate</sl-button>
+  </sl-mutation-observer>
+
+  <br />
+  👆 Click the button and watch the console
+
+  <script>
+    const container = document.querySelector('.mutation-overview');
+    const mutationObserver = container.querySelector('sl-mutation-observer');
+    const button = container.querySelector('sl-button');
+    const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
+    let clicks = 0;
+
+    // Change the button's variant attribute
+    button.addEventListener('click', () => {
+      clicks++;
+      button.setAttribute('variant', variants[clicks % variants.length]);
+    });
+
+    // Log mutations
+    mutationObserver.addEventListener('sl-mutation', event => {
+      console.log(event.detail);
+    });
+  </script>
+
+  <style>
+    .mutation-overview sl-button {
+      margin-bottom: 1rem;
+    }
+  </style>
+</div>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlMutationObserver from '@onsonr/nebula/dist/react/mutation-observer';
+
+const css = `
+  .resize-observer-overview div {
+    display: flex;
+    border: solid 2px var(--sl-input-border-color);
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+`;
+
+const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
+let clicks = 0;
+
+const App = () => {
+  const [variant, setVariant] = useState('primary');
+
+  function handleClick() {
+    clicks++;
+    setVariant(variants[clicks % variants.length]);
+  }
+
+  return (
+    <>
+      <SlMutationObserver attr="*" onSlMutation={event => console.log(event.detail)}>
+        <SlButton variant={variant} onClick={handleClick}>
+          Click to mutate
+        </SlButton>
+      </SlMutationObserver>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Child List +

+

Use the child-list attribute to watch for new child elements that are added or removed.

+ +
+
+
+ +
+ Add button +
+ + + 👆 Add and remove buttons and watch the console + + + + +
+ +
+ +
+
+ +
+
+ 
<div class="mutation-child-list">
+  <sl-mutation-observer child-list>
+    <div class="buttons">
+      <sl-button variant="primary">Add button</sl-button>
+    </div>
+  </sl-mutation-observer>
+
+  👆 Add and remove buttons and watch the console
+
+  <script>
+    const container = document.querySelector('.mutation-child-list');
+    const mutationObserver = container.querySelector('sl-mutation-observer');
+    const buttons = container.querySelector('.buttons');
+    const button = container.querySelector('sl-button[variant="primary"]');
+    let i = 0;
+
+    // Add a button
+    button.addEventListener('click', () => {
+      const button = document.createElement('sl-button');
+      button.textContent = ++i;
+      buttons.append(button);
+    });
+
+    // Remove a button
+    buttons.addEventListener('click', event => {
+      const target = event.target.closest('sl-button:not([variant="primary"])');
+      event.stopPropagation();
+
+      if (target) {
+        target.remove();
+      }
+    });
+
+    // Log mutations
+    mutationObserver.addEventListener('sl-mutation', event => {
+      console.log(event.detail);
+    });
+  </script>
+
+  <style>
+    .mutation-child-list .buttons {
+      display: flex;
+      gap: 0.25rem;
+      flex-wrap: wrap;
+      margin-bottom: 1rem;
+    }
+  </style>
+</div>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlMutationObserver from '@onsonr/nebula/dist/react/mutation-observer';
+
+const css = `
+  .mutation-child-list .buttons {
+    display: flex;
+    gap: .25rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+  }
+`;
+
+let buttonCount = 0;
+
+const App = () => {
+  const [buttonIds, setButtonIds] = useState([]);
+
+  function addButton() {
+    setButtonIds([...buttonIds, ++buttonCount]);
+  }
+
+  function removeButton(id) {
+    setButtonIds(buttonIds.filter(i => i !== id));
+  }
+
+  return (
+    <>
+      <div className="mutation-child-list">
+        <SlMutationObserver child-list onSlMutation={event => console.log(event.detail)}>
+          <div className="buttons">
+            <SlButton variant="primary" onClick={addButton}>
+              Add button
+            </SlButton>
+            {buttonIds.map(id => (
+              <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
+                {id}
+              </SlButton>
+            ))}
+          </div>
+        </SlMutationObserver>
+      </div>
+      👆 Add and remove buttons and watch the console
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/mutation-observer/mutation-observer.js';
+ + + +

To import this component as a React component:

+ 
import SlMutationObserver from '@onsonr/nebula/dist/react/mutation-observer';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The content to watch for mutations.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ attr + + Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g. + attr="class id title". To watch all attributes, use *. + + + + string + -
+ attrOldValue + +
+ + + attr-old-value + + + 		+ Indicates whether or not the attribute’s previous value should be recorded when monitoring changes. + + + + boolean + + false +
+ charData + +
+ + + char-data + + + 		Watches for changes to the character data contained within the node. + + + boolean + + false +
+ charDataOldValue + +
+ + + char-data-old-value + + + 		Indicates whether or not the previous value of the node’s text should be recorded. + + + boolean + + false +
+ childList + +
+ + + child-list + + + 		Watches for the addition or removal of new child nodes. + + + boolean + + false +
+ disabled + Disables the observer. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-mutationonSlMutationEmitted when a mutation occurs. + { mutationList: MutationRecord[] } +
+
+ +

+ Learn more about events. +

+
+
+
+ + diff --git a/components/option/index.html b/components/option/index.html new file mode 100644 index 00000000..0a01712d --- /dev/null +++ b/components/option/index.html @@ -0,0 +1,1007 @@ + + + + + + + Option + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Option

+ +
+ <sl-option> | SlOption +
+ +
+ Since 2.0 + stable +
+
+ +

+ Options define the selectable items within various form controls such as + select. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select label="Select one">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Disabled +

+

Use the disabled attribute to disable an option and prevent it from being selected.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select label="Select one">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2" disabled>Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2" disabled>
+      Option 2
+    </SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prefix & Suffix +

+

+ Add icons to the start and end of menu items using the prefix and suffix slots. +

+ +
+
+ + + + Email + + + + + + Phone + + + + + + Chat + + + + +
+ +
+
+ +
+
+ 
<sl-select label="Select one">
+  <sl-option value="option-1">
+    <sl-icon slot="prefix" name="envelope"></sl-icon>
+    Email
+    <sl-icon slot="suffix" name="patch-check"></sl-icon>
+  </sl-option>
+
+  <sl-option value="option-2">
+    <sl-icon slot="prefix" name="telephone"></sl-icon>
+    Phone
+    <sl-icon slot="suffix" name="patch-check"></sl-icon>
+  </sl-option>
+
+  <sl-option value="option-3">
+    <sl-icon slot="prefix" name="chat-dots"></sl-icon>
+    Chat
+    <sl-icon slot="suffix" name="patch-check"></sl-icon>
+  </sl-option>
+</sl-select>
+
+
+
+ +
+ + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/option/option.js';
+ + + +

To import this component as a React component:

+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The option’s label.
+ prefix + Used to prepend an icon or similar element to the menu item.
+ suffix + Used to append an icon or similar element to the menu item.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + + The option’s value. When selected, the containing form control will receive this value. The value + must be unique from other options in the same group. Values may not contain spaces, as spaces are + used as delimiters when listing multiple values. + + + + string + + '' +
+ disabled + Draws the option in a disabled state, preventing selection. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionArguments
getTextLabel()Returns a plain text label based on the option’s content.-
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
checked-iconThe checked icon, an <sl-icon> element.
baseThe component’s base wrapper.
labelThe option’s label.
prefixThe container that wraps the prefix.
suffixThe container that wraps the suffix.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/popup/index.html b/components/popup/index.html new file mode 100644 index 00000000..e361d53a --- /dev/null +++ b/components/popup/index.html @@ -0,0 +1,4857 @@ + + + + + + + Popup + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Popup

+ +
+ <sl-popup> | SlPopup +
+ +
+ Since 2.0 + stable +
+
+ +

+ Popup is a utility that lets you declaratively anchor “popup” containers to another element. +

+ +

+ This component’s name is inspired by + <popup>. It uses + Floating UI + under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for + tooltips, dropdowns, and more. +

+

+ Popup doesn’t provide any styles — just positioning! The popup’s preferred placement, distance, and skidding + (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized + to your liking. Additional positioning options are available and described in more detail below. +

+ + +
+
+
+ + +
+ + +
+ + top + top-start + top-end + bottom + bottom-start + bottom-end + right + right-start + right-end + left + left-start + left-end + + + +
+ +
+ Active + Arrow +
+
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-overview">
+  <sl-popup placement="top" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <div class="popup-overview-options">
+    <sl-select label="Placement" name="placement" value="top" class="popup-overview-select">
+      <sl-option value="top">top</sl-option>
+      <sl-option value="top-start">top-start</sl-option>
+      <sl-option value="top-end">top-end</sl-option>
+      <sl-option value="bottom">bottom</sl-option>
+      <sl-option value="bottom-start">bottom-start</sl-option>
+      <sl-option value="bottom-end">bottom-end</sl-option>
+      <sl-option value="right">right</sl-option>
+      <sl-option value="right-start">right-start</sl-option>
+      <sl-option value="right-end">right-end</sl-option>
+      <sl-option value="left">left</sl-option>
+      <sl-option value="left-start">left-start</sl-option>
+      <sl-option value="left-end">left-end</sl-option>
+    </sl-select>
+    <sl-input type="number" name="distance" label="distance" value="0"></sl-input>
+    <sl-input type="number" name="skidding" label="Skidding" value="0"></sl-input>
+  </div>
+
+  <div class="popup-overview-options">
+    <sl-switch name="active" checked>Active</sl-switch>
+    <sl-switch name="arrow">Arrow</sl-switch>
+  </div>
+</div>
+
+<script>
+  const container = document.querySelector('.popup-overview');
+  const popup = container.querySelector('sl-popup');
+  const select = container.querySelector('sl-select[name="placement"]');
+  const distance = container.querySelector('sl-input[name="distance"]');
+  const skidding = container.querySelector('sl-input[name="skidding"]');
+  const active = container.querySelector('sl-switch[name="active"]');
+  const arrow = container.querySelector('sl-switch[name="arrow"]');
+
+  select.addEventListener('sl-change', () => (popup.placement = select.value));
+  distance.addEventListener('sl-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('sl-input', () => (popup.skidding = skidding.value));
+  active.addEventListener('sl-change', () => (popup.active = active.checked));
+  arrow.addEventListener('sl-change', () => (popup.arrow = arrow.checked));
+</script>
+
+<style>
+  .popup-overview sl-popup {
+    --arrow-color: var(--sl-color-primary-600);
+  }
+
+  .popup-overview span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-overview .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-overview-options {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: 1rem;
+  }
+
+  .popup-overview-options sl-select {
+    width: 160px;
+  }
+
+  .popup-overview-options sl-input {
+    width: 100px;
+  }
+
+  .popup-overview-options + .popup-overview-options {
+    margin-top: 1rem;
+  }
+</style>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+import SlInput from '@onsonr/nebula/dist/react/input';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-overview sl-popup {
+    --arrow-color: var(--sl-color-primary-600);
+  }
+
+  .popup-overview span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-overview .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-overview-options {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: 1rem;
+  }
+
+  .popup-overview-options sl-select {
+    width: 160px;
+  }
+
+  .popup-overview-options sl-input {
+    width: 100px;
+  }
+
+  .popup-overview-options + .popup-overview-options {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [placement, setPlacement] = useState('top');
+  const [distance, setDistance] = useState(0);
+  const [skidding, setSkidding] = useState(0);
+  const [active, setActive] = useState(true);
+  const [arrow, setArrow] = useState(false);
+
+  return (
+    <>
+      <div className="popup-overview">
+        <SlPopup
+          placement={placement}
+          active={active || null}
+          distance={distance}
+          skidding={skidding}
+          arrow={arrow || null}
+        >
+          <span slot="anchor" />
+          <div className="box" />
+        </SlPopup>
+
+        <div className="popup-overview-options">
+          <SlSelect
+            label="Placement"
+            name="placement"
+            value={placement}
+            className="popup-overview-select"
+            onSlChange={event => setPlacement(event.target.value)}
+          >
+            <SlMenuItem value="top">top</SlMenuItem>
+            <SlMenuItem value="top-start">top-start</SlMenuItem>
+            <SlMenuItem value="top-end">top-end</SlMenuItem>
+            <SlMenuItem value="bottom">bottom</SlMenuItem>
+            <SlMenuItem value="bottom-start">bottom-start</SlMenuItem>
+            <SlMenuItem value="bottom-end">bottom-end</SlMenuItem>
+            <SlMenuItem value="right">right</SlMenuItem>
+            <SlMenuItem value="right-start">right-start</SlMenuItem>
+            <SlMenuItem value="right-end">right-end</SlMenuItem>
+            <SlMenuItem value="left">left</SlMenuItem>
+            <SlMenuItem value="left-start">left-start</SlMenuItem>
+            <SlMenuItem value="left-end">left-end</SlMenuItem>
+          </SlSelect>
+          <SlInput
+            type="number"
+            name="distance"
+            label="distance"
+            value={distance}
+            onSlInput={event => setDistance(event.target.value)}
+          />
+          <SlInput
+            type="number"
+            name="skidding"
+            label="Skidding"
+            value={skidding}
+            onSlInput={event => setSkidding(event.target.value)}
+          />
+        </div>
+
+        <div className="popup-overview-options">
+          <SlSwitch checked={active} onSlChange={event => setActive(event.target.checked)}>
+            Active
+          </SlSwitch>
+          <SlSwitch checked={arrow} onSlChange={event => setArrow(event.target.checked)}>
+            Arrow
+          </SlSwitch>
+        </div>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Activating +

+

+ Popups are inactive and hidden until the active attribute is applied. Removing the attribute + will tear down all positioning logic and listeners, meaning you can have many idle popups on the page + without affecting performance. +

+ +
+
+
+ + +
+ + +
+ Active +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-active">
+  <sl-popup placement="top" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <br />
+  <sl-switch checked>Active</sl-switch>
+</div>
+
+<style>
+  .popup-active span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-active .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-active');
+  const popup = container.querySelector('sl-popup');
+  const active = container.querySelector('sl-switch');
+
+  active.addEventListener('sl-change', () => (popup.active = active.checked));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-active span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-active .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => {
+  const [active, setActive] = useState(true);
+
+  return (
+    <>
+      <div className="popup-active">
+        <SlPopup placement="top" active={active}>
+          <span slot="anchor" />
+          <div className="box" />
+        </SlPopup>
+
+        <br />
+        <SlSwitch checked={active} onSlChange={event => setActive(event.target.checked)}>
+          Active
+        </SlSwitch>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ External Anchors +

+

+ By default, anchors are slotted into the popup using the anchor slot. If your anchor needs to + live outside of the popup, you can pass the anchor’s id to the anchor attribute. + Alternatively, you can pass an element reference to the anchor property to achieve the same + effect without using an id. +

+ +
+
+ + + +
+ + + + +
+ +
+
+ +
+
+ 
<span id="external-anchor"></span>
+
+<sl-popup anchor="external-anchor" placement="top" active>
+  <div class="box"></div>
+</sl-popup>
+
+<style>
+  #external-anchor {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px 0 0 50px;
+  }
+
+  #external-anchor ~ sl-popup .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+</style>
+
+
+ +
+ 
import SlPopup from '@onsonr/nebula/dist/react/popup';
+
+const css = `
+  #external-anchor {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px 0 0 50px;
+  }
+
+  #external-anchor ~ sl-popup .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => {
+  return (
+    <>
+      <span id="external-anchor" />
+
+      <SlPopup anchor="external-anchor" placement="top" active>
+        <div class="box" />
+      </SlPopup>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Placement +

+

+ Use the placement attribute to tell the popup the preferred placement of the popup. Note that + the actual position will vary to ensure the panel remains in the viewport if you’re using positioning + features such as flip and shift. +

+

+ Since placement is preferred when using flip, you can observe the popup’s current placement + when it’s active by looking at the data-current-placement attribute. This attribute will update + as the popup flips to find available space and it will be removed when the popup is deactivated. +

+ +
+
+
+ + +
+ + + + top + top-start + top-end + bottom + bottom-start + bottom-end + right + right-start + right-end + left + left-start + left-end + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-placement">
+  <sl-popup placement="top" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <sl-select label="Placement" value="top">
+    <sl-option value="top">top</sl-option>
+    <sl-option value="top-start">top-start</sl-option>
+    <sl-option value="top-end">top-end</sl-option>
+    <sl-option value="bottom">bottom</sl-option>
+    <sl-option value="bottom-start">bottom-start</sl-option>
+    <sl-option value="bottom-end">bottom-end</sl-option>
+    <sl-option value="right">right</sl-option>
+    <sl-option value="right-start">right-start</sl-option>
+    <sl-option value="right-end">right-end</sl-option>
+    <sl-option value="left">left</sl-option>
+    <sl-option value="left-start">left-start</sl-option>
+    <sl-option value="left-end">left-end</sl-option>
+  </sl-select>
+</div>
+
+<style>
+  .popup-placement span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-placement .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-placement sl-select {
+    max-width: 280px;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-placement');
+  const popup = container.querySelector('sl-popup');
+  const select = container.querySelector('sl-select');
+
+  select.addEventListener('sl-change', () => (popup.placement = select.value));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const css = `
+  .popup-placement span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-placement .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-placement sl-select {
+    max-width: 280px;
+  }
+`;
+
+const App = () => {
+  const [placement, setPlacement] = useState('top');
+
+  return (
+    <div className="popup-active">
+      <div className="popup-placement">
+        <SlPopup placement={placement} active>
+          <span slot="anchor" />
+          <div className="box" />
+        </SlPopup>
+
+        <SlSelect label="Placement" value={placement} onSlChange={event => setPlacement(event.target.value)}>
+          <SlMenuItem value="top">top</SlMenuItem>
+          <SlMenuItem value="top-start">top-start</SlMenuItem>
+          <SlMenuItem value="top-end">top-end</SlMenuItem>
+          <SlMenuItem value="bottom">bottom</SlMenuItem>
+          <SlMenuItem value="bottom-start">bottom-start</SlMenuItem>
+          <SlMenuItem value="bottom-end">bottom-end</SlMenuItem>
+          <SlMenuItem value="right">right</SlMenuItem>
+          <SlMenuItem value="right-start">right-start</SlMenuItem>
+          <SlMenuItem value="right-end">right-end</SlMenuItem>
+          <SlMenuItem value="left">left</SlMenuItem>
+          <SlMenuItem value="left-start">left-start</SlMenuItem>
+          <SlMenuItem value="left-end">left-end</SlMenuItem>
+        </SlSelect>
+      </div>
+
+      <style>{css}</style>
+    </div>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Distance +

+

+ Use the distance attribute to change the distance between the popup and its anchor. A positive + value will move the popup further away and a negative value will move it closer. +

+ +
+
+
+ + +
+ + + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-distance">
+  <sl-popup placement="top" distance="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <sl-range min="-50" max="50" step="1" value="0" label="Distance"></sl-range>
+</div>
+
+<style>
+  .popup-distance span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-distance .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-distance sl-range {
+    max-width: 260px;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-distance');
+  const popup = container.querySelector('sl-popup');
+  const distance = container.querySelector('sl-range');
+
+  distance.addEventListener('sl-input', () => (popup.distance = distance.value));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlRange from '@onsonr/nebula/dist/react/range';
+
+const css = `
+  .popup-distance span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-distance .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-distance sl-range {
+    max-width: 260px;
+  }
+`;
+
+const App = () => {
+  const [distance, setDistance] = useState(0);
+
+  return (
+    <>
+      <div className="popup-distance">
+        <SlPopup placement="top" distance={distance} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </SlPopup>
+
+        <SlRange
+          label="Distance"
+          min="-50"
+          max="50"
+          step="1"
+          value={distance}
+          onSlChange={event => setDistance(event.target.value)}
+        />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Skidding +

+

+ The skidding attribute is similar to distance, but instead allows you to offset + the popup along the anchor’s axis. Both positive and negative values are allowed. +

+ +
+
+
+ + +
+ + + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-skidding">
+  <sl-popup placement="top" skidding="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <sl-range min="-50" max="50" step="1" value="0" label="Skidding"></sl-range>
+</div>
+
+<style>
+  .popup-skidding span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-skidding .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-skidding sl-range {
+    max-width: 260px;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-skidding');
+  const popup = container.querySelector('sl-popup');
+  const skidding = container.querySelector('sl-range');
+
+  skidding.addEventListener('sl-input', () => (popup.skidding = skidding.value));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlRange from '@onsonr/nebula/dist/react/range';
+
+const css = `
+  .popup-skidding span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-skidding .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-skidding sl-range {
+    max-width: 260px;
+  }
+`;
+
+const App = () => {
+  const [skidding, setSkidding] = useState(0);
+
+  return (
+    <>
+      <div className="popup-skidding">
+        <SlPopup placement="top" skidding={skidding} active>
+          <span slot="anchor"></span>
+          <div className="box"></div>
+        </SlPopup>
+
+        <SlRange
+          label="Skidding"
+          min="-50"
+          max="50"
+          step="1"
+          value={skidding}
+          onSlChange={event => setSkidding(event.target.value)}
+        />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

Arrows

+

+ Add an arrow to your popup with the arrow attribute. It’s usually a good idea to set a + distance to make room for the arrow. To adjust the arrow’s color and size, use the + --arrow-color and --arrow-size custom properties, respectively. You can also + target the arrow part to add additional styles such as shadows and borders. +

+

+ By default, the arrow will be aligned as close to the center of the anchor as possible, considering + available space and arrow-padding. You can use the arrow-placement attribute to + force the arrow to align to the start, end, or center of the popup instead. +

+ +
+
+
+ + +
+ + +
+ + top + top-start + top-end + bottom + bottom-start + bottom-end + right + right-start + right-end + left + left-start + left-end + + + + anchor + start + end + center + +
+ +
+ Arrow +
+ + + + +
+ +
+ +
+
+ +
+
+ 
<div class="popup-arrow">
+  <sl-popup placement="top" arrow arrow-placement="anchor" distance="8" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <div class="popup-arrow-options">
+    <sl-select label="Placement" name="placement" value="top" class="popup-overview-select">
+      <sl-option value="top">top</sl-option>
+      <sl-option value="top-start">top-start</sl-option>
+      <sl-option value="top-end">top-end</sl-option>
+      <sl-option value="bottom">bottom</sl-option>
+      <sl-option value="bottom-start">bottom-start</sl-option>
+      <sl-option value="bottom-end">bottom-end</sl-option>
+      <sl-option value="right">right</sl-option>
+      <sl-option value="right-start">right-start</sl-option>
+      <sl-option value="right-end">right-end</sl-option>
+      <sl-option value="left">left</sl-option>
+      <sl-option value="left-start">left-start</sl-option>
+      <sl-option value="left-end">left-end</sl-option>
+    </sl-select>
+
+    <sl-select label="Arrow Placement" name="arrow-placement" value="anchor">
+      <sl-option value="anchor">anchor</sl-option>
+      <sl-option value="start">start</sl-option>
+      <sl-option value="end">end</sl-option>
+      <sl-option value="center">center</sl-option>
+    </sl-select>
+  </div>
+
+  <div class="popup-arrow-options">
+    <sl-switch name="arrow" checked>Arrow</sl-switch>
+  </div>
+
+  <style>
+    .popup-arrow sl-popup {
+      --arrow-color: var(--sl-color-primary-600);
+    }
+
+    .popup-arrow span[slot='anchor'] {
+      display: inline-block;
+      width: 150px;
+      height: 150px;
+      border: dashed 2px var(--sl-color-neutral-600);
+      margin: 50px;
+    }
+
+    .popup-arrow .box {
+      width: 100px;
+      height: 50px;
+      background: var(--sl-color-primary-600);
+      border-radius: var(--sl-border-radius-medium);
+    }
+
+    .popup-arrow-options {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: end;
+      gap: 1rem;
+    }
+
+    .popup-arrow-options sl-select {
+      width: 160px;
+    }
+
+    .popup-arrow-options + .popup-arrow-options {
+      margin-top: 1rem;
+    }
+  </style>
+
+  <script>
+    const container = document.querySelector('.popup-arrow');
+    const popup = container.querySelector('sl-popup');
+    const placement = container.querySelector('[name="placement"]');
+    const arrowPlacement = container.querySelector('[name="arrow-placement"]');
+    const arrow = container.querySelector('[name="arrow"]');
+
+    placement.addEventListener('sl-change', () => (popup.placement = placement.value));
+    arrowPlacement.addEventListener('sl-change', () => (popup.arrowPlacement = arrowPlacement.value));
+    arrow.addEventListener('sl-change', () => (popup.arrow = arrow.checked));
+  </script>
+</div>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-arrow sl-popup {
+    --arrow-color: var(--sl-color-primary-600);
+  }
+
+  .popup-arrow span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-arrow .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-arrow-options {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: 1rem;
+  }
+
+  .popup-arrow-options sl-select {
+    width: 160px;
+  }
+
+  .popup-arrow-options + .popup-arrow-options {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [placement, setPlacement] = useState('top');
+  const [arrowPlacement, setArrowPlacement] = useState('anchor');
+  const [arrow, setArrow] = useState(true);
+
+  return (
+    <>
+      <div className="popup-arrow">
+        <SlPopup placement={placement} arrow={arrow || null} arrow-placement={arrowPlacement} distance="8" active>
+          <span slot="anchor" />
+          <div className="box" />
+        </SlPopup>
+
+        <div className="popup-arrow-options">
+          <SlSelect
+            label="Placement"
+            name="placement"
+            value={placement}
+            className="popup-overview-select"
+            onSlChange={event => setPlacement(event.target.value)}
+          >
+            <SlMenuItem value="top">top</SlMenuItem>
+            <SlMenuItem value="top-start">top-start</SlMenuItem>
+            <SlMenuItem value="top-end">top-end</SlMenuItem>
+            <SlMenuItem value="bottom">bottom</SlMenuItem>
+            <SlMenuItem value="bottom-start">bottom-start</SlMenuItem>
+            <SlMenuItem value="bottom-end">bottom-end</SlMenuItem>
+            <SlMenuItem value="right">right</SlMenuItem>
+            <SlMenuItem value="right-start">right-start</SlMenuItem>
+            <SlMenuItem value="right-end">right-end</SlMenuItem>
+            <SlMenuItem value="left">left</SlMenuItem>
+            <SlMenuItem value="left-start">left-start</SlMenuItem>
+            <SlMenuItem value="left-end">left-end</SlMenuItem>
+          </SlSelect>
+
+          <SlSelect
+            label="Arrow Placement"
+            name="arrow-placement"
+            value={arrowPlacement}
+            onSlChange={event => setArrowPlacement(event.target.value)}
+          >
+            <SlMenuItem value="anchor">anchor</SlMenuItem>
+            <SlMenuItem value="start">start</SlMenuItem>
+            <SlMenuItem value="end">end</SlMenuItem>
+            <SlMenuItem value="center">center</SlMenuItem>
+          </SlSelect>
+        </div>
+
+        <div className="popup-arrow-options">
+          <SlSwitch name="arrow" checked={arrow} onSlChange={event => setArrow(event.target.checked)}>
+            Arrow
+          </SlSwitch>
+        </div>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Syncing with the Anchor’s Dimensions +

+

+ Use the sync attribute to make the popup the same width or height as the anchor element. This + is useful for controls that need the popup to stay the same width or height as the trigger. +

+ +
+
+
+ + +
+ + + + Width + Height + Both + None + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-sync">
+  <sl-popup placement="top" sync="width" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <sl-select value="width" label="Sync">
+    <sl-option value="width">Width</sl-option>
+    <sl-option value="height">Height</sl-option>
+    <sl-option value="both">Both</sl-option>
+    <sl-option value="">None</sl-option>
+  </sl-select>
+</div>
+
+<style>
+  .popup-sync span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-sync .box {
+    width: 100%;
+    height: 100%;
+    min-width: 50px;
+    min-height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-sync sl-select {
+    width: 160px;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-sync');
+  const popup = container.querySelector('sl-popup');
+  const fixed = container.querySelector('sl-switch');
+  const sync = container.querySelector('sl-select');
+
+  sync.addEventListener('sl-change', () => (popup.sync = sync.value));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const css = `
+  .popup-sync span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-sync .box {
+    width: 100%;
+    height: 100%;
+    min-width: 50px;
+    min-height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-sync sl-switch {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [sync, setSync] = useState('width');
+
+  return (
+    <>
+      <div class="popup-sync">
+        <SlPopup placement="top" sync={sync} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </SlPopup>
+
+        <SlSelect value={sync} label="Sync" onSlChange={event => setSync(event.target.value)}>
+          <SlMenuItem value="width">Width</SlMenuItem>
+          <SlMenuItem value="height">Height</SlMenuItem>
+          <SlMenuItem value="both">Both</SlMenuItem>
+          <SlMenuItem value="">None</SlMenuItem>
+        </SlSelect>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Positioning Strategy +

+

+ By default, the popup is positioned using an absolute positioning strategy. However, if your anchor is fixed + or exists within a container that has overflow: auto|hidden, the popup risks being clipped. To + work around this, you can use a fixed positioning strategy by setting the strategy attribute to + fixed. +

+

+ The fixed positioning strategy reduces jumpiness when the anchor is fixed and allows the popup to break out + containers that clip. When using this strategy, it’s important to note that the content will be positioned + relative to its + containing block, which is usually the viewport unless an ancestor uses a transform, perspective, + or filter. + Refer to this page + for more details. +

+

+ In this example, you can see how the popup breaks out of the overflow container when it’s fixed. The fixed + positioning strategy tends to be less performant than absolute, so avoid using it unnecessarily. +

+

Toggle the switch and scroll the container to see the difference.

+ +
+
+
+
+ + +
+ +
+ + Fixed +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-strategy">
+  <div class="overflow">
+    <sl-popup placement="top" strategy="fixed" active>
+      <span slot="anchor"></span>
+      <div class="box"></div>
+    </sl-popup>
+  </div>
+
+  <sl-switch checked>Fixed</sl-switch>
+</div>
+
+<style>
+  .popup-strategy .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-strategy span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 150px 50px;
+  }
+
+  .popup-strategy .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-strategy sl-switch {
+    margin-top: 1rem;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-strategy');
+  const popup = container.querySelector('sl-popup');
+  const fixed = container.querySelector('sl-switch');
+
+  fixed.addEventListener('sl-change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-strategy .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-strategy span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 150px 50px;
+  }
+
+  .popup-strategy .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-strategy sl-switch {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [fixed, setFixed] = useState(true);
+
+  return (
+    <>
+      <div className="popup-strategy">
+        <div className="overflow">
+          <SlPopup placement="top" strategy={fixed ? 'fixed' : 'absolute'} active>
+            <span slot="anchor" />
+            <div className="box" />
+          </SlPopup>
+        </div>
+
+        <SlSwitch checked={fixed} onSlChange={event => setFixed(event.target.checked)}>
+          Fixed
+        </SlSwitch>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

Flip

+

+ When the popup doesn’t have enough room in its preferred placement, it can automatically flip to keep it in + view. To enable this, use the flip attribute. By default, the popup will flip to the opposite + placement, but you can configure preferred fallback placements using + flip-fallback-placement and flip-fallback-strategy. Additional options are + available to control the flip behavior’s boundary and padding. +

+

Scroll the container to see how the popup flips to prevent clipping.

+ +
+
+
+
+ + +
+ +
+ +
+ Flip +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-flip">
+  <div class="overflow">
+    <sl-popup placement="top" flip active>
+      <span slot="anchor"></span>
+      <div class="box"></div>
+    </sl-popup>
+  </div>
+
+  <br />
+  <sl-switch checked>Flip</sl-switch>
+</div>
+
+<style>
+  .popup-flip .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-flip span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 150px 50px;
+  }
+
+  .popup-flip .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-flip');
+  const popup = container.querySelector('sl-popup');
+  const flip = container.querySelector('sl-switch');
+
+  flip.addEventListener('sl-change', () => (popup.flip = flip.checked));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-flip .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-flip span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 150px 50px;
+  }
+
+  .popup-flip .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => {
+  const [flip, setFlip] = useState(true);
+
+  return (
+    <>
+      <div className="popup-flip">
+        <div className="overflow">
+          <SlPopup placement="top" flip={flip} active>
+            <span slot="anchor" />
+            <div className="box" />
+          </SlPopup>
+        </div>
+
+        <br />
+        <SlSwitch checked={flip} onSlChange={event => setFlip(event.target.checked)}>
+          Flip
+        </SlSwitch>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Flip Fallbacks +

+

+ While using the flip attribute, you can customize the placement of the popup when the preferred + placement doesn’t have room. For this, use flip-fallback-placements and + flip-fallback-strategy. +

+

+ If the preferred placement doesn’t have room, the first suitable placement found in + flip-fallback-placement will be used. The value of this attribute must be a string including + any number of placements separated by a space, e.g. "right bottom". +

+

+ If no fallback placement works, the final placement will be determined by + flip-fallback-strategy. This value can be either initial (default), where the + placement reverts to the position in placement, or best-fit, where the placement + is chosen based on available space. +

+

Scroll the container to see how the popup changes it’s fallback placement to prevent clipping.

+ +
+
+
+
+ + +
+ +
+
+ + + +
+ +
+
+ +
+
+ 
<div class="popup-flip-fallbacks">
+  <div class="overflow">
+    <sl-popup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active>
+      <span slot="anchor"></span>
+      <div class="box"></div>
+    </sl-popup>
+  </div>
+</div>
+
+<style>
+  .popup-flip-fallbacks .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-flip-fallbacks span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 250px 50px;
+  }
+
+  .popup-flip-fallbacks .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+</style>
+
+
+ +
+ 
import SlPopup from '@onsonr/nebula/dist/react/popup';
+
+const css = `
+  .popup-flip-fallbacks .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-flip-fallbacks span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 250px 50px;
+  }
+
+  .popup-flip-fallbacks .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => {
+  return (
+    <>
+      <div className="popup-flip-fallbacks">
+        <div className="overflow">
+          <SlPopup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active>
+            <span slot="anchor" />
+            <div className="box" />
+          </SlPopup>
+        </div>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

Shift

+

+ When a popup is longer than its anchor, it risks being clipped by an overflowing container. In this case, + use the shift attribute to shift the popup along its axis and back into view. You can customize + the shift behavior using shiftBoundary and shift-padding. +

+

Toggle the switch to see the difference.

+ +
+
+
+
+ + +
+ +
+ + Shift +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-shift">
+  <div class="overflow">
+    <sl-popup placement="top" shift shift-padding="10" active>
+      <span slot="anchor"></span>
+      <div class="box"></div>
+    </sl-popup>
+  </div>
+
+  <sl-switch checked>Shift</sl-switch>
+</div>
+
+<style>
+  .popup-shift .overflow {
+    position: relative;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-shift span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 60px 0 0 10px;
+  }
+
+  .popup-shift .box {
+    width: 300px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-shift');
+  const popup = container.querySelector('sl-popup');
+  const shift = container.querySelector('sl-switch');
+
+  shift.addEventListener('sl-change', () => (popup.shift = shift.checked));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-shift .overflow {
+    position: relative;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-shift span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 60px 0 0 10px;
+  }
+
+  .popup-shift .box {
+    width: 300px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => {
+  const [shift, setShift] = useState(true);
+
+  return (
+    <>
+      <div className="popup-shift">
+        <div className="overflow">
+          <SlPopup placement="top" shift={shift} shift-padding="10" active>
+            <span slot="anchor" />
+            <div className="box" />
+          </SlPopup>
+        </div>
+
+        <SlSwitch checked={shift} onSlChange={event => setShift(event.target.checked)}>
+          Shift
+        </SlSwitch>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Auto-size +

+

+ Use the auto-size attribute to tell the popup to resize when necessary to prevent it from + getting clipped. Possible values are horizontal, vertical, and both. + You can use autoSizeBoundary and auto-size-padding to customize the behavior of + this option. Auto-size works well with flip, but if you’re using + auto-size-padding make sure flip-padding is the same value. +

+

+ When using auto-size, one or both of --auto-size-available-width and + --auto-size-available-height will be applied to the host element. These values determine the + available space the popover has before clipping will occur. Since they cascade, you can use them to set a + max-width/height on your popup’s content and easily control its overflow. +

+

Scroll the container to see the popup resize as its available space changes.

+ +
+
+
+
+ + +
+ +
+ +
+ Auto-size +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-auto-size">
+  <div class="overflow">
+    <sl-popup placement="top" auto-size="both" auto-size-padding="10" active>
+      <span slot="anchor"></span>
+      <div class="box"></div>
+    </sl-popup>
+  </div>
+
+  <br />
+  <sl-switch checked>Auto-size</sl-switch>
+</div>
+
+<style>
+  .popup-auto-size .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-auto-size span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 250px 50px 100px 50px;
+  }
+
+  .popup-auto-size .box {
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+
+    /* This sets the preferred size of the popup's content */
+    width: 100px;
+    height: 200px;
+
+    /* This sets the maximum dimensions and allows scrolling when auto-size kicks in */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+    overflow: auto;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-auto-size');
+  const popup = container.querySelector('sl-popup');
+  const autoSize = container.querySelector('sl-switch');
+
+  autoSize.addEventListener('sl-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-auto-size .overflow {
+    position: relative;
+    height: 300px;
+    border: solid 2px var(--sl-color-neutral-200);
+    overflow: auto;
+  }
+
+  .popup-auto-size span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 250px 50px 100px 50px;
+  }
+
+  .popup-auto-size .box {
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+
+    /* This sets the preferred size of the popup's content */
+    width: 100px;
+    height: 200px;
+
+    /* This sets the maximum dimensions and allows scrolling when auto-size kicks in */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+    overflow: auto;
+  }
+`;
+
+const App = () => {
+  const [autoSize, setAutoSize] = useState(true);
+
+  return (
+    <>
+      <div className="popup-auto-size">
+        <div className="overflow">
+          <SlPopup placement="top" auto-size={autoSize ? 'both' || null} auto-size-padding="10" active>
+            <span slot="anchor" />
+            <div className="box" />
+          </SlPopup>
+        </div>
+
+        <br />
+        <SlSwitch checked={autoSize} onSlChange={event => setAutoSize(event.target.checked)}>
+          Auto-size
+        </SlSwitch>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Hover Bridge +

+

+ When a gap exists between the anchor and the popup element, this option will add a “hover bridge” that fills + the gap using an invisible element. This makes listening for events such as mouseover and + mouseout more sane because the pointer never technically leaves the element. The hover bridge + will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is + shown in orange. +

+ +
+
+
+ + +
+ + +
+ Hover Bridge
+ + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-hover-bridge">
+  <sl-popup placement="top" hover-bridge distance="10" skidding="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </sl-popup>
+
+  <br>
+  <sl-switch checked>Hover Bridge</sl-switch><br>
+  <sl-range min="0" max="50" step="1" value="10" label="Distance"></sl-range>
+  <sl-range min="-50" max="50" step="1" value="0" label="Skidding"></sl-range>
+</div>
+
+<style>
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-hover-bridge sl-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge sl-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.popup-hover-bridge');
+  const popup = container.querySelector('sl-popup');
+  const hoverBridge = container.querySelector('sl-switch');
+  const distance = container.querySelector('sl-range[label="Distance"]');
+  const skidding = container.querySelector('sl-range[label="Skidding"]');
+
+  distance.addEventListener('sl-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('sl-input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('sl-change', () => (popup.hoverBridge = hoverBridge.checked));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlRange from '@onsonr/nebula/dist/react/range';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--sl-color-neutral-600);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--sl-color-primary-600);
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .popup-hover-bridge sl-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge sl-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+`;
+
+const App = () => {
+  const [hoverBridge, setHoverBridge] = useState(true);
+  const [distance, setDistance] = useState(10);
+  const [skidding, setSkidding] = useState(0);
+
+  return (
+    <>
+      <div class="popup-hover-bridge">
+        <SlPopup placement="top" hover-bridge={hoverBridge} distance={distance} skidding={skidding} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </SlPopup>
+
+        <br />
+        <SlSwitch
+          checked={hoverBridge}
+          onSlChange={event => setHoverBridge(event.target.checked)}
+         >
+          Hover Bridge
+        </SlSwitch><br />
+        <SlRange
+          min="0"
+          max="50"
+          step="1"
+          value={distance}
+          label="Distance"
+          onSlInput={event => setDistance(event.target.value)}
+        />
+        <SlRange
+          min="-50"
+          max="50"
+          step="1"
+          value={skidding}
+          label="Skidding"
+          onSlInput={event => setSkidding(event.target.value)}
+        />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Virtual Elements +

+

+ In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a + non-element. To do this, you can pass a VirtualElement to the anchor property. A virtual + element must contain a function called getBoundingClientRect() that returns a + DOMRect + object as shown below. +

+ 
const virtualElement = {
+  getBoundingClientRect() {
+    // ...
+    return { width, height, x, y, top, left, right, bottom };
+  }
+};
+
+

+ This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to + properly view it. +

+ +
+
+
+ +
+ + + Highlight mouse cursor +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="popup-virtual-element">
+  <sl-popup placement="right-start">
+    <div class="circle"></div>
+  </sl-popup>
+
+  <sl-switch>Highlight mouse cursor</sl-switch>
+</div>
+
+<script>
+  const container = document.querySelector('.popup-virtual-element');
+  const popup = container.querySelector('sl-popup');
+  const circle = container.querySelector('.circle');
+  const enabled = container.querySelector('sl-switch');
+  let clientX = 0;
+  let clientY = 0;
+
+  // Set the virtual element as a property
+  popup.anchor = {
+    getBoundingClientRect() {
+      return {
+        width: 0,
+        height: 0,
+        x: clientX,
+        y: clientY,
+        top: clientY,
+        left: clientX,
+        right: clientX,
+        bottom: clientY
+      };
+    }
+  };
+
+  // Only activate the popup when the switch is checked
+  enabled.addEventListener('sl-change', () => {
+    popup.active = enabled.checked;
+  });
+
+  // Listen for the mouse to move
+  document.addEventListener('mousemove', handleMouseMove);
+
+  // Update the virtual element as the mouse moves
+  function handleMouseMove(event) {
+    clientX = event.clientX;
+    clientY = event.clientY;
+
+    // Reposition the popup when the virtual anchor moves
+    if (popup.active) {
+      popup.reposition();
+    }
+  }
+</script>
+
+<style>
+  /* If you need to set a z-index, set it on the popup part like this */
+  .popup-virtual-element sl-popup::part(popup) {
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .popup-virtual-element .circle {
+    width: 100px;
+    height: 100px;
+    border: solid 4px var(--sl-color-primary-600);
+    border-radius: 50%;
+    translate: -50px -50px;
+    animation: 1s virtual-cursor infinite;
+  }
+
+  @keyframes virtual-cursor {
+    0% { scale: 1; }
+    50% { scale: 1.1; }
+  }
+</style>
+
+
+ +
+ 
import { useRef, useState } from 'react';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const css = `
+  /* If you need to set a z-index, set it on the popup part like this */
+  .popup-virtual-element sl-popup::part(popup) {
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .popup-virtual-element .circle {
+    width: 100px;
+    height: 100px;
+    border: solid 4px var(--sl-color-primary-600);
+    border-radius: 50%;
+    translate: -50px -50px;
+    animation: 1s virtual-cursor infinite;
+  }
+
+  @keyframes virtual-cursor {
+    0% { scale: 1; }
+    50% { scale: 1.1; }
+  }
+`;
+
+const App = () => {
+  const [enabled, setEnabled] = useState(false);
+  const [clientX, setClientX] = useState(0);
+  const [clientY, setClientY] = useState(0);
+  const popup = useRef(null);
+  const circle = useRef(null);
+  const virtualElement = {
+    getBoundingClientRect() {
+      return {
+        width: 0,
+        height: 0,
+        x: clientX,
+        y: clientY,
+        top: clientY,
+        left: clientX,
+        right: clientX,
+        bottom: clientY
+      };
+    }
+  };
+
+  // Listen for the mouse to move
+  document.addEventListener('mousemove', handleMouseMove);
+
+  // Update the virtual element as the mouse moves
+  function handleMouseMove(event) {
+    setClientX(event.clientX);
+    setClientY(event.clientY);
+
+    // Reposition the popup when the virtual anchor moves
+    if (popup.active) {
+      popup.current.reposition();
+    }
+  }
+
+  return (
+    <>
+      <div className="popup-virtual-element">
+        <SlPopup
+          ref={popup}
+          placement="right-start"
+          active={enabled}
+          anchor={virtualElement}
+        >
+          <div ref={circle} className="circle" />
+        </SlPopup>
+
+        <SlSwitch checked={enabled} onSlChange={event => setEnabled(event.target.checked)}>
+          Highlight mouse cursor
+        </SlSwitch>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Sometimes the getBoundingClientRects might be derived from a real element. In this case provide + the anchor element as context to ensure clipping and position updates for the popup work well. +

+ 
const virtualElement = {
+  getBoundingClientRect() {
+    // ...
+    return { width, height, x, y, top, left, right, bottom };
+  },
+  contextElement: anchorElement
+};
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/popup/popup.js';
+ + + +

To import this component as a React component:

+ 
import SlPopup from '@onsonr/nebula/dist/react/popup';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default)The popup’s content.
+ anchor + + The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the + anchor attribute or property instead. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ popup + + A reference to the internal popup container. Useful for animating and styling the popup with + JavaScript. + + HTMLElement + -
+ anchor + + The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide + the anchor element id, a DOM element reference, or a VirtualElement. If + the anchor lives inside the popup, use the anchor slot instead. + + Element | string | VirtualElement + -
+ active + + Activates the positioning logic and shows the popup. When this attribute is removed, the positioning + logic is torn down and the popup will be hidden. + + + + boolean + + false +
+ placement + + The preferred placement of the popup. Note that the actual placement will vary as configured to keep + the panel inside of the viewport. + + + + + 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | + 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' + + 'top' +
+ strategy + + Determines how the popup is positioned. The absolute strategy works well in most cases, + but if overflow is clipped, using a fixed position strategy can often workaround it. + + + + 'absolute' | 'fixed' + + 'absolute' +
+ distance + The distance in pixels from which to offset the panel away from its anchor. + number + + 0 +
+ skidding + The distance in pixels from which to offset the panel along its anchor. + number + + 0 +
+ arrow + + Attaches an arrow to the popup. The arrow’s size and color can be customized using the + --arrow-size and --arrow-color custom properties. For additional + customizations, you can also target the arrow using ::part(arrow) in your stylesheet. + + boolean + + false +
+ arrowPlacement + +
+ + + arrow-placement + + + 		+ The placement of the arrow. The default is anchor, which will align the arrow as close + to the center of the anchor as possible, considering available space and arrow-padding. + A value of start, end, or center will align the arrow to the + start, end, or center of the popover instead. + + 'start' | 'end' | 'center' | 'anchor' + + 'anchor' +
+ arrowPadding + +
+ + + arrow-padding + + + 		+ The amount of padding between the arrow and the edges of the popup. If the popup has a + border-radius, for example, this will prevent it from overflowing the corners. + + number + + 10 +
+ flip + + When set, placement of the popup will flip to the opposite site to keep it in view. You can use + flipFallbackPlacements to further configure how the fallback placement is determined. + + boolean + + false +
+ flipFallbackPlacements + +
+ + + flip-fallback-placements + + + 		+ If the preferred placement doesn’t fit, popup will be tested in these fallback placements until one + fits. Must be a string of any number of placements separated by a space, e.g. “top bottom left”. If + no placement fits, the flip fallback strategy will be used instead. + + string + + '' +
+ flipFallbackStrategy + +
+ + + flip-fallback-strategy + + + 		+ When neither the preferred placement nor the fallback placements fit, this value will be used to + determine whether the popup should be positioned using the best available fit based on available + space or as it was initially preferred. + + 'best-fit' | 'initial' + + 'best-fit' +
+ flipBoundary + + The flip boundary describes clipping element(s) that overflow will be checked relative to when + flipping. By default, the boundary includes overflow ancestors that will cause the element to be + clipped. If needed, you can change the boundary by passing a reference to one or more elements to + this property. + + Element | Element[] + -
+ flipPadding + +
+ + + flip-padding + + + 		The amount of padding, in pixels, to exceed before the flip behavior will occur. + number + + 0 +
+ shift + Moves the popup along the axis to keep it in view when clipped. + boolean + + false +
+ shiftBoundary + + The shift boundary describes clipping element(s) that overflow will be checked relative to when + shifting. By default, the boundary includes overflow ancestors that will cause the element to be + clipped. If needed, you can change the boundary by passing a reference to one or more elements to + this property. + + Element | Element[] + -
+ shiftPadding + +
+ + + shift-padding + + + 		The amount of padding, in pixels, to exceed before the shift behavior will occur. + number + + 0 +
+ autoSize + +
+ + + auto-size + + + 		+ When set, this will cause the popup to automatically resize itself to prevent it from overflowing. + + 'horizontal' | 'vertical' | 'both' + -
+ sync + Syncs the popup’s width or height to that of the anchor element. + 'width' | 'height' | 'both' + -
+ autoSizeBoundary + + The auto-size boundary describes clipping element(s) that overflow will be checked relative to when + resizing. By default, the boundary includes overflow ancestors that will cause the element to be + clipped. If needed, you can change the boundary by passing a reference to one or more elements to + this property. + + Element | Element[] + -
+ autoSizePadding + +
+ + + auto-size-padding + + + 		The amount of padding, in pixels, to exceed before the auto-size behavior will occur. + number + + 0 +
+ hoverBridge + +
+ + + hover-bridge + + + 		+ When a gap exists between the anchor and the popup element, this option will add a “hover bridge” + that fills the gap using an invisible element. This makes listening for events such as + mouseenter and mouseleave more sane because the pointer never technically + leaves the element. The hover bridge will only be drawn when the popover is active. + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-repositiononSlReposition + Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive + operations in your listener or consider debouncing it. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionArguments
reposition()Forces the popup to recalculate and reposition itself.-
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--arrow-size + The size of the arrow. Note that an arrow won’t be shown unless the arrow attribute is + used. + 6px
--arrow-colorThe color of the arrow.var(–sl-color-neutral-0)
--auto-size-available-width + A read-only custom property that determines the amount of width the popup can be before overflowing. + Useful for positioning child elements that need to overflow. This property is only available when + using auto-size. +
--auto-size-available-height + A read-only custom property that determines the amount of height the popup can be before + overflowing. Useful for positioning child elements that need to overflow. This property is only + available when using auto-size. +
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
arrow + The arrow’s container. Avoid setting top|bottom|left|right properties, as these values + are assigned dynamically as the popup moves. This is most useful for applying a background color to + match the popup, and maybe a border or box shadow. +
popupThe popup’s container. Useful for setting a background color, box shadow, etc.
hover-bridge + The hover bridge element. Only available when the hover-bridge option is enabled. +
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/progress-bar/index.html b/components/progress-bar/index.html new file mode 100644 index 00000000..e0183ace --- /dev/null +++ b/components/progress-bar/index.html @@ -0,0 +1,1175 @@ + + + + + + + Progress Bar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Progress Bar

+ +
+ <sl-progress-bar> | SlProgressBar +
+ +
+ Since 2.0 + stable +
+
+ +

Progress bars are used to show the status of an ongoing operation.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-bar value="50"></sl-progress-bar>
+
+
+ +
+ 
import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
+
+const App = () => <SlProgressBar value={50} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Labels

+

+ Use the label attribute to label the progress bar and tell assistive devices how to announce + it. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
+
+
+ +
+ 
import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
+
+const App = () => <SlProgressBar value="50" label="Upload progress" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Height +

+

Use the --height custom property to set the progress bar’s height.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
+
+
+ +
+ 
import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
+
+const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Showing Values +

+

Use the default slot to show a value.

+ +
+
+ 50% + +
+ + + + + + +
+ +
+
+ +
+
+ 
<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
+
+<br />
+
+<sl-button circle><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
+<sl-button circle><sl-icon name="plus" label="Increase"></sl-icon></sl-button>
+
+<script>
+  const progressBar = document.querySelector('.progress-bar-values');
+  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
+  const addButton = subtractButton.nextElementSibling;
+
+  addButton.addEventListener('click', () => {
+    const value = Math.min(100, progressBar.value + 10);
+    progressBar.value = value;
+    progressBar.textContent = `${value}%`;
+  });
+
+  subtractButton.addEventListener('click', () => {
+    const value = Math.max(0, progressBar.value - 10);
+    progressBar.value = value;
+    progressBar.textContent = `${value}%`;
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
+
+const App = () => {
+  const [value, setValue] = useState(50);
+
+  function adjustValue(amount) {
+    let newValue = value + amount;
+    if (newValue < 0) newValue = 0;
+    if (newValue > 100) newValue = 100;
+    setValue(newValue);
+  }
+
+  return (
+    <>
+      <SlProgressBar value={value}>{value}%</SlProgressBar>
+
+      <br />
+
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" label="Decrease" />
+      </SlButton>
+
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" label="Increase" />
+      </SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Indeterminate +

+

+ The indeterminate attribute can be used to inform the user that the operation is pending, but + its status cannot currently be determined. In this state, value is ignored and the label, if + present, will not be shown. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-bar indeterminate></sl-progress-bar>
+
+
+ +
+ 
import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
+
+const App = () => <SlProgressBar indeterminate />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/progress-bar/progress-bar.js';
+ + + +

To import this component as a React component:

+ 
import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)A label to show inside the progress indicator.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The current progress as a percentage, 0 to 100. + + + number + + 0 +
+ indeterminate + + When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an + indeterminate state. + + + + boolean + + false +
+ label + A custom label for assistive devices. + string + + '' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--heightThe progress bar’s height.
--track-colorThe color of the track.
--indicator-colorThe color of the indicator.
--label-colorThe color of the label.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
indicatorThe progress bar’s indicator.
labelThe progress bar’s label.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/progress-ring/index.html b/components/progress-ring/index.html new file mode 100644 index 00000000..f495c6ff --- /dev/null +++ b/components/progress-ring/index.html @@ -0,0 +1,1266 @@ + + + + + + + Progress Ring + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Progress Ring

+ +
+ <sl-progress-ring> | SlProgressRing +
+ +
+ Since 2.0 + stable +
+
+ +

+ Progress rings are used to show the progress of a determinate operation in a circular fashion. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-ring value="25"></sl-progress-ring>
+
+
+ +
+ 
import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+
+const App = () => <SlProgressRing value="25" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Size

+

Use the --size custom property to set the diameter of the progress ring.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
+
+
+ +
+ 
import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+
+const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Track and Indicator Width +

+

+ Use the --track-width and --indicator-width custom properties to set the width of + the progress ring’s track and indicator. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></sl-progress-ring>
+
+
+ +
+ 
import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+
+const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Colors

+

+ To change the color, use the --track-color and --indicator-color custom + properties. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-ring
+  value="50"
+  style="
+    --track-color: pink;
+    --indicator-color: deeppink;
+  "
+></sl-progress-ring>
+
+
+ +
+ 
import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+
+const App = () => (
+  <SlProgressRing
+    value="50"
+    style={{
+      '--track-color': 'pink',
+      '--indicator-color': 'deeppink'
+    }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Labels

+

+ Use the label attribute to label the progress ring and tell assistive devices how to announce + it. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
+
+
+ +
+ 
import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+
+const App = () => <SlProgressRing value="50" label="Upload progress" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Showing Values +

+

Use the default slot to show a label inside the progress ring.

+ +
+
+ 50% + +
+ + + + + + +
+ +
+
+ +
+
+ 
<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
+
+<br />
+
+<sl-button circle><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
+<sl-button circle><sl-icon name="plus" label="Increase"></sl-icon></sl-button>
+
+<script>
+  const progressRing = document.querySelector('.progress-ring-values');
+  const subtractButton = progressRing.nextElementSibling.nextElementSibling;
+  const addButton = subtractButton.nextElementSibling;
+
+  addButton.addEventListener('click', () => {
+    const value = Math.min(100, progressRing.value + 10);
+    progressRing.value = value;
+    progressRing.textContent = `${value}%`;
+  });
+
+  subtractButton.addEventListener('click', () => {
+    const value = Math.max(0, progressRing.value - 10);
+    progressRing.value = value;
+    progressRing.textContent = `${value}%`;
+  });
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+
+const App = () => {
+  const [value, setValue] = useState(50);
+
+  function adjustValue(amount) {
+    let newValue = value + amount;
+    if (newValue < 0) newValue = 0;
+    if (newValue > 100) newValue = 100;
+    setValue(newValue);
+  }
+
+  return (
+    <>
+      <SlProgressRing value={value} style={{ marginBottom: '.5rem' }}>
+        {value}%
+      </SlProgressRing>
+
+      <br />
+
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" label="Decrease" />
+      </SlButton>
+
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" label="Increase" />
+      </SlButton>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/progress-ring/progress-ring.js';
+ + + +

To import this component as a React component:

+ 
import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)A label to show inside the ring.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The current progress as a percentage, 0 to 100. + + + number + + 0 +
+ label + A custom label for assistive devices. + string + + '' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--sizeThe diameter of the progress ring (cannot be a percentage).
--track-widthThe width of the track.
--track-colorThe color of the track.
--indicator-widthThe width of the indicator. Defaults to the track width.
--indicator-colorThe color of the indicator.
--indicator-transition-durationThe duration of the indicator’s transition when the value changes.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
labelThe progress ring label.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/qr-code/index.html b/components/qr-code/index.html new file mode 100644 index 00000000..0c02a5a6 --- /dev/null +++ b/components/qr-code/index.html @@ -0,0 +1,1237 @@ + + + + + + + QR Code + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

QR Code

+ +
+ <sl-qr-code> | SlQrCode +
+ +
+ Since 2.0 + stable +
+
+ +

+ Generates a + QR code + and renders it using the + Canvas API. +

+ +

+ QR codes are useful for providing small pieces of information to users who can quickly scan them with a + smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will + decode it and allow the user to visit a website, dial a phone number, read a message, etc. +

+ +
+
+
+ +
+ + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="qr-overview">
+  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Nebula on the web!"></sl-qr-code>
+  <br />
+
+  <sl-input maxlength="255" clearable label="Value"></sl-input>
+</div>
+
+<script>
+  const container = document.querySelector('.qr-overview');
+  const qrCode = container.querySelector('sl-qr-code');
+  const input = container.querySelector('sl-input');
+
+  customElements.whenDefined('sl-qr-code').then(() => {
+    input.value = qrCode.value;
+    input.addEventListener('sl-input', () => (qrCode.value = input.value));
+  });
+</script>
+
+<style>
+  .qr-overview {
+    max-width: 256px;
+  }
+
+  .qr-overview sl-input {
+    margin-top: 1rem;
+  }
+</style>
+
+
+ +
+ 
import { useState } from 'react';
+import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const css = `
+  .qr-overview {
+    max-width: 256px;
+  }
+
+  .qr-overview sl-input {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [value, setValue] = useState('https://shoelace.style/');
+
+  return (
+    <>
+      <div className="qr-overview">
+        <SlQrCode value={value} label="Scan this code to visit Nebula on the web!" />
+        <br />
+
+        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Colors

+

+ Use the fill and background attributes to modify the QR code’s colors. You should + always ensure good contrast for optimal compatibility with QR code scanners. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
+
+
+ +
+ 
import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
+
+const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Size

+

Use the size attribute to change the size of the QR code.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
+
+
+ +
+ 
import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
+
+const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Radius

+

Create a rounded effect with the radius attribute.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
+
+
+ +
+ 
import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
+
+const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Error Correction +

+

+ QR codes can be rendered with various levels of + error correction + that can be set using the error-correction attribute. This example generates four codes with + the same value using different error correction levels. +

+ +
+
+
+ + + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="qr-error-correction">
+  <sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
+</div>
+
+<style>
+  .qr-error-correction {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+</style>
+
+
+ +
+ 
import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
+
+const css = `
+  .qr-error-correction {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+`;
+
+const App = () => {
+  return (
+    <>
+      <div className="qr-error-correction">
+        <SlQrCode value="https://shoelace.style/" error-correction="L" />
+        <SlQrCode value="https://shoelace.style/" error-correction="M" />
+        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
+        <SlQrCode value="https://shoelace.style/" error-correction="H" />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/qr-code/qr-code.js';
+ + + +

To import this component as a React component:

+ 
import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The QR code’s value. + string + + '' +
+ label + The label for assistive devices to announce. If unspecified, the value will be used instead. + string + + '' +
+ size + The size of the QR code, in pixels. + number + + 128 +
+ fill + The fill color. This can be any valid CSS color, but not a CSS custom property. + string + + 'black' +
+ background + + The background color. This can be any valid CSS color or transparent. It cannot be a + CSS custom property. + + string + + 'white' +
+ radius + The edge radius of each module. Must be between 0 and 0.5. + number + + 0 +
+ errorCorrection + +
+ + + error-correction + + + 		+ The level of error correction to use. + Learn more + + 'L' | 'M' | 'Q' | 'H' + + 'H' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/radio-button/index.html b/components/radio-button/index.html new file mode 100644 index 00000000..32cb7d80 --- /dev/null +++ b/components/radio-button/index.html @@ -0,0 +1,1621 @@ + + + + + + + Radio Button + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Radio Button

+ +
+ <sl-radio-button> | SlRadioButton +
+ +
+ Since 2.0 + stable +
+
+ +

+ Radios buttons allow the user to select a single option from a group using a button-like control. +

+ +

+ Radio buttons are designed to be used with radio groups. When a radio + button has focus, the arrow keys can be used to change the selected option just like standard radio + controls. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2">Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2">Option 2</SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Checked States +

+

+ To set the initial value and checked state, use the value attribute on the containing radio + group. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2">Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2">Option 2</SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable a radio button.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2" disabled>Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2" disabled>
+      Option 2
+    </SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change a radio button’s size.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group size="small" label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2">Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+<br />
+
+<sl-radio-group size="medium" label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2">Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+<br />
+
+<sl-radio-group size="large" label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2">Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup size="small" label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2">Option 2</SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+
+  <br />
+
+  <SlRadioGroup size="medium" label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2">Option 2</SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+
+  <br />
+
+  <SlRadioGroup size="large" label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2">Option 2</SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Pill Buttons +

+

Use the pill attribute to give radio buttons rounded edges.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group size="small" label="Select an option" name="a" value="1">
+  <sl-radio-button pill value="1">Option 1</sl-radio-button>
+  <sl-radio-button pill value="2">Option 2</sl-radio-button>
+  <sl-radio-button pill value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+<br />
+
+<sl-radio-group size="medium" label="Select an option" name="a" value="1">
+  <sl-radio-button pill value="1">Option 1</sl-radio-button>
+  <sl-radio-button pill value="2">Option 2</sl-radio-button>
+  <sl-radio-button pill value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+<br />
+
+<sl-radio-group size="large" label="Select an option" name="a" value="1">
+  <sl-radio-button pill value="1">Option 1</sl-radio-button>
+  <sl-radio-button pill value="2">Option 2</sl-radio-button>
+  <sl-radio-button pill value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup size="small" label="Select an option" name="a" value="1">
+    <SlRadioButton pill value="1">Option 1</SlRadioButton>
+    <SlRadioButton pill value="2">Option 2</SlRadioButton>
+    <SlRadioButton pill value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+
+  <br />
+
+  <SlRadioGroup size="medium" label="Select an option" name="a" value="1">
+    <SlRadioButton pill value="1">Option 1</SlRadioButton>
+    <SlRadioButton pill value="2">Option 2</SlRadioButton>
+    <SlRadioButton pill value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+
+  <br />
+
+  <SlRadioGroup size="large" label="Select an option" name="a" value="1">
+    <SlRadioButton pill value="1">Option 1</SlRadioButton>
+    <SlRadioButton pill value="2">Option 2</SlRadioButton>
+    <SlRadioButton pill value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prefix and Suffix Icons +

+

Use the prefix and suffix slots to add icons.

+ +
+
+ + + + Option 1 + + + + + Option 2 + + + + + + Option 3 + + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio-button value="1">
+    <sl-icon slot="prefix" name="archive"></sl-icon>
+    Option 1
+  </sl-radio-button>
+
+  <sl-radio-button value="2">
+    <sl-icon slot="suffix" name="bag"></sl-icon>
+    Option 2
+  </sl-radio-button>
+
+  <sl-radio-button value="3">
+    <sl-icon slot="prefix" name="gift"></sl-icon>
+    <sl-icon slot="suffix" name="cart"></sl-icon>
+    Option 3
+  </sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">
+      <SlIcon slot="prefix" name="archive" />
+      Option 1
+    </SlRadioButton>
+
+    <SlRadioButton value="2">
+      <SlIcon slot="suffix" name="bag" />
+      Option 2
+    </SlRadioButton>
+
+    <SlRadioButton value="3">
+      <SlIcon slot="prefix" name="gift" />
+      <SlIcon slot="suffix" name="cart" />
+      Option 3
+    </SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Buttons with Icons +

+

+ You can omit button labels and use icons instead. Make sure to set a label attribute on each + icon so screen readers will announce each option correctly. +

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="neutral">
+  <sl-radio-button value="angry">
+    <sl-icon name="emoji-angry" label="Angry"></sl-icon>
+  </sl-radio-button>
+
+  <sl-radio-button value="sad">
+    <sl-icon name="emoji-frown" label="Sad"></sl-icon>
+  </sl-radio-button>
+
+  <sl-radio-button value="neutral">
+    <sl-icon name="emoji-neutral" label="Neutral"></sl-icon>
+  </sl-radio-button>
+
+  <sl-radio-button value="happy">
+    <sl-icon name="emoji-smile" label="Happy"></sl-icon>
+  </sl-radio-button>
+
+  <sl-radio-button value="laughing">
+    <sl-icon name="emoji-laughing" label="Laughing"></sl-icon>
+  </sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="neutral">
+    <SlRadioButton value="angry">
+      <SlIcon name="emoji-angry" label="Angry" />
+    </SlRadioButton>
+
+    <SlRadioButton value="sad">
+      <SlIcon name="emoji-frown" label="Sad" />
+    </SlRadioButton>
+
+    <SlRadioButton value="neutral">
+      <SlIcon name="emoji-neutral" label="Neutral" />
+    </SlRadioButton>
+
+    <SlRadioButton value="happy">
+      <SlIcon name="emoji-smile" label="Happy" />
+    </SlRadioButton>
+
+    <SlRadioButton value="laughing">
+      <SlIcon name="emoji-laughing" label="Laughing" />
+    </SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/radio-button/radio-button.js';
+ + + +

To import this component as a React component:

+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The radio button’s label.
+ prefix + A presentational prefix icon or similar element.
+ suffix + A presentational suffix icon or similar element.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The radio’s value. When selected, the radio group will receive this value. + string + -
+ disabled + Disables the radio button. + + + boolean + + false +
+ size + + The radio button’s size. When used inside a radio group, the size will be determined by the radio + group’s size so this attribute can typically be omitted. + + + + 'small' | 'medium' | 'large' + + 'medium' +
+ pill + Draws a pill-style radio button with rounded edges. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the button loses focus.-
sl-focusonSlFocusEmitted when the button gains focus.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
focus()Sets focus on the radio button. + options: FocusOptions +
blur()Removes focus from the radio button.-
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
buttonThe internal <button> element.
button--checkedThe internal button element when the radio button is checked.
prefixThe container that wraps the prefix.
labelThe container that wraps the radio button’s label.
suffixThe container that wraps the suffix.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/radio-group/index.html b/components/radio-group/index.html new file mode 100644 index 00000000..592cb817 --- /dev/null +++ b/components/radio-group/index.html @@ -0,0 +1,1674 @@ + + + + + + + Radio Group + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Radio Group

+ +
+ <sl-radio-group> | SlRadioGroup +
+ +
+ Since 2.0 + stable +
+
+ +

+ Radio groups are used to group multiple radios or + radio buttons so they function as a single form control. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Help Text +

+

+ Add descriptive help text to a radio group with the help-text attribute. For help texts that + contain HTML, use the help-text slot instead. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Radio Buttons +

+

+ Radio buttons offer an alternate way to display radio controls. In + this case, an internal button group is used to group the buttons into + a single, cohesive control. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
+  <sl-radio-button value="1">Option 1</sl-radio-button>
+  <sl-radio-button value="2">Option 2</sl-radio-button>
+  <sl-radio-button value="3">Option 3</sl-radio-button>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadioButton value="1">Option 1</SlRadioButton>
+    <SlRadioButton value="2">Option 2</SlRadioButton>
+    <SlRadioButton value="3">Option 3</SlRadioButton>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabling Options +

+

+ Radios and radio buttons can be disabled by adding the disabled attribute to the respective + options inside the radio group. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2" disabled>Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2" disabled>
+      Option 2
+    </SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Sizing Options +

+

+ The size of Radios and + Radio Buttons will be determined by the Radio Group’s + size attribute. +

+ 
<sl-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
+  <sl-radio value="small">Small</sl-radio>
+  <sl-radio value="medium">Medium</sl-radio>
+  <sl-radio value="large">Large</sl-radio>
+</sl-radio-group>
+
+<script>
+  const radioGroup = document.querySelector('.radio-group-size');
+
+  radioGroup.addEventListener('sl-change', () => {
+    radioGroup.size = radioGroup.value;
+  });
+</script>
+
+ 
import { useState } from 'react';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => {
+  const [size, setSize] = useState('medium');
+
+  return (
+    <>
+      <SlRadioGroup
+        label="Select an option"
+        size={size}
+        value={size}
+        class="radio-group-size"
+        onSlChange={event => setSize(event.target.value)}
+      >
+        <SlRadio value="small">Small</SlRadio>
+        <SlRadio value="medium">Medium</SlRadio>
+        <SlRadio value="large">Large</SlRadio>
+      </SlRadioGroup>
+    </>
+  );
+};
+
+ +

+ Validation +

+

+ Setting the required attribute to make selecting an option mandatory. If a value has not been + selected, it will prevent the form from submitting and display an error message. +

+ +
+
+
+ + Option 1 + Option 2 + Option 3 + +
+ Submit +
+ + + +
+ +
+
+ +
+
+ 
<form class="validation">
+  <sl-radio-group label="Select an option" name="a" required>
+    <sl-radio value="1">Option 1</sl-radio>
+    <sl-radio value="2">Option 2</sl-radio>
+    <sl-radio value="3">Option 3</sl-radio>
+  </sl-radio-group>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+</form>
+
+<script>
+  const form = document.querySelector('.validation');
+
+  // Handle form submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
+  });
+</script>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+const App = () => {
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlRadioGroup label="Select an option" name="a" required onSlChange={handleChange}>
+        <SlRadio value="1">
+          Option 1
+        </SlRadio>
+        <SlRadiovalue="2">
+          Option 2
+        </SlRadio>
+        <SlRadio value="3">
+          Option 3
+        </SlRadio>
+      </SlRadioGroup>
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Validity +

+

+ Use the setCustomValidity() method to set a custom validation message. This will prevent the + form from submitting and make the browser display the error message you provide. To clear the error, call + this function with an empty string. +

+ +
+
+
+ + Not me + Me neither + Choose me + +
+ Submit +
+ + + +
+ +
+
+ +
+
+ 
<form class="custom-validity">
+  <sl-radio-group label="Select an option" name="a" value="1">
+    <sl-radio value="1">Not me</sl-radio>
+    <sl-radio value="2">Me neither</sl-radio>
+    <sl-radio value="3">Choose me</sl-radio>
+  </sl-radio-group>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+</form>
+
+<script>
+  const form = document.querySelector('.custom-validity');
+  const radioGroup = form.querySelector('sl-radio-group');
+  const errorMessage = 'You must choose the last option';
+
+  // Set initial validity as soon as the element is defined
+  customElements.whenDefined('sl-radio').then(() => {
+    radioGroup.setCustomValidity(errorMessage);
+  });
+
+  // Update validity when a selection is made
+  form.addEventListener('sl-change', () => {
+    const isValid = radioGroup.value === '3';
+    radioGroup.setCustomValidity(isValid ? '' : errorMessage);
+  });
+
+  // Handle form submit
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    alert('All fields are valid!');
+  });
+</script>
+
+
+ +
+ 
import { useEffect, useRef } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+const App = () => {
+  const radioGroup = useRef(null);
+  const errorMessage = 'You must choose this option';
+
+  function handleChange() {
+    radioGroup.current.setCustomValidity(radioGroup.current.value === '3' ? '' : errorMessage);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  useEffect(() => {
+    radio.current.setCustomValidity(errorMessage);
+  }, []);
+
+  return (
+    <form class="custom-validity" onSubmit={handleSubmit}>
+      <SlRadioGroup ref={radioGroup} label="Select an option" name="a" value="1" onSlChange={handleChange}>
+        <SlRadio value="1">Not me</SlRadio>
+        <SlRadio value="2">Me neither</SlRadio>
+        <SlRadio value="3">Choose me</SlRadio>
+      </SlRadioGroup>
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/radio-group/radio-group.js';
+ + + +

To import this component as a React component:

+ 
import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default) + The default slot where <sl-radio> or + <sl-radio-button> elements are placed. +
+ label + + The radio group’s label. Required for proper accessibility. Alternatively, you can use the + label attribute. +
+ help-text + + Text that describes how to use the radio group. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ label + + The radio group’s label. Required for proper accessibility. If you need to display HTML, use the + label slot instead. + + string + + '' +
+ helpText + +
+ + + help-text + + + 		+ The radio groups’s help text. If you need to display HTML, use the help-text slot + instead. + + string + + '' +
+ name + The name of the radio group, submitted as a name/value pair with form data. + string + + 'option' +
+ value + The current value of the radio group, submitted as a name/value pair with form data. + + + string + + '' +
+ size + The radio group’s size. This size will be applied to all child radios and radio buttons. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + Ensures a child radio is checked before allowing the containing form to submit. + + + boolean + + false +
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-changeonSlChangeEmitted when the radio group’s selected value changes.-
sl-inputonSlInputEmitted when the radio group receives user input.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: +
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
form-controlThe form control that wraps the label, input, and help text.
form-control-labelThe label’s wrapper.
form-control-inputThe input’s wrapper.
form-control-help-textThe help text’s wrapper.
button-groupThe button group that wraps radio buttons.
button-group__baseThe button group’s base part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-button-group>
    • +
+
+
+
+ + diff --git a/components/radio/index.html b/components/radio/index.html new file mode 100644 index 00000000..7f2a2cc5 --- /dev/null +++ b/components/radio/index.html @@ -0,0 +1,1063 @@ + + + + + + + Radio + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Radio

+ +
+ <sl-radio> | SlRadio +
+ +
+ Since 2.0 + stable +
+
+ +

Radios allow the user to select a single option from a group.

+ +

Radios are designed to be used with radio groups.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Initial Value +

+

+ To set the initial value and checked state, use the value attribute on the containing radio + group. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="3">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="3">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable a radio.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-radio-group label="Select an option" name="a" value="1">
+  <sl-radio value="1">Option 1</sl-radio>
+  <sl-radio value="2" disabled>Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+
+
+ +
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" name="a" value="1">
+    <SlRadio value="1">Option 1</SlRadio>
+    <SlRadio value="2" disabled>
+      Option 2
+    </SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

+ Add the size attribute to the Radio Group to change the + radios’ size. +

+ 
<sl-radio-group size="small" value="1">
+  <sl-radio value="1">Small 1</sl-radio>
+  <sl-radio value="2">Small 2</sl-radio>
+  <sl-radio value="3">Small 3</sl-radio>
+</sl-radio-group>
+
+<br />
+
+<sl-radio-group size="medium" value="1">
+  <sl-radio value="1">Medium 1</sl-radio>
+  <sl-radio value="2">Medium 2</sl-radio>
+  <sl-radio value="3">Medium 3</sl-radio>
+</sl-radio-group>
+
+<br />
+
+<sl-radio-group size="large" value="1">
+  <sl-radio value="1">Large 1</sl-radio>
+  <sl-radio value="2">Large 2</sl-radio>
+  <sl-radio value="3">Large 3</sl-radio>
+</sl-radio-group>
+
+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+
+const App = () => (
+  <>
+    <SlRadioGroup size="small" value="1">
+      <SlRadio value="1">Small 1</SlRadio>
+      <SlRadio value="2">Small 2</SlRadio>
+      <SlRadio value="3">Small 3</SlRadio>
+    </SlRadioGroup>
+
+    <br />
+
+    <SlRadioGroup size="medium" value="1">
+      <SlRadio value="1">Medium 1</SlRadio>
+      <SlRadio value="2">Medium 2</SlRadio>
+      <SlRadio value="3">Medium 3</SlRadio>
+    </SlRadioGroup>
+
+    <br />
+
+    <SlRadioGroup size="large" value="1">
+      <SlRadio value="1">Large 1</SlRadio>
+      <SlRadio value="2">Large 2</SlRadio>
+      <SlRadio value="3">Large 3</SlRadio>
+    </SlRadioGroup>
+  </>
+);
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/radio/radio.js';
+ + + +

To import this component as a React component:

+ 
import SlRadio from '@onsonr/nebula/dist/react/radio';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The radio’s label.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ value + The radio’s value. When selected, the radio group will receive this value. + string + -
+ size + + The radio’s size. When used inside a radio group, the size will be determined by the radio group’s + size so this attribute can typically be omitted. + + + + 'small' | 'medium' | 'large' + + 'medium' +
+ disabled + Disables the radio. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the control loses focus.-
sl-focusonSlFocusEmitted when the control gains focus.-
+
+ +

+ Learn more about events. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
controlThe circular container that wraps the radio’s checked state.
control--checkedThe radio control when the radio is checked.
checked-iconThe checked icon, an <sl-icon> element.
labelThe container that wraps the radio’s label.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/range/index.html b/components/range/index.html new file mode 100644 index 00000000..99bc829b --- /dev/null +++ b/components/range/index.html @@ -0,0 +1,1907 @@ + + + + + + + Range + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Range

+ +
+ <sl-range> | SlRange +
+ +
+ Since 2.0 + stable +
+
+ +

+ Ranges allow the user to select a single value within a given range using a slider. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange />;
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

Labels

+

+ Use the label attribute to give the range an accessible label. For labels that contain HTML, + use the label slot instead. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range label="Volume" min="0" max="100"></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange label="Volume" min={0} max={100} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Help Text +

+

+ Add descriptive help text to a range with the help-text attribute. For help texts that contain + HTML, use the help-text slot instead. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range label="Volume" help-text="Controls the volume of the current song." min="0" max="100"></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Min, Max, and Step +

+

+ Use the min and max attributes to set the range’s minimum and maximum values, + respectively. The step attribute determines the value’s interval when increasing and + decreasing. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range min="0" max="10" step="1"></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange min={0} max={10} step={1} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable a slider.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range disabled></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange disabled />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Tooltip Placement +

+

+ By default, the tooltip is shown on top. Set tooltip to bottom to show it below + the slider. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range tooltip="bottom"></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange tooltip="bottom" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disable the Tooltip +

+

To disable the tooltip, set tooltip to none.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range tooltip="none"></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange tooltip="none" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Track Colors +

+

+ You can customize the active and inactive portions of the track using the + --track-color-active and --track-color-inactive custom properties. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range
+  style="
+  --track-color-active: var(--sl-color-primary-600);
+  --track-color-inactive: var(--sl-color-primary-100);
+"
+></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => (
+  <SlRange
+    style={{
+      '--track-color-active': 'var(--sl-color-primary-600)',
+      '--track-color-inactive': 'var(--sl-color-primary-200)'
+    }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Track Offset +

+

+ You can customize the initial offset of the active track using the --track-active-offset custom + property. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-range
+  min="-100"
+  max="100"
+  style="
+  --track-color-active: var(--sl-color-primary-600);
+  --track-color-inactive: var(--sl-color-primary-100);
+  --track-active-offset: 50%;
+"
+></sl-range>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => (
+  <SlRange
+    min={-100}
+    max={100}
+    style={{
+      '--track-color-active': 'var(--sl-color-primary-600)',
+      '--track-color-inactive': 'var(--sl-color-primary-200)',
+      '--track-active-offset': '50%'
+    }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Tooltip Formatter +

+

+ You can change the tooltip’s content by setting the tooltipFormatter property to a function + that accepts the range’s value as an argument. +

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
+
+<script>
+  const range = document.querySelector('.range-with-custom-formatter');
+  range.tooltipFormatter = value => `Total - ${value}%`;
+</script>
+
+
+ +
+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+
+const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/range/range.js';
+ + + +

To import this component as a React component:

+ 
import SlRange from '@onsonr/nebula/dist/react/range';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
+ label + The range’s label. Alternatively, you can use the label attribute.
+ help-text + + Text that describes how to use the input. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the range, submitted as a name/value pair with form data. + string + + '' +
+ value + The current value of the range, submitted as a name/value pair with form data. + number + + 0 +
+ label + The range’s label. If you need to display HTML, use the label slot instead. + string + + '' +
+ helpText + +
+ + + help-text + + + 		The range’s help text. If you need to display HTML, use the help-text slot instead. + string + + '' +
+ disabled + Disables the range. + + + boolean + + false +
+ min + The minimum acceptable value of the range. + number + + 0 +
+ max + The maximum acceptable value of the range. + number + + 100 +
+ step + The interval at which the range will increase and decrease. + number + + 1 +
+ tooltip + The preferred placement of the range’s tooltip. + 'top' | 'bottom' | 'none' + + 'top' +
+ tooltipFormatter + + A function used to format the tooltip’s value. The range’s value is passed as the first and only + argument. The function should return a string to display in the tooltip. + + (value: number) => string + -
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ defaultValue + The default value of the form control. Primarily used for resetting the form control. + number + + 0 +
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the control loses focus.-
sl-changeonSlChangeEmitted when an alteration to the control’s value is committed by the user.-
sl-focusonSlFocusEmitted when the control gains focus.-
sl-inputonSlInputEmitted when the control receives input.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
focus()Sets focus on the range. + options: FocusOptions +
blur()Removes focus from the range.-
stepUp()Increments the value of the range by the value of the step attribute.-
stepDown()Decrements the value of the range by the value of the step attribute.-
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--thumb-sizeThe size of the thumb.
--tooltip-offsetThe vertical distance the tooltip is offset from the track.
--track-color-activeThe color of the portion of the track that represents the current value.
--track-color-inactiveThe of the portion of the track that represents the remaining value.
--track-heightThe height of the track.
--track-active-offsetThe point of origin of the active track.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
form-controlThe form control that wraps the label, input, and help text.
form-control-labelThe label’s wrapper.
form-control-inputThe range’s wrapper.
form-control-help-textThe help text’s wrapper.
baseThe component’s base wrapper.
inputThe internal <input> element.
tooltipThe range’s tooltip.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/rating/index.html b/components/rating/index.html new file mode 100644 index 00000000..f241405e --- /dev/null +++ b/components/rating/index.html @@ -0,0 +1,1759 @@ + + + + + + + Rating + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Rating

+ +
+ <sl-rating> | SlRating +
+ +
+ Since 2.0 + stable +
+
+ +

Ratings give users a way to quickly view and provide feedback.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rating" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Labels

+

+ Ratings are commonly identified contextually, so labels aren’t displayed. However, you should always provide + one for assistive devices using the label attribute. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rate this component"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rate this component" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Maximum Value +

+

Ratings are 0–5 by default. To change the maximum possible value, use the max attribute.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" max="3"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rating" max={3} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Precision +

+

Use the precision attribute to let users select fractional ratings.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" precision="0.5" value="2.5"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Symbol Sizes +

+

Set the --symbol-size custom property to adjust the size.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" style="--symbol-size: 2rem;"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Readonly +

+

Use the readonly attribute to display a rating that users can’t change.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" readonly value="3"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rating" readonly value={3} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disable attribute to disable the rating.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" disabled value="3"></sl-rating>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => <SlRating label="Rating" disabled value={3} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Detecting Hover +

+

+ Use the sl-hover event to detect when the user hovers over (or touch and drag) the rating. This + lets you hook into values as the user interacts with the rating, but before they select a value. +

+

+ The event has a payload with phase and value properties. The + phase property tells when hovering starts, moves to a new value, and ends. The + value property tells what the rating’s value would be if the user were to commit to the hovered + value. +

+ +
+
+
+ + +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="detect-hover">
+  <sl-rating label="Rating"></sl-rating>
+  <span></span>
+</div>
+
+<script>
+  const rating = document.querySelector('.detect-hover > sl-rating');
+  const span = rating.nextElementSibling;
+  const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
+
+  rating.addEventListener('sl-hover', event => {
+    span.textContent = terms[event.detail.value];
+
+    // Clear feedback when hovering stops
+    if (event.detail.phase === 'end') {
+      span.textContent = '';
+    }
+  });
+</script>
+
+<style>
+  .detect-hover span {
+    position: relative;
+    top: -4px;
+    left: 8px;
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-neutral-900);
+    color: var(--sl-color-neutral-0);
+    text-align: center;
+    padding: 4px 6px;
+  }
+
+  .detect-hover span:empty {
+    display: none;
+  }
+</style>
+
+
+ +
+ 
import { useState } from 'react';
+import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
+const css = `
+  .detect-hover span {
+    position: relative;
+    top: -4px;
+    left: 8px;
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-neutral-900);
+    color: var(--sl-color-neutral-0);
+    text-align: center;
+    padding: 4px 6px;
+  }
+
+  .detect-hover span:empty {
+    display: none;
+  }
+`;
+
+function handleHover(event) {
+  rating.addEventListener('sl-hover', event => {
+    setFeedback(terms[event.detail.value]);
+
+    // Clear feedback when hovering stops
+    if (event.detail.phase === 'end') {
+      setFeedback('');
+    }
+  });
+}
+
+const App = () => {
+  const [feedback, setFeedback] = useState(true);
+
+  return (
+    <>
+      <div class="detect-hover">
+        <SlRating label="Rating" onSlHover={handleHover} />
+        <span>{feedback}</span>
+      </div>
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Icons +

+

You can provide custom icons by passing a function to the getSymbol property.

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" class="rating-hearts" style="--symbol-color-active: #ff4136;"></sl-rating>
+
+<script>
+  const rating = document.querySelector('.rating-hearts');
+  rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>';
+</script>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+const App = () => (
+  <SlRating
+    label="Rating"
+    getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
+    style={{ '--symbol-color-active': '#ff4136' }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Value-based Icons +

+

You can also use the getSymbol property to render different icons based on value.

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-rating label="Rating" class="rating-emojis"></sl-rating>
+
+<script>
+  const rating = document.querySelector('.rating-emojis');
+
+  rating.getSymbol = value => {
+    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+    return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+  };
+</script>
+
+
+ +
+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+
+function getSymbol(value) {
+  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+}
+
+const App = () => <SlRating label="Rating" getSymbol={getSymbol} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/rating/rating.js';
+ + + +

To import this component as a React component:

+ 
import SlRating from '@onsonr/nebula/dist/react/rating';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ label + A label that describes the rating to assistive devices. + string + + '' +
+ value + The current rating. + number + + 0 +
+ max + The highest rating to show. + number + + 5 +
+ precision + + The precision at which the rating will increase and decrease. For example, to allow half-star + ratings, set this attribute to 0.5. + + number + + 1 +
+ readonly + Makes the rating readonly. + + + boolean + + false +
+ disabled + Disables the rating. + + + boolean + + false +
+ getSymbol + + A function that customizes the symbol to be rendered. The first and only argument is the rating’s + current value. The function should return a string containing trusted HTML of the symbol to render + at the specified value. Works well with <sl-icon> elements. + + (value: number) => string + -
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-changeonSlChangeEmitted when the rating’s value changes.-
sl-hoveronSlHover + Emitted when the user hovers over a value. The phase property indicates when hovering + starts, moves to a new value, or ends. The value property tells what the rating’s value + would be if the user were to commit to the hovered value. + + { phase: 'start' | 'move' | 'end', value: number } +
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
focus()Sets focus on the rating. + options: FocusOptions +
blur()Removes focus from the rating.-
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--symbol-colorThe inactive color for symbols.
--symbol-color-activeThe active color for symbols.
--symbol-sizeThe size of symbols.
--symbol-spacingThe spacing to use around symbols.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • +
+
+
+
+ + diff --git a/components/relative-time/index.html b/components/relative-time/index.html new file mode 100644 index 00000000..f0bb700e --- /dev/null +++ b/components/relative-time/index.html @@ -0,0 +1,1035 @@ + + + + + + + Relative Time + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Relative Time

+ +
+ <sl-relative-time> | SlRelativeTime +
+ +
+ Since 2.0 + stable +
+
+ +

Outputs a localized time phrase relative to the current date and time.

+ +

+ Localization is handled by the browser’s + Intl.RelativeTimeFormat API. No language packs are required. +

+ +
+
+ + + +
+ +
+
+ +
+
+ 
<!-- Nebula 2 release date 🎉 -->
+<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
+
+
+ +
+ 
import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
+
+const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ The date attribute determines when the date/time is calculated from. It must be a string that + Date.parse() + can interpret or a + Date + object set via JavaScript. +

+ +

+ Examples +

+

+ Keeping Time in Sync +

+

Use the sync attribute to update the displayed value automatically as time passes.

+ +
+
+
+ +
+ + + +
+ +
+
+ +
+
+ 
<div class="relative-time-sync">
+  <sl-relative-time sync></sl-relative-time>
+</div>
+
+<script>
+  const container = document.querySelector('.relative-time-sync');
+  const relativeTime = container.querySelector('sl-relative-time');
+
+  relativeTime.date = new Date(new Date().getTime() - 60000);
+</script>
+
+
+ +
+ 
import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
+
+const date = new Date(new Date().getTime() - 60000);
+
+const App = () => <SlRelativeTime date={date} sync />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Formatting Styles +

+

+ You can change how the time is displayed using the format attribute. Note that some locales may + display the same values for narrow and short formats. +

+ +
+
+
+
+ + +
+ +
+
+ +
+
+ 
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br />
+<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br />
+<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
+
+
+ +
+ 
import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
+
+const App = () => (
+  <>
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
+    <br />
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
+    <br />
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Localization +

+

Use the lang attribute to set the desired locale.

+ +
+
+ English:
+ Chinese:
+ German:
+ Greek:
+ Russian: + +
+ +
+
+ +
+
+ 
English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br />
+Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br />
+German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br />
+Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br />
+Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
+
+
+ +
+ 
import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
+
+const App = () => (
+  <>
+    English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
+    <br />
+    Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
+    <br />
+    German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
+    <br />
+    Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
+    <br />
+    Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/relative-time/relative-time.js';
+ + + +

To import this component as a React component:

+ 
import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ date + + The date from which to calculate time from. If not set, the current date and time will be used. When + passing a string, it’s strongly recommended to use the ISO 8601 format to ensure timezones are + handled correctly. To convert a date to this format in JavaScript, use + date.toISOString(). + + Date | string + + new Date() +
+ format + The formatting style to use. + 'long' | 'short' | 'narrow' + + 'long' +
+ numeric + + When auto, values such as “yesterday” and “tomorrow” will be shown when possible. When + always, values such as “1 day ago” and “in 1 day” will be shown. + + 'always' | 'auto' + + 'auto' +
+ sync + Keep the displayed value up to date as time passes. + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+
+
+
+ + diff --git a/components/resize-observer/index.html b/components/resize-observer/index.html new file mode 100644 index 00000000..4b7c2846 --- /dev/null +++ b/components/resize-observer/index.html @@ -0,0 +1,800 @@ + + + + + + + Resize Observer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Resize Observer

+ +
+ <sl-resize-observer> | SlResizeObserver +
+ +
+ Since 2.0 + stable +
+
+ +

+ The Resize Observer component offers a thin, declarative interface to the + ResizeObserver API. +

+ +

+ The resize observer will report changes to the dimensions of the elements it wraps through the + sl-resize event. When emitted, a collection of + ResizeObserverEntry + objects will be attached to event.detail that contains the target element and information about + its dimensions. +

+ +
+
+
+ +
Resize this box and watch the console 👉
+ +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="resize-observer-overview">
+  <sl-resize-observer>
+    <div>Resize this box and watch the console 👉</div>
+  </sl-resize-observer>
+</div>
+
+<script>
+  const container = document.querySelector('.resize-observer-overview');
+  const resizeObserver = container.querySelector('sl-resize-observer');
+
+  resizeObserver.addEventListener('sl-resize', event => {
+    console.log(event.detail);
+  });
+</script>
+
+<style>
+  .resize-observer-overview div {
+    display: flex;
+    border: solid 2px var(--sl-input-border-color);
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+</style>
+
+
+ +
+ 
import SlResizeObserver from '@onsonr/nebula/dist/react/resize-observer';
+
+const css = `
+  .resize-observer-overview div {
+    display: flex;
+    border: solid 2px var(--sl-input-border-color);
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="resize-observer-overview">
+      <SlResizeObserver onSlResize={event => console.log(event.detail)}>
+        <div>Resize this box and watch the console 👉</div>
+      </SlResizeObserver>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/resize-observer/resize-observer.js';
+ + + +

To import this component as a React component:

+ 
import SlResizeObserver from '@onsonr/nebula/dist/react/resize-observer';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)One or more elements to watch for resizing.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ disabled + Disables the observer. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-resizeonSlResizeEmitted when the element is resized. + { entries: ResizeObserverEntry[] } +
+
+ +

+ Learn more about events. +

+
+
+
+ + diff --git a/components/select/index.html b/components/select/index.html new file mode 100644 index 00000000..f76e5ae0 --- /dev/null +++ b/components/select/index.html @@ -0,0 +1,2870 @@ + + + + + + + Select + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Select

+ +
+ <sl-select> | SlSelect +
+ +
+ Since 2.0 + stable +
+
+ +

Selects allow you to choose items from a menu of predefined options.

+ +
+
+ + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + + +
+ +
+
+ +
+
+ 
<sl-select>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+  <sl-option value="option-4">Option 4</sl-option>
+  <sl-option value="option-5">Option 5</sl-option>
+  <sl-option value="option-6">Option 6</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+    <SlOption value="option-4">Option 4</SlOption>
+    <SlOption value="option-5">Option 5</SlOption>
+    <SlOption value="option-6">Option 6</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

Labels

+

+ Use the label attribute to give the select an accessible label. For labels that contain HTML, + use the label slot instead. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select label="Select one">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect label="Select one">
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Help Text +

+

+ Add descriptive help text to a select with the help-text attribute. For help texts that contain + HTML, use the help-text slot instead. +

+ +
+
+ + Novice + Intermediate + Advanced + + +
+ +
+
+ +
+
+ 
<sl-select label="Experience" help-text="Please tell us your skill level.">
+  <sl-option value="1">Novice</sl-option>
+  <sl-option value="2">Intermediate</sl-option>
+  <sl-option value="3">Advanced</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect label="Experience" help-text="Please tell us your skill level.">
+    <SlOption value="1">Novice</SlOption>
+    <SlOption value="2">Intermediate</SlOption>
+    <SlOption value="3">Advanced</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Placeholders +

+

Use the placeholder attribute to add a placeholder.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select placeholder="Select one">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect placeholder="Select one">
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Clearable +

+

+ Use the clearable attribute to make the control clearable. The clear button only appears when + an option is selected. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select clearable value="option-1">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect placeholder="Clearable" clearable>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Filled Selects +

+

Add the filled attribute to draw a filled select.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select filled>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect filled>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Pill

+

Use the pill attribute to give selects rounded edges.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select pill>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect pill>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable a select.

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select placeholder="Disabled" disabled>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect placeholder="Disabled" disabled>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Multiple +

+

+ To allow multiple options to be selected, use the multiple attribute. It’s a good practice to + use clearable when this option is enabled. To set multiple values at once, set + value to a space-delimited list of values. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + + +
+ +
+
+ +
+
+ 
<sl-select label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+  <sl-option value="option-4">Option 4</sl-option>
+  <sl-option value="option-5">Option 5</sl-option>
+  <sl-option value="option-6">Option 6</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect label="Select a Few" value={["option-1", "option-2", "option-3"]} multiple clearable>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+    <SlOption value="option-4">Option 4</SlOption>
+    <SlOption value="option-5">Option 5</SlOption>
+    <SlOption value="option-6">Option 6</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Setting Initial Values +

+

Use the value attribute to set the initial selection.

+

+ When using multiple, the value attribute uses space-delimited values to + select more than one option. Because of this, <sl-option> values cannot contain spaces. + If you’re accessing the value property through Javascript, it will be an array. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + Option 4 + + +
+ +
+
+ +
+
+ 
<sl-select value="option-1 option-2" multiple clearable>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+  <sl-option value="option-4">Option 4</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlDivider from '@onsonr/nebula/dist/react/divider';
+import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect value={["option-1", "option-2"]} multiple clearable>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Grouping Options +

+

+ Use <sl-divider> to group listbox items visually. You can also use + <small> to provide labels, but they won’t be announced by most assistive devices. +

+ +
+
+ + Section 1 + Option 1 + Option 2 + Option 3 + + Section 2 + Option 4 + Option 5 + Option 6 + + +
+ +
+
+ +
+
+ 
<sl-select>
+  <small>Section 1</small>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+  <sl-divider></sl-divider>
+  <small>Section 2</small>
+  <sl-option value="option-4">Option 4</sl-option>
+  <sl-option value="option-5">Option 5</sl-option>
+  <sl-option value="option-6">Option 6</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect>
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+    <SlOption value="option-4">Option 4</SlOption>
+    <SlOption value="option-5">Option 5</SlOption>
+    <SlOption value="option-6">Option 6</SlOption>
+  </SlSelect>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

+ Use the size attribute to change a select’s size. Note that size does not apply to listbox + options. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select placeholder="Small" size="small">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+<br />
+
+<sl-select placeholder="Medium" size="medium">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+<br />
+
+<sl-select placeholder="Large" size="large">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <>
+    <SlSelect placeholder="Small" size="small">
+      <SlOption value="option-1">Option 1</SlOption>
+      <SlOption value="option-2">Option 2</SlOption>
+      <SlOption value="option-3">Option 3</SlOption>
+    </SlSelect>
+
+    <br />
+
+    <SlSelect placeholder="Medium" size="medium">
+      <SlOption value="option-1">Option 1</SlOption>
+      <SlOption value="option-2">Option 2</SlOption>
+      <SlOption value="option-3">Option 3</SlOption>
+    </SlSelect>
+
+    <br />
+
+    <SlSelect placeholder="Large" size="large">
+      <SlOption value="option-1">Option 1</SlOption>
+      <SlOption value="option-2">Option 2</SlOption>
+      <SlOption value="option-3">Option 3</SlOption>
+    </SlSelect>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Placement +

+

+ The preferred placement of the select’s listbox can be set with the placement attribute. Note + that the actual position may vary to ensure the panel remains in the viewport. Valid placements are + top and bottom. +

+ +
+
+ + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select placement="top">
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <SlSelect placement="top">
+    <SlOption value="option-1">Option 1</SlOption>
+    <SlOption value="option-2">Option 2</SlOption>
+    <SlOption value="option-3">Option 3</SlOption>
+  </SlDropdown>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prefix Icons +

+

Use the prefix slot to prepend an icon to the control.

+ +
+
+ + + Option 1 + Option 2 + Option 3 + +
+ + + Option 1 + Option 2 + Option 3 + +
+ + + Option 1 + Option 2 + Option 3 + + +
+ +
+
+ +
+
+ 
<sl-select placeholder="Small" size="small" clearable>
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+<br />
+<sl-select placeholder="Medium" size="medium" clearable>
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+<br />
+<sl-select placeholder="Large" size="large" clearable>
+  <sl-icon name="house" slot="prefix"></sl-icon>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlOption from '@onsonr/nebula/dist/react/option';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+
+const App = () => (
+  <>
+    <SlSelect placeholder="Small" size="small">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlOption value="option-1">Option 1</SlOption>
+      <SlOption value="option-2">Option 2</SlOption>
+      <SlOption value="option-3">Option 3</SlOption>
+    </SlSelect>
+    <br />
+    <SlSelect placeholder="Medium" size="medium">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlOption value="option-1">Option 1</SlOption>
+      <SlOption value="option-2">Option 2</SlOption>
+      <SlOption value="option-3">Option 3</SlOption>
+    </SlSelect>
+    <br />
+    <SlSelect placeholder="Large" size="large">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlOption value="option-1">Option 1</SlOption>
+      <SlOption value="option-2">Option 2</SlOption>
+      <SlOption value="option-3">Option 3</SlOption>
+    </SlSelect>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Tags +

+

+ When multiple options can be selected, you can provide custom tags by passing a function to the + getTag property. Your function can return a string of HTML, a + Lit Template, or an + HTMLElement. The getTag() function will be called for each option. The first argument is an + <sl-option> element and the second argument is the tag’s index (its position in the tag + list). +

+

+ Remember that custom tags are rendered in a shadow root. To style them, you can use the + style attribute in your template or you can add your own + parts and target them with the + ::part() + selector. +

+ +
+
+ + + + Email + + + + Phone + + + + Chat + + + + + +
+ +
+
+ +
+
+ 
<sl-select
+  placeholder="Select one"
+  value="email phone"
+  multiple
+  clearable
+  class="custom-tag"
+>
+  <sl-option value="email">
+    <sl-icon slot="prefix" name="envelope"></sl-icon>
+    Email
+  </sl-option>
+  <sl-option value="phone">
+    <sl-icon slot="prefix" name="telephone"></sl-icon>
+    Phone
+  </sl-option>
+  <sl-option value="chat">
+    <sl-icon slot="prefix" name="chat-dots"></sl-icon>
+    Chat
+  </sl-option>
+</sl-select>
+
+<script type="module">
+  const select = document.querySelector('.custom-tag');
+
+  select.getTag = (option, index) => {
+    // Use the same icon used in the <sl-option>
+    const name = option.querySelector('sl-icon[slot="prefix"]').name;
+
+    // You can return a string, a Lit Template, or an HTMLElement here
+    return `
+      <sl-tag removable>
+        <sl-icon name="${name}" style="padding-inline-end: .5rem;"></sl-icon>
+        ${option.getTextLabel()}
+      </sl-tag>
+    `;
+  };
+</script>
+
+
+
+ +
+ + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/select/select.js';
+ + + +

To import this component as a React component:

+ 
import SlSelect from '@onsonr/nebula/dist/react/select';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default) + The listbox options. Must be <sl-option> elements. You can use + <sl-divider> to group items visually. +
+ label + The input’s label. Alternatively, you can use the label attribute.
+ prefix + Used to prepend a presentational icon or similar element to the combobox.
+ clear-icon + An icon to use in lieu of the default clear icon.
+ expand-icon + The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ help-text + + Text that describes how to use the input. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the select, submitted as a name/value pair with form data. + string + + '' +
+ value + + The current value of the select, submitted as a name/value pair with form data. When + multiple is enabled, the value attribute will be a space-delimited list of values based + on the options selected, and the value property will be an array. + For this reason, values must not contain spaces. + + string | string[] + + '' +
+ defaultValue + The default value of the form control. Primarily used for resetting the form control. + string | string[] + + '' +
+ size + The select’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ placeholder + Placeholder text to show as a hint when the select is empty. + string + + '' +
+ multiple + Allows more than one option to be selected. + + + boolean + + false +
+ maxOptionsVisible + +
+ + + max-options-visible + + + 		+ The maximum number of selected options to show when multiple is true. After the + maximum, ”+n” will be shown to indicate the number of additional items that are selected. Set to 0 + to remove the limit. + + number + + 3 +
+ disabled + Disables the select control. + + + boolean + + false +
+ clearable + Adds a clear button when the select is not empty. + boolean + + false +
+ open + + Indicates whether or not the select is open. You can toggle this attribute to show and hide the + menu, or you can use the show() and hide() methods and this attribute will + reflect the select’s open state. + + + + boolean + + false +
+ hoist + + Enable this option to prevent the listbox from being clipped when the component is placed inside a + container with + overflow: auto|scroll. Hoisting uses a fixed positioning strategy that works in many, + but not all, scenarios. + + boolean + + false +
+ filled + Draws a filled select. + + + boolean + + false +
+ pill + Draws a pill-style select with rounded edges. + + + boolean + + false +
+ label + The select’s label. If you need to display HTML, use the label slot instead. + string + + '' +
+ placement + + The preferred placement of the select’s menu. Note that the actual placement may vary as needed to + keep the listbox inside of the viewport. + + + + 'top' | 'bottom' + + 'bottom' +
+ helpText + +
+ + + help-text + + + 		+ The select’s help text. If you need to display HTML, use the help-text slot instead. + + string + + '' +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + The select’s required attribute. + + + boolean + + false +
+ getTag + + A function that customizes the tags to be rendered when multiple=true. The first argument is the + option, the second is the current tag’s index. The function should return either a Lit + TemplateResult or a string containing trusted HTML of the symbol to render at the specified value. + + (option: SlOption, index: number) => TemplateResult | string | HTMLElement + -
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-changeonSlChangeEmitted when the control’s value changes.-
sl-clearonSlClearEmitted when the control’s value is cleared.-
sl-inputonSlInputEmitted when the control receives input.-
sl-focusonSlFocusEmitted when the control gains focus.-
sl-bluronSlBlurEmitted when the control loses focus.-
sl-showonSlShowEmitted when the select’s menu opens.-
sl-after-showonSlAfterShowEmitted after the select’s menu opens and all animations are complete.-
sl-hideonSlHideEmitted when the select’s menu closes.-
sl-after-hideonSlAfterHideEmitted after the select’s menu closes and all animations are complete.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the listbox.-
hide()Hides the listbox.-
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
focus()Sets focus on the control. + options: FocusOptions +
blur()Removes focus from the control.-
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
form-controlThe form control that wraps the label, input, and help text.
form-control-labelThe label’s wrapper.
form-control-inputThe select’s wrapper.
form-control-help-textThe help text’s wrapper.
comboboxThe container the wraps the prefix, combobox, clear icon, and expand button.
prefixThe container that wraps the prefix slot.
display-inputThe element that displays the selected option’s label, an <input> element.
listboxThe listbox container where options are slotted.
tagsThe container that houses option tags when multiselect is used.
tagThe individual tags that represent each multiselect option.
tag__baseThe tag’s base part.
tag__contentThe tag’s content part.
tag__remove-buttonThe tag’s remove button.
tag__remove-button__baseThe tag’s remove button base part.
clear-buttonThe clear button.
expand-iconThe container that wraps the expand icon.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • + +
  • <sl-popup>
    • + +
  • <sl-tag>
    • +
+
+
+
+ + diff --git a/components/skeleton/index.html b/components/skeleton/index.html new file mode 100644 index 00000000..e3a2e627 --- /dev/null +++ b/components/skeleton/index.html @@ -0,0 +1,1644 @@ + + + + + + + Skeleton + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Skeleton

+ +
+ <sl-skeleton> | SlSkeleton +
+ +
+ Since 2.0 + stable +
+
+ +

+ Skeletons are used to provide a visual representation of where content will eventually be drawn. +

+ +

+ These are simple containers for scaffolding layouts that mimic what users will see when content has finished + loading. This prevents large areas of empty space during asynchronous operations. +

+

+ Skeletons try not to be opinionated, as there are endless possibilities for designing layouts. Therefore, + you’ll likely use more than one skeleton to create the effect you want. If you find yourself using them + frequently, consider creating a template that renders them with the desired arrangement and styles. +

+ +
+
+
+
+ + +
+ + + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="skeleton-overview">
+  <header>
+    <sl-skeleton></sl-skeleton>
+    <sl-skeleton></sl-skeleton>
+  </header>
+
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+</div>
+
+<style>
+  .skeleton-overview header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-overview header sl-skeleton:last-child {
+    flex: 0 0 auto;
+    width: 30%;
+  }
+
+  .skeleton-overview sl-skeleton {
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(1) {
+    float: left;
+    width: 3rem;
+    height: 3rem;
+    margin-right: 1rem;
+    vertical-align: middle;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(3) {
+    width: 95%;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(4) {
+    width: 80%;
+  }
+</style>
+
+
+ +
+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+
+const css = `
+  .skeleton-overview header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-overview header sl-skeleton:last-child {
+    flex: 0 0 auto;
+    width: 30%;
+  }
+
+  .skeleton-overview sl-skeleton {
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(1) {
+    float: left;
+    width: 3rem;
+    height: 3rem;
+    margin-right: 1rem;
+    vertical-align: middle;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(3) {
+    width: 95%;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(4) {
+    width: 80%;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-overview">
+      <header>
+        <SlSkeleton />
+        <SlSkeleton />
+      </header>
+
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Effects +

+

+ There are two built-in effects, sheen and pulse. Effects are intentionally subtle, + as they can be distracting when used extensively. The default is none, which displays a static, + non-animated skeleton. +

+ +
+
+
+ + None + + + Sheen + + + Pulse +
+ + + +
+ +
+
+ +
+
+ 
<div class="skeleton-effects">
+  <sl-skeleton effect="none"></sl-skeleton>
+  None
+
+  <sl-skeleton effect="sheen"></sl-skeleton>
+  Sheen
+
+  <sl-skeleton effect="pulse"></sl-skeleton>
+  Pulse
+</div>
+
+<style>
+  .skeleton-effects {
+    font-size: var(--sl-font-size-small);
+  }
+
+  .skeleton-effects sl-skeleton:not(:first-child) {
+    margin-top: 1rem;
+  }
+</style>
+
+
+ +
+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+
+const css = `
+  .skeleton-effects {
+    font-size: var(--sl-font-size-small);
+  }
+
+  .skeleton-effects sl-skeleton:not(:first-child) {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-effects">
+      <SlSkeleton effect="none" />
+      None
+      <SlSkeleton effect="sheen" />
+      Sheen
+      <SlSkeleton effect="pulse" />
+      Pulse
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Paragraphs +

+

Use multiple skeletons and some clever styles to simulate paragraphs.

+ +
+
+
+ + + + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="skeleton-paragraphs">
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+</div>
+
+<style>
+  .skeleton-paragraphs sl-skeleton {
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-paragraphs sl-skeleton:nth-child(2) {
+    width: 95%;
+  }
+
+  .skeleton-paragraphs sl-skeleton:nth-child(4) {
+    width: 90%;
+  }
+
+  .skeleton-paragraphs sl-skeleton:last-child {
+    width: 50%;
+  }
+</style>
+
+
+ +
+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+
+const css = `
+  .skeleton-paragraphs sl-skeleton {
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-paragraphs sl-skeleton:nth-child(2) {
+    width: 95%;
+  }
+
+  .skeleton-paragraphs sl-skeleton:nth-child(4) {
+    width: 90%;
+  }
+
+  .skeleton-paragraphs sl-skeleton:last-child {
+    width: 50%;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-paragraphs">
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Avatars +

+

Set a matching width and height to make a circle, square, or rounded avatar skeleton.

+ +
+
+
+ + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="skeleton-avatars">
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+  <sl-skeleton></sl-skeleton>
+</div>
+
+<style>
+  .skeleton-avatars sl-skeleton {
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    margin-right: 0.5rem;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(1) {
+    --border-radius: 0;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+</style>
+
+
+ +
+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+
+const css = `
+  .skeleton-avatars sl-skeleton {
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    margin-right: .5rem;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(1) {
+    --border-radius: 0;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-avatars">
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Shapes +

+

+ Use the --border-radius custom property to make circles, squares, and rectangles. For more + complex shapes, you can apply clip-path to the indicator part. + Try Clippy + if you need help generating custom shapes. +

+ +
+
+
+ + + + + +
+ + + +
+ +
+
+ +
+
+ 
<div class="skeleton-shapes">
+  <sl-skeleton class="square"></sl-skeleton>
+  <sl-skeleton class="circle"></sl-skeleton>
+  <sl-skeleton class="triangle"></sl-skeleton>
+  <sl-skeleton class="cross"></sl-skeleton>
+  <sl-skeleton class="comment"></sl-skeleton>
+</div>
+
+<style>
+  .skeleton-shapes sl-skeleton {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+  }
+
+  .skeleton-shapes .square::part(indicator) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+
+  .skeleton-shapes .circle::part(indicator) {
+    --border-radius: var(--sl-border-radius-circle);
+  }
+
+  .skeleton-shapes .triangle::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  }
+
+  .skeleton-shapes .cross::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(
+      20% 0%,
+      0% 20%,
+      30% 50%,
+      0% 80%,
+      20% 100%,
+      50% 70%,
+      80% 100%,
+      100% 80%,
+      70% 50%,
+      100% 20%,
+      80% 0%,
+      50% 30%
+    );
+  }
+
+  .skeleton-shapes .comment::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
+  }
+
+  .skeleton-shapes sl-skeleton:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+</style>
+
+
+ +
+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+
+const css = `
+  .skeleton-shapes sl-skeleton {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+  }
+
+  .skeleton-shapes .square::part(indicator) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+
+  .skeleton-shapes .circle::part(indicator) {
+    --border-radius: var(--sl-border-radius-circle);
+  }
+
+  .skeleton-shapes .triangle::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  }
+
+  .skeleton-shapes .cross::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
+  }
+
+  .skeleton-shapes .comment::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
+  }
+
+  .skeleton-shapes sl-skeleton:not(:last-child) {
+    margin-right: .5rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-shapes">
+      <SlSkeleton className="square" />
+      <SlSkeleton className="circle" />
+      <SlSkeleton className="triangle" />
+      <SlSkeleton className="cross" />
+      <SlSkeleton className="comment" />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Colors +

+

+ Set the --color and --sheen-color custom properties to adjust the skeleton’s + color. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
+
+
+ +
+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+
+const css = `
+  .skeleton-avatars sl-skeleton {
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    margin-right: .5rem;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(1) {
+    --border-radius: 0;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => <SlSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/skeleton/skeleton.js';
+ + + +

To import this component as a React component:

+ 
import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
+ + + +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ effect + Determines which effect the skeleton will use. + 'pulse' | 'sheen' | 'none' + + 'none' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--border-radiusThe skeleton’s border radius.
--colorThe color of the skeleton.
--sheen-colorThe sheen color when the skeleton is in its loading state.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
indicatorThe skeleton’s indicator which is responsible for its color and animation.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/spinner/index.html b/components/spinner/index.html new file mode 100644 index 00000000..d7e9a8c8 --- /dev/null +++ b/components/spinner/index.html @@ -0,0 +1,926 @@ + + + + + + + Spinner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Spinner

+ +
+ <sl-spinner> | SlSpinner +
+ +
+ Since 2.0 + stable +
+
+ +

Spinners are used to show the progress of an indeterminate operation.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-spinner></sl-spinner>
+
+
+ +
+ 
import SlSpinner from '@onsonr/nebula/dist/react/spinner';
+
+const App = () => <SlSpinner />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Size

+

+ Spinners are sized based on the current font size. To change their size, set the + font-size property on the spinner itself or on a parent element as shown below. +

+ +
+
+ + + + +
+ +
+
+ +
+
+ 
<sl-spinner></sl-spinner>
+<sl-spinner style="font-size: 2rem;"></sl-spinner>
+<sl-spinner style="font-size: 3rem;"></sl-spinner>
+
+
+ +
+ 
import SlSpinner from '@onsonr/nebula/dist/react/spinner';
+
+const App = () => (
+  <>
+    <SlSpinner />
+    <SlSpinner style={{ fontSize: '2rem' }} />
+    <SlSpinner style={{ fontSize: '3rem' }} />
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Track Width +

+

+ The width of the spinner’s track can be changed by setting the --track-width custom property. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-spinner style="font-size: 50px; --track-width: 10px;"></sl-spinner>
+
+
+ +
+ 
import SlSpinner from '@onsonr/nebula/dist/react/spinner';
+
+const App = () => (
+  <SlSpinner
+    style={{
+      fontSize: '3rem',
+      '--track-width': '6px'
+    }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Color

+

+ The spinner’s colors can be changed by setting the --indicator-color and + --track-color custom properties. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
+
+
+ +
+ 
import SlSpinner from '@onsonr/nebula/dist/react/spinner';
+
+const App = () => (
+  <SlSpinner
+    style={{
+      fontSize: '3rem',
+      '--indicator-color': 'deeppink',
+      '--track-color': 'pink'
+    }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/spinner/spinner.js';
+ + + +

To import this component as a React component:

+ 
import SlSpinner from '@onsonr/nebula/dist/react/spinner';
+ + + +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--track-widthThe width of the track.
--track-colorThe color of the track.
--indicator-colorThe color of the spinner’s indicator.
--speedThe time it takes for the spinner to complete one animation cycle.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/split-panel/index.html b/components/split-panel/index.html new file mode 100644 index 00000000..2ad318cd --- /dev/null +++ b/components/split-panel/index.html @@ -0,0 +1,2709 @@ + + + + + + + Split Panel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Split Panel

+ +
+ <sl-split-panel> | SlSplitPanel +
+ +
+ Since 2.0 + stable +
+
+ +

+ Split panels display two adjacent panels, allowing the user to reposition them. +

+ +
+
+ +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel>
+  <div
+    slot="start"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const App = () => (
+  <SlSplitPanel>
+    <div
+      slot="start"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      End
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Initial Position +

+

+ To set the initial position, use the position attribute. If no position is provided, it will + default to 50% of the available space. +

+ +
+
+ +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel position="75">
+  <div
+    slot="start"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+
+ +
+ + + +
+
+ +

+ Initial Position in Pixels +

+

+ To set the initial position in pixels instead of a percentage, use the + position-in-pixels attribute. +

+ +
+
+ +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel position-in-pixels="150">
+  <div
+    slot="start"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const App = () => (
+  <SlSplitPanel position="200">
+    <div
+      slot="start"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      End
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Vertical +

+

+ Add the vertical attribute to render the split panel in a vertical orientation where the start + and end panels are stacked. You also need to set a height when using the vertical orientation. +

+ +
+
+ +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel vertical style="height: 400px;">
+  <div
+    slot="start"
+    style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const App = () => (
+  <SlSplitPanel vertical style={{ height: '400px' }}>
+    <div
+      slot="start"
+      style={{
+        height: '100%',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style={{
+        height: '100%',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      End
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Snapping +

+

+ To snap panels at specific positions while dragging, add the snap attribute with one or more + space-separated values. Values must be in pixels or percentages. For example, to snap the panel at + 100px and 50%, use snap="100px 50%". You can also customize how close + the divider must be before snapping with the snap-threshold attribute. +

+ +
+
+
+ +
+ Start +
+
+ End +
+ + +
+
+ + + +
+ +
+
+ +
+
+ 
<div class="split-panel-snapping">
+  <sl-split-panel snap="100px 50%">
+    <div
+      slot="start"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    >
+      End
+    </div>
+  </sl-split-panel>
+
+  <div class="split-panel-snapping-dots"></div>
+</div>
+
+<style>
+  .split-panel-snapping {
+    position: relative;
+  }
+
+  .split-panel-snapping-dots::before,
+  .split-panel-snapping-dots::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--sl-color-neutral-400);
+    transform: translateX(-3px);
+  }
+
+  .split-panel-snapping-dots::before {
+    left: 100px;
+  }
+
+  .split-panel-snapping-dots::after {
+    left: 50%;
+  }
+</style>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const css = `
+  .split-panel-snapping {
+    position: relative;
+  }
+
+  .split-panel-snapping-dots::before,
+  .split-panel-snapping-dots::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--sl-color-neutral-400);
+    transform: translateX(-3px);
+  }
+
+  .split-panel-snapping-dots::before {
+    left: 100px;
+  }
+
+  .split-panel-snapping-dots::after {
+    left: 50%;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="split-panel-snapping">
+      <SlSplitPanel snap="100px 50%">
+        <div
+          slot="start"
+          style={{
+            height: '200px',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          Start
+        </div>
+        <div
+          slot="end"
+          style={{
+            height: '200px',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          End
+        </div>
+      </SlSplitPanel>
+
+      <div className="split-panel-snapping-dots" />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Add the disabled attribute to prevent the divider from being repositioned.

+ +
+
+ +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel disabled>
+  <div
+    slot="start"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const App = () => (
+  <SlSplitPanel disabled>
+    <div
+      slot="start"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      End
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Setting the Primary Panel +

+

+ By default, both panels will grow or shrink proportionally when the host element is resized. If a primary + panel is designated, it will maintain its size and the secondary panel will grow or shrink to fit the + remaining space. You can set the primary panel to start or end using the + primary attribute. +

+

Try resizing the example below with each option and notice how the panels respond.

+ +
+
+
+ +
+ Start +
+
+ End +
+ + + + None + Start + End + +
+ + + +
+ +
+
+ +
+
+ 
<div class="split-panel-primary">
+  <sl-split-panel>
+    <div
+      slot="start"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    >
+      End
+    </div>
+  </sl-split-panel>
+
+  <sl-select label="Primary Panel" value="" style="max-width: 200px; margin-top: 1rem;">
+    <sl-option value="">None</sl-option>
+    <sl-option value="start">Start</sl-option>
+    <sl-option value="end">End</sl-option>
+  </sl-select>
+</div>
+
+<script>
+  const container = document.querySelector('.split-panel-primary');
+  const splitPanel = container.querySelector('sl-split-panel');
+  const select = container.querySelector('sl-select');
+
+  select.addEventListener('sl-change', () => (splitPanel.primary = select.value));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+
+const App = () => {
+  const [primary, setPrimary] = useState('');
+
+  return (
+    <>
+      <SlSplitPanel primary={primary}>
+        <div
+          slot="start"
+          style={{
+            height: '200px',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          Start
+        </div>
+        <div
+          slot="end"
+          style={{
+            height: '200px',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          End
+        </div>
+      </SlSplitPanel>
+
+      <SlSelect
+        label="Primary Panel"
+        value={primary}
+        style={{ maxWidth: '200px', marginTop: '1rem' }}
+        onSlChange={event => setPrimary(event.target.value)}
+      >
+        <SlMenuItem value="">None</SlMenuItem>
+        <SlMenuItem value="start">Start</SlMenuItem>
+        <SlMenuItem value="end">End</SlMenuItem>
+      </SlSelect>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Min & Max +

+

+ To set a minimum or maximum size of the primary panel, use the --min and + --max custom properties. Since the secondary panel is flexible, size constraints can only be + applied to the primary panel. If no primary panel is designated, these constraints will be applied to the + start panel. +

+

+ This examples demonstrates how you can ensure both panels are at least 150px using --min, + --max, and the calc() function. +

+ +
+
+ +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
+  <div
+    slot="start"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const App = () => (
+  <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
+    <div
+      slot="start"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      End
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Nested Split Panels +

+

Create complex layouts that can be repositioned independently by nesting split panels.

+ +
+
+ +
+ Start +
+
+ +
+ Top +
+
+ Bottom +
+ +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel>
+  <div
+    slot="start"
+    style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden"
+  >
+    Start
+  </div>
+  <div slot="end">
+    <sl-split-panel vertical style="height: 400px;">
+      <div
+        slot="start"
+        style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden"
+      >
+        Top
+      </div>
+      <div
+        slot="end"
+        style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden"
+      >
+        Bottom
+      </div>
+    </sl-split-panel>
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+
+const App = () => (
+  <SlSplitPanel>
+    <div
+      slot="start"
+      style={{
+        height: '400px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div slot="end">
+      <SlSplitPanel vertical style={{ height: '400px' }}>
+        <div
+          slot="start"
+          style={{
+            height: '100%',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          Start
+        </div>
+        <div
+          slot="end"
+          style={{
+            height: '100%',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          End
+        </div>
+      </SlSplitPanel>
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing the Divider +

+

+ You can target the divider part to apply CSS properties to the divider. To add a custom handle, + slot an icon into the divider slot. When customizing the divider, make sure to think about + focus styles for keyboard users. +

+ +
+
+ + +
+ Start +
+
+ End +
+ + +
+ +
+
+ +
+
+ 
<sl-split-panel style="--divider-width: 20px;">
+  <sl-icon slot="divider" name="grip-vertical"></sl-icon>
+  <div
+    slot="start"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    Start
+  </div>
+  <div
+    slot="end"
+    style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+  >
+    End
+  </div>
+</sl-split-panel>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const App = () => (
+  <SlSplitPanel style={{ '--divider-width': '20px' }}>
+    <SlIcon slot="divider" name="grip-vertical" />
+    <div
+      slot="start"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style={{
+        height: '200px',
+        background: 'var(--sl-color-neutral-50)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      End
+    </div>
+  </SlSplitPanel>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Here’s a more elaborate example that changes the divider’s color and width and adds a styled handle.

+ +
+
+
+ + +
+ Start +
+
+ End +
+ +
+ + + +
+ +
+
+ +
+
+ 
<div class="split-panel-divider">
+  <sl-split-panel>
+    <sl-icon slot="divider" name="grip-vertical"></sl-icon>
+    <div
+      slot="start"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    >
+      Start
+    </div>
+    <div
+      slot="end"
+      style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+    >
+      End
+    </div>
+  </sl-split-panel>
+</div>
+
+<style>
+  .split-panel-divider sl-split-panel {
+    --divider-width: 2px;
+  }
+
+  .split-panel-divider sl-split-panel::part(divider) {
+    background-color: var(--sl-color-pink-600);
+  }
+
+  .split-panel-divider sl-icon {
+    position: absolute;
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-pink-600);
+    color: var(--sl-color-neutral-0);
+    padding: 0.5rem 0.125rem;
+  }
+
+  .split-panel-divider sl-split-panel::part(divider):focus-visible {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .split-panel-divider sl-split-panel:focus-within sl-icon {
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
+  }
+</style>
+
+
+ +
+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
+
+const css = `
+  .split-panel-divider sl-split-panel {
+    --divider-width: 2px;
+  }
+
+  .split-panel-divider sl-split-panel::part(divider) {
+    background-color: var(--sl-color-pink-600);
+  }
+
+  .split-panel-divider sl-icon {
+    position: absolute;
+    border-radius: var(--sl-border-radius-small);
+    background: var(--sl-color-pink-600);
+    color: var(--sl-color-neutral-0);
+    padding: .5rem .125rem;
+  }
+
+  .split-panel-divider sl-split-panel::part(divider):focus-visible {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .split-panel-divider sl-split-panel:focus-within sl-icon {
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="split-panel-divider">
+      <SlSplitPanel>
+        <SlIcon slot="divider" name="grip-vertical" />
+        <div
+          slot="start"
+          style={{
+            height: '200px',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          Start
+        </div>
+        <div
+          slot="end"
+          style={{
+            height: '200px',
+            background: 'var(--sl-color-neutral-50)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          End
+        </div>
+      </SlSplitPanel>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/split-panel/split-panel.js';
+ + + +

To import this component as a React component:

+ 
import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
+ start + Content to place in the start panel.
+ end + Content to place in the end panel.
+ divider + The divider. Useful for slotting in a custom icon that renders as a handle.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ position + + The current position of the divider from the primary panel’s edge as a percentage 0–100. Defaults to + 50% of the container’s initial size. + + + + number + + 50 +
+ positionInPixels + +
+ + + position-in-pixels + + + 		The current position of the divider from the primary panel’s edge in pixels. + number + -
+ vertical + Draws the split panel in a vertical orientation with the start and end panels stacked. + + + boolean + + false +
+ disabled + + Disables resizing. Note that the position may still change as a result of resizing the host element. + + + + boolean + + false +
+ primary + + If no primary panel is designated, both panels will resize proportionally when the host element is + resized. If a primary panel is designated, it will maintain its size and the other panel will grow + or shrink as needed when the host element is resized. + + 'start' | 'end' | undefined + -
+ snap + + One or more space-separated values at which the divider should snap. Values can be in pixels or + percentages, e.g. + "100px 50%". + + string | undefined + -
+ snapThreshold + +
+ + + snap-threshold + + + 		How close the divider must be to a snap point until snapping occurs. + number + + 12 +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-repositiononSlRepositionEmitted when the divider’s position changes.-
+
+ +

+ Learn more about events. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--divider-widthThe width of the visible divider.4px
--divider-hit-area + The invisible region around the divider where dragging can occur. This is usually wider than the + divider to facilitate easier dragging. + 12px
--minThe minimum allowed size of the primary panel.0
--maxThe maximum allowed size of the primary panel.100%
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
startThe start panel.
endThe end panel.
panelTargets both the start and end panels.
dividerThe divider that separates the start and end panels.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/switch/index.html b/components/switch/index.html new file mode 100644 index 00000000..bcbee235 --- /dev/null +++ b/components/switch/index.html @@ -0,0 +1,1464 @@ + + + + + + + Switch + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Switch

+ +
+ <sl-switch> | SlSwitch +
+ +
+ Since 2.0 + stable +
+
+ +

Switches allow the user to toggle an option on or off.

+ +
+
+ Switch + +
+ +
+
+ +
+
+ 
<sl-switch>Switch</sl-switch>
+
+
+ +
+ 
import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const App = () => <SlSwitch>Switch</SlSwitch>;
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

+ Checked +

+

Use the checked attribute to activate the switch.

+ +
+
+ Checked + +
+ +
+
+ +
+
+ 
<sl-switch checked>Checked</sl-switch>
+
+
+ +
+ 
import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const App = () => <SlSwitch checked>Checked</SlSwitch>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable the switch.

+ +
+
+ Disabled + +
+ +
+
+ +
+
+ 
<sl-switch disabled>Disabled</sl-switch>
+
+
+ +
+ 
import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change a switch’s size.

+ +
+
+ Small +
+ Medium +
+ Large + +
+ +
+
+ +
+
+ 
<sl-switch size="small">Small</sl-switch>
+<br />
+<sl-switch size="medium">Medium</sl-switch>
+<br />
+<sl-switch size="large">Large</sl-switch>
+
+
+ +
+ 
import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const App = () => (
+  <>
+    <SlSwitch size="small">Small</SlSwitch>
+    <br />
+    <SlSwitch size="medium">Medium</SlSwitch>
+    <br />
+    <SlSwitch size="large">Large</SlSwitch>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Help Text +

+

+ Add descriptive help text to a switch with the help-text attribute. For help texts that contain + HTML, use the help-text slot instead. +

+ +
+
+ Label + +
+ +
+
+ +
+
+ 
<sl-switch help-text="What should the user know about the switch?">Label</sl-switch>
+
+
+ +
+ 
import SlSwitch from '@onsonr/nebula/dist/react/checkbox';
+
+const App = () => <SlSwitch help-text="What should the user know about the switch?">Label</SlSwitch>;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Styles +

+

Use the available custom properties to change how the switch is styled.

+ +
+
+ Really big + +
+ +
+
+ +
+
+ 
<sl-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</sl-switch>
+
+
+ +
+ 
import SlSwitch from '@onsonr/nebula/dist/react/switch';
+
+const App = () => (
+  <SlSwitch
+    style={{
+      '--width': '80px',
+      '--height': '32px',
+      '--thumb-size': '26px'
+    }}
+  />
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/switch/switch.js';
+ + + +

To import this component as a React component:

+ 
import SlSwitch from '@onsonr/nebula/dist/react/switch';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default)The switch’s label.
+ help-text + + Text that describes how to use the switch. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the switch, submitted as a name/value pair with form data. + string + + '' +
+ value + The current value of the switch, submitted as a name/value pair with form data. + string + -
+ size + The switch’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ disabled + Disables the switch. + + + boolean + + false +
+ checked + Draws the switch in a checked state. + + + boolean + + false +
+ defaultChecked + The default value of the form control. Primarily used for resetting the form control. + boolean + + false +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + Makes the switch a required field. + + + boolean + + false +
+ helpText + +
+ + + help-text + + + 		+ The switch’s help text. If you need to display HTML, use the help-text slot instead. + + string + + '' +
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the control loses focus.-
sl-changeonSlChangeEmitted when the control’s checked state changes.-
sl-inputonSlInputEmitted when the control receives input.-
sl-focusonSlFocusEmitted when the control gains focus.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
click()Simulates a click on the switch.-
focus()Sets focus on the switch. + options: FocusOptions +
blur()Removes focus from the switch.-
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--widthThe width of the switch.
--heightThe height of the switch.
--thumb-sizeThe size of the thumb.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
controlThe control that houses the switch’s thumb.
thumbThe switch’s thumb.
labelThe switch’s label.
form-control-help-textThe help text’s wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/tab-group/index.html b/components/tab-group/index.html new file mode 100644 index 00000000..638659c5 --- /dev/null +++ b/components/tab-group/index.html @@ -0,0 +1,1863 @@ + + + + + + + Tab Group + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tab Group

+ +
+ <sl-tab-group> | SlTabGroup +
+ +
+ Since 2.0 + stable +
+
+ +

+ Tab groups organize content into a container that shows one section at a time. +

+ +

+ Tab groups make use of tabs and + tab panels. Each tab must be slotted into the nav slot and + its panel must refer to a tab panel of the same name. +

+ +
+
+ + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + + +
+ +
+
+ +
+
+ 
<sl-tab-group>
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup>
+    <SlTab slot="nav" panel="general">
+      General
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
+      Custom
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
+      Advanced
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
+      Disabled
+    </SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Tabs on Bottom +

+

Tabs can be shown on the bottom by setting placement to bottom.

+ +
+
+ + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + + +
+ +
+
+ +
+
+ 
<sl-tab-group placement="bottom">
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup placement="bottom">
+    <SlTab slot="nav" panel="general">
+      General
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
+      Custom
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
+      Advanced
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
+      Disabled
+    </SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Tabs on Start +

+

Tabs can be shown on the starting side by setting placement to start.

+ +
+
+ + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + + +
+ +
+
+ +
+
+ 
<sl-tab-group placement="start">
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup placement="start">
+    <SlTab slot="nav" panel="general">
+      General
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
+      Custom
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
+      Advanced
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
+      Disabled
+    </SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Tabs on End +

+

Tabs can be shown on the ending side by setting placement to end.

+ +
+
+ + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + + +
+ +
+
+ +
+
+ 
<sl-tab-group placement="end">
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup placement="end">
+    <SlTab slot="nav" panel="general">
+      General
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
+      Custom
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
+      Advanced
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
+      Disabled
+    </SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Closable Tabs +

+

+ Add the closable attribute to a tab to show a close button. This example shows how you can + dynamically remove tabs from the DOM when the close button is activated. +

+ +
+
+ + General + Closable 1 + Closable 2 + Closable 3 + + This is the general tab panel. + This is the first closable tab panel. + This is the second closable tab panel. + This is the third closable tab panel. + + + + +
+ +
+
+ +
+
+ 
<sl-tab-group class="tabs-closable">
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="closable-1" closable>Closable 1</sl-tab>
+  <sl-tab slot="nav" panel="closable-2" closable>Closable 2</sl-tab>
+  <sl-tab slot="nav" panel="closable-3" closable>Closable 3</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="closable-1">This is the first closable tab panel.</sl-tab-panel>
+  <sl-tab-panel name="closable-2">This is the second closable tab panel.</sl-tab-panel>
+  <sl-tab-panel name="closable-3">This is the third closable tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+<script>
+  const tabGroup = document.querySelector('.tabs-closable');
+
+  tabGroup.addEventListener('sl-close', async event => {
+    const tab = event.target;
+    const panel = tabGroup.querySelector(`sl-tab-panel[name="${tab.panel}"]`);
+
+    // Show the previous tab if the tab is currently active
+    if (tab.active) {
+      tabGroup.show(tab.previousElementSibling.panel);
+    }
+
+    // Remove the tab + panel
+    tab.remove();
+    panel.remove();
+  });
+</script>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => {
+  function handleClose(event) {
+    //
+    // This is a crude example that removes the tab and its panel from the DOM.
+    // There are better ways to manage tab creation/removal in React, but that
+    // would significantly complicate the example.
+    //
+    const tab = event.target;
+    const tabGroup = tab.closest('sl-tab-group');
+    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
+
+    tab.remove();
+    tabPanel.remove();
+  }
+
+  return (
+    <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
+      <SlTab slot="nav" panel="general">
+        General
+      </SlTab>
+      <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>
+        Closable 1
+      </SlTab>
+      <SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>
+        Closable 2
+      </SlTab>
+      <SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>
+        Closable 3
+      </SlTab>
+
+      <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+      <SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel>
+      <SlTabPanel name="closable-2">This is the second closable tab panel.</SlTabPanel>
+      <SlTabPanel name="closable-3">This is the third closable tab panel.</SlTabPanel>
+    </SlTabGroup>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Scrolling Tabs +

+

When there are more tabs than horizontal space allows, the nav will be scrollable.

+ +
+
+ + Tab 1 + Tab 2 + Tab 3 + Tab 4 + Tab 5 + Tab 6 + Tab 7 + Tab 8 + Tab 9 + Tab 10 + Tab 11 + Tab 12 + Tab 13 + Tab 14 + Tab 15 + Tab 16 + Tab 17 + Tab 18 + Tab 19 + Tab 20 + + Tab panel 1 + Tab panel 2 + Tab panel 3 + Tab panel 4 + Tab panel 5 + Tab panel 6 + Tab panel 7 + Tab panel 8 + Tab panel 9 + Tab panel 10 + Tab panel 11 + Tab panel 12 + Tab panel 13 + Tab panel 14 + Tab panel 15 + Tab panel 16 + Tab panel 17 + Tab panel 18 + Tab panel 19 + Tab panel 20 + + +
+ +
+
+ +
+
+ 
<sl-tab-group>
+  <sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
+  <sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
+  <sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
+  <sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
+  <sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
+  <sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
+  <sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
+  <sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
+  <sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
+  <sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
+  <sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
+  <sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
+  <sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
+  <sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
+  <sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
+  <sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
+  <sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
+  <sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
+  <sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
+  <sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
+
+  <sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
+  <sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
+  <sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
+  <sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
+  <sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
+  <sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
+  <sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
+  <sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
+  <sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
+  <sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
+  <sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
+  <sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
+  <sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
+  <sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
+  <sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
+  <sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
+  <sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
+  <sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
+  <sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
+  <sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup>
+    <SlTab slot="nav" panel="tab-1">
+      Tab 1
+    </SlTab>
+    <SlTab slot="nav" panel="tab-2">
+      Tab 2
+    </SlTab>
+    <SlTab slot="nav" panel="tab-3">
+      Tab 3
+    </SlTab>
+    <SlTab slot="nav" panel="tab-4">
+      Tab 4
+    </SlTab>
+    <SlTab slot="nav" panel="tab-5">
+      Tab 5
+    </SlTab>
+    <SlTab slot="nav" panel="tab-6">
+      Tab 6
+    </SlTab>
+    <SlTab slot="nav" panel="tab-7">
+      Tab 7
+    </SlTab>
+    <SlTab slot="nav" panel="tab-8">
+      Tab 8
+    </SlTab>
+    <SlTab slot="nav" panel="tab-9">
+      Tab 9
+    </SlTab>
+    <SlTab slot="nav" panel="tab-10">
+      Tab 10
+    </SlTab>
+    <SlTab slot="nav" panel="tab-11">
+      Tab 11
+    </SlTab>
+    <SlTab slot="nav" panel="tab-12">
+      Tab 12
+    </SlTab>
+    <SlTab slot="nav" panel="tab-13">
+      Tab 13
+    </SlTab>
+    <SlTab slot="nav" panel="tab-14">
+      Tab 14
+    </SlTab>
+    <SlTab slot="nav" panel="tab-15">
+      Tab 15
+    </SlTab>
+    <SlTab slot="nav" panel="tab-16">
+      Tab 16
+    </SlTab>
+    <SlTab slot="nav" panel="tab-17">
+      Tab 17
+    </SlTab>
+    <SlTab slot="nav" panel="tab-18">
+      Tab 18
+    </SlTab>
+    <SlTab slot="nav" panel="tab-19">
+      Tab 19
+    </SlTab>
+    <SlTab slot="nav" panel="tab-20">
+      Tab 20
+    </SlTab>
+
+    <SlTabPanel name="tab-1">Tab panel 1</SlTabPanel>
+    <SlTabPanel name="tab-2">Tab panel 2</SlTabPanel>
+    <SlTabPanel name="tab-3">Tab panel 3</SlTabPanel>
+    <SlTabPanel name="tab-4">Tab panel 4</SlTabPanel>
+    <SlTabPanel name="tab-5">Tab panel 5</SlTabPanel>
+    <SlTabPanel name="tab-6">Tab panel 6</SlTabPanel>
+    <SlTabPanel name="tab-7">Tab panel 7</SlTabPanel>
+    <SlTabPanel name="tab-8">Tab panel 8</SlTabPanel>
+    <SlTabPanel name="tab-9">Tab panel 9</SlTabPanel>
+    <SlTabPanel name="tab-10">Tab panel 10</SlTabPanel>
+    <SlTabPanel name="tab-11">Tab panel 11</SlTabPanel>
+    <SlTabPanel name="tab-12">Tab panel 12</SlTabPanel>
+    <SlTabPanel name="tab-13">Tab panel 13</SlTabPanel>
+    <SlTabPanel name="tab-14">Tab panel 14</SlTabPanel>
+    <SlTabPanel name="tab-15">Tab panel 15</SlTabPanel>
+    <SlTabPanel name="tab-16">Tab panel 16</SlTabPanel>
+    <SlTabPanel name="tab-17">Tab panel 17</SlTabPanel>
+    <SlTabPanel name="tab-18">Tab panel 18</SlTabPanel>
+    <SlTabPanel name="tab-19">Tab panel 19</SlTabPanel>
+    <SlTabPanel name="tab-20">Tab panel 20</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Manual Activation +

+

+ When focused, keyboard users can press Left or Right to select the desired tab. By + default, the corresponding tab panel will be shown immediately (automatic activation). You can change this + behavior by setting activation="manual" which will require the user to press + Space or Enter before showing the tab panel (manual activation). +

+ +
+
+ + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + + +
+ +
+
+ +
+
+ 
<sl-tab-group activation="manual">
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup activation="manual">
+    <SlTab slot="nav" panel="general">
+      General
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
+      Custom
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
+      Advanced
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
+      Disabled
+    </SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tab-group/tab-group.js';
+ + + +

To import this component as a React component:

+ 
import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default) + Used for grouping tab panels in the tab group. Must be <sl-tab-panel> elements. +
+ nav + Used for grouping tabs in the tab group. Must be <sl-tab> elements.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ placement + The placement of the tabs. + 'top' | 'bottom' | 'start' | 'end' + + 'top' +
+ activation + + When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab + panel. When set to manual, the tab will receive focus but will not show until the user presses + spacebar or enter. + + 'auto' | 'manual' + + 'auto' +
+ noScrollControls + +
+ + + no-scroll-controls + + + 		Disables the scroll arrows that appear when tabs overflow. + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-tab-showonSlTabShowEmitted when a tab is shown. + { name: String } +
sl-tab-hideonSlTabHideEmitted when a tab is hidden. + { name: String } +
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the specified tab panel. + panel: string +
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--indicator-colorThe color of the active tab indicator.
--track-colorThe color of the indicator’s track (the line that separates tabs from panels).
--track-widthThe width of the indicator’s track (the line that separates tabs from panels).
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
navThe tab group’s navigation container where tabs are slotted in.
tabsThe container that wraps the tabs.
active-tab-indicatorThe line that highlights the currently selected tab.
bodyThe tab group’s body where tab panels are slotted in.
scroll-button + The previous/next scroll buttons that show when tabs are scrollable, an + <sl-icon-button>. +
scroll-button--startThe starting scroll button.
scroll-button--endThe ending scroll button.
scroll-button__baseThe scroll button’s exported base part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • +
+
+
+
+ + diff --git a/components/tab-panel/index.html b/components/tab-panel/index.html new file mode 100644 index 00000000..3327fd4e --- /dev/null +++ b/components/tab-panel/index.html @@ -0,0 +1,789 @@ + + + + + + + Tab Panel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tab Panel

+ +
+ <sl-tab-panel> | SlTabPanel +
+ +
+ Since 2.0 + stable +
+
+ +

+ Tab panels are used inside tab groups to display tabbed content. +

+ +
+
+ + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + + +
+ +
+
+ +
+
+ 
<sl-tab-group>
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+
+
+ +
+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+
+const App = () => (
+  <SlTabGroup>
+    <SlTab slot="nav" panel="general">
+      General
+    </SlTab>
+    <SlTab slot="nav" panel="custom">
+      Custom
+    </SlTab>
+    <SlTab slot="nav" panel="advanced">
+      Advanced
+    </SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>
+      Disabled
+    </SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tab-panel/tab-panel.js';
+ + + +

To import this component as a React component:

+ 
import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The tab panel’s content.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The tab panel’s name. + + + string + + '' +
+ active + When true, the tab panel will be shown. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionDefault
--paddingThe tab panel’s padding.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/tab/index.html b/components/tab/index.html new file mode 100644 index 00000000..34b41934 --- /dev/null +++ b/components/tab/index.html @@ -0,0 +1,733 @@ + + + + + + + Tab + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tab

+ +
+ <sl-tab> | SlTab +
+ +
+ Since 2.0 + stable +
+
+ +

+ Tabs are used inside tab groups to represent and activate + tab panels. +

+ + + +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tab/tab.js';
+ + + +

To import this component as a React component:

+ 
import SlTab from '@onsonr/nebula/dist/react/tab';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The tab’s label.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ panel + + The name of the tab panel this tab is associated with. The panel must be located in the same tab + group. + + + + string + + '' +
+ active + Draws the tab in an active state. + + + boolean + + false +
+ closable + Makes the tab closable and shows a close button. + + + boolean + + false +
+ disabled + Disables the tab and prevents selection. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-closeonSlCloseEmitted when the tab is closable and the close button is activated.-
+
+ +

+ Learn more about events. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
close-buttonThe close button, an <sl-icon-button>.
close-button__baseThe close button’s exported base part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • +
+
+
+
+ + diff --git a/components/tag/index.html b/components/tag/index.html new file mode 100644 index 00000000..49ae246c --- /dev/null +++ b/components/tag/index.html @@ -0,0 +1,1140 @@ + + + + + + + Tag + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tag

+ +
+ <sl-tag> | SlTag +
+ +
+ Since 2.0 + stable +
+
+ +

Tags are used as labels to organize things or to indicate a selection.

+ +
+
+ Primary + Success + Neutral + Warning + Danger + +
+ +
+
+ +
+
+ 
<sl-tag variant="primary">Primary</sl-tag>
+<sl-tag variant="success">Success</sl-tag>
+<sl-tag variant="neutral">Neutral</sl-tag>
+<sl-tag variant="warning">Warning</sl-tag>
+<sl-tag variant="danger">Danger</sl-tag>
+
+
+ +
+ 
import SlTag from '@onsonr/nebula/dist/react/tag';
+
+const App = () => (
+  <>
+    <SlTag variant="primary">Primary</SlTag>
+    <SlTag variant="success">Success</SlTag>
+    <SlTag variant="neutral">Neutral</SlTag>
+    <SlTag variant="warning">Warning</SlTag>
+    <SlTag variant="danger">Danger</SlTag>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

Sizes

+

Use the size attribute to change a tab’s size.

+ +
+
+ Small + Medium + Large + +
+ +
+
+ +
+
+ 
<sl-tag size="small">Small</sl-tag>
+<sl-tag size="medium">Medium</sl-tag>
+<sl-tag size="large">Large</sl-tag>
+
+
+ +
+ 
import SlTag from '@onsonr/nebula/dist/react/tag';
+
+const App = () => (
+  <>
+    <SlTag size="small">Small</SlTag>
+    <SlTag size="medium">Medium</SlTag>
+    <SlTag size="large">Large</SlTag>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

Pill

+

Use the pill attribute to give tabs rounded edges.

+ +
+
+ Small + Medium + Large + +
+ +
+
+ +
+
+ 
<sl-tag size="small" pill>Small</sl-tag>
+<sl-tag size="medium" pill>Medium</sl-tag>
+<sl-tag size="large" pill>Large</sl-tag>
+
+
+ +
+ 
import SlTag from '@onsonr/nebula/dist/react/tag';
+
+const App = () => (
+  <>
+    <SlTag size="small" pill>
+      Small
+    </SlTag>
+    <SlTag size="medium" pill>
+      Medium
+    </SlTag>
+    <SlTag size="large" pill>
+      Large
+    </SlTag>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Removable +

+

Use the removable attribute to add a remove button to the tag.

+ +
+
+
+ Small + Medium + Large +
+ + + + + +
+ +
+
+ +
+
+ 
<div class="tags-removable">
+  <sl-tag size="small" removable>Small</sl-tag>
+  <sl-tag size="medium" removable>Medium</sl-tag>
+  <sl-tag size="large" removable>Large</sl-tag>
+</div>
+
+<script>
+  const div = document.querySelector('.tags-removable');
+
+  div.addEventListener('sl-remove', event => {
+    const tag = event.target;
+    tag.style.opacity = '0';
+    setTimeout(() => (tag.style.opacity = '1'), 2000);
+  });
+</script>
+
+<style>
+  .tags-removable sl-tag {
+    transition: var(--sl-transition-medium) opacity;
+  }
+</style>
+
+
+ +
+ 
import SlTag from '@onsonr/nebula/dist/react/tag';
+
+const css = `
+  .tags-removable sl-tag {
+    transition: var(--sl-transition-medium) opacity;
+  }
+`;
+
+const App = () => {
+  function handleRemove(event) {
+    const tag = event.target;
+    tag.style.opacity = '0';
+    setTimeout(() => (tag.style.opacity = '1'), 2000);
+  }
+
+  return (
+    <>
+      <div className="tags-removable">
+        <SlTag size="small" removable onSlRemove={handleRemove}>
+          Small
+        </SlTag>
+
+        <SlTag size="medium" removable onSlRemove={handleRemove}>
+          Medium
+        </SlTag>
+
+        <SlTag size="large" removable onSlRemove={handleRemove}>
+          Large
+        </SlTag>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tag/tag.js';
+ + + +

To import this component as a React component:

+ 
import SlTag from '@onsonr/nebula/dist/react/tag';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The tag’s content.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ variant + The tag’s theme variant. + + + 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' + + 'neutral' +
+ size + The tag’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ pill + Draws a pill-style tag with rounded edges. + + + boolean + + false +
+ removable + Makes the tag removable and shows a remove button. + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-removeonSlRemoveEmitted when the remove button is activated.-
+
+ +

+ Learn more about events. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
contentThe tag’s content.
remove-buttonThe tag’s remove button, an <sl-icon-button>.
remove-button__baseThe remove button’s exported base part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-icon>
    • + +
  • <sl-icon-button>
    • +
+
+
+
+ + diff --git a/components/textarea/index.html b/components/textarea/index.html new file mode 100644 index 00000000..da8ad645 --- /dev/null +++ b/components/textarea/index.html @@ -0,0 +1,1958 @@ + + + + + + + Textarea + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Textarea

+ +
+ <sl-textarea> | SlTextarea +
+ +
+ Since 2.0 + stable +
+
+ +

Textareas collect data from the user and allow multiple lines of text.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea />;
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Examples +

+

Labels

+

+ Use the label attribute to give the textarea an accessible label. For labels that contain HTML, + use the label slot instead. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea label="Comments"></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea label="Comments" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Help Text +

+

+ Add descriptive help text to a textarea with the help-text attribute. For help texts that + contain HTML, use the help-text slot instead. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea label="Feedback" help-text="Please tell us what you think."> </sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Rows

+

Use the rows attribute to change the number of text rows that get shown.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea rows="2"></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea rows={2} />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Placeholders +

+

Use the placeholder attribute to add a placeholder.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea placeholder="Type something"></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea placeholder="Type something" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Filled Textareas +

+

Add the filled attribute to draw a filled textarea.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea placeholder="Type something" filled></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea placeholder="Type something" filled />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Disabled +

+

Use the disabled attribute to disable a textarea.

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea placeholder="Textarea" disabled></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea placeholder="Textarea" disabled />;
+
+
+
+ +
+ + + + + + + +
+
+ +

Sizes

+

Use the size attribute to change a textarea’s size.

+ +
+
+ +
+ +
+ + +
+ +
+
+ +
+
+ 
<sl-textarea placeholder="Small" size="small"></sl-textarea>
+<br />
+<sl-textarea placeholder="Medium" size="medium"></sl-textarea>
+<br />
+<sl-textarea placeholder="Large" size="large"></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => (
+  <>
+    <SlTextarea placeholder="Small" size="small"></SlTextarea>
+    <br />
+    <SlTextarea placeholder="Medium" size="medium"></SlTextarea>
+    <br />
+    <SlTextarea placeholder="Large" size="large"></SlTextarea>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Prevent Resizing +

+

+ By default, textareas can be resized vertically by the user. To prevent resizing, set the + resize attribute to none. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea resize="none"></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea resize="none" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Expand with Content +

+

+ Textareas will automatically resize to expand to fit their content when resize is set to + auto. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<sl-textarea resize="auto"></sl-textarea>
+
+
+ +
+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => <SlTextarea resize="auto" />;
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/textarea/textarea.js';
+ + + +

To import this component as a React component:

+ 
import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
+ label + The textarea’s label. Alternatively, you can use the label attribute.
+ help-text + + Text that describes how to use the input. Alternatively, you can use the + help-text attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ name + The name of the textarea, submitted as a name/value pair with form data. + string + + '' +
+ value + The current value of the textarea, submitted as a name/value pair with form data. + string + + '' +
+ size + The textarea’s size. + + + 'small' | 'medium' | 'large' + + 'medium' +
+ filled + Draws a filled textarea. + + + boolean + + false +
+ label + The textarea’s label. If you need to display HTML, use the label slot instead. + string + + '' +
+ helpText + +
+ + + help-text + + + 		+ The textarea’s help text. If you need to display HTML, use the help-text slot instead. + + string + + '' +
+ placeholder + Placeholder text to show as a hint when the input is empty. + string + + '' +
+ rows + The number of rows to display by default. + number + + 4 +
+ resize + Controls how the textarea can be resized. + 'none' | 'vertical' | 'auto' + + 'vertical' +
+ disabled + Disables the textarea. + + + boolean + + false +
+ readonly + Makes the textarea readonly. + + + boolean + + false +
+ form + + By default, form controls are associated with the nearest containing + <form> element. This attribute allows you to place the form control outside of a + form and associate it with the form that has this id. The form must be in the same + document or shadow root for this to work. + + + + string + + '' +
+ required + Makes the textarea a required field. + + + boolean + + false +
+ minlength + The minimum length of input that will be considered valid. + number + -
+ maxlength + The maximum length of input that will be considered valid. + number + -
+ autocapitalize + + Controls whether and how text input is automatically capitalized as it is entered by the user. + + 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' + -
+ autocorrect + Indicates whether the browser’s autocorrect feature is on or off. + string + -
+ autocomplete + + Specifies what permission the browser has to provide assistance in filling out form field values. + Refer to + this page on MDN + for available values. + + string + -
+ autofocus + Indicates that the input should receive focus on page load. + boolean + -
+ enterkeyhint + Used to customize the label or icon of the Enter key on virtual keyboards. + 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' + -
+ spellcheck + Enables spell checking on the textarea. + boolean + + true +
+ inputmode + + Tells the browser what type of data will be entered by the user, allowing it to display the + appropriate virtual keyboard on supportive devices. + + 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' + -
+ defaultValue + The default value of the form control. Primarily used for resetting the form control. + string + + '' +
+ validity + Gets the validity state object--
+ validationMessage + Gets the validation message--
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-bluronSlBlurEmitted when the control loses focus.-
sl-changeonSlChangeEmitted when an alteration to the control’s value is committed by the user.-
sl-focusonSlFocusEmitted when the control gains focus.-
sl-inputonSlInputEmitted when the control receives input.-
sl-invalidonSlInvalid + Emitted when the form control has been checked for validity and its constraints aren’t satisfied. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
focus()Sets focus on the textarea. + options: FocusOptions +
blur()Removes focus from the textarea.-
select()Selects all the text in the textarea.-
scrollPosition()Gets or sets the textarea’s scroll position. + position: { top?: number; left?: number } +
setSelectionRange()Sets the start and end positions of the text selection (0-based). + + selectionStart: number, selectionEnd: number, selectionDirection: 'forward' | 'backward' | 'none' + +
setRangeText()Replaces a range of text with a new string. + + replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | + 'preserve' + +
checkValidity() + Checks for validity but does not show a validation message. Returns true when valid and + false when invalid. + -
getForm()Gets the associated form, if one exists.-
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.-
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity. + message: string +
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
form-controlThe form control that wraps the label, input, and help text.
form-control-labelThe label’s wrapper.
form-control-inputThe input’s wrapper.
form-control-help-textThe help text’s wrapper.
baseThe component’s base wrapper.
textareaThe internal <textarea> control.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/tooltip/index.html b/components/tooltip/index.html new file mode 100644 index 00000000..26162ec0 --- /dev/null +++ b/components/tooltip/index.html @@ -0,0 +1,2032 @@ + + + + + + + Tooltip + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tooltip

+ +
+ <sl-tooltip> | SlTooltip +
+ +
+ Since 2.0 + stable +
+
+ +

Tooltips display additional information based on a specific action.

+ +

+ A tooltip’s target is its first child element, so you should only wrap one element inside of the + tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first. +

+

+ Tooltips use display: contents so they won’t interfere with how elements are positioned in a + flex or grid layout. +

+ +
+
+ + Hover Me + + +
+ +
+
+ +
+
+ 
<sl-tooltip content="This is a tooltip">
+  <sl-button>Hover Me</sl-button>
+</sl-tooltip>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <SlTooltip content="This is a tooltip">
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Examples +

+

+ Placement +

+

Use the placement attribute to set the preferred placement of the tooltip.

+ +
+
+
+
+ + + + + + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + + + + + +
+
+ + + +
+ +
+
+ +
+
+ 
<div class="tooltip-placement-example">
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="top-start" placement="top-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="top" placement="top">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="top-end" placement="top-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="left-start" placement="left-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="right-start" placement="right-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="left" placement="left">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="right" placement="right">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="left-end" placement="left-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="right-end" placement="right-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="bottom-start" placement="bottom-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="bottom" placement="bottom">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="bottom-end" placement="bottom-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+</div>
+
+<style>
+  .tooltip-placement-example {
+    width: 250px;
+    margin: 1rem;
+  }
+
+  .tooltip-placement-example-row:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  .tooltip-placement-example sl-button {
+    float: left;
+    width: 2.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
+  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+    margin-left: calc(40px + 0.25rem);
+  }
+
+  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+    margin-left: calc((40px * 3) + (0.25rem * 3));
+  }
+</style>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const css = `
+  .tooltip-placement-example {
+    width: 250px;
+  }
+
+  .tooltip-placement-example-row:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  .tooltip-placement-example sl-button {
+    float: left;
+    width: 2.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
+  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+    margin-left: calc(40px + 0.25rem);
+  }
+
+  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+    margin-left: calc((40px * 3) + (0.25rem * 3));
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="tooltip-placement-example">
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="top-start" placement="top-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="top" placement="top">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="top-end" placement="top-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left-start" placement="left-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right-start" placement="right-start">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left" placement="left">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right" placement="right">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left-end" placement="left-end">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right-end" placement="right-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="bottom-start" placement="bottom-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="bottom" placement="bottom">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="bottom-end" placement="bottom-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Click Trigger +

+

+ Set the trigger attribute to click to toggle the tooltip on click instead of + hover. +

+ +
+
+ + Click to Toggle + + +
+ +
+
+ +
+
+ 
<sl-tooltip content="Click again to dismiss" trigger="click">
+  <sl-button>Click to Toggle</sl-button>
+</sl-tooltip>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <SlTooltip content="Click again to dismiss" trigger="click">
+    <SlButton>Click to Toggle</SlButton>
+  </SlTooltip>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Manual Trigger +

+

+ Tooltips can be controlled programmatically by setting the trigger attribute to + manual. Use the open attribute to control when the tooltip is shown. +

+ +
+
+ Toggle Manually + + + + + + + +
+ +
+
+ +
+
+ 
<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
+
+<sl-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
+  <sl-avatar label="User"></sl-avatar>
+</sl-tooltip>
+
+<script>
+  const tooltip = document.querySelector('.manual-tooltip');
+  const toggle = tooltip.previousElementSibling;
+
+  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
+</script>
+
+
+ +
+ 
import { useState } from 'react';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
+        Toggle Manually
+      </SlButton>
+
+      <SlTooltip open={open} content="This is an avatar" trigger="manual">
+        <SlAvatar />
+      </SlTooltip>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Removing Arrows +

+

+ You can control the size of tooltip arrows by overriding the --sl-tooltip-arrow-size design + token. To remove them, set the value to 0 as shown below. +

+ +
+
+ + No Arrow + + +
+ +
+
+ +
+
+ 
<sl-tooltip content="This is a tooltip" style="--sl-tooltip-arrow-size: 0;">
+  <sl-button>No Arrow</sl-button>
+</sl-tooltip>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <div style={{ '--sl-tooltip-arrow-size': '0' }}>
+    <SlTooltip content="This is a tooltip">
+      <SlButton>Above</SlButton>
+    </SlTooltip>
+
+    <SlTooltip content="This is a tooltip" placement="bottom">
+      <SlButton>Below</SlButton>
+    </SlTooltip>
+  </div>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded. +

+ 
:root {
+  --sl-tooltip-arrow-size: 0;
+}
+
+

+ HTML in Tooltips +

+

+ Use the content slot to create tooltips with HTML content. Tooltips are designed only for text + and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, + in a tooltip. +

+ +
+
+ +
I’m not just a tooltip, I’m a tooltip with HTML!
+ + Hover me + + +
+ +
+
+ +
+
+ 
<sl-tooltip>
+  <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
+
+  <sl-button>Hover me</sl-button>
+</sl-tooltip>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <SlTooltip>
+    <div slot="content">
+      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+    </div>
+
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Setting a Maximum Width +

+

+ Use the --max-width custom property to change the width the tooltip can grow to before wrapping + occurs. +

+ +
+
+ + Hover me + + +
+ +
+
+ +
+
+ 
<sl-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
+  <sl-button>Hover me</sl-button>
+</sl-tooltip>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const App = () => (
+  <SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Hoisting +

+

+ Tooltips will be clipped if they’re inside a container that has overflow: auto|hidden|scroll. + The hoist attribute forces the tooltip to use a fixed positioning strategy, allowing it to + break out of the container. In this case, the tooltip will be positioned relative to its + containing block, which is usually the viewport unless an ancestor uses a transform, perspective, + or filter. + Refer to this page + for more details. +

+ +
+
+
+ + No Hoist + + + + Hoist + +
+ + + +
+ +
+
+ +
+
+ 
<div class="tooltip-hoist">
+  <sl-tooltip content="This is a tooltip">
+    <sl-button>No Hoist</sl-button>
+  </sl-tooltip>
+
+  <sl-tooltip content="This is a tooltip" hoist>
+    <sl-button>Hoist</sl-button>
+  </sl-tooltip>
+</div>
+
+<style>
+  .tooltip-hoist {
+    position: relative;
+    border: solid 2px var(--sl-panel-border-color);
+    overflow: hidden;
+    padding: var(--sl-spacing-medium);
+  }
+</style>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+
+const css = `
+  .tooltip-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    overflow: hidden;
+    padding: var(--sl-spacing-medium);
+    position: relative;
+  }
+`;
+
+const App = () => (
+  <>
+    <div class="tooltip-hoist">
+      <SlTooltip content="This is a tooltip">
+        <SlButton>No Hoist</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="This is a tooltip" hoist>
+        <SlButton>Hoist</SlButton>
+      </SlTooltip>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tooltip/tooltip.js';
+ + + +

To import this component as a React component:

+ 
import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
(default) + The tooltip’s target element. Avoid slotting in more than one element, as subsequent ones will be + ignored. +
+ content + + The content to render in the tooltip. Alternatively, you can use the content attribute. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ content + + The tooltip’s content. If you need to display HTML, use the content slot instead. + + string + + '' +
+ placement + + The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep + the tooltip inside of the viewport. + + + 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | + 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' + + 'top' +
+ disabled + Disables the tooltip so it won’t show when triggered. + + + boolean + + false +
+ distance + The distance in pixels from which to offset the tooltip away from its target. + number + + 8 +
+ open + + Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. + + + + boolean + + false +
+ skidding + The distance in pixels from which to offset the tooltip along its target. + number + + 0 +
+ trigger + + Controls how the tooltip is activated. Possible options include click, + hover, focus, and manual. Multiple options can be passed by + separating them with a space. When manual is used, the tooltip must be activated programmatically. + + string + + 'hover focus' +
+ hoist + + Enable this option to prevent the tooltip from being clipped when the component is placed inside a + container with + overflow: auto|hidden|scroll. Hoisting uses a fixed positioning strategy that works in + many, but not all, scenarios. + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-showonSlShowEmitted when the tooltip begins to show.-
sl-after-showonSlAfterShowEmitted after the tooltip has shown and all animations are complete.-
sl-hideonSlHideEmitted when the tooltip begins to hide.-
sl-after-hideonSlAfterHideEmitted after the tooltip has hidden and all animations are complete.-
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
NameDescriptionArguments
show()Shows the tooltip.-
hide()Hides the tooltip-
+
+ +

+ Learn more about methods. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--max-widthThe maximum width of the tooltip before its content will wrap.
--hide-delayThe amount of time to wait before hiding the tooltip when hovering.
--show-delayThe amount of time to wait before showing the tooltip when hovering.
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper, an <sl-popup> element.
base__popup + The popup’s exported popup part. Use this to target the tooltip’s popup container. +
base__arrowThe popup’s exported arrow part. Use this to target the tooltip’s arrow.
bodyThe tooltip’s body where its content is rendered.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Animations +

+ +
+ + + + + + + + + + + + + + + + + + +
NameDescription
tooltip.showThe animation to use when showing the tooltip.
tooltip.hideThe animation to use when hiding the tooltip.
+
+ +

+ Learn more about customizing animations. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-popup>
    • +
+
+
+
+ + diff --git a/components/tree-item/index.html b/components/tree-item/index.html new file mode 100644 index 00000000..b92c2358 --- /dev/null +++ b/components/tree-item/index.html @@ -0,0 +1,1347 @@ + + + + + + + Tree Item + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tree Item

+ +
+ <sl-tree-item> | SlTreeItem +
+ +
+ Since 2.0 + stable +
+
+ +

+ A tree item serves as a hierarchical node that lives inside a tree. +

+ +
+
+ + + Item 1 + Item A + Item B + Item C + + Item 2 + Item 3 + + +
+ +
+
+ +
+
+ 
<sl-tree>
+  <sl-tree-item>
+    Item 1
+    <sl-tree-item>Item A</sl-tree-item>
+    <sl-tree-item>Item B</sl-tree-item>
+    <sl-tree-item>Item C</sl-tree-item>
+  </sl-tree-item>
+  <sl-tree-item>Item 2</sl-tree-item>
+  <sl-tree-item>Item 3</sl-tree-item>
+</sl-tree>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree>
+    <SlTreeItem>
+      Item 1
+      <SlTreeItem>Item A</SlTreeItem>
+      <SlTreeItem>Item B</SlTreeItem>
+      <SlTreeItem>Item C</SlTreeItem>
+    </SlTreeItem>
+    <SlTreeItem>Item 2</SlTreeItem>
+    <SlTreeItem>Item 3</SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Examples

+

+ Nested tree items +

+

A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.

+ +
+
+ + + Item 1 + + Item A + Item Z + Item Y + Item X + + Item B + Item C + + Item 2 + Item 3 + + +
+ +
+
+ +
+
+ 
<sl-tree>
+  <sl-tree-item>
+    Item 1
+    <sl-tree-item>
+      Item A
+      <sl-tree-item>Item Z</sl-tree-item>
+      <sl-tree-item>Item Y</sl-tree-item>
+      <sl-tree-item>Item X</sl-tree-item>
+    </sl-tree-item>
+    <sl-tree-item>Item B</sl-tree-item>
+    <sl-tree-item>Item C</sl-tree-item>
+  </sl-tree-item>
+  <sl-tree-item>Item 2</sl-tree-item>
+  <sl-tree-item>Item 3</sl-tree-item>
+</sl-tree>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree>
+    <SlTreeItem>
+      Item 1
+      <SlTreeItem>
+        Item A
+        <SlTreeItem>Item Z</SlTreeItem>
+        <SlTreeItem>Item Y</SlTreeItem>
+        <SlTreeItem>Item X</SlTreeItem>
+      </SlTreeItem>
+      <SlTreeItem>Item B</SlTreeItem>
+      <SlTreeItem>Item C</SlTreeItem>
+    </SlTreeItem>
+    <SlTreeItem>Item 2</SlTreeItem>
+    <SlTreeItem>Item 3</SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Selected

+

Use the selected attribute to select a tree item initially.

+ +
+
+ + + Item 1 + Item A + Item B + Item C + + Item 2 + Item 3 + + +
+ +
+
+ +
+
+ 
<sl-tree>
+  <sl-tree-item selected>
+    Item 1
+    <sl-tree-item>Item A</sl-tree-item>
+    <sl-tree-item>Item B</sl-tree-item>
+    <sl-tree-item>Item C</sl-tree-item>
+  </sl-tree-item>
+  <sl-tree-item>Item 2</sl-tree-item>
+  <sl-tree-item>Item 3</sl-tree-item>
+</sl-tree>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree>
+    <SlTreeItem selected>
+      Item 1
+      <SlTreeItem>Item A</SlTreeItem>
+      <SlTreeItem>Item B</SlTreeItem>
+      <SlTreeItem>Item C</SlTreeItem>
+    </SlTreeItem>
+    <SlTreeItem>Item 2</SlTreeItem>
+    <SlTreeItem>Item 3</SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Expanded

+

Use the expanded attribute to expand a tree item initially.

+ +
+
+ + + Item 1 + + Item A + Item Z + Item Y + Item X + + Item B + Item C + + Item 2 + Item 3 + + +
+ +
+
+ +
+
+ 
<sl-tree>
+  <sl-tree-item expanded>
+    Item 1
+    <sl-tree-item expanded>
+      Item A
+      <sl-tree-item>Item Z</sl-tree-item>
+      <sl-tree-item>Item Y</sl-tree-item>
+      <sl-tree-item>Item X</sl-tree-item>
+    </sl-tree-item>
+    <sl-tree-item>Item B</sl-tree-item>
+    <sl-tree-item>Item C</sl-tree-item>
+  </sl-tree-item>
+  <sl-tree-item>Item 2</sl-tree-item>
+  <sl-tree-item>Item 3</sl-tree-item>
+</sl-tree>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree>
+    <SlTreeItem expanded>
+      Item 1
+      <SlTreeItem expanded>
+        Item A
+        <SlTreeItem>Item Z</SlTreeItem>
+        <SlTreeItem>Item Y</SlTreeItem>
+        <SlTreeItem>Item X</SlTreeItem>
+      </SlTreeItem>
+      <SlTreeItem>Item B</SlTreeItem>
+      <SlTreeItem>Item C</SlTreeItem>
+    </SlTreeItem>
+    <SlTreeItem>Item 2</SlTreeItem>
+    <SlTreeItem>Item 3</SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Importing

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tree-item/tree-item.js';
+ + + +

To import this component as a React component:

+ 
import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The default slot.
+ expand-icon + The icon to show when the tree item is expanded.
+ collapse-icon + The icon to show when the tree item is collapsed.
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ expanded + Expands the tree item. + + + boolean + + false +
+ selected + Draws the tree item in a selected state. + + + boolean + + false +
+ disabled + Disables the tree item. + + + boolean + + false +
+ lazy + Enables lazy loading behavior. + + + boolean + + false +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-expandonSlExpandEmitted when the tree item expands.-
sl-after-expandonSlAfterExpandEmitted after the tree item expands and all animations are complete.-
sl-collapseonSlCollapseEmitted when the tree item collapses.-
sl-after-collapseonSlAfterCollapseEmitted after the tree item collapses and all animations are complete.-
sl-lazy-changeonSlLazyChangeEmitted when the tree item’s lazy state changes.-
sl-lazy-loadonSlLazyLoad + Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to + the tree before expanding. After appending new items, remove the lazy attribute to + remove the loading state and update the tree. + -
+
+ +

+ Learn more about events. +

+ +

+ Methods +

+ +
+ + + + + + + + + + + + + + + +
NameDescriptionArguments
getChildrenItems()Gets all the nested tree items in this node. + { includeDisabled = true }: { includeDisabled?: boolean } +
+
+ +

+ Learn more about methods. +

+ +

Parts

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
itemThe tree item’s container. This element wraps everything except slotted tree item children.
item--disabledApplied when the tree item is disabled.
item--expandedApplied when the tree item is expanded.
item--indeterminateApplied when the selection is indeterminate.
item--selectedApplied when the tree item is selected.
indentationThe tree item’s indentation container.
expand-buttonThe container that wraps the tree item’s expand button and spinner.
spinnerThe spinner that shows when a lazy tree item is in the loading state.
spinner__baseThe spinner’s base part.
labelThe tree item’s label.
childrenThe container that wraps the tree item’s nested children.
checkboxThe checkbox that shows when using multiselect.
checkbox__baseThe checkbox’s exported base part.
checkbox__controlThe checkbox’s exported control part.
checkbox__control--checkedThe checkbox’s exported control--checked part.
checkbox__control--indeterminateThe checkbox’s exported control--indeterminate part.
checkbox__checked-iconThe checkbox’s exported checked-icon part.
checkbox__indeterminate-iconThe checkbox’s exported indeterminate-icon part.
checkbox__labelThe checkbox’s exported label part.
+
+ +

+ Learn more about customizing CSS parts. +

+ +

+ Dependencies +

+ +

This component automatically imports the following dependencies.

+ +
    +
  • <sl-checkbox>
    • + +
  • <sl-icon>
    • + +
  • <sl-spinner>
    • +
+
+
+
+ + diff --git a/components/tree/index.html b/components/tree/index.html new file mode 100644 index 00000000..da361a90 --- /dev/null +++ b/components/tree/index.html @@ -0,0 +1,1785 @@ + + + + + + + Tree + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Tree

+ +
+ <sl-tree> | SlTree +
+ +
+ Since 2.0 + stable +
+
+ +

+ Trees allow you to display a hierarchical list of selectable tree items. + Items with children can be expanded and collapsed as desired by the user. +

+ +
+
+ + + Deciduous + Birch + + Maple + Field maple + Red maple + Sugar maple + + Oak + + + + Coniferous + Cedar + Pine + Spruce + + + + Non-trees + Bamboo + Cactus + Fern + + + +
+ +
+
+ +
+
+ 
<sl-tree>
+  <sl-tree-item>
+    Deciduous
+    <sl-tree-item>Birch</sl-tree-item>
+    <sl-tree-item>
+      Maple
+      <sl-tree-item>Field maple</sl-tree-item>
+      <sl-tree-item>Red maple</sl-tree-item>
+      <sl-tree-item>Sugar maple</sl-tree-item>
+    </sl-tree-item>
+    <sl-tree-item>Oak</sl-tree-item>
+  </sl-tree-item>
+
+  <sl-tree-item>
+    Coniferous
+    <sl-tree-item>Cedar</sl-tree-item>
+    <sl-tree-item>Pine</sl-tree-item>
+    <sl-tree-item>Spruce</sl-tree-item>
+  </sl-tree-item>
+
+  <sl-tree-item>
+    Non-trees
+    <sl-tree-item>Bamboo</sl-tree-item>
+    <sl-tree-item>Cactus</sl-tree-item>
+    <sl-tree-item>Fern</sl-tree-item>
+  </sl-tree-item>
+</sl-tree>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree>
+    <SlTreeItem>
+      Deciduous
+      <SlTreeItem>Birch</SlTreeItem>
+      <SlTreeItem>
+        Maple
+        <SlTreeItem>Field maple</SlTreeItem>
+        <SlTreeItem>Red maple</SlTreeItem>
+        <SlTreeItem>Sugar maple</SlTreeItem>
+      </SlTreeItem>
+      <SlTreeItem>Oak</SlTreeItem>
+    </SlTreeItem>
+
+    <SlTreeItem>
+      Coniferous
+      <SlTreeItem>Cedar</SlTreeItem>
+      <SlTreeItem>Pine</SlTreeItem>
+      <SlTreeItem>Spruce</SlTreeItem>
+    </SlTreeItem>
+
+    <SlTreeItem>
+      Non-trees
+      <SlTreeItem>Bamboo</SlTreeItem>
+      <SlTreeItem>Cactus</SlTreeItem>
+      <SlTreeItem>Fern</SlTreeItem>
+    </SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Examples

+

+ Selection Modes +

+

The selection attribute lets you change the selection behavior of the tree.

+
    +
  • Use single to allow the selection of a single item (default).
    • +
  • Use multiple to allow the selection of multiple items.
    • +
  • Use leaf to only allow leaf nodes to be selected.
    • +
+ +
+
+ + Single + Multiple + Leaf + + +
+ + + + Item 1 + + Item A + Item Z + Item Y + Item X + + Item B + Item C + + Item 2 + Item 3 + + + + +
+ +
+
+ +
+
+ 
<sl-select id="selection-mode" value="single" label="Selection">
+  <sl-option value="single">Single</sl-option>
+  <sl-option value="multiple">Multiple</sl-option>
+  <sl-option value="leaf">Leaf</sl-option>
+</sl-select>
+
+<br />
+
+<sl-tree class="tree-selectable">
+  <sl-tree-item>
+    Item 1
+    <sl-tree-item>
+      Item A
+      <sl-tree-item>Item Z</sl-tree-item>
+      <sl-tree-item>Item Y</sl-tree-item>
+      <sl-tree-item>Item X</sl-tree-item>
+    </sl-tree-item>
+    <sl-tree-item>Item B</sl-tree-item>
+    <sl-tree-item>Item C</sl-tree-item>
+  </sl-tree-item>
+  <sl-tree-item>Item 2</sl-tree-item>
+  <sl-tree-item>Item 3</sl-tree-item>
+</sl-tree>
+
+<script>
+  const selectionMode = document.querySelector('#selection-mode');
+  const tree = document.querySelector('.tree-selectable');
+
+  selectionMode.addEventListener('sl-change', () => {
+    tree.querySelectorAll('sl-tree-item').forEach(item => (item.selected = false));
+    tree.selection = selectionMode.value;
+  });
+</script>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => {
+  const [selection, setSelection] = useState('single');
+
+  return (
+    <>
+      <SlSelect label="Selection" value={selection} onSlChange={event => setSelection(event.target.value)}>
+        <SlMenuItem value="single">single</SlMenuItem>
+        <SlMenuItem value="multiple">multiple</SlMenuItem>
+        <SlMenuItem value="leaf">leaf</SlMenuItem>
+      </SlSelect>
+
+      <br />
+
+      <SlTree selection={selection}>
+        <SlTreeItem>
+          Item 1
+          <SlTreeItem>
+            Item A
+            <SlTreeItem>Item Z</SlTreeItem>
+            <SlTreeItem>Item Y</SlTreeItem>
+            <SlTreeItem>Item X</SlTreeItem>
+          </SlTreeItem>
+          <SlTreeItem>Item B</SlTreeItem>
+          <SlTreeItem>Item C</SlTreeItem>
+        </SlTreeItem>
+        <SlTreeItem>Item 2</SlTreeItem>
+        <SlTreeItem>Item 3</SlTreeItem>
+      </SlTree>
+    </>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Showing Indent Guides

+

+ Indent guides can be drawn by setting --indent-guide-width. You can also change the color, + offset, and style, using --indent-guide-color, --indent-guide-style, and + --indent-guide-offset, respectively. +

+ +
+
+ + + Deciduous + Birch + + Maple + Field maple + Red maple + Sugar maple + + Oak + + + + Coniferous + Cedar + Pine + Spruce + + + + Non-trees + Bamboo + Cactus + Fern + + + + + +
+ +
+
+ +
+
+ 
<sl-tree class="tree-with-lines">
+  <sl-tree-item expanded>
+    Deciduous
+    <sl-tree-item>Birch</sl-tree-item>
+    <sl-tree-item expanded>
+      Maple
+      <sl-tree-item>Field maple</sl-tree-item>
+      <sl-tree-item>Red maple</sl-tree-item>
+      <sl-tree-item>Sugar maple</sl-tree-item>
+    </sl-tree-item>
+    <sl-tree-item>Oak</sl-tree-item>
+  </sl-tree-item>
+
+  <sl-tree-item>
+    Coniferous
+    <sl-tree-item>Cedar</sl-tree-item>
+    <sl-tree-item>Pine</sl-tree-item>
+    <sl-tree-item>Spruce</sl-tree-item>
+  </sl-tree-item>
+
+  <sl-tree-item>
+    Non-trees
+    <sl-tree-item>Bamboo</sl-tree-item>
+    <sl-tree-item>Cactus</sl-tree-item>
+    <sl-tree-item>Fern</sl-tree-item>
+  </sl-tree-item>
+</sl-tree>
+
+<style>
+  .tree-with-lines {
+    --indent-guide-width: 1px;
+  }
+</style>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree class="tree-with-lines" style={{ '--indent-guide-width': '1px' }}>
+    <SlTreeItem expanded>
+      Deciduous
+      <SlTreeItem>Birch</SlTreeItem>
+      <SlTreeItem expanded>
+        Maple
+        <SlTreeItem>Field maple</SlTreeItem>
+        <SlTreeItem>Red maple</SlTreeItem>
+        <SlTreeItem>Sugar maple</SlTreeItem>
+      </SlTreeItem>
+      <SlTreeItem>Oak</SlTreeItem>
+    </SlTreeItem>
+
+    <SlTreeItem>
+      Coniferous
+      <SlTreeItem>Cedar</SlTreeItem>
+      <SlTreeItem>Pine</SlTreeItem>
+      <SlTreeItem>Spruce</SlTreeItem>
+    </SlTreeItem>
+
+    <SlTreeItem>
+      Non-trees
+      <SlTreeItem>Bamboo</SlTreeItem>
+      <SlTreeItem>Cactus</SlTreeItem>
+      <SlTreeItem>Fern</SlTreeItem>
+    </SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

Lazy Loading

+

+ Use the lazy attribute on a tree item to indicate that the content is not yet present and will + be loaded later. When the user tries to expand the node, the loading state is set to + true and the sl-lazy-load event will be emitted to allow you to load data + asynchronously. The item will remain in a loading state until its content is changed. +

+

+ If you want to disable this behavior after the first load, simply remove the lazy attribute + and, on the next expand, the existing content will be shown instead. +

+ +
+
+ + Available Trees + + + + +
+ +
+
+ +
+
+ 
<sl-tree>
+  <sl-tree-item lazy>Available Trees</sl-tree-item>
+</sl-tree>
+
+<script type="module">
+  const lazyItem = document.querySelector('sl-tree-item[lazy]');
+
+  lazyItem.addEventListener('sl-lazy-load', () => {
+    // Simulate asynchronous loading
+    setTimeout(() => {
+      const subItems = ['Birch', 'Cedar', 'Maple', 'Pine'];
+
+      for (const item of subItems) {
+        const treeItem = document.createElement('sl-tree-item');
+        treeItem.innerText = item;
+        lazyItem.append(treeItem);
+      }
+
+      // Disable lazy mode once the content has been loaded
+      lazyItem.lazy = false;
+    }, 1000);
+  });
+</script>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => {
+  const [childItems, setChildItems] = useState([]);
+  const [lazy, setLazy] = useState(true);
+
+  const handleLazyLoad = () => {
+    // Simulate asynchronous loading
+    setTimeout(() => {
+      setChildItems(['Birch', 'Cedar', 'Maple', 'Pine']);
+
+      // Disable lazy mode once the content has been loaded
+      setLazy(false);
+    }, 1000);
+  };
+
+  return (
+    <SlTree>
+      <SlTreeItem lazy={lazy} onSlLazyLoad={handleLazyLoad}>
+        Available Trees
+        {childItems.map(item => (
+          <SlTreeItem>{item}</SlTreeItem>
+        ))}
+      </SlTreeItem>
+    </SlTree>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Customizing the Expand and Collapse Icons +

+

+ Use the expand-icon and collapse-icon slots to change the expand and collapse + icons, respectively. To disable the animation, override the rotate property on the + expand-button part as shown below. +

+ +
+
+ + + + + + Deciduous + Birch + + Maple + Field maple + Red maple + Sugar maple + + Oak + + + + Coniferous + Cedar + Pine + Spruce + + + + Non-trees + Bamboo + Cactus + Fern + + + + + +
+ +
+
+ +
+
+ 
<sl-tree class="custom-icons">
+  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+
+  <sl-tree-item>
+    Deciduous
+    <sl-tree-item>Birch</sl-tree-item>
+    <sl-tree-item>
+      Maple
+      <sl-tree-item>Field maple</sl-tree-item>
+      <sl-tree-item>Red maple</sl-tree-item>
+      <sl-tree-item>Sugar maple</sl-tree-item>
+    </sl-tree-item>
+    <sl-tree-item>Oak</sl-tree-item>
+  </sl-tree-item>
+
+  <sl-tree-item>
+    Coniferous
+    <sl-tree-item>Cedar</sl-tree-item>
+    <sl-tree-item>Pine</sl-tree-item>
+    <sl-tree-item>Spruce</sl-tree-item>
+  </sl-tree-item>
+
+  <sl-tree-item>
+    Non-trees
+    <sl-tree-item>Bamboo</sl-tree-item>
+    <sl-tree-item>Cactus</sl-tree-item>
+    <sl-tree-item>Fern</sl-tree-item>
+  </sl-tree-item>
+</sl-tree>
+
+<style>
+  .custom-icons sl-tree-item::part(expand-button) {
+    /* Disable the expand/collapse animation */
+    rotate: none;
+  }
+</style>
+
+
+ +
+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => (
+  <SlTree>
+    <SlIcon name="plus-square" slot="expand-icon"></SlIcon>
+    <SlIcon name="dash-square" slot="collapse-icon"></SlIcon>
+
+    <SlTreeItem>
+      Deciduous
+      <SlTreeItem>Birch</SlTreeItem>
+      <SlTreeItem>
+        Maple
+        <SlTreeItem>Field maple</SlTreeItem>
+        <SlTreeItem>Red maple</SlTreeItem>
+        <SlTreeItem>Sugar maple</SlTreeItem>
+      </SlTreeItem>
+      <SlTreeItem>Oak</SlTreeItem>
+    </SlTreeItem>
+
+    <SlTreeItem>
+      Coniferous
+      <SlTreeItem>Cedar</SlTreeItem>
+      <SlTreeItem>Pine</SlTreeItem>
+      <SlTreeItem>Spruce</SlTreeItem>
+    </SlTreeItem>
+
+    <SlTreeItem>
+      Non-trees
+      <SlTreeItem>Bamboo</SlTreeItem>
+      <SlTreeItem>Cactus</SlTreeItem>
+      <SlTreeItem>Fern</SlTreeItem>
+    </SlTreeItem>
+  </SlTree>
+);
+
+
+
+ +
+ + + + + + + +
+
+ + + +

With Icons

+

Decorative icons can be used before labels to provide hints for each node.

+ +
+
+ + + + Documents + + + + Photos + + + birds.jpg + + + + kitten.jpg + + + + puppy.jpg + + + + + + Writing + + + draft.txt + + + + final.pdf + + + + sales.xls + + + + + +
+ +
+
+ +
+
+ 
<sl-tree class="tree-with-icons">
+  <sl-tree-item expanded>
+    <sl-icon name="folder"></sl-icon>
+    Documents
+
+    <sl-tree-item>
+      <sl-icon name="folder"> </sl-icon>
+      Photos
+      <sl-tree-item>
+        <sl-icon name="image"></sl-icon>
+        birds.jpg
+      </sl-tree-item>
+      <sl-tree-item>
+        <sl-icon name="image"></sl-icon>
+        kitten.jpg
+      </sl-tree-item>
+      <sl-tree-item>
+        <sl-icon name="image"></sl-icon>
+        puppy.jpg
+      </sl-tree-item>
+    </sl-tree-item>
+
+    <sl-tree-item>
+      <sl-icon name="folder"></sl-icon>
+      Writing
+      <sl-tree-item>
+        <sl-icon name="file"></sl-icon>
+        draft.txt
+      </sl-tree-item>
+      <sl-tree-item>
+        <sl-icon name="file-pdf"></sl-icon>
+        final.pdf
+      </sl-tree-item>
+      <sl-tree-item>
+        <sl-icon name="file-bar-graph"></sl-icon>
+        sales.xls
+      </sl-tree-item>
+    </sl-tree-item>
+  </sl-tree-item>
+</sl-tree>
+
+
+ +
+ 
import SlIcon from '@onsonr/nebula/dist/react/icon';
+import SlTree from '@onsonr/nebula/dist/react/tree';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
+
+const App = () => {
+  return (
+    <SlTree class="tree-with-icons">
+      <SlTreeItem expanded>
+        <SlIcon name="folder" />
+        Root
+        <SlTreeItem>
+          <SlIcon name="folder" />
+          Folder 1<SlTreeItem>
+            <SlIcon name="files" />
+            File 1 - 1
+          </SlTreeItem>
+          <SlTreeItem disabled>
+            <SlIcon name="files" />
+            File 1 - 2
+          </SlTreeItem>
+          <SlTreeItem>
+            <SlIcon name="files" />
+            File 1 - 3
+          </SlTreeItem>
+        </SlTreeItem>
+        <SlTreeItem>
+          <SlIcon name="files" />
+          Folder 2<SlTreeItem>
+            <SlIcon name="files" />
+            File 2 - 1
+          </SlTreeItem>
+          <SlTreeItem>
+            <SlIcon name="files" />
+            File 2 - 2
+          </SlTreeItem>
+        </SlTreeItem>
+        <SlTreeItem>
+          <SlIcon name="files" />
+          File 1
+        </SlTreeItem>
+      </SlTreeItem>
+    </SlTree>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/tree/tree.js';
+ + + +

To import this component as a React component:

+ 
import SlTree from '@onsonr/nebula/dist/react/tree';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
(default)The default slot.
+ expand-icon + + The icon to show when the tree item is expanded. Works best with <sl-icon>. +
+ collapse-icon + + The icon to show when the tree item is collapsed. Works best with <sl-icon>. +
+
+ +

+ Learn more about using slots. +

+ +

+ Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionReflectsTypeDefault
+ selection + + The selection behavior of the tree. Single selection allows only one node to be selected at a time. + Multiple displays checkboxes and allows more than one node to be selected. Leaf allows only leaf + nodes to be selected. + + 'single' | 'multiple' | 'leaf' + + 'single' +
updateComplete + A read-only promise that resolves when the component has + finished updating. +
+
+ +

+ Learn more about + attributes and properties. +

+ +

Events

+ +
+ + + + + + + + + + + + + + + + + +
NameReact EventDescriptionEvent Detail
sl-selection-changeonSlSelectionChangeEmitted when a tree item is selected or deselected. + { selection: SlTreeItem[] } +
+
+ +

+ Learn more about events. +

+ +

+ Custom Properties +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
--indent-sizeThe size of the indentation for nested items.var(–sl-spacing-medium)
--indent-guide-colorThe color of the indentation line.var(–sl-color-neutral-200)
--indent-guide-offset + The amount of vertical spacing to leave between the top and bottom of the indentation line’s + starting position. + 0
--indent-guide-styleThe style of the indentation line, e.g. solid, dotted, dashed.solid
--indent-guide-widthThe width of the indentation line.0
+
+ +

+ Learn more about + customizing CSS custom properties. +

+ +

Parts

+ +
+ + + + + + + + + + + + + +
NameDescription
baseThe component’s base wrapper.
+
+ +

+ Learn more about customizing CSS parts. +

+
+
+
+ + diff --git a/components/visually-hidden/index.html b/components/visually-hidden/index.html new file mode 100644 index 00000000..318adebc --- /dev/null +++ b/components/visually-hidden/index.html @@ -0,0 +1,795 @@ + + + + + + + Visually Hidden + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+
+

Visually Hidden

+ +
+ <sl-visually-hidden> | SlVisuallyHidden +
+ +
+ Since 2.0 + stable +
+
+ +

+ The visually hidden utility makes content accessible to assistive devices without displaying it on the + screen. +

+ +

+ According to + The A11Y Project, “there are real world situations where visually hiding content may be appropriate, while the content + should remain available to assistive technologies, such as screen readers. For instance, hiding a search + field’s label as a common magnifying glass icon is used in its stead.” +

+

+ Since visually hidden content can receive focus when tabbing, the element will become visible when something + inside receives focus. This behavior is intentional, as sighted keyboard user won’t be able to determine + where the focus indicator is without it. +

+ +
+
+ + +
+ +
+
+ +
+
+ 
<div style="min-height: 1.875rem;">
+  <sl-visually-hidden>
+    <a href="#">Skip to main content</a>
+  </sl-visually-hidden>
+</div>
+
+
+
+ +
+ + + +
+
+ +

+ Examples +

+ +

+ In this example, the link will open a new window. Screen readers will announce “opens in a new window” even + though the text content isn’t visible to sighted users. +

+ +
+
+ + Visit External Page + + opens in a new window + + +
+ +
+
+ +
+
+ 
<a href="https://example.com/" target="_blank">
+  Visit External Page
+  <sl-icon name="box-arrow-up-right"></sl-icon>
+  <sl-visually-hidden>opens in a new window</sl-visually-hidden>
+</a>
+
+
+
+ +
+ + + +
+
+ +

+ Content Conveyed By Context +

+

+ Adding a label may seem redundant at times, but they’re very helpful for unsighted users. Rather than omit + them, you can provide context to unsighted users with visually hidden content that will be announced by + assistive devices such as screen readers. +

+ +
+
+ +
+ Personal Info +
+ + + + +
+ +
+
+ +
+
+ 
<sl-card style="width: 100%; max-width: 360px;">
+  <header>
+    <sl-visually-hidden>Personal Info</sl-visually-hidden>
+  </header>
+  <sl-input label="Name" style="margin-bottom: .5rem;"></sl-input>
+  <sl-input label="Email" type="email"></sl-input>
+</sl-card>
+
+
+
+ +
+ + + +
+
+ +

+ Importing +

+

+ If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free + to use any of the following snippets to + cherry pick this component. +

+ + + Script + Import + Bundler + React + + +

+ To import this component from + the CDN + using a script tag: +

+ 
<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/visually-hidden/visually-hidden.js"></script>
+ + + +

+ To import this component from + the CDN + using a JavaScript import: +

+ 
import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/visually-hidden/visually-hidden.js';
+ + + +

To import this component using a bundler:

+ 
import '@onsonr/nebula/dist/components/visually-hidden/visually-hidden.js';
+ + + +

To import this component as a React component:

+ 
import SlVisuallyHidden from '@onsonr/nebula/dist/react/visually-hidden';
+ + + +

Slots

+ +
+ + + + + + + + + + + + + +
NameDescription
(default)The content to be visually hidden.
+
+ +

+ Learn more about using slots. +

+
+
+
+ + diff --git a/dist/chunks/chunk.ZH2KM23Q.js b/dist/chunks/chunk.37J3NAYG.js similarity index 83% rename from dist/chunks/chunk.ZH2KM23Q.js rename to dist/chunks/chunk.37J3NAYG.js index 500463af..b737cfe6 100644 --- a/dist/chunks/chunk.ZH2KM23Q.js +++ b/dist/chunks/chunk.37J3NAYG.js @@ -1,6 +1,6 @@ import { SlButton -} from "./chunk.ANK5P6NL.js"; +} from "./chunk.FY6XFGKF.js"; // src/components/button/button.ts var button_default = SlButton; diff --git a/dist/chunks/chunk.PTXGKMCM.js b/dist/chunks/chunk.3EZHFHG3.js similarity index 100% rename from dist/chunks/chunk.PTXGKMCM.js rename to dist/chunks/chunk.3EZHFHG3.js index 1258c7b7..96be5757 100644 --- a/dist/chunks/chunk.PTXGKMCM.js +++ b/dist/chunks/chunk.3EZHFHG3.js @@ -4,15 +4,15 @@ import { import { o as o2 } from "./chunk.FQQ5K3WY.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; import { e } from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { component_styles_default } from "./chunk.K23QWHWK.js"; diff --git a/dist/chunks/chunk.A2BFSQ3C.js b/dist/chunks/chunk.3H4P7QZ5.js similarity index 83% rename from dist/chunks/chunk.A2BFSQ3C.js rename to dist/chunks/chunk.3H4P7QZ5.js index 1f42e3e6..ac58335c 100644 --- a/dist/chunks/chunk.A2BFSQ3C.js +++ b/dist/chunks/chunk.3H4P7QZ5.js @@ -1,6 +1,6 @@ import { SlDialog -} from "./chunk.QFY5BTZB.js"; +} from "./chunk.JEDU5SAS.js"; // src/components/dialog/dialog.ts var dialog_default = SlDialog; diff --git a/dist/chunks/chunk.T7KYOX3S.js b/dist/chunks/chunk.3KSLHZUI.js similarity index 82% rename from dist/chunks/chunk.T7KYOX3S.js rename to dist/chunks/chunk.3KSLHZUI.js index 7ae48ea8..b5c1d003 100644 --- a/dist/chunks/chunk.T7KYOX3S.js +++ b/dist/chunks/chunk.3KSLHZUI.js @@ -1,6 +1,6 @@ import { SlRadio -} from "./chunk.K2ROYTBB.js"; +} from "./chunk.QKLVXD76.js"; // src/components/radio/radio.ts var radio_default = SlRadio; diff --git a/dist/chunks/chunk.SQZ5OT6N.js b/dist/chunks/chunk.3ZGEZ6AF.js similarity index 95% rename from dist/chunks/chunk.SQZ5OT6N.js rename to dist/chunks/chunk.3ZGEZ6AF.js index 18b2456d..1ff55336 100644 --- a/dist/chunks/chunk.SQZ5OT6N.js +++ b/dist/chunks/chunk.3ZGEZ6AF.js @@ -1,6 +1,6 @@ import { SlSelect -} from "./chunk.U4O2H2B7.js"; +} from "./chunk.NAMNOMAN.js"; // src/react/select/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.3XSEVTOL.js b/dist/chunks/chunk.3ZTS7K3T.js similarity index 87% rename from dist/chunks/chunk.3XSEVTOL.js rename to dist/chunks/chunk.3ZTS7K3T.js index f3683e0b..e88187aa 100644 --- a/dist/chunks/chunk.3XSEVTOL.js +++ b/dist/chunks/chunk.3ZTS7K3T.js @@ -1,6 +1,6 @@ import { SlImageComparer -} from "./chunk.6OGSJDWU.js"; +} from "./chunk.N3DJF6MW.js"; // src/components/image-comparer/image-comparer.ts var image_comparer_default = SlImageComparer; diff --git a/dist/chunks/chunk.SRVZQDLF.js b/dist/chunks/chunk.4BS7E4WA.js similarity index 82% rename from dist/chunks/chunk.SRVZQDLF.js rename to dist/chunks/chunk.4BS7E4WA.js index af435fa5..be22ce28 100644 --- a/dist/chunks/chunk.SRVZQDLF.js +++ b/dist/chunks/chunk.4BS7E4WA.js @@ -1,6 +1,6 @@ import { SlRange -} from "./chunk.636GFVN7.js"; +} from "./chunk.JDMEV6W6.js"; // src/components/range/range.ts var range_default = SlRange; diff --git a/dist/chunks/chunk.WMGEXFCN.js b/dist/chunks/chunk.4VSLQP6A.js similarity index 99% rename from dist/chunks/chunk.WMGEXFCN.js rename to dist/chunks/chunk.4VSLQP6A.js index b3f5de9d..aa66ed90 100644 --- a/dist/chunks/chunk.WMGEXFCN.js +++ b/dist/chunks/chunk.4VSLQP6A.js @@ -1,6 +1,6 @@ import { SubmenuController -} from "./chunk.MZQVGI4G.js"; +} from "./chunk.URMLYPYT.js"; import { menu_item_styles_default } from "./chunk.IPJHXFIL.js"; @@ -14,12 +14,12 @@ import { HasSlotController, getTextContent } from "./chunk.NYIIDP5N.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.Y3VN6GCE.js b/dist/chunks/chunk.5T6ERPEL.js similarity index 93% rename from dist/chunks/chunk.Y3VN6GCE.js rename to dist/chunks/chunk.5T6ERPEL.js index 1e62823c..e4a9d153 100644 --- a/dist/chunks/chunk.Y3VN6GCE.js +++ b/dist/chunks/chunk.5T6ERPEL.js @@ -1,6 +1,6 @@ import { SlMenuItem -} from "./chunk.WMGEXFCN.js"; +} from "./chunk.4VSLQP6A.js"; // src/react/menu-item/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.YD3SR4QD.js b/dist/chunks/chunk.5YM23XW6.js similarity index 84% rename from dist/chunks/chunk.YD3SR4QD.js rename to dist/chunks/chunk.5YM23XW6.js index 46b90ce2..93b395c1 100644 --- a/dist/chunks/chunk.YD3SR4QD.js +++ b/dist/chunks/chunk.5YM23XW6.js @@ -1,6 +1,6 @@ import { SlTabGroup -} from "./chunk.QYSV4AOQ.js"; +} from "./chunk.IYOMW7E7.js"; // src/components/tab-group/tab-group.ts var tab_group_default = SlTabGroup; diff --git a/dist/chunks/chunk.SSHR2JDI.js b/dist/chunks/chunk.6PGWJ74B.js similarity index 85% rename from dist/chunks/chunk.SSHR2JDI.js rename to dist/chunks/chunk.6PGWJ74B.js index bd3c7c6a..ec21eb1c 100644 --- a/dist/chunks/chunk.SSHR2JDI.js +++ b/dist/chunks/chunk.6PGWJ74B.js @@ -1,6 +1,6 @@ import { SlAnimation -} from "./chunk.ZPH3EXSL.js"; +} from "./chunk.UYEAPXNR.js"; // src/components/animation/animation.ts var animation_default = SlAnimation; diff --git a/dist/chunks/chunk.JURRYKMI.js b/dist/chunks/chunk.6QIZUGEE.js similarity index 99% rename from dist/chunks/chunk.JURRYKMI.js rename to dist/chunks/chunk.6QIZUGEE.js index 162d9804..db8916e7 100644 --- a/dist/chunks/chunk.JURRYKMI.js +++ b/dist/chunks/chunk.6QIZUGEE.js @@ -10,7 +10,7 @@ import { } from "./chunk.F5JVBNK3.js"; import { SlIconButton -} from "./chunk.EUMKZFJV.js"; +} from "./chunk.HECO4DZ2.js"; import { getAnimation, setDefaultAnimation @@ -22,6 +22,9 @@ import { animateTo, stopAnimations } from "./chunk.S7GYYU7Z.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; @@ -31,9 +34,6 @@ import { import { e } from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.YJFDGOZ2.js b/dist/chunks/chunk.77NS7GHF.js similarity index 85% rename from dist/chunks/chunk.YJFDGOZ2.js rename to dist/chunks/chunk.77NS7GHF.js index b62f3357..ce6191e8 100644 --- a/dist/chunks/chunk.YJFDGOZ2.js +++ b/dist/chunks/chunk.77NS7GHF.js @@ -1,6 +1,6 @@ import { SlIconButton -} from "./chunk.EUMKZFJV.js"; +} from "./chunk.HECO4DZ2.js"; // src/components/icon-button/icon-button.ts var icon_button_default = SlIconButton; diff --git a/dist/chunks/chunk.6IYKUC4J.js b/dist/chunks/chunk.7MNXVO5H.js similarity index 83% rename from dist/chunks/chunk.6IYKUC4J.js rename to dist/chunks/chunk.7MNXVO5H.js index 76bc88be..fae9237f 100644 --- a/dist/chunks/chunk.6IYKUC4J.js +++ b/dist/chunks/chunk.7MNXVO5H.js @@ -1,6 +1,6 @@ import { SlAvatar -} from "./chunk.DRMJWHYW.js"; +} from "./chunk.YPIYOHSV.js"; // src/components/avatar/avatar.ts var avatar_default = SlAvatar; diff --git a/dist/chunks/chunk.F5FBHKBI.js b/dist/chunks/chunk.A4BE7OVG.js similarity index 81% rename from dist/chunks/chunk.F5FBHKBI.js rename to dist/chunks/chunk.A4BE7OVG.js index 303e15c8..8ef15f82 100644 --- a/dist/chunks/chunk.F5FBHKBI.js +++ b/dist/chunks/chunk.A4BE7OVG.js @@ -1,6 +1,6 @@ import { SlTree -} from "./chunk.DSZSVCSX.js"; +} from "./chunk.AW64EVPI.js"; // src/components/tree/tree.ts var tree_default = SlTree; diff --git a/dist/chunks/chunk.XLVNHEC6.js b/dist/chunks/chunk.AAZEKXC4.js similarity index 92% rename from dist/chunks/chunk.XLVNHEC6.js rename to dist/chunks/chunk.AAZEKXC4.js index 26e3f999..773dc2b8 100644 --- a/dist/chunks/chunk.XLVNHEC6.js +++ b/dist/chunks/chunk.AAZEKXC4.js @@ -1,6 +1,6 @@ import { SlOption -} from "./chunk.RNPLPMI7.js"; +} from "./chunk.HP6XNQLT.js"; // src/react/option/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.J67LBPKS.js b/dist/chunks/chunk.AOTJKWMX.js similarity index 94% rename from dist/chunks/chunk.J67LBPKS.js rename to dist/chunks/chunk.AOTJKWMX.js index 120752a3..60f1b989 100644 --- a/dist/chunks/chunk.J67LBPKS.js +++ b/dist/chunks/chunk.AOTJKWMX.js @@ -1,6 +1,6 @@ import { SlIconButton -} from "./chunk.EUMKZFJV.js"; +} from "./chunk.HECO4DZ2.js"; // src/react/icon-button/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.ZVYU26EE.js b/dist/chunks/chunk.AT35VHTC.js similarity index 80% rename from dist/chunks/chunk.ZVYU26EE.js rename to dist/chunks/chunk.AT35VHTC.js index 75e72612..9dc1a945 100644 --- a/dist/chunks/chunk.ZVYU26EE.js +++ b/dist/chunks/chunk.AT35VHTC.js @@ -1,6 +1,6 @@ import { SlTag -} from "./chunk.GH4I3V5W.js"; +} from "./chunk.GVMOZDVD.js"; // src/components/tag/tag.ts var tag_default = SlTag; diff --git a/dist/chunks/chunk.DSZSVCSX.js b/dist/chunks/chunk.AW64EVPI.js similarity index 99% rename from dist/chunks/chunk.DSZSVCSX.js rename to dist/chunks/chunk.AW64EVPI.js index 4c6f8ba1..1d7b082b 100644 --- a/dist/chunks/chunk.DSZSVCSX.js +++ b/dist/chunks/chunk.AW64EVPI.js @@ -3,7 +3,7 @@ import { } from "./chunk.CJB5WKGN.js"; import { SlTreeItem -} from "./chunk.I2VMJQGZ.js"; +} from "./chunk.NSDAXWU5.js"; import { clamp } from "./chunk.HF7GESMZ.js"; diff --git a/dist/chunks/chunk.SLMMUW6G.js b/dist/chunks/chunk.CA4YGNMP.js similarity index 100% rename from dist/chunks/chunk.SLMMUW6G.js rename to dist/chunks/chunk.CA4YGNMP.js index 04b7cb94..10d82882 100644 --- a/dist/chunks/chunk.SLMMUW6G.js +++ b/dist/chunks/chunk.CA4YGNMP.js @@ -13,15 +13,15 @@ import { shimKeyframesHeightAuto, stopAnimations } from "./chunk.S7GYYU7Z.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.K2IH25YY.js b/dist/chunks/chunk.CMVGJZQB.js similarity index 100% rename from dist/chunks/chunk.K2IH25YY.js rename to dist/chunks/chunk.CMVGJZQB.js index 12fa8046..eda62e60 100644 --- a/dist/chunks/chunk.K2IH25YY.js +++ b/dist/chunks/chunk.CMVGJZQB.js @@ -7,12 +7,12 @@ import { import { clamp } from "./chunk.HF7GESMZ.js"; -import { - o -} from "./chunk.2URMUHDY.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + o +} from "./chunk.2URMUHDY.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.TKH2FCTH.js b/dist/chunks/chunk.CPXW4SC4.js similarity index 94% rename from dist/chunks/chunk.TKH2FCTH.js rename to dist/chunks/chunk.CPXW4SC4.js index ce71ebab..4d74599d 100644 --- a/dist/chunks/chunk.TKH2FCTH.js +++ b/dist/chunks/chunk.CPXW4SC4.js @@ -1,6 +1,6 @@ import { SlCopyButton -} from "./chunk.OUERAG24.js"; +} from "./chunk.PJ7UYN3F.js"; // src/react/copy-button/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.JOMOSJ6V.js b/dist/chunks/chunk.D4HT5N2S.js similarity index 100% rename from dist/chunks/chunk.JOMOSJ6V.js rename to dist/chunks/chunk.D4HT5N2S.js index 45b070a6..6e5a9a87 100644 --- a/dist/chunks/chunk.JOMOSJ6V.js +++ b/dist/chunks/chunk.D4HT5N2S.js @@ -10,12 +10,12 @@ import { import { clamp } from "./chunk.HF7GESMZ.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.EVGTMRV3.js b/dist/chunks/chunk.DDLAAFQL.js similarity index 95% rename from dist/chunks/chunk.EVGTMRV3.js rename to dist/chunks/chunk.DDLAAFQL.js index 51e6aa69..0e049939 100644 --- a/dist/chunks/chunk.EVGTMRV3.js +++ b/dist/chunks/chunk.DDLAAFQL.js @@ -1,6 +1,6 @@ import { SlDialog -} from "./chunk.QFY5BTZB.js"; +} from "./chunk.JEDU5SAS.js"; // src/react/dialog/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.TQRRFFWX.js b/dist/chunks/chunk.E4DVWLFF.js similarity index 87% rename from dist/chunks/chunk.TQRRFFWX.js rename to dist/chunks/chunk.E4DVWLFF.js index c3f64743..9651fad7 100644 --- a/dist/chunks/chunk.TQRRFFWX.js +++ b/dist/chunks/chunk.E4DVWLFF.js @@ -1,6 +1,6 @@ import { SlAnimatedImage -} from "./chunk.THDZPG3S.js"; +} from "./chunk.IDJPPGR6.js"; // src/components/animated-image/animated-image.ts var animated_image_default = SlAnimatedImage; diff --git a/dist/chunks/chunk.CFH2JNVK.js b/dist/chunks/chunk.EAH27JYQ.js similarity index 99% rename from dist/chunks/chunk.CFH2JNVK.js rename to dist/chunks/chunk.EAH27JYQ.js index d3babc15..4eee561c 100644 --- a/dist/chunks/chunk.CFH2JNVK.js +++ b/dist/chunks/chunk.EAH27JYQ.js @@ -3,7 +3,7 @@ import { } from "./chunk.2FPAOYP2.js"; import { SlInput -} from "./chunk.QT6X3RZ4.js"; +} from "./chunk.N5QISGWZ.js"; import { drag } from "./chunk.ESELY2US.js"; @@ -12,7 +12,7 @@ import { } from "./chunk.FQQ5K3WY.js"; import { SlDropdown -} from "./chunk.CMHBKN7G.js"; +} from "./chunk.MZEJHEPM.js"; import { defaultValue } from "./chunk.RQ7JZ4R7.js"; @@ -24,25 +24,25 @@ import { } from "./chunk.HF7GESMZ.js"; import { SlButton -} from "./chunk.ANK5P6NL.js"; +} from "./chunk.FY6XFGKF.js"; import { FormControlController } from "./chunk.JWVNKU5Y.js"; import { SlButtonGroup } from "./chunk.F3KB2RIB.js"; -import { - o -} from "./chunk.2URMUHDY.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + o +} from "./chunk.2URMUHDY.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.4S2NCH2A.js b/dist/chunks/chunk.EXPSTLYX.js similarity index 100% rename from dist/chunks/chunk.4S2NCH2A.js rename to dist/chunks/chunk.EXPSTLYX.js index 842a8b67..0d1cfaa5 100644 --- a/dist/chunks/chunk.4S2NCH2A.js +++ b/dist/chunks/chunk.EXPSTLYX.js @@ -13,15 +13,15 @@ import { import { prefersReducedMotion } from "./chunk.S7GYYU7Z.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.2T47JI2Y.js b/dist/chunks/chunk.F3BK5VZ5.js similarity index 94% rename from dist/chunks/chunk.2T47JI2Y.js rename to dist/chunks/chunk.F3BK5VZ5.js index f99fd2c9..4b9a6ddd 100644 --- a/dist/chunks/chunk.2T47JI2Y.js +++ b/dist/chunks/chunk.F3BK5VZ5.js @@ -1,6 +1,6 @@ import { SlButton -} from "./chunk.ANK5P6NL.js"; +} from "./chunk.FY6XFGKF.js"; // src/react/button/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.VADWVLYW.js b/dist/chunks/chunk.F5DJG2IC.js similarity index 99% rename from dist/chunks/chunk.VADWVLYW.js rename to dist/chunks/chunk.F5DJG2IC.js index 64dd386d..40ba0a89 100644 --- a/dist/chunks/chunk.VADWVLYW.js +++ b/dist/chunks/chunk.F5DJG2IC.js @@ -3,7 +3,7 @@ import { } from "./chunk.DNDYQTWS.js"; import { l -} from "./chunk.MB643KRE.js"; +} from "./chunk.IRURSJVI.js"; import { defaultValue } from "./chunk.RQ7JZ4R7.js"; @@ -19,12 +19,12 @@ import { import { HasSlotController } from "./chunk.NYIIDP5N.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.IULN2B2Z.js b/dist/chunks/chunk.FG3K56UG.js similarity index 94% rename from dist/chunks/chunk.IULN2B2Z.js rename to dist/chunks/chunk.FG3K56UG.js index 54d15eca..c8114b70 100644 --- a/dist/chunks/chunk.IULN2B2Z.js +++ b/dist/chunks/chunk.FG3K56UG.js @@ -1,6 +1,6 @@ import { SlTabGroup -} from "./chunk.QYSV4AOQ.js"; +} from "./chunk.IYOMW7E7.js"; // src/react/tab-group/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.WWLGKKJL.js b/dist/chunks/chunk.FSY7RZDG.js similarity index 94% rename from dist/chunks/chunk.WWLGKKJL.js rename to dist/chunks/chunk.FSY7RZDG.js index 31dd2817..e38a290a 100644 --- a/dist/chunks/chunk.WWLGKKJL.js +++ b/dist/chunks/chunk.FSY7RZDG.js @@ -1,6 +1,6 @@ import { SlDropdown -} from "./chunk.CMHBKN7G.js"; +} from "./chunk.MZEJHEPM.js"; // src/react/dropdown/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.ANK5P6NL.js b/dist/chunks/chunk.FY6XFGKF.js similarity index 100% rename from dist/chunks/chunk.ANK5P6NL.js rename to dist/chunks/chunk.FY6XFGKF.js index 5f158ff5..b95f4dd9 100644 --- a/dist/chunks/chunk.ANK5P6NL.js +++ b/dist/chunks/chunk.FY6XFGKF.js @@ -12,21 +12,21 @@ import { n as n2, s } from "./chunk.LX7UG5WS.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; import { HasSlotController } from "./chunk.NYIIDP5N.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.R3FA5JLK.js b/dist/chunks/chunk.GA6KQAOQ.js similarity index 84% rename from dist/chunks/chunk.R3FA5JLK.js rename to dist/chunks/chunk.GA6KQAOQ.js index afe9e85f..d20e9941 100644 --- a/dist/chunks/chunk.R3FA5JLK.js +++ b/dist/chunks/chunk.GA6KQAOQ.js @@ -1,6 +1,6 @@ import { SlTreeItem -} from "./chunk.I2VMJQGZ.js"; +} from "./chunk.NSDAXWU5.js"; // src/components/tree-item/tree-item.ts var tree_item_default = SlTreeItem; diff --git a/dist/chunks/chunk.P63VQA7M.js b/dist/chunks/chunk.GQVYY2ON.js similarity index 94% rename from dist/chunks/chunk.P63VQA7M.js rename to dist/chunks/chunk.GQVYY2ON.js index ea35bc78..1253d06b 100644 --- a/dist/chunks/chunk.P63VQA7M.js +++ b/dist/chunks/chunk.GQVYY2ON.js @@ -1,6 +1,6 @@ import { SlAnimation -} from "./chunk.ZPH3EXSL.js"; +} from "./chunk.UYEAPXNR.js"; // src/react/animation/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.GH4I3V5W.js b/dist/chunks/chunk.GVMOZDVD.js similarity index 98% rename from dist/chunks/chunk.GH4I3V5W.js rename to dist/chunks/chunk.GVMOZDVD.js index 5e0d9b65..9ec32810 100644 --- a/dist/chunks/chunk.GH4I3V5W.js +++ b/dist/chunks/chunk.GVMOZDVD.js @@ -3,13 +3,13 @@ import { } from "./chunk.MVCCMDRT.js"; import { SlIconButton -} from "./chunk.EUMKZFJV.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; +} from "./chunk.HECO4DZ2.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { component_styles_default } from "./chunk.K23QWHWK.js"; diff --git a/dist/chunks/chunk.BWM56YWB.js b/dist/chunks/chunk.HDJPOAMP.js similarity index 93% rename from dist/chunks/chunk.BWM56YWB.js rename to dist/chunks/chunk.HDJPOAMP.js index e031e019..cdff2e99 100644 --- a/dist/chunks/chunk.BWM56YWB.js +++ b/dist/chunks/chunk.HDJPOAMP.js @@ -1,6 +1,6 @@ import { SlCarousel -} from "./chunk.4S2NCH2A.js"; +} from "./chunk.EXPSTLYX.js"; // src/react/carousel/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.EUMKZFJV.js b/dist/chunks/chunk.HECO4DZ2.js similarity index 100% rename from dist/chunks/chunk.EUMKZFJV.js rename to dist/chunks/chunk.HECO4DZ2.js index 799514d5..63c86544 100644 --- a/dist/chunks/chunk.EUMKZFJV.js +++ b/dist/chunks/chunk.HECO4DZ2.js @@ -8,12 +8,12 @@ import { import { o } from "./chunk.2URMUHDY.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { component_styles_default } from "./chunk.K23QWHWK.js"; diff --git a/dist/chunks/chunk.JXNEB52G.js b/dist/chunks/chunk.HIEWE77I.js similarity index 100% rename from dist/chunks/chunk.JXNEB52G.js rename to dist/chunks/chunk.HIEWE77I.js index c2295deb..de36868f 100644 --- a/dist/chunks/chunk.JXNEB52G.js +++ b/dist/chunks/chunk.HIEWE77I.js @@ -16,12 +16,12 @@ import { parseDuration, stopAnimations } from "./chunk.S7GYYU7Z.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.4RZCCS72.js b/dist/chunks/chunk.HJLSNBIP.js similarity index 83% rename from dist/chunks/chunk.4RZCCS72.js rename to dist/chunks/chunk.HJLSNBIP.js index ed43eb0e..869b1a1c 100644 --- a/dist/chunks/chunk.4RZCCS72.js +++ b/dist/chunks/chunk.HJLSNBIP.js @@ -1,6 +1,6 @@ import { SlOption -} from "./chunk.RNPLPMI7.js"; +} from "./chunk.HP6XNQLT.js"; // src/components/option/option.ts var option_default = SlOption; diff --git a/dist/chunks/chunk.RNPLPMI7.js b/dist/chunks/chunk.HP6XNQLT.js similarity index 100% rename from dist/chunks/chunk.RNPLPMI7.js rename to dist/chunks/chunk.HP6XNQLT.js index 2acc64a0..48759f23 100644 --- a/dist/chunks/chunk.RNPLPMI7.js +++ b/dist/chunks/chunk.HP6XNQLT.js @@ -1,15 +1,15 @@ import { option_styles_default } from "./chunk.JXTNYING.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.XYZE4CTX.js b/dist/chunks/chunk.I5J75LJ5.js similarity index 83% rename from dist/chunks/chunk.XYZE4CTX.js rename to dist/chunks/chunk.I5J75LJ5.js index d7f5ee41..e84b8bb2 100644 --- a/dist/chunks/chunk.XYZE4CTX.js +++ b/dist/chunks/chunk.I5J75LJ5.js @@ -1,6 +1,6 @@ import { SlSelect -} from "./chunk.U4O2H2B7.js"; +} from "./chunk.NAMNOMAN.js"; // src/components/select/select.ts var select_default = SlSelect; diff --git a/dist/chunks/chunk.GBETTBLG.js b/dist/chunks/chunk.I6TGOM6Z.js similarity index 83% rename from dist/chunks/chunk.GBETTBLG.js rename to dist/chunks/chunk.I6TGOM6Z.js index 06270e52..1d69120e 100644 --- a/dist/chunks/chunk.GBETTBLG.js +++ b/dist/chunks/chunk.I6TGOM6Z.js @@ -1,6 +1,6 @@ import { SlDetails -} from "./chunk.SLMMUW6G.js"; +} from "./chunk.CA4YGNMP.js"; // src/components/details/details.ts var details_default = SlDetails; diff --git a/dist/chunks/chunk.THDZPG3S.js b/dist/chunks/chunk.IDJPPGR6.js similarity index 100% rename from dist/chunks/chunk.THDZPG3S.js rename to dist/chunks/chunk.IDJPPGR6.js index 3a125178..752a2adc 100644 --- a/dist/chunks/chunk.THDZPG3S.js +++ b/dist/chunks/chunk.IDJPPGR6.js @@ -1,3 +1,6 @@ +import { + animated_image_styles_default +} from "./chunk.WIDVIH73.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; @@ -13,9 +16,6 @@ import { n, r } from "./chunk.URGPTPT3.js"; -import { - animated_image_styles_default -} from "./chunk.WIDVIH73.js"; import { x } from "./chunk.CXZZ2LVK.js"; diff --git a/dist/chunks/chunk.NQXFTJK2.js b/dist/chunks/chunk.IE2PU6PU.js similarity index 84% rename from dist/chunks/chunk.NQXFTJK2.js rename to dist/chunks/chunk.IE2PU6PU.js index bd29bb5f..09898827 100644 --- a/dist/chunks/chunk.NQXFTJK2.js +++ b/dist/chunks/chunk.IE2PU6PU.js @@ -1,6 +1,6 @@ import { SlMenuItem -} from "./chunk.WMGEXFCN.js"; +} from "./chunk.4VSLQP6A.js"; // src/components/menu-item/menu-item.ts var menu_item_default = SlMenuItem; diff --git a/dist/chunks/chunk.IZLUHFAR.js b/dist/chunks/chunk.IPBA3RL7.js similarity index 85% rename from dist/chunks/chunk.IZLUHFAR.js rename to dist/chunks/chunk.IPBA3RL7.js index 29838c3d..1f950a73 100644 --- a/dist/chunks/chunk.IZLUHFAR.js +++ b/dist/chunks/chunk.IPBA3RL7.js @@ -1,6 +1,6 @@ import { SlSplitPanel -} from "./chunk.K2IH25YY.js"; +} from "./chunk.CMVGJZQB.js"; // src/components/split-panel/split-panel.ts var split_panel_default = SlSplitPanel; diff --git a/dist/chunks/chunk.MB643KRE.js b/dist/chunks/chunk.IRURSJVI.js similarity index 100% rename from dist/chunks/chunk.MB643KRE.js rename to dist/chunks/chunk.IRURSJVI.js index 9be82fff..a46a7132 100644 --- a/dist/chunks/chunk.MB643KRE.js +++ b/dist/chunks/chunk.IRURSJVI.js @@ -1,12 +1,12 @@ +import { + f, + m +} from "./chunk.2L6GHXIJ.js"; import { e, i, t } from "./chunk.UP75L23G.js"; -import { - f, - m -} from "./chunk.2L6GHXIJ.js"; import { T, w diff --git a/dist/chunks/chunk.QYSV4AOQ.js b/dist/chunks/chunk.IYOMW7E7.js similarity index 99% rename from dist/chunks/chunk.QYSV4AOQ.js rename to dist/chunks/chunk.IYOMW7E7.js index 4e30f959..980f9d1d 100644 --- a/dist/chunks/chunk.QYSV4AOQ.js +++ b/dist/chunks/chunk.IYOMW7E7.js @@ -6,13 +6,13 @@ import { } from "./chunk.F5JVBNK3.js"; import { SlIconButton -} from "./chunk.EUMKZFJV.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; +} from "./chunk.HECO4DZ2.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.636GFVN7.js b/dist/chunks/chunk.JDMEV6W6.js similarity index 99% rename from dist/chunks/chunk.636GFVN7.js rename to dist/chunks/chunk.JDMEV6W6.js index d42b8d08..3ce988dc 100644 --- a/dist/chunks/chunk.636GFVN7.js +++ b/dist/chunks/chunk.JDMEV6W6.js @@ -3,7 +3,7 @@ import { } from "./chunk.E77YYWGC.js"; import { l -} from "./chunk.MB643KRE.js"; +} from "./chunk.IRURSJVI.js"; import { defaultValue } from "./chunk.RQ7JZ4R7.js"; @@ -13,6 +13,9 @@ import { import { FormControlController } from "./chunk.JWVNKU5Y.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; @@ -22,9 +25,6 @@ import { import { e } from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.QFY5BTZB.js b/dist/chunks/chunk.JEDU5SAS.js similarity index 99% rename from dist/chunks/chunk.QFY5BTZB.js rename to dist/chunks/chunk.JEDU5SAS.js index d85dcb12..37f1f1f2 100644 --- a/dist/chunks/chunk.QFY5BTZB.js +++ b/dist/chunks/chunk.JEDU5SAS.js @@ -10,7 +10,7 @@ import { } from "./chunk.RYFK2CD3.js"; import { SlIconButton -} from "./chunk.EUMKZFJV.js"; +} from "./chunk.HECO4DZ2.js"; import { getAnimation, setDefaultAnimation @@ -22,6 +22,9 @@ import { animateTo, stopAnimations } from "./chunk.S7GYYU7Z.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; @@ -31,9 +34,6 @@ import { import { e } from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.CKGCU5UH.js b/dist/chunks/chunk.JIZBX5ZW.js similarity index 86% rename from dist/chunks/chunk.CKGCU5UH.js rename to dist/chunks/chunk.JIZBX5ZW.js index a20c1ff9..36d5a5d8 100644 --- a/dist/chunks/chunk.CKGCU5UH.js +++ b/dist/chunks/chunk.JIZBX5ZW.js @@ -1,6 +1,6 @@ import { SlColorPicker -} from "./chunk.CFH2JNVK.js"; +} from "./chunk.EAH27JYQ.js"; // src/components/color-picker/color-picker.ts var color_picker_default = SlColorPicker; diff --git a/dist/chunks/chunk.AYJVTYM4.js b/dist/chunks/chunk.JRVKL7AO.js similarity index 94% rename from dist/chunks/chunk.AYJVTYM4.js rename to dist/chunks/chunk.JRVKL7AO.js index e485212f..dfaefc8b 100644 --- a/dist/chunks/chunk.AYJVTYM4.js +++ b/dist/chunks/chunk.JRVKL7AO.js @@ -1,6 +1,6 @@ import { SlSplitPanel -} from "./chunk.K2IH25YY.js"; +} from "./chunk.CMVGJZQB.js"; // src/react/split-panel/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.JFXHKZRL.js b/dist/chunks/chunk.JWMI3NOK.js similarity index 94% rename from dist/chunks/chunk.JFXHKZRL.js rename to dist/chunks/chunk.JWMI3NOK.js index 4aa7c19e..38369d07 100644 --- a/dist/chunks/chunk.JFXHKZRL.js +++ b/dist/chunks/chunk.JWMI3NOK.js @@ -1,6 +1,6 @@ import { SlAnimatedImage -} from "./chunk.THDZPG3S.js"; +} from "./chunk.IDJPPGR6.js"; // src/react/animated-image/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.Z5WPL7FK.js b/dist/chunks/chunk.K2G6YYR3.js similarity index 83% rename from dist/chunks/chunk.Z5WPL7FK.js rename to dist/chunks/chunk.K2G6YYR3.js index 5b564181..58594697 100644 --- a/dist/chunks/chunk.Z5WPL7FK.js +++ b/dist/chunks/chunk.K2G6YYR3.js @@ -1,6 +1,6 @@ import { SlTooltip -} from "./chunk.JXNEB52G.js"; +} from "./chunk.HIEWE77I.js"; // src/components/tooltip/tooltip.ts var tooltip_default = SlTooltip; diff --git a/dist/chunks/chunk.QWPPJ6MK.js b/dist/chunks/chunk.KHZVE7CV.js similarity index 86% rename from dist/chunks/chunk.QWPPJ6MK.js rename to dist/chunks/chunk.KHZVE7CV.js index a5dc2542..cc586487 100644 --- a/dist/chunks/chunk.QWPPJ6MK.js +++ b/dist/chunks/chunk.KHZVE7CV.js @@ -1,6 +1,6 @@ import { SlProgressBar -} from "./chunk.PTXGKMCM.js"; +} from "./chunk.3EZHFHG3.js"; // src/components/progress-bar/progress-bar.ts var progress_bar_default = SlProgressBar; diff --git a/dist/chunks/chunk.CBWL3I6V.js b/dist/chunks/chunk.KLYKT4LR.js similarity index 82% rename from dist/chunks/chunk.CBWL3I6V.js rename to dist/chunks/chunk.KLYKT4LR.js index c4499ea9..21312e5a 100644 --- a/dist/chunks/chunk.CBWL3I6V.js +++ b/dist/chunks/chunk.KLYKT4LR.js @@ -1,6 +1,6 @@ import { SlInput -} from "./chunk.QT6X3RZ4.js"; +} from "./chunk.N5QISGWZ.js"; // src/components/input/input.ts var input_default = SlInput; diff --git a/dist/chunks/chunk.TW53AQUU.js b/dist/chunks/chunk.KMS6K2ZC.js similarity index 93% rename from dist/chunks/chunk.TW53AQUU.js rename to dist/chunks/chunk.KMS6K2ZC.js index 163bd89c..fc6170b6 100644 --- a/dist/chunks/chunk.TW53AQUU.js +++ b/dist/chunks/chunk.KMS6K2ZC.js @@ -1,6 +1,6 @@ import { SlRadio -} from "./chunk.K2ROYTBB.js"; +} from "./chunk.QKLVXD76.js"; // src/react/radio/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.CS2FJAVB.js b/dist/chunks/chunk.L5V2RVPF.js similarity index 99% rename from dist/chunks/chunk.CS2FJAVB.js rename to dist/chunks/chunk.L5V2RVPF.js index 78061230..13be7e59 100644 --- a/dist/chunks/chunk.CS2FJAVB.js +++ b/dist/chunks/chunk.L5V2RVPF.js @@ -3,7 +3,7 @@ import { } from "./chunk.4CNJZ4VC.js"; import { l -} from "./chunk.MB643KRE.js"; +} from "./chunk.IRURSJVI.js"; import { defaultValue } from "./chunk.RQ7JZ4R7.js"; diff --git a/dist/chunks/chunk.TUUNNIMD.js b/dist/chunks/chunk.LJWD3SJX.js similarity index 93% rename from dist/chunks/chunk.TUUNNIMD.js rename to dist/chunks/chunk.LJWD3SJX.js index 349cef7c..61b59e15 100644 --- a/dist/chunks/chunk.TUUNNIMD.js +++ b/dist/chunks/chunk.LJWD3SJX.js @@ -1,6 +1,6 @@ import { SlRating -} from "./chunk.JOMOSJ6V.js"; +} from "./chunk.D4HT5N2S.js"; // src/react/rating/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.LPDJYE6J.js b/dist/chunks/chunk.M7CLXYMX.js similarity index 93% rename from dist/chunks/chunk.LPDJYE6J.js rename to dist/chunks/chunk.M7CLXYMX.js index 2cef5e21..d5f66b25 100644 --- a/dist/chunks/chunk.LPDJYE6J.js +++ b/dist/chunks/chunk.M7CLXYMX.js @@ -1,6 +1,6 @@ import { SlTree -} from "./chunk.DSZSVCSX.js"; +} from "./chunk.AW64EVPI.js"; // src/react/tree/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.VGFMDSAI.js b/dist/chunks/chunk.MPAT4V3I.js similarity index 93% rename from dist/chunks/chunk.VGFMDSAI.js rename to dist/chunks/chunk.MPAT4V3I.js index 6c132120..cdf187d1 100644 --- a/dist/chunks/chunk.VGFMDSAI.js +++ b/dist/chunks/chunk.MPAT4V3I.js @@ -1,6 +1,6 @@ import { SlProgressBar -} from "./chunk.PTXGKMCM.js"; +} from "./chunk.3EZHFHG3.js"; // src/react/progress-bar/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.CMHBKN7G.js b/dist/chunks/chunk.MZEJHEPM.js similarity index 100% rename from dist/chunks/chunk.CMHBKN7G.js rename to dist/chunks/chunk.MZEJHEPM.js index ea4e8235..d739c75f 100644 --- a/dist/chunks/chunk.CMHBKN7G.js +++ b/dist/chunks/chunk.MZEJHEPM.js @@ -18,15 +18,15 @@ import { animateTo, stopAnimations } from "./chunk.S7GYYU7Z.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; import { e } from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.6OGSJDWU.js b/dist/chunks/chunk.N3DJF6MW.js similarity index 100% rename from dist/chunks/chunk.6OGSJDWU.js rename to dist/chunks/chunk.N3DJF6MW.js index 59b25a30..e8cf69b6 100644 --- a/dist/chunks/chunk.6OGSJDWU.js +++ b/dist/chunks/chunk.N3DJF6MW.js @@ -10,12 +10,12 @@ import { import { clamp } from "./chunk.HF7GESMZ.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.QT6X3RZ4.js b/dist/chunks/chunk.N5QISGWZ.js similarity index 99% rename from dist/chunks/chunk.QT6X3RZ4.js rename to dist/chunks/chunk.N5QISGWZ.js index 89e67fdf..413aeb2b 100644 --- a/dist/chunks/chunk.QT6X3RZ4.js +++ b/dist/chunks/chunk.N5QISGWZ.js @@ -3,7 +3,7 @@ import { } from "./chunk.I4BWCXWK.js"; import { l -} from "./chunk.MB643KRE.js"; +} from "./chunk.IRURSJVI.js"; import { defaultValue } from "./chunk.RQ7JZ4R7.js"; @@ -13,21 +13,21 @@ import { import { FormControlController } from "./chunk.JWVNKU5Y.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { o } from "./chunk.2URMUHDY.js"; import { HasSlotController } from "./chunk.NYIIDP5N.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.U4O2H2B7.js b/dist/chunks/chunk.NAMNOMAN.js similarity index 99% rename from dist/chunks/chunk.U4O2H2B7.js rename to dist/chunks/chunk.NAMNOMAN.js index b90abb7f..c6064bc0 100644 --- a/dist/chunks/chunk.U4O2H2B7.js +++ b/dist/chunks/chunk.NAMNOMAN.js @@ -1,6 +1,6 @@ import { SlTag -} from "./chunk.GH4I3V5W.js"; +} from "./chunk.GVMOZDVD.js"; import { select_styles_default } from "./chunk.ECLFWIFP.js"; @@ -33,18 +33,18 @@ import { animateTo, stopAnimations } from "./chunk.S7GYYU7Z.js"; -import { - HasSlotController -} from "./chunk.NYIIDP5N.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + HasSlotController +} from "./chunk.NYIIDP5N.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.CMTWBNST.js b/dist/chunks/chunk.NQG7KWCE.js similarity index 94% rename from dist/chunks/chunk.CMTWBNST.js rename to dist/chunks/chunk.NQG7KWCE.js index 3aa6b2f3..dcd658f7 100644 --- a/dist/chunks/chunk.CMTWBNST.js +++ b/dist/chunks/chunk.NQG7KWCE.js @@ -1,6 +1,6 @@ import { SlRange -} from "./chunk.636GFVN7.js"; +} from "./chunk.JDMEV6W6.js"; // src/react/range/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.I2VMJQGZ.js b/dist/chunks/chunk.NSDAXWU5.js similarity index 99% rename from dist/chunks/chunk.I2VMJQGZ.js rename to dist/chunks/chunk.NSDAXWU5.js index 049821aa..d4a1d96d 100644 --- a/dist/chunks/chunk.I2VMJQGZ.js +++ b/dist/chunks/chunk.NSDAXWU5.js @@ -3,10 +3,10 @@ import { } from "./chunk.GR65TH73.js"; import { SlCheckbox -} from "./chunk.VADWVLYW.js"; +} from "./chunk.F5DJG2IC.js"; import { l -} from "./chunk.MB643KRE.js"; +} from "./chunk.IRURSJVI.js"; import { SlSpinner } from "./chunk.O5224PTR.js"; @@ -19,15 +19,15 @@ import { shimKeyframesHeightAuto, stopAnimations } from "./chunk.S7GYYU7Z.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.JJSRKCKW.js b/dist/chunks/chunk.NZULQTUJ.js similarity index 84% rename from dist/chunks/chunk.JJSRKCKW.js rename to dist/chunks/chunk.NZULQTUJ.js index 71816f36..df4780ae 100644 --- a/dist/chunks/chunk.JJSRKCKW.js +++ b/dist/chunks/chunk.NZULQTUJ.js @@ -1,6 +1,6 @@ import { SlDropdown -} from "./chunk.CMHBKN7G.js"; +} from "./chunk.MZEJHEPM.js"; // src/components/dropdown/dropdown.ts var dropdown_default = SlDropdown; diff --git a/dist/chunks/chunk.ARHWQFOY.js b/dist/chunks/chunk.OAUTL6YH.js similarity index 99% rename from dist/chunks/chunk.ARHWQFOY.js rename to dist/chunks/chunk.OAUTL6YH.js index aba347d6..f3dd84fb 100644 --- a/dist/chunks/chunk.ARHWQFOY.js +++ b/dist/chunks/chunk.OAUTL6YH.js @@ -3,7 +3,7 @@ import { } from "./chunk.ROHOK2AY.js"; import { l -} from "./chunk.MB643KRE.js"; +} from "./chunk.IRURSJVI.js"; import { defaultValue } from "./chunk.RQ7JZ4R7.js"; diff --git a/dist/chunks/chunk.MTYZGYVJ.js b/dist/chunks/chunk.OYSDTFV2.js similarity index 94% rename from dist/chunks/chunk.MTYZGYVJ.js rename to dist/chunks/chunk.OYSDTFV2.js index 47aff330..e9c495d1 100644 --- a/dist/chunks/chunk.MTYZGYVJ.js +++ b/dist/chunks/chunk.OYSDTFV2.js @@ -1,6 +1,6 @@ import { SlAlert -} from "./chunk.PMQVOPBU.js"; +} from "./chunk.UKBSSTC3.js"; // src/react/alert/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.OENC5VUK.js b/dist/chunks/chunk.PDIS3YDB.js similarity index 94% rename from dist/chunks/chunk.OENC5VUK.js rename to dist/chunks/chunk.PDIS3YDB.js index 77fe5828..23165eb3 100644 --- a/dist/chunks/chunk.OENC5VUK.js +++ b/dist/chunks/chunk.PDIS3YDB.js @@ -1,6 +1,6 @@ import { SlSwitch -} from "./chunk.ARHWQFOY.js"; +} from "./chunk.OAUTL6YH.js"; // src/react/switch/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.OUERAG24.js b/dist/chunks/chunk.PJ7UYN3F.js similarity index 99% rename from dist/chunks/chunk.OUERAG24.js rename to dist/chunks/chunk.PJ7UYN3F.js index e5bf129e..6e3d5d2e 100644 --- a/dist/chunks/chunk.OUERAG24.js +++ b/dist/chunks/chunk.PJ7UYN3F.js @@ -1,6 +1,6 @@ import { SlTooltip -} from "./chunk.JXNEB52G.js"; +} from "./chunk.HIEWE77I.js"; import { copy_button_styles_default } from "./chunk.7EKSUNPQ.js"; @@ -8,15 +8,15 @@ import { getAnimation, setDefaultAnimation } from "./chunk.RCZVQXWP.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { component_styles_default } from "./chunk.K23QWHWK.js"; diff --git a/dist/chunks/chunk.UNW6LWJI.js b/dist/chunks/chunk.PYB4RKJQ.js similarity index 95% rename from dist/chunks/chunk.UNW6LWJI.js rename to dist/chunks/chunk.PYB4RKJQ.js index 8ce27322..3de4108e 100644 --- a/dist/chunks/chunk.UNW6LWJI.js +++ b/dist/chunks/chunk.PYB4RKJQ.js @@ -1,6 +1,6 @@ import { SlColorPicker -} from "./chunk.CFH2JNVK.js"; +} from "./chunk.EAH27JYQ.js"; // src/react/color-picker/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.K2ROYTBB.js b/dist/chunks/chunk.QKLVXD76.js similarity index 100% rename from dist/chunks/chunk.K2ROYTBB.js rename to dist/chunks/chunk.QKLVXD76.js index 4ea1b31d..4fde5d04 100644 --- a/dist/chunks/chunk.K2ROYTBB.js +++ b/dist/chunks/chunk.QKLVXD76.js @@ -1,12 +1,12 @@ import { radio_styles_default } from "./chunk.43Z4T7VZ.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.F5YMP27H.js b/dist/chunks/chunk.RH52FQAZ.js similarity index 95% rename from dist/chunks/chunk.F5YMP27H.js rename to dist/chunks/chunk.RH52FQAZ.js index 8998da21..2ce3a1f6 100644 --- a/dist/chunks/chunk.F5YMP27H.js +++ b/dist/chunks/chunk.RH52FQAZ.js @@ -1,6 +1,6 @@ import { SlDrawer -} from "./chunk.JURRYKMI.js"; +} from "./chunk.6QIZUGEE.js"; // src/react/drawer/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.J72VNH2K.js b/dist/chunks/chunk.RYBGPLV6.js similarity index 93% rename from dist/chunks/chunk.J72VNH2K.js rename to dist/chunks/chunk.RYBGPLV6.js index d6a76c5f..35e7a35a 100644 --- a/dist/chunks/chunk.J72VNH2K.js +++ b/dist/chunks/chunk.RYBGPLV6.js @@ -1,6 +1,6 @@ import { SlTag -} from "./chunk.GH4I3V5W.js"; +} from "./chunk.GVMOZDVD.js"; // src/react/tag/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.IJORZ53P.js b/dist/chunks/chunk.SAQU6XWJ.js similarity index 83% rename from dist/chunks/chunk.IJORZ53P.js rename to dist/chunks/chunk.SAQU6XWJ.js index 09bc3cc3..7e18b070 100644 --- a/dist/chunks/chunk.IJORZ53P.js +++ b/dist/chunks/chunk.SAQU6XWJ.js @@ -1,6 +1,6 @@ import { SlDrawer -} from "./chunk.JURRYKMI.js"; +} from "./chunk.6QIZUGEE.js"; // src/components/drawer/drawer.ts var drawer_default = SlDrawer; diff --git a/dist/chunks/chunk.TZECUIPX.js b/dist/chunks/chunk.SQHWC2O3.js similarity index 94% rename from dist/chunks/chunk.TZECUIPX.js rename to dist/chunks/chunk.SQHWC2O3.js index abcce02a..6aec06b1 100644 --- a/dist/chunks/chunk.TZECUIPX.js +++ b/dist/chunks/chunk.SQHWC2O3.js @@ -1,6 +1,6 @@ import { SlImageComparer -} from "./chunk.6OGSJDWU.js"; +} from "./chunk.N3DJF6MW.js"; // src/react/image-comparer/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.2A654XM4.js b/dist/chunks/chunk.SQPWULD2.js similarity index 95% rename from dist/chunks/chunk.2A654XM4.js rename to dist/chunks/chunk.SQPWULD2.js index c832e51a..34a2d95f 100644 --- a/dist/chunks/chunk.2A654XM4.js +++ b/dist/chunks/chunk.SQPWULD2.js @@ -1,6 +1,6 @@ import { SlTreeItem -} from "./chunk.I2VMJQGZ.js"; +} from "./chunk.NSDAXWU5.js"; // src/react/tree-item/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.4TOASGPU.js b/dist/chunks/chunk.TJHEY5YZ.js similarity index 83% rename from dist/chunks/chunk.4TOASGPU.js rename to dist/chunks/chunk.TJHEY5YZ.js index 087d2d6f..331a18fb 100644 --- a/dist/chunks/chunk.4TOASGPU.js +++ b/dist/chunks/chunk.TJHEY5YZ.js @@ -1,6 +1,6 @@ import { SlSwitch -} from "./chunk.ARHWQFOY.js"; +} from "./chunk.OAUTL6YH.js"; // src/components/switch/switch.ts var switch_default = SlSwitch; diff --git a/dist/chunks/chunk.PMQVOPBU.js b/dist/chunks/chunk.UKBSSTC3.js similarity index 99% rename from dist/chunks/chunk.PMQVOPBU.js rename to dist/chunks/chunk.UKBSSTC3.js index 12ee5edd..1332563b 100644 --- a/dist/chunks/chunk.PMQVOPBU.js +++ b/dist/chunks/chunk.UKBSSTC3.js @@ -1,6 +1,6 @@ import { SlIconButton -} from "./chunk.EUMKZFJV.js"; +} from "./chunk.HECO4DZ2.js"; import { getAnimation, setDefaultAnimation @@ -12,15 +12,15 @@ import { animateTo, stopAnimations } from "./chunk.S7GYYU7Z.js"; +import { + LocalizeController +} from "./chunk.NH3SRVOC.js"; import { HasSlotController } from "./chunk.NYIIDP5N.js"; import { e } from "./chunk.UZVKBFXH.js"; -import { - LocalizeController -} from "./chunk.NH3SRVOC.js"; import { alert_styles_default } from "./chunk.M2WZ4AXO.js"; diff --git a/dist/chunks/chunk.EJV2FSC6.js b/dist/chunks/chunk.UPQ2JL5V.js similarity index 94% rename from dist/chunks/chunk.EJV2FSC6.js rename to dist/chunks/chunk.UPQ2JL5V.js index 96f19001..99ad1f7f 100644 --- a/dist/chunks/chunk.EJV2FSC6.js +++ b/dist/chunks/chunk.UPQ2JL5V.js @@ -1,6 +1,6 @@ import { SlInput -} from "./chunk.QT6X3RZ4.js"; +} from "./chunk.N5QISGWZ.js"; // src/react/input/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.MZQVGI4G.js b/dist/chunks/chunk.URMLYPYT.js similarity index 100% rename from dist/chunks/chunk.MZQVGI4G.js rename to dist/chunks/chunk.URMLYPYT.js index 238d3b39..2695a326 100644 --- a/dist/chunks/chunk.MZQVGI4G.js +++ b/dist/chunks/chunk.URMLYPYT.js @@ -1,11 +1,11 @@ +import { + f +} from "./chunk.2L6GHXIJ.js"; import { e, i, t } from "./chunk.UP75L23G.js"; -import { - f -} from "./chunk.2L6GHXIJ.js"; import { T, x diff --git a/dist/chunks/chunk.ZPH3EXSL.js b/dist/chunks/chunk.UYEAPXNR.js similarity index 100% rename from dist/chunks/chunk.ZPH3EXSL.js rename to dist/chunks/chunk.UYEAPXNR.js index 15d769a4..9d20e98a 100644 --- a/dist/chunks/chunk.ZPH3EXSL.js +++ b/dist/chunks/chunk.UYEAPXNR.js @@ -1,6 +1,3 @@ -import { - animation_styles_default -} from "./chunk.UG4GPH4N.js"; import { dist_exports } from "./chunk.RAB4VAMR.js"; @@ -15,6 +12,9 @@ import { n, r2 as r } from "./chunk.URGPTPT3.js"; +import { + animation_styles_default +} from "./chunk.UG4GPH4N.js"; import { x } from "./chunk.CXZZ2LVK.js"; diff --git a/dist/chunks/chunk.UBXOQCSK.js b/dist/chunks/chunk.VK2Q54G3.js similarity index 93% rename from dist/chunks/chunk.UBXOQCSK.js rename to dist/chunks/chunk.VK2Q54G3.js index ab50af37..39a7119e 100644 --- a/dist/chunks/chunk.UBXOQCSK.js +++ b/dist/chunks/chunk.VK2Q54G3.js @@ -1,6 +1,6 @@ import { SlTab -} from "./chunk.W6AXMEWH.js"; +} from "./chunk.WEYLHTLN.js"; // src/react/tab/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.S6WKFUYV.js b/dist/chunks/chunk.VN7UQORF.js similarity index 85% rename from dist/chunks/chunk.S6WKFUYV.js rename to dist/chunks/chunk.VN7UQORF.js index 7bd0cb8f..5ec8fcd8 100644 --- a/dist/chunks/chunk.S6WKFUYV.js +++ b/dist/chunks/chunk.VN7UQORF.js @@ -1,6 +1,6 @@ import { SlCopyButton -} from "./chunk.OUERAG24.js"; +} from "./chunk.PJ7UYN3F.js"; // src/components/copy-button/copy-button.ts var copy_button_default = SlCopyButton; diff --git a/dist/chunks/chunk.JQ4XSVZH.js b/dist/chunks/chunk.VVCN2VEU.js similarity index 84% rename from dist/chunks/chunk.JQ4XSVZH.js rename to dist/chunks/chunk.VVCN2VEU.js index 4f9f7a12..feb2db59 100644 --- a/dist/chunks/chunk.JQ4XSVZH.js +++ b/dist/chunks/chunk.VVCN2VEU.js @@ -1,6 +1,6 @@ import { SlCarousel -} from "./chunk.4S2NCH2A.js"; +} from "./chunk.EXPSTLYX.js"; // src/components/carousel/carousel.ts var carousel_default = SlCarousel; diff --git a/dist/chunks/chunk.KIAH3HVJ.js b/dist/chunks/chunk.W2PFS7FX.js similarity index 94% rename from dist/chunks/chunk.KIAH3HVJ.js rename to dist/chunks/chunk.W2PFS7FX.js index 74383064..34a3fc99 100644 --- a/dist/chunks/chunk.KIAH3HVJ.js +++ b/dist/chunks/chunk.W2PFS7FX.js @@ -1,6 +1,6 @@ import { SlTextarea -} from "./chunk.CS2FJAVB.js"; +} from "./chunk.L5V2RVPF.js"; // src/react/textarea/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.W6AXMEWH.js b/dist/chunks/chunk.WEYLHTLN.js similarity index 98% rename from dist/chunks/chunk.W6AXMEWH.js rename to dist/chunks/chunk.WEYLHTLN.js index ff1140d8..a2d71313 100644 --- a/dist/chunks/chunk.W6AXMEWH.js +++ b/dist/chunks/chunk.WEYLHTLN.js @@ -3,13 +3,13 @@ import { } from "./chunk.DK6N4THU.js"; import { SlIconButton -} from "./chunk.EUMKZFJV.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; +} from "./chunk.HECO4DZ2.js"; import { LocalizeController } from "./chunk.NH3SRVOC.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.Q4JOTESV.js b/dist/chunks/chunk.WMTR3AJO.js similarity index 80% rename from dist/chunks/chunk.Q4JOTESV.js rename to dist/chunks/chunk.WMTR3AJO.js index 02fd7f99..1df8a6a7 100644 --- a/dist/chunks/chunk.Q4JOTESV.js +++ b/dist/chunks/chunk.WMTR3AJO.js @@ -1,6 +1,6 @@ import { SlTab -} from "./chunk.W6AXMEWH.js"; +} from "./chunk.WEYLHTLN.js"; // src/components/tab/tab.ts var tab_default = SlTab; diff --git a/dist/chunks/chunk.YOF2P2QN.js b/dist/chunks/chunk.WTGDMHCB.js similarity index 94% rename from dist/chunks/chunk.YOF2P2QN.js rename to dist/chunks/chunk.WTGDMHCB.js index 959d4b4b..ec798e5a 100644 --- a/dist/chunks/chunk.YOF2P2QN.js +++ b/dist/chunks/chunk.WTGDMHCB.js @@ -1,6 +1,6 @@ import { SlCheckbox -} from "./chunk.VADWVLYW.js"; +} from "./chunk.F5DJG2IC.js"; // src/react/checkbox/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.MA64RL76.js b/dist/chunks/chunk.YALLUFXD.js similarity index 84% rename from dist/chunks/chunk.MA64RL76.js rename to dist/chunks/chunk.YALLUFXD.js index 4407316b..5f6338c3 100644 --- a/dist/chunks/chunk.MA64RL76.js +++ b/dist/chunks/chunk.YALLUFXD.js @@ -1,6 +1,6 @@ import { SlTextarea -} from "./chunk.CS2FJAVB.js"; +} from "./chunk.L5V2RVPF.js"; // src/components/textarea/textarea.ts var textarea_default = SlTextarea; diff --git a/dist/chunks/chunk.RQJPCZFL.js b/dist/chunks/chunk.YO6PE2U4.js similarity index 94% rename from dist/chunks/chunk.RQJPCZFL.js rename to dist/chunks/chunk.YO6PE2U4.js index 3f8f47ab..211abffe 100644 --- a/dist/chunks/chunk.RQJPCZFL.js +++ b/dist/chunks/chunk.YO6PE2U4.js @@ -1,6 +1,6 @@ import { SlDetails -} from "./chunk.SLMMUW6G.js"; +} from "./chunk.CA4YGNMP.js"; // src/react/details/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.QCSKTARG.js b/dist/chunks/chunk.YOXFY4TW.js similarity index 92% rename from dist/chunks/chunk.QCSKTARG.js rename to dist/chunks/chunk.YOXFY4TW.js index 4ef269fd..4caab9ab 100644 --- a/dist/chunks/chunk.QCSKTARG.js +++ b/dist/chunks/chunk.YOXFY4TW.js @@ -1,6 +1,6 @@ import { SlAvatar -} from "./chunk.DRMJWHYW.js"; +} from "./chunk.YPIYOHSV.js"; // src/react/avatar/index.ts import * as React from "react"; diff --git a/dist/chunks/chunk.DRMJWHYW.js b/dist/chunks/chunk.YPIYOHSV.js similarity index 100% rename from dist/chunks/chunk.DRMJWHYW.js rename to dist/chunks/chunk.YPIYOHSV.js index 86f9fd8c..04cad1c9 100644 --- a/dist/chunks/chunk.DRMJWHYW.js +++ b/dist/chunks/chunk.YPIYOHSV.js @@ -1,12 +1,12 @@ import { avatar_styles_default } from "./chunk.GTZHBAAH.js"; -import { - e -} from "./chunk.UZVKBFXH.js"; import { SlIcon } from "./chunk.QQHXFE7X.js"; +import { + e +} from "./chunk.UZVKBFXH.js"; import { watch } from "./chunk.FA5RT4K4.js"; diff --git a/dist/chunks/chunk.SETBDGGP.js b/dist/chunks/chunk.Z4DU36RP.js similarity index 84% rename from dist/chunks/chunk.SETBDGGP.js rename to dist/chunks/chunk.Z4DU36RP.js index 31369fbb..5ad5abe0 100644 --- a/dist/chunks/chunk.SETBDGGP.js +++ b/dist/chunks/chunk.Z4DU36RP.js @@ -1,6 +1,6 @@ import { SlCheckbox -} from "./chunk.VADWVLYW.js"; +} from "./chunk.F5DJG2IC.js"; // src/components/checkbox/checkbox.ts var checkbox_default = SlCheckbox; diff --git a/dist/chunks/chunk.DAKI4CJK.js b/dist/chunks/chunk.ZK7UG7BY.js similarity index 83% rename from dist/chunks/chunk.DAKI4CJK.js rename to dist/chunks/chunk.ZK7UG7BY.js index 57aa6c74..c20c78e3 100644 --- a/dist/chunks/chunk.DAKI4CJK.js +++ b/dist/chunks/chunk.ZK7UG7BY.js @@ -1,6 +1,6 @@ import { SlRating -} from "./chunk.JOMOSJ6V.js"; +} from "./chunk.D4HT5N2S.js"; // src/components/rating/rating.ts var rating_default = SlRating; diff --git a/dist/chunks/chunk.Y44PSRDY.js b/dist/chunks/chunk.ZMNSPLYC.js similarity index 82% rename from dist/chunks/chunk.Y44PSRDY.js rename to dist/chunks/chunk.ZMNSPLYC.js index 8734b41c..3a05b110 100644 --- a/dist/chunks/chunk.Y44PSRDY.js +++ b/dist/chunks/chunk.ZMNSPLYC.js @@ -1,6 +1,6 @@ import { SlAlert -} from "./chunk.PMQVOPBU.js"; +} from "./chunk.UKBSSTC3.js"; // src/components/alert/alert.ts var alert_default = SlAlert; diff --git a/dist/chunks/chunk.XMU6QYKR.js b/dist/chunks/chunk.ZXSNECDV.js similarity index 94% rename from dist/chunks/chunk.XMU6QYKR.js rename to dist/chunks/chunk.ZXSNECDV.js index 178e9bbc..91c8f729 100644 --- a/dist/chunks/chunk.XMU6QYKR.js +++ b/dist/chunks/chunk.ZXSNECDV.js @@ -1,6 +1,6 @@ import { SlTooltip -} from "./chunk.JXNEB52G.js"; +} from "./chunk.HIEWE77I.js"; // src/react/tooltip/index.ts import * as React from "react"; diff --git a/dist/components/alert/alert.component.js b/dist/components/alert/alert.component.js index f63d50d6..5c860c5d 100644 --- a/dist/components/alert/alert.component.js +++ b/dist/components/alert/alert.component.js @@ -1,20 +1,17 @@ import { SlAlert -} from "../../chunks/chunk.PMQVOPBU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +} from "../../chunks/chunk.UKBSSTC3.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; -import "../../chunks/chunk.M2WZ4AXO.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -23,10 +20,13 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; +import "../../chunks/chunk.M2WZ4AXO.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/alert/alert.js b/dist/components/alert/alert.js index b23b9fd4..9b3e6a49 100644 --- a/dist/components/alert/alert.js +++ b/dist/components/alert/alert.js @@ -1,21 +1,18 @@ import { alert_default -} from "../../chunks/chunk.Y44PSRDY.js"; -import "../../chunks/chunk.PMQVOPBU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +} from "../../chunks/chunk.ZMNSPLYC.js"; +import "../../chunks/chunk.UKBSSTC3.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; -import "../../chunks/chunk.M2WZ4AXO.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -24,10 +21,13 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; +import "../../chunks/chunk.M2WZ4AXO.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/animated-image/animated-image.component.js b/dist/components/animated-image/animated-image.component.js index e4021e89..c1eaa68c 100644 --- a/dist/components/animated-image/animated-image.component.js +++ b/dist/components/animated-image/animated-image.component.js @@ -1,6 +1,7 @@ import { SlAnimatedImage -} from "../../chunks/chunk.THDZPG3S.js"; +} from "../../chunks/chunk.IDJPPGR6.js"; +import "../../chunks/chunk.WIDVIH73.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -9,11 +10,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; -import "../../chunks/chunk.WIDVIH73.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/animated-image/animated-image.js b/dist/components/animated-image/animated-image.js index 57677391..ca54ef46 100644 --- a/dist/components/animated-image/animated-image.js +++ b/dist/components/animated-image/animated-image.js @@ -1,7 +1,8 @@ import { animated_image_default -} from "../../chunks/chunk.TQRRFFWX.js"; -import "../../chunks/chunk.THDZPG3S.js"; +} from "../../chunks/chunk.E4DVWLFF.js"; +import "../../chunks/chunk.IDJPPGR6.js"; +import "../../chunks/chunk.WIDVIH73.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -10,11 +11,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; -import "../../chunks/chunk.WIDVIH73.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/animation/animation.component.js b/dist/components/animation/animation.component.js index 13faf6b2..edcad99e 100644 --- a/dist/components/animation/animation.component.js +++ b/dist/components/animation/animation.component.js @@ -1,11 +1,11 @@ import { SlAnimation -} from "../../chunks/chunk.ZPH3EXSL.js"; -import "../../chunks/chunk.UG4GPH4N.js"; +} from "../../chunks/chunk.UYEAPXNR.js"; import "../../chunks/chunk.RAB4VAMR.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; +import "../../chunks/chunk.UG4GPH4N.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/animation/animation.js b/dist/components/animation/animation.js index c851402a..b05cbe85 100644 --- a/dist/components/animation/animation.js +++ b/dist/components/animation/animation.js @@ -1,12 +1,12 @@ import { animation_default -} from "../../chunks/chunk.SSHR2JDI.js"; -import "../../chunks/chunk.ZPH3EXSL.js"; -import "../../chunks/chunk.UG4GPH4N.js"; +} from "../../chunks/chunk.6PGWJ74B.js"; +import "../../chunks/chunk.UYEAPXNR.js"; import "../../chunks/chunk.RAB4VAMR.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; +import "../../chunks/chunk.UG4GPH4N.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/avatar/avatar.component.js b/dist/components/avatar/avatar.component.js index b060812e..eddacd28 100644 --- a/dist/components/avatar/avatar.component.js +++ b/dist/components/avatar/avatar.component.js @@ -1,9 +1,7 @@ import { SlAvatar -} from "../../chunks/chunk.DRMJWHYW.js"; +} from "../../chunks/chunk.YPIYOHSV.js"; import "../../chunks/chunk.GTZHBAAH.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -12,10 +10,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/avatar/avatar.js b/dist/components/avatar/avatar.js index 19d800dd..bf164751 100644 --- a/dist/components/avatar/avatar.js +++ b/dist/components/avatar/avatar.js @@ -1,10 +1,8 @@ import { avatar_default -} from "../../chunks/chunk.6IYKUC4J.js"; -import "../../chunks/chunk.DRMJWHYW.js"; +} from "../../chunks/chunk.7MNXVO5H.js"; +import "../../chunks/chunk.YPIYOHSV.js"; import "../../chunks/chunk.GTZHBAAH.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -13,10 +11,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/breadcrumb/breadcrumb.component.js b/dist/components/breadcrumb/breadcrumb.component.js index c2628f13..c9a2776a 100644 --- a/dist/components/breadcrumb/breadcrumb.component.js +++ b/dist/components/breadcrumb/breadcrumb.component.js @@ -13,10 +13,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/breadcrumb/breadcrumb.js b/dist/components/breadcrumb/breadcrumb.js index dcbcaee6..62703606 100644 --- a/dist/components/breadcrumb/breadcrumb.js +++ b/dist/components/breadcrumb/breadcrumb.js @@ -14,10 +14,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/button/button.component.js b/dist/components/button/button.component.js index 1edc589d..592c1a0a 100644 --- a/dist/components/button/button.component.js +++ b/dist/components/button/button.component.js @@ -1,18 +1,16 @@ import { SlButton -} from "../../chunks/chunk.ANK5P6NL.js"; +} from "../../chunks/chunk.FY6XFGKF.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.GIGJGBBX.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -21,10 +19,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/button/button.js b/dist/components/button/button.js index e63f0bda..51340f26 100644 --- a/dist/components/button/button.js +++ b/dist/components/button/button.js @@ -1,19 +1,17 @@ import { button_default -} from "../../chunks/chunk.ZH2KM23Q.js"; -import "../../chunks/chunk.ANK5P6NL.js"; +} from "../../chunks/chunk.37J3NAYG.js"; +import "../../chunks/chunk.FY6XFGKF.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.GIGJGBBX.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/carousel/carousel.component.js b/dist/components/carousel/carousel.component.js index 956d4f37..eae419d1 100644 --- a/dist/components/carousel/carousel.component.js +++ b/dist/components/carousel/carousel.component.js @@ -1,13 +1,11 @@ import { SlCarousel -} from "../../chunks/chunk.4S2NCH2A.js"; +} from "../../chunks/chunk.EXPSTLYX.js"; import "../../chunks/chunk.HF7GESMZ.js"; import "../../chunks/chunk.F4VGSDIW.js"; import "../../chunks/chunk.HUJPN4KF.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/carousel/carousel.js b/dist/components/carousel/carousel.js index 9254fc42..cd9e5075 100644 --- a/dist/components/carousel/carousel.js +++ b/dist/components/carousel/carousel.js @@ -1,14 +1,12 @@ import { carousel_default -} from "../../chunks/chunk.JQ4XSVZH.js"; -import "../../chunks/chunk.4S2NCH2A.js"; +} from "../../chunks/chunk.VVCN2VEU.js"; +import "../../chunks/chunk.EXPSTLYX.js"; import "../../chunks/chunk.HF7GESMZ.js"; import "../../chunks/chunk.F4VGSDIW.js"; import "../../chunks/chunk.HUJPN4KF.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/checkbox/checkbox.component.js b/dist/components/checkbox/checkbox.component.js index 845d4203..66266136 100644 --- a/dist/components/checkbox/checkbox.component.js +++ b/dist/components/checkbox/checkbox.component.js @@ -1,15 +1,13 @@ import { SlCheckbox -} from "../../chunks/chunk.VADWVLYW.js"; +} from "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -18,10 +16,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/checkbox/checkbox.js b/dist/components/checkbox/checkbox.js index 69bdd79b..bbd75502 100644 --- a/dist/components/checkbox/checkbox.js +++ b/dist/components/checkbox/checkbox.js @@ -1,16 +1,14 @@ import { checkbox_default -} from "../../chunks/chunk.SETBDGGP.js"; -import "../../chunks/chunk.VADWVLYW.js"; +} from "../../chunks/chunk.Z4DU36RP.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/color-picker/color-picker.component.js b/dist/components/color-picker/color-picker.component.js index 1a9aca55..b45eaa24 100644 --- a/dist/components/color-picker/color-picker.component.js +++ b/dist/components/color-picker/color-picker.component.js @@ -1,23 +1,23 @@ import { SlColorPicker -} from "../../chunks/chunk.CFH2JNVK.js"; +} from "../../chunks/chunk.EAH27JYQ.js"; import "../../chunks/chunk.2FPAOYP2.js"; import "../../chunks/chunk.WCW35DM2.js"; -import "../../chunks/chunk.QT6X3RZ4.js"; +import "../../chunks/chunk.N5QISGWZ.js"; import "../../chunks/chunk.I4BWCXWK.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.FQQ5K3WY.js"; -import "../../chunks/chunk.CMHBKN7G.js"; +import "../../chunks/chunk.MZEJHEPM.js"; import "../../chunks/chunk.I7IBIORS.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.YU7UY5RS.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.ANK5P6NL.js"; +import "../../chunks/chunk.FY6XFGKF.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; @@ -28,13 +28,11 @@ import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -43,10 +41,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/color-picker/color-picker.js b/dist/components/color-picker/color-picker.js index fc99600e..6c02231d 100644 --- a/dist/components/color-picker/color-picker.js +++ b/dist/components/color-picker/color-picker.js @@ -1,24 +1,24 @@ import { color_picker_default -} from "../../chunks/chunk.CKGCU5UH.js"; -import "../../chunks/chunk.CFH2JNVK.js"; +} from "../../chunks/chunk.JIZBX5ZW.js"; +import "../../chunks/chunk.EAH27JYQ.js"; import "../../chunks/chunk.2FPAOYP2.js"; import "../../chunks/chunk.WCW35DM2.js"; -import "../../chunks/chunk.QT6X3RZ4.js"; +import "../../chunks/chunk.N5QISGWZ.js"; import "../../chunks/chunk.I4BWCXWK.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.FQQ5K3WY.js"; -import "../../chunks/chunk.CMHBKN7G.js"; +import "../../chunks/chunk.MZEJHEPM.js"; import "../../chunks/chunk.I7IBIORS.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.YU7UY5RS.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.ANK5P6NL.js"; +import "../../chunks/chunk.FY6XFGKF.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; @@ -29,13 +29,11 @@ import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -44,10 +42,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/copy-button/copy-button.component.js b/dist/components/copy-button/copy-button.component.js index 0fd9bf77..49bc0c38 100644 --- a/dist/components/copy-button/copy-button.component.js +++ b/dist/components/copy-button/copy-button.component.js @@ -1,7 +1,7 @@ import { SlCopyButton -} from "../../chunks/chunk.OUERAG24.js"; -import "../../chunks/chunk.JXNEB52G.js"; +} from "../../chunks/chunk.PJ7UYN3F.js"; +import "../../chunks/chunk.HIEWE77I.js"; import "../../chunks/chunk.QYWEKP2N.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; @@ -9,8 +9,6 @@ import "../../chunks/chunk.7EKSUNPQ.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/copy-button/copy-button.js b/dist/components/copy-button/copy-button.js index f9c6baf7..eb2d241c 100644 --- a/dist/components/copy-button/copy-button.js +++ b/dist/components/copy-button/copy-button.js @@ -1,8 +1,8 @@ import { copy_button_default -} from "../../chunks/chunk.S6WKFUYV.js"; -import "../../chunks/chunk.OUERAG24.js"; -import "../../chunks/chunk.JXNEB52G.js"; +} from "../../chunks/chunk.VN7UQORF.js"; +import "../../chunks/chunk.PJ7UYN3F.js"; +import "../../chunks/chunk.HIEWE77I.js"; import "../../chunks/chunk.QYWEKP2N.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; @@ -10,8 +10,6 @@ import "../../chunks/chunk.7EKSUNPQ.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -23,10 +21,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/details/details.component.js b/dist/components/details/details.component.js index 0a31c93a..14144c47 100644 --- a/dist/components/details/details.component.js +++ b/dist/components/details/details.component.js @@ -1,12 +1,10 @@ import { SlDetails -} from "../../chunks/chunk.SLMMUW6G.js"; +} from "../../chunks/chunk.CA4YGNMP.js"; import "../../chunks/chunk.JH24DE2R.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -18,10 +16,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/details/details.js b/dist/components/details/details.js index fb006f7c..4e376343 100644 --- a/dist/components/details/details.js +++ b/dist/components/details/details.js @@ -1,13 +1,11 @@ import { details_default -} from "../../chunks/chunk.GBETTBLG.js"; -import "../../chunks/chunk.SLMMUW6G.js"; +} from "../../chunks/chunk.I6TGOM6Z.js"; +import "../../chunks/chunk.CA4YGNMP.js"; import "../../chunks/chunk.JH24DE2R.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/dialog/dialog.component.js b/dist/components/dialog/dialog.component.js index 31605d03..95fbf75e 100644 --- a/dist/components/dialog/dialog.component.js +++ b/dist/components/dialog/dialog.component.js @@ -1,23 +1,21 @@ import { SlDialog -} from "../../chunks/chunk.QFY5BTZB.js"; +} from "../../chunks/chunk.JEDU5SAS.js"; import "../../chunks/chunk.JEBKOPXW.js"; import "../../chunks/chunk.F5JVBNK3.js"; import "../../chunks/chunk.RYFK2CD3.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -26,10 +24,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/dialog/dialog.js b/dist/components/dialog/dialog.js index b6be09b8..99a65f43 100644 --- a/dist/components/dialog/dialog.js +++ b/dist/components/dialog/dialog.js @@ -1,24 +1,22 @@ import { dialog_default -} from "../../chunks/chunk.A2BFSQ3C.js"; -import "../../chunks/chunk.QFY5BTZB.js"; +} from "../../chunks/chunk.3H4P7QZ5.js"; +import "../../chunks/chunk.JEDU5SAS.js"; import "../../chunks/chunk.JEBKOPXW.js"; import "../../chunks/chunk.F5JVBNK3.js"; import "../../chunks/chunk.RYFK2CD3.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -27,10 +25,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/drawer/drawer.component.js b/dist/components/drawer/drawer.component.js index ed957332..efcf59d3 100644 --- a/dist/components/drawer/drawer.component.js +++ b/dist/components/drawer/drawer.component.js @@ -1,23 +1,21 @@ import { SlDrawer -} from "../../chunks/chunk.JURRYKMI.js"; +} from "../../chunks/chunk.6QIZUGEE.js"; import "../../chunks/chunk.7KZHSE62.js"; import "../../chunks/chunk.JEBKOPXW.js"; import "../../chunks/chunk.F5JVBNK3.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -26,10 +24,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/drawer/drawer.js b/dist/components/drawer/drawer.js index 62650194..f7494a9c 100644 --- a/dist/components/drawer/drawer.js +++ b/dist/components/drawer/drawer.js @@ -1,24 +1,22 @@ import { drawer_default -} from "../../chunks/chunk.IJORZ53P.js"; -import "../../chunks/chunk.JURRYKMI.js"; +} from "../../chunks/chunk.SAQU6XWJ.js"; +import "../../chunks/chunk.6QIZUGEE.js"; import "../../chunks/chunk.7KZHSE62.js"; import "../../chunks/chunk.JEBKOPXW.js"; import "../../chunks/chunk.F5JVBNK3.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -27,10 +25,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/dropdown/dropdown.component.js b/dist/components/dropdown/dropdown.component.js index 986f8b93..83d53ecc 100644 --- a/dist/components/dropdown/dropdown.component.js +++ b/dist/components/dropdown/dropdown.component.js @@ -1,6 +1,6 @@ import { SlDropdown -} from "../../chunks/chunk.CMHBKN7G.js"; +} from "../../chunks/chunk.MZEJHEPM.js"; import "../../chunks/chunk.I7IBIORS.js"; import "../../chunks/chunk.LXDTFLWU.js"; import "../../chunks/chunk.CG46NLLA.js"; @@ -8,12 +8,12 @@ import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/dropdown/dropdown.js b/dist/components/dropdown/dropdown.js index bf21bb00..82c2bf5b 100644 --- a/dist/components/dropdown/dropdown.js +++ b/dist/components/dropdown/dropdown.js @@ -1,7 +1,7 @@ import { dropdown_default -} from "../../chunks/chunk.JJSRKCKW.js"; -import "../../chunks/chunk.CMHBKN7G.js"; +} from "../../chunks/chunk.NZULQTUJ.js"; +import "../../chunks/chunk.MZEJHEPM.js"; import "../../chunks/chunk.I7IBIORS.js"; import "../../chunks/chunk.LXDTFLWU.js"; import "../../chunks/chunk.CG46NLLA.js"; @@ -9,12 +9,12 @@ import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/icon-button/icon-button.component.js b/dist/components/icon-button/icon-button.component.js index d41cf28a..1b807e0f 100644 --- a/dist/components/icon-button/icon-button.component.js +++ b/dist/components/icon-button/icon-button.component.js @@ -1,11 +1,9 @@ import { SlIconButton -} from "../../chunks/chunk.EUMKZFJV.js"; +} from "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -14,10 +12,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/icon-button/icon-button.js b/dist/components/icon-button/icon-button.js index 80b34c77..db66925c 100644 --- a/dist/components/icon-button/icon-button.js +++ b/dist/components/icon-button/icon-button.js @@ -1,12 +1,10 @@ import { icon_button_default -} from "../../chunks/chunk.YJFDGOZ2.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +} from "../../chunks/chunk.77NS7GHF.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -15,10 +13,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/icon/icon.component.js b/dist/components/icon/icon.component.js index bb0c27a1..401dff20 100644 --- a/dist/components/icon/icon.component.js +++ b/dist/components/icon/icon.component.js @@ -8,10 +8,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/icon/icon.js b/dist/components/icon/icon.js index a4d203e5..fa114a07 100644 --- a/dist/components/icon/icon.js +++ b/dist/components/icon/icon.js @@ -9,10 +9,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/image-comparer/image-comparer.component.js b/dist/components/image-comparer/image-comparer.component.js index 5242421c..b9279d93 100644 --- a/dist/components/image-comparer/image-comparer.component.js +++ b/dist/components/image-comparer/image-comparer.component.js @@ -1,12 +1,10 @@ import { SlImageComparer -} from "../../chunks/chunk.6OGSJDWU.js"; +} from "../../chunks/chunk.N3DJF6MW.js"; import "../../chunks/chunk.KPESQDYT.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.FQQ5K3WY.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -15,10 +13,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/image-comparer/image-comparer.js b/dist/components/image-comparer/image-comparer.js index 93e53209..797b2b1f 100644 --- a/dist/components/image-comparer/image-comparer.js +++ b/dist/components/image-comparer/image-comparer.js @@ -1,13 +1,11 @@ import { image_comparer_default -} from "../../chunks/chunk.3XSEVTOL.js"; -import "../../chunks/chunk.6OGSJDWU.js"; +} from "../../chunks/chunk.3ZTS7K3T.js"; +import "../../chunks/chunk.N3DJF6MW.js"; import "../../chunks/chunk.KPESQDYT.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.FQQ5K3WY.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -16,10 +14,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/input/input.component.js b/dist/components/input/input.component.js index e1535eca..8a1c0938 100644 --- a/dist/components/input/input.component.js +++ b/dist/components/input/input.component.js @@ -1,18 +1,16 @@ import { SlInput -} from "../../chunks/chunk.QT6X3RZ4.js"; +} from "../../chunks/chunk.N5QISGWZ.js"; import "../../chunks/chunk.I4BWCXWK.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -21,10 +19,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/input/input.js b/dist/components/input/input.js index 9350dbb3..2cc5857b 100644 --- a/dist/components/input/input.js +++ b/dist/components/input/input.js @@ -1,19 +1,17 @@ import { input_default -} from "../../chunks/chunk.CBWL3I6V.js"; -import "../../chunks/chunk.QT6X3RZ4.js"; +} from "../../chunks/chunk.KLYKT4LR.js"; +import "../../chunks/chunk.N5QISGWZ.js"; import "../../chunks/chunk.I4BWCXWK.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/menu-item/menu-item.component.js b/dist/components/menu-item/menu-item.component.js index 1bdd35fe..b129dccf 100644 --- a/dist/components/menu-item/menu-item.component.js +++ b/dist/components/menu-item/menu-item.component.js @@ -1,18 +1,16 @@ import { SlMenuItem -} from "../../chunks/chunk.WMGEXFCN.js"; -import "../../chunks/chunk.MZQVGI4G.js"; +} from "../../chunks/chunk.4VSLQP6A.js"; +import "../../chunks/chunk.URMLYPYT.js"; import "../../chunks/chunk.IPJHXFIL.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -21,10 +19,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/menu-item/menu-item.js b/dist/components/menu-item/menu-item.js index 267efe44..33889503 100644 --- a/dist/components/menu-item/menu-item.js +++ b/dist/components/menu-item/menu-item.js @@ -1,19 +1,17 @@ import { menu_item_default -} from "../../chunks/chunk.NQXFTJK2.js"; -import "../../chunks/chunk.WMGEXFCN.js"; -import "../../chunks/chunk.MZQVGI4G.js"; +} from "../../chunks/chunk.IE2PU6PU.js"; +import "../../chunks/chunk.4VSLQP6A.js"; +import "../../chunks/chunk.URMLYPYT.js"; import "../../chunks/chunk.IPJHXFIL.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/menu-item/submenu-controller.js b/dist/components/menu-item/submenu-controller.js index 6bbf6db4..ca77d92d 100644 --- a/dist/components/menu-item/submenu-controller.js +++ b/dist/components/menu-item/submenu-controller.js @@ -1,9 +1,9 @@ import { SubmenuController -} from "../../chunks/chunk.MZQVGI4G.js"; +} from "../../chunks/chunk.URMLYPYT.js"; import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.2L6GHXIJ.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/option/option.component.js b/dist/components/option/option.component.js index c7ba30e4..9a274182 100644 --- a/dist/components/option/option.component.js +++ b/dist/components/option/option.component.js @@ -1,9 +1,7 @@ import { SlOption -} from "../../chunks/chunk.RNPLPMI7.js"; +} from "../../chunks/chunk.HP6XNQLT.js"; import "../../chunks/chunk.JXTNYING.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -15,10 +13,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/option/option.js b/dist/components/option/option.js index 8a2403f7..f454a647 100644 --- a/dist/components/option/option.js +++ b/dist/components/option/option.js @@ -1,10 +1,8 @@ import { option_default -} from "../../chunks/chunk.4RZCCS72.js"; -import "../../chunks/chunk.RNPLPMI7.js"; +} from "../../chunks/chunk.HJLSNBIP.js"; +import "../../chunks/chunk.HP6XNQLT.js"; import "../../chunks/chunk.JXTNYING.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -16,10 +14,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/progress-bar/progress-bar.component.js b/dist/components/progress-bar/progress-bar.component.js index b3c55548..ca0af8d4 100644 --- a/dist/components/progress-bar/progress-bar.component.js +++ b/dist/components/progress-bar/progress-bar.component.js @@ -1,14 +1,14 @@ import { SlProgressBar -} from "../../chunks/chunk.PTXGKMCM.js"; +} from "../../chunks/chunk.3EZHFHG3.js"; import "../../chunks/chunk.HSWXQUHN.js"; import "../../chunks/chunk.FQQ5K3WY.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; import "../../chunks/chunk.CXZZ2LVK.js"; diff --git a/dist/components/progress-bar/progress-bar.js b/dist/components/progress-bar/progress-bar.js index a8ef520a..d1c8149b 100644 --- a/dist/components/progress-bar/progress-bar.js +++ b/dist/components/progress-bar/progress-bar.js @@ -1,15 +1,15 @@ import { progress_bar_default -} from "../../chunks/chunk.QWPPJ6MK.js"; -import "../../chunks/chunk.PTXGKMCM.js"; +} from "../../chunks/chunk.KHZVE7CV.js"; +import "../../chunks/chunk.3EZHFHG3.js"; import "../../chunks/chunk.HSWXQUHN.js"; import "../../chunks/chunk.FQQ5K3WY.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; import "../../chunks/chunk.CXZZ2LVK.js"; diff --git a/dist/components/radio/radio.component.js b/dist/components/radio/radio.component.js index da47beef..0f2392a4 100644 --- a/dist/components/radio/radio.component.js +++ b/dist/components/radio/radio.component.js @@ -1,9 +1,7 @@ import { SlRadio -} from "../../chunks/chunk.K2ROYTBB.js"; +} from "../../chunks/chunk.QKLVXD76.js"; import "../../chunks/chunk.43Z4T7VZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -12,10 +10,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/radio/radio.js b/dist/components/radio/radio.js index 826b4688..fe49bfa4 100644 --- a/dist/components/radio/radio.js +++ b/dist/components/radio/radio.js @@ -1,10 +1,8 @@ import { radio_default -} from "../../chunks/chunk.T7KYOX3S.js"; -import "../../chunks/chunk.K2ROYTBB.js"; +} from "../../chunks/chunk.3KSLHZUI.js"; +import "../../chunks/chunk.QKLVXD76.js"; import "../../chunks/chunk.43Z4T7VZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -13,10 +11,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/range/range.component.js b/dist/components/range/range.component.js index 92542ce8..3bef9230 100644 --- a/dist/components/range/range.component.js +++ b/dist/components/range/range.component.js @@ -1,19 +1,19 @@ import { SlRange -} from "../../chunks/chunk.636GFVN7.js"; +} from "../../chunks/chunk.JDMEV6W6.js"; import "../../chunks/chunk.E77YYWGC.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.2L6GHXIJ.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/range/range.js b/dist/components/range/range.js index 987afafe..9b082d49 100644 --- a/dist/components/range/range.js +++ b/dist/components/range/range.js @@ -1,20 +1,20 @@ import { range_default -} from "../../chunks/chunk.SRVZQDLF.js"; -import "../../chunks/chunk.636GFVN7.js"; +} from "../../chunks/chunk.4BS7E4WA.js"; +import "../../chunks/chunk.JDMEV6W6.js"; import "../../chunks/chunk.E77YYWGC.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.2L6GHXIJ.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/rating/rating.component.js b/dist/components/rating/rating.component.js index ff58e100..b753cc82 100644 --- a/dist/components/rating/rating.component.js +++ b/dist/components/rating/rating.component.js @@ -1,12 +1,10 @@ import { SlRating -} from "../../chunks/chunk.JOMOSJ6V.js"; +} from "../../chunks/chunk.D4HT5N2S.js"; import "../../chunks/chunk.EPJHAO2T.js"; import "../../chunks/chunk.WUT665TF.js"; import "../../chunks/chunk.FQQ5K3WY.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -15,10 +13,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/rating/rating.js b/dist/components/rating/rating.js index 37bd561e..9488e43a 100644 --- a/dist/components/rating/rating.js +++ b/dist/components/rating/rating.js @@ -1,13 +1,11 @@ import { rating_default -} from "../../chunks/chunk.DAKI4CJK.js"; -import "../../chunks/chunk.JOMOSJ6V.js"; +} from "../../chunks/chunk.ZK7UG7BY.js"; +import "../../chunks/chunk.D4HT5N2S.js"; import "../../chunks/chunk.EPJHAO2T.js"; import "../../chunks/chunk.WUT665TF.js"; import "../../chunks/chunk.FQQ5K3WY.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -16,10 +14,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/select/select.component.js b/dist/components/select/select.component.js index 1d981b29..fbeb50be 100644 --- a/dist/components/select/select.component.js +++ b/dist/components/select/select.component.js @@ -1,7 +1,7 @@ import { SlSelect -} from "../../chunks/chunk.U4O2H2B7.js"; -import "../../chunks/chunk.GH4I3V5W.js"; +} from "../../chunks/chunk.NAMNOMAN.js"; +import "../../chunks/chunk.GVMOZDVD.js"; import "../../chunks/chunk.MVCCMDRT.js"; import "../../chunks/chunk.ECLFWIFP.js"; import "../../chunks/chunk.EPJHAO2T.js"; @@ -11,19 +11,17 @@ import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -32,10 +30,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/select/select.js b/dist/components/select/select.js index aa3f865f..b60f7195 100644 --- a/dist/components/select/select.js +++ b/dist/components/select/select.js @@ -1,8 +1,8 @@ import { select_default -} from "../../chunks/chunk.XYZE4CTX.js"; -import "../../chunks/chunk.U4O2H2B7.js"; -import "../../chunks/chunk.GH4I3V5W.js"; +} from "../../chunks/chunk.I5J75LJ5.js"; +import "../../chunks/chunk.NAMNOMAN.js"; +import "../../chunks/chunk.GVMOZDVD.js"; import "../../chunks/chunk.MVCCMDRT.js"; import "../../chunks/chunk.ECLFWIFP.js"; import "../../chunks/chunk.EPJHAO2T.js"; @@ -12,19 +12,17 @@ import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -33,10 +31,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/split-panel/split-panel.component.js b/dist/components/split-panel/split-panel.component.js index c865a476..c9efd51e 100644 --- a/dist/components/split-panel/split-panel.component.js +++ b/dist/components/split-panel/split-panel.component.js @@ -1,13 +1,13 @@ import { SlSplitPanel -} from "../../chunks/chunk.K2IH25YY.js"; +} from "../../chunks/chunk.CMVGJZQB.js"; import "../../chunks/chunk.A63MQPPF.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/split-panel/split-panel.js b/dist/components/split-panel/split-panel.js index fa549d90..0209ad92 100644 --- a/dist/components/split-panel/split-panel.js +++ b/dist/components/split-panel/split-panel.js @@ -1,14 +1,14 @@ import { split_panel_default -} from "../../chunks/chunk.IZLUHFAR.js"; -import "../../chunks/chunk.K2IH25YY.js"; +} from "../../chunks/chunk.IPBA3RL7.js"; +import "../../chunks/chunk.CMVGJZQB.js"; import "../../chunks/chunk.A63MQPPF.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/switch/switch.component.js b/dist/components/switch/switch.component.js index 91b95284..e061c541 100644 --- a/dist/components/switch/switch.component.js +++ b/dist/components/switch/switch.component.js @@ -1,16 +1,16 @@ import { SlSwitch -} from "../../chunks/chunk.ARHWQFOY.js"; +} from "../../chunks/chunk.OAUTL6YH.js"; import "../../chunks/chunk.ROHOK2AY.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; +import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.UZVKBFXH.js"; import "../../chunks/chunk.UP75L23G.js"; -import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/switch/switch.js b/dist/components/switch/switch.js index 069b38dc..830060de 100644 --- a/dist/components/switch/switch.js +++ b/dist/components/switch/switch.js @@ -1,17 +1,17 @@ import { switch_default -} from "../../chunks/chunk.4TOASGPU.js"; -import "../../chunks/chunk.ARHWQFOY.js"; +} from "../../chunks/chunk.TJHEY5YZ.js"; +import "../../chunks/chunk.OAUTL6YH.js"; import "../../chunks/chunk.ROHOK2AY.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; +import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.UZVKBFXH.js"; import "../../chunks/chunk.UP75L23G.js"; -import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/tab-group/tab-group.component.js b/dist/components/tab-group/tab-group.component.js index 6e42c607..92264290 100644 --- a/dist/components/tab-group/tab-group.component.js +++ b/dist/components/tab-group/tab-group.component.js @@ -1,17 +1,15 @@ import { SlTabGroup -} from "../../chunks/chunk.QYSV4AOQ.js"; +} from "../../chunks/chunk.IYOMW7E7.js"; import "../../chunks/chunk.MYJL3FCG.js"; import "../../chunks/chunk.F5JVBNK3.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tab-group/tab-group.js b/dist/components/tab-group/tab-group.js index 221a3ba3..135a6954 100644 --- a/dist/components/tab-group/tab-group.js +++ b/dist/components/tab-group/tab-group.js @@ -1,18 +1,16 @@ import { tab_group_default -} from "../../chunks/chunk.YD3SR4QD.js"; -import "../../chunks/chunk.QYSV4AOQ.js"; +} from "../../chunks/chunk.5YM23XW6.js"; +import "../../chunks/chunk.IYOMW7E7.js"; import "../../chunks/chunk.MYJL3FCG.js"; import "../../chunks/chunk.F5JVBNK3.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -21,10 +19,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tab/tab.component.js b/dist/components/tab/tab.component.js index 5a8e2ce8..ee790d2b 100644 --- a/dist/components/tab/tab.component.js +++ b/dist/components/tab/tab.component.js @@ -1,16 +1,14 @@ import { SlTab -} from "../../chunks/chunk.W6AXMEWH.js"; +} from "../../chunks/chunk.WEYLHTLN.js"; import "../../chunks/chunk.DK6N4THU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tab/tab.js b/dist/components/tab/tab.js index c2191471..702c06b4 100644 --- a/dist/components/tab/tab.js +++ b/dist/components/tab/tab.js @@ -1,17 +1,15 @@ import { tab_default -} from "../../chunks/chunk.Q4JOTESV.js"; -import "../../chunks/chunk.W6AXMEWH.js"; +} from "../../chunks/chunk.WMTR3AJO.js"; +import "../../chunks/chunk.WEYLHTLN.js"; import "../../chunks/chunk.DK6N4THU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tag/tag.component.js b/dist/components/tag/tag.component.js index 795797c7..bc2a6c79 100644 --- a/dist/components/tag/tag.component.js +++ b/dist/components/tag/tag.component.js @@ -1,16 +1,14 @@ import { SlTag -} from "../../chunks/chunk.GH4I3V5W.js"; +} from "../../chunks/chunk.GVMOZDVD.js"; import "../../chunks/chunk.MVCCMDRT.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tag/tag.js b/dist/components/tag/tag.js index 46137d53..3853d56a 100644 --- a/dist/components/tag/tag.js +++ b/dist/components/tag/tag.js @@ -1,17 +1,15 @@ import { tag_default -} from "../../chunks/chunk.ZVYU26EE.js"; -import "../../chunks/chunk.GH4I3V5W.js"; +} from "../../chunks/chunk.AT35VHTC.js"; +import "../../chunks/chunk.GVMOZDVD.js"; import "../../chunks/chunk.MVCCMDRT.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/textarea/textarea.component.js b/dist/components/textarea/textarea.component.js index 5e4e2414..0216b14f 100644 --- a/dist/components/textarea/textarea.component.js +++ b/dist/components/textarea/textarea.component.js @@ -1,16 +1,16 @@ import { SlTextarea -} from "../../chunks/chunk.CS2FJAVB.js"; +} from "../../chunks/chunk.L5V2RVPF.js"; import "../../chunks/chunk.4CNJZ4VC.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; +import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.UZVKBFXH.js"; import "../../chunks/chunk.UP75L23G.js"; -import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/textarea/textarea.js b/dist/components/textarea/textarea.js index a0357ab3..7341e869 100644 --- a/dist/components/textarea/textarea.js +++ b/dist/components/textarea/textarea.js @@ -1,17 +1,17 @@ import { textarea_default -} from "../../chunks/chunk.MA64RL76.js"; -import "../../chunks/chunk.CS2FJAVB.js"; +} from "../../chunks/chunk.YALLUFXD.js"; +import "../../chunks/chunk.L5V2RVPF.js"; import "../../chunks/chunk.4CNJZ4VC.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; +import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.UZVKBFXH.js"; import "../../chunks/chunk.UP75L23G.js"; -import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/tooltip/tooltip.component.js b/dist/components/tooltip/tooltip.component.js index 9d4de031..09546f48 100644 --- a/dist/components/tooltip/tooltip.component.js +++ b/dist/components/tooltip/tooltip.component.js @@ -1,17 +1,17 @@ import { SlTooltip -} from "../../chunks/chunk.JXNEB52G.js"; +} from "../../chunks/chunk.HIEWE77I.js"; import "../../chunks/chunk.QYWEKP2N.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/tooltip/tooltip.js b/dist/components/tooltip/tooltip.js index 5d50c4ba..abea1352 100644 --- a/dist/components/tooltip/tooltip.js +++ b/dist/components/tooltip/tooltip.js @@ -1,18 +1,18 @@ import { tooltip_default -} from "../../chunks/chunk.Z5WPL7FK.js"; -import "../../chunks/chunk.JXNEB52G.js"; +} from "../../chunks/chunk.K2G6YYR3.js"; +import "../../chunks/chunk.HIEWE77I.js"; import "../../chunks/chunk.QYWEKP2N.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/components/tree-item/tree-item.component.js b/dist/components/tree-item/tree-item.component.js index c623abc3..2dea18c8 100644 --- a/dist/components/tree-item/tree-item.component.js +++ b/dist/components/tree-item/tree-item.component.js @@ -1,10 +1,10 @@ import { SlTreeItem -} from "../../chunks/chunk.I2VMJQGZ.js"; +} from "../../chunks/chunk.NSDAXWU5.js"; import "../../chunks/chunk.GR65TH73.js"; -import "../../chunks/chunk.VADWVLYW.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.O5224PTR.js"; @@ -12,13 +12,11 @@ import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -27,10 +25,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tree-item/tree-item.js b/dist/components/tree-item/tree-item.js index 5cd68628..20dadde6 100644 --- a/dist/components/tree-item/tree-item.js +++ b/dist/components/tree-item/tree-item.js @@ -1,11 +1,11 @@ import { tree_item_default -} from "../../chunks/chunk.R3FA5JLK.js"; -import "../../chunks/chunk.I2VMJQGZ.js"; +} from "../../chunks/chunk.GA6KQAOQ.js"; +import "../../chunks/chunk.NSDAXWU5.js"; import "../../chunks/chunk.GR65TH73.js"; -import "../../chunks/chunk.VADWVLYW.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.O5224PTR.js"; @@ -13,13 +13,11 @@ import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -28,10 +26,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tree/tree.component.js b/dist/components/tree/tree.component.js index b1efb546..e7f0b0f2 100644 --- a/dist/components/tree/tree.component.js +++ b/dist/components/tree/tree.component.js @@ -1,12 +1,12 @@ import { SlTree -} from "../../chunks/chunk.DSZSVCSX.js"; +} from "../../chunks/chunk.AW64EVPI.js"; import "../../chunks/chunk.CJB5WKGN.js"; -import "../../chunks/chunk.I2VMJQGZ.js"; +import "../../chunks/chunk.NSDAXWU5.js"; import "../../chunks/chunk.GR65TH73.js"; -import "../../chunks/chunk.VADWVLYW.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.HF7GESMZ.js"; @@ -15,13 +15,11 @@ import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -30,10 +28,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/components/tree/tree.js b/dist/components/tree/tree.js index e73d78a0..fb1d221a 100644 --- a/dist/components/tree/tree.js +++ b/dist/components/tree/tree.js @@ -1,13 +1,13 @@ import { tree_default -} from "../../chunks/chunk.F5FBHKBI.js"; -import "../../chunks/chunk.DSZSVCSX.js"; +} from "../../chunks/chunk.A4BE7OVG.js"; +import "../../chunks/chunk.AW64EVPI.js"; import "../../chunks/chunk.CJB5WKGN.js"; -import "../../chunks/chunk.I2VMJQGZ.js"; +import "../../chunks/chunk.NSDAXWU5.js"; import "../../chunks/chunk.GR65TH73.js"; -import "../../chunks/chunk.VADWVLYW.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.HF7GESMZ.js"; @@ -16,13 +16,11 @@ import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -31,10 +29,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/custom-elements.json b/dist/custom-elements.json index 5a837dc1..bab981f6 100644 --- a/dist/custom-elements.json +++ b/dist/custom-elements.json @@ -262,192 +262,6 @@ } ] }, - { - "kind": "javascript-module", - "path": "components/animated-image/animated-image.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "SlAnimatedImage", - "cssProperties": [ - { - "description": "The size of the icon box.", - "name": "--control-box-size" - }, - { - "description": "The size of the play/pause icons.", - "name": "--icon-size" - } - ], - "cssParts": [ - { - "description": "The container that surrounds the pause/play icons and provides their background.", - "name": "control-box" - } - ], - "slots": [ - { - "description": "Optional play icon to use instead of the default. Works best with ``.", - "name": "play-icon" - }, - { - "description": "Optional pause icon to use instead of the default. Works best with ``.", - "name": "pause-icon" - } - ], - "members": [ - { - "kind": "field", - "name": "dependencies", - "type": { - "text": "object" - }, - "static": true, - "default": "{ 'sl-icon': SlIcon }" - }, - { - "kind": "field", - "name": "animatedImage", - "type": { - "text": "HTMLImageElement" - } - }, - { - "kind": "field", - "name": "frozenFrame", - "type": { - "text": "string" - } - }, - { - "kind": "field", - "name": "isLoaded", - "type": { - "text": "boolean" - }, - "default": "false" - }, - { - "kind": "field", - "name": "src", - "type": { - "text": "string" - }, - "description": "The path to the image to load.", - "attribute": "src" - }, - { - "kind": "field", - "name": "alt", - "type": { - "text": "string" - }, - "description": "A description of the image used by assistive devices.", - "attribute": "alt" - }, - { - "kind": "field", - "name": "play", - "type": { - "text": "boolean" - }, - "description": "Plays the animation. When this attribute is remove, the animation will pause.", - "attribute": "play", - "reflects": true - }, - { - "kind": "method", - "name": "handleClick", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleLoad", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleError", - "privacy": "private" - }, - { - "kind": "method", - "name": "handlePlayChange" - }, - { - "kind": "method", - "name": "handleSrcChange" - } - ], - "events": [ - { - "description": "Emitted when the image loads successfully.", - "name": "sl-load", - "reactName": "onSlLoad", - "eventName": "SlLoadEvent" - }, - { - "description": "Emitted when the image fails to load.", - "name": "sl-error", - "reactName": "onSlError", - "eventName": "SlErrorEvent" - } - ], - "attributes": [ - { - "name": "src", - "type": { - "text": "string" - }, - "description": "The path to the image to load.", - "fieldName": "src" - }, - { - "name": "alt", - "type": { - "text": "string" - }, - "description": "A description of the image used by assistive devices.", - "fieldName": "alt" - }, - { - "name": "play", - "type": { - "text": "boolean" - }, - "description": "Plays the animation. When this attribute is remove, the animation will pause.", - "fieldName": "play" - } - ], - "superclass": { - "name": "ShoelaceElement", - "module": "/src/internal/shoelace-element.js" - }, - "summary": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.", - "tagNameWithoutPrefix": "animated-image", - "tagName": "sl-animated-image", - "customElement": true, - "jsDoc": "/**\n * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n * @documentation https://shoelace.style/components/animated-image\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-load - Emitted when the image loads successfully.\n * @event sl-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with ``.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with ``.\n *\n * @part control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n */", - "documentation": "https://shoelace.style/components/animated-image", - "status": "stable", - "since": "2.0", - "dependencies": [ - "sl-icon" - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SlAnimatedImage", - "module": "components/animated-image/animated-image.js" - } - } - ] - }, { "kind": "javascript-module", "path": "components/animation/animation.js", @@ -805,6 +619,192 @@ } ] }, + { + "kind": "javascript-module", + "path": "components/animated-image/animated-image.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "SlAnimatedImage", + "cssProperties": [ + { + "description": "The size of the icon box.", + "name": "--control-box-size" + }, + { + "description": "The size of the play/pause icons.", + "name": "--icon-size" + } + ], + "cssParts": [ + { + "description": "The container that surrounds the pause/play icons and provides their background.", + "name": "control-box" + } + ], + "slots": [ + { + "description": "Optional play icon to use instead of the default. Works best with ``.", + "name": "play-icon" + }, + { + "description": "Optional pause icon to use instead of the default. Works best with ``.", + "name": "pause-icon" + } + ], + "members": [ + { + "kind": "field", + "name": "dependencies", + "type": { + "text": "object" + }, + "static": true, + "default": "{ 'sl-icon': SlIcon }" + }, + { + "kind": "field", + "name": "animatedImage", + "type": { + "text": "HTMLImageElement" + } + }, + { + "kind": "field", + "name": "frozenFrame", + "type": { + "text": "string" + } + }, + { + "kind": "field", + "name": "isLoaded", + "type": { + "text": "boolean" + }, + "default": "false" + }, + { + "kind": "field", + "name": "src", + "type": { + "text": "string" + }, + "description": "The path to the image to load.", + "attribute": "src" + }, + { + "kind": "field", + "name": "alt", + "type": { + "text": "string" + }, + "description": "A description of the image used by assistive devices.", + "attribute": "alt" + }, + { + "kind": "field", + "name": "play", + "type": { + "text": "boolean" + }, + "description": "Plays the animation. When this attribute is remove, the animation will pause.", + "attribute": "play", + "reflects": true + }, + { + "kind": "method", + "name": "handleClick", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleLoad", + "privacy": "private" + }, + { + "kind": "method", + "name": "handleError", + "privacy": "private" + }, + { + "kind": "method", + "name": "handlePlayChange" + }, + { + "kind": "method", + "name": "handleSrcChange" + } + ], + "events": [ + { + "description": "Emitted when the image loads successfully.", + "name": "sl-load", + "reactName": "onSlLoad", + "eventName": "SlLoadEvent" + }, + { + "description": "Emitted when the image fails to load.", + "name": "sl-error", + "reactName": "onSlError", + "eventName": "SlErrorEvent" + } + ], + "attributes": [ + { + "name": "src", + "type": { + "text": "string" + }, + "description": "The path to the image to load.", + "fieldName": "src" + }, + { + "name": "alt", + "type": { + "text": "string" + }, + "description": "A description of the image used by assistive devices.", + "fieldName": "alt" + }, + { + "name": "play", + "type": { + "text": "boolean" + }, + "description": "Plays the animation. When this attribute is remove, the animation will pause.", + "fieldName": "play" + } + ], + "superclass": { + "name": "ShoelaceElement", + "module": "/src/internal/shoelace-element.js" + }, + "summary": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.", + "tagNameWithoutPrefix": "animated-image", + "tagName": "sl-animated-image", + "customElement": true, + "jsDoc": "/**\n * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n * @documentation https://shoelace.style/components/animated-image\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-load - Emitted when the image loads successfully.\n * @event sl-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with ``.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with ``.\n *\n * @part control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n */", + "documentation": "https://shoelace.style/components/animated-image", + "status": "stable", + "since": "2.0", + "dependencies": [ + "sl-icon" + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SlAnimatedImage", + "module": "components/animated-image/animated-image.js" + } + } + ] + }, { "kind": "javascript-module", "path": "components/avatar/avatar.js", diff --git a/dist/react/alert/index.js b/dist/react/alert/index.js index 1b891e92..42e2b6db 100644 --- a/dist/react/alert/index.js +++ b/dist/react/alert/index.js @@ -1,21 +1,18 @@ import { alert_default -} from "../../chunks/chunk.MTYZGYVJ.js"; -import "../../chunks/chunk.PMQVOPBU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +} from "../../chunks/chunk.OYSDTFV2.js"; +import "../../chunks/chunk.UKBSSTC3.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; -import "../../chunks/chunk.M2WZ4AXO.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -24,10 +21,13 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; +import "../../chunks/chunk.M2WZ4AXO.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/animated-image/index.js b/dist/react/animated-image/index.js index 34137561..00514ed5 100644 --- a/dist/react/animated-image/index.js +++ b/dist/react/animated-image/index.js @@ -1,7 +1,8 @@ import { animated_image_default -} from "../../chunks/chunk.JFXHKZRL.js"; -import "../../chunks/chunk.THDZPG3S.js"; +} from "../../chunks/chunk.JWMI3NOK.js"; +import "../../chunks/chunk.IDJPPGR6.js"; +import "../../chunks/chunk.WIDVIH73.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -10,11 +11,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; -import "../../chunks/chunk.WIDVIH73.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/animation/index.js b/dist/react/animation/index.js index e9ae29f4..c969c9e7 100644 --- a/dist/react/animation/index.js +++ b/dist/react/animation/index.js @@ -1,12 +1,12 @@ import { animation_default -} from "../../chunks/chunk.P63VQA7M.js"; -import "../../chunks/chunk.ZPH3EXSL.js"; -import "../../chunks/chunk.UG4GPH4N.js"; +} from "../../chunks/chunk.GQVYY2ON.js"; +import "../../chunks/chunk.UYEAPXNR.js"; import "../../chunks/chunk.RAB4VAMR.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; +import "../../chunks/chunk.UG4GPH4N.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/avatar/index.js b/dist/react/avatar/index.js index 5d9d3277..c8691aac 100644 --- a/dist/react/avatar/index.js +++ b/dist/react/avatar/index.js @@ -1,10 +1,8 @@ import { avatar_default -} from "../../chunks/chunk.QCSKTARG.js"; -import "../../chunks/chunk.DRMJWHYW.js"; +} from "../../chunks/chunk.YOXFY4TW.js"; +import "../../chunks/chunk.YPIYOHSV.js"; import "../../chunks/chunk.GTZHBAAH.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -13,10 +11,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/breadcrumb/index.js b/dist/react/breadcrumb/index.js index 96ba1a8a..2e6423b9 100644 --- a/dist/react/breadcrumb/index.js +++ b/dist/react/breadcrumb/index.js @@ -14,10 +14,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/button/index.js b/dist/react/button/index.js index 2ae6dbdb..08030ad3 100644 --- a/dist/react/button/index.js +++ b/dist/react/button/index.js @@ -1,19 +1,17 @@ import { button_default -} from "../../chunks/chunk.2T47JI2Y.js"; -import "../../chunks/chunk.ANK5P6NL.js"; +} from "../../chunks/chunk.F3BK5VZ5.js"; +import "../../chunks/chunk.FY6XFGKF.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.GIGJGBBX.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/carousel/index.js b/dist/react/carousel/index.js index a119f19f..4ba74dc0 100644 --- a/dist/react/carousel/index.js +++ b/dist/react/carousel/index.js @@ -1,14 +1,12 @@ import { carousel_default -} from "../../chunks/chunk.BWM56YWB.js"; -import "../../chunks/chunk.4S2NCH2A.js"; +} from "../../chunks/chunk.HDJPOAMP.js"; +import "../../chunks/chunk.EXPSTLYX.js"; import "../../chunks/chunk.HF7GESMZ.js"; import "../../chunks/chunk.F4VGSDIW.js"; import "../../chunks/chunk.HUJPN4KF.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/checkbox/index.js b/dist/react/checkbox/index.js index 501c9913..8ca0fb9d 100644 --- a/dist/react/checkbox/index.js +++ b/dist/react/checkbox/index.js @@ -1,16 +1,14 @@ import { checkbox_default -} from "../../chunks/chunk.YOF2P2QN.js"; -import "../../chunks/chunk.VADWVLYW.js"; +} from "../../chunks/chunk.WTGDMHCB.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/color-picker/index.js b/dist/react/color-picker/index.js index 37d4c662..2a94a967 100644 --- a/dist/react/color-picker/index.js +++ b/dist/react/color-picker/index.js @@ -1,24 +1,24 @@ import { color_picker_default -} from "../../chunks/chunk.UNW6LWJI.js"; -import "../../chunks/chunk.CFH2JNVK.js"; +} from "../../chunks/chunk.PYB4RKJQ.js"; +import "../../chunks/chunk.EAH27JYQ.js"; import "../../chunks/chunk.2FPAOYP2.js"; import "../../chunks/chunk.WCW35DM2.js"; -import "../../chunks/chunk.QT6X3RZ4.js"; +import "../../chunks/chunk.N5QISGWZ.js"; import "../../chunks/chunk.I4BWCXWK.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.FQQ5K3WY.js"; -import "../../chunks/chunk.CMHBKN7G.js"; +import "../../chunks/chunk.MZEJHEPM.js"; import "../../chunks/chunk.I7IBIORS.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.YU7UY5RS.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.ANK5P6NL.js"; +import "../../chunks/chunk.FY6XFGKF.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; @@ -29,13 +29,11 @@ import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -44,10 +42,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/copy-button/index.js b/dist/react/copy-button/index.js index e59600c8..2077b5cb 100644 --- a/dist/react/copy-button/index.js +++ b/dist/react/copy-button/index.js @@ -1,8 +1,8 @@ import { copy_button_default -} from "../../chunks/chunk.TKH2FCTH.js"; -import "../../chunks/chunk.OUERAG24.js"; -import "../../chunks/chunk.JXNEB52G.js"; +} from "../../chunks/chunk.CPXW4SC4.js"; +import "../../chunks/chunk.PJ7UYN3F.js"; +import "../../chunks/chunk.HIEWE77I.js"; import "../../chunks/chunk.QYWEKP2N.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; @@ -10,8 +10,6 @@ import "../../chunks/chunk.7EKSUNPQ.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -23,10 +21,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/details/index.js b/dist/react/details/index.js index 98b1775d..e5f42712 100644 --- a/dist/react/details/index.js +++ b/dist/react/details/index.js @@ -1,13 +1,11 @@ import { details_default -} from "../../chunks/chunk.RQJPCZFL.js"; -import "../../chunks/chunk.SLMMUW6G.js"; +} from "../../chunks/chunk.YO6PE2U4.js"; +import "../../chunks/chunk.CA4YGNMP.js"; import "../../chunks/chunk.JH24DE2R.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -19,10 +17,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/dialog/index.js b/dist/react/dialog/index.js index 9073bb3d..e66ca210 100644 --- a/dist/react/dialog/index.js +++ b/dist/react/dialog/index.js @@ -1,24 +1,22 @@ import { dialog_default -} from "../../chunks/chunk.EVGTMRV3.js"; -import "../../chunks/chunk.QFY5BTZB.js"; +} from "../../chunks/chunk.DDLAAFQL.js"; +import "../../chunks/chunk.JEDU5SAS.js"; import "../../chunks/chunk.JEBKOPXW.js"; import "../../chunks/chunk.F5JVBNK3.js"; import "../../chunks/chunk.RYFK2CD3.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -27,10 +25,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/drawer/index.js b/dist/react/drawer/index.js index 5d8f2e36..8ca38725 100644 --- a/dist/react/drawer/index.js +++ b/dist/react/drawer/index.js @@ -1,24 +1,22 @@ import { drawer_default -} from "../../chunks/chunk.F5YMP27H.js"; -import "../../chunks/chunk.JURRYKMI.js"; +} from "../../chunks/chunk.RH52FQAZ.js"; +import "../../chunks/chunk.6QIZUGEE.js"; import "../../chunks/chunk.7KZHSE62.js"; import "../../chunks/chunk.JEBKOPXW.js"; import "../../chunks/chunk.F5JVBNK3.js"; import "../../chunks/chunk.LXDTFLWU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -27,10 +25,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/dropdown/index.js b/dist/react/dropdown/index.js index 8ee591e5..ffd552de 100644 --- a/dist/react/dropdown/index.js +++ b/dist/react/dropdown/index.js @@ -1,7 +1,7 @@ import { dropdown_default -} from "../../chunks/chunk.WWLGKKJL.js"; -import "../../chunks/chunk.CMHBKN7G.js"; +} from "../../chunks/chunk.FSY7RZDG.js"; +import "../../chunks/chunk.MZEJHEPM.js"; import "../../chunks/chunk.I7IBIORS.js"; import "../../chunks/chunk.LXDTFLWU.js"; import "../../chunks/chunk.CG46NLLA.js"; @@ -9,12 +9,12 @@ import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/react/icon-button/index.js b/dist/react/icon-button/index.js index a289c3a7..1730d3cd 100644 --- a/dist/react/icon-button/index.js +++ b/dist/react/icon-button/index.js @@ -1,12 +1,10 @@ import { icon_button_default -} from "../../chunks/chunk.J67LBPKS.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +} from "../../chunks/chunk.AOTJKWMX.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -15,10 +13,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/icon/index.js b/dist/react/icon/index.js index 2a77ce59..70a3b2d5 100644 --- a/dist/react/icon/index.js +++ b/dist/react/icon/index.js @@ -9,10 +9,10 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/image-comparer/index.js b/dist/react/image-comparer/index.js index 09c05a13..9db3b112 100644 --- a/dist/react/image-comparer/index.js +++ b/dist/react/image-comparer/index.js @@ -1,13 +1,11 @@ import { image_comparer_default -} from "../../chunks/chunk.TZECUIPX.js"; -import "../../chunks/chunk.6OGSJDWU.js"; +} from "../../chunks/chunk.SQHWC2O3.js"; +import "../../chunks/chunk.N3DJF6MW.js"; import "../../chunks/chunk.KPESQDYT.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.FQQ5K3WY.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -16,10 +14,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/index.d.ts b/dist/react/index.d.ts index d451ac10..31990658 100644 --- a/dist/react/index.d.ts +++ b/dist/react/index.d.ts @@ -1,6 +1,6 @@ export { default as SlAlert } from './alert/index.js'; -export { default as SlAnimatedImage } from './animated-image/index.js'; export { default as SlAnimation } from './animation/index.js'; +export { default as SlAnimatedImage } from './animated-image/index.js'; export { default as SlAvatar } from './avatar/index.js'; export { default as SlBadge } from './badge/index.js'; export { default as SlBreadcrumb } from './breadcrumb/index.js'; diff --git a/dist/react/index.js b/dist/react/index.js index b4bbe8b8..57da2f56 100644 --- a/dist/react/index.js +++ b/dist/react/index.js @@ -3,19 +3,19 @@ import { } from "../chunks/chunk.PKZ3XJEV.js"; import { tag_default -} from "../chunks/chunk.J72VNH2K.js"; +} from "../chunks/chunk.RYBGPLV6.js"; import { textarea_default -} from "../chunks/chunk.KIAH3HVJ.js"; +} from "../chunks/chunk.W2PFS7FX.js"; import { tooltip_default -} from "../chunks/chunk.XMU6QYKR.js"; +} from "../chunks/chunk.ZXSNECDV.js"; import { tree_default -} from "../chunks/chunk.LPDJYE6J.js"; +} from "../chunks/chunk.M7CLXYMX.js"; import { tree_item_default -} from "../chunks/chunk.2A654XM4.js"; +} from "../chunks/chunk.SQPWULD2.js"; import { visually_hidden_default } from "../chunks/chunk.F3TDVR77.js"; @@ -24,7 +24,7 @@ import { } from "../chunks/chunk.Z6FWECUV.js"; import { select_default -} from "../chunks/chunk.SQZ5OT6N.js"; +} from "../chunks/chunk.3ZGEZ6AF.js"; import { skeleton_default } from "../chunks/chunk.2SD2A3ST.js"; @@ -33,16 +33,16 @@ import { } from "../chunks/chunk.CHSNMWID.js"; import { split_panel_default -} from "../chunks/chunk.AYJVTYM4.js"; +} from "../chunks/chunk.JRVKL7AO.js"; import { switch_default -} from "../chunks/chunk.OENC5VUK.js"; +} from "../chunks/chunk.PDIS3YDB.js"; import { tab_default -} from "../chunks/chunk.UBXOQCSK.js"; +} from "../chunks/chunk.VK2Q54G3.js"; import { tab_group_default -} from "../chunks/chunk.IULN2B2Z.js"; +} from "../chunks/chunk.FG3K56UG.js"; import { progress_ring_default } from "../chunks/chunk.VXSOGZDQ.js"; @@ -51,7 +51,7 @@ import { } from "../chunks/chunk.2OKI6PHM.js"; import { radio_default -} from "../chunks/chunk.TW53AQUU.js"; +} from "../chunks/chunk.KMS6K2ZC.js"; import { radio_button_default } from "../chunks/chunk.GQZDKUQJ.js"; @@ -60,22 +60,22 @@ import { } from "../chunks/chunk.P4Z2VYVQ.js"; import { range_default -} from "../chunks/chunk.CMTWBNST.js"; +} from "../chunks/chunk.NQG7KWCE.js"; import { rating_default -} from "../chunks/chunk.TUUNNIMD.js"; +} from "../chunks/chunk.LJWD3SJX.js"; import { relative_time_default } from "../chunks/chunk.6ICPIHVY.js"; import { input_default -} from "../chunks/chunk.EJV2FSC6.js"; +} from "../chunks/chunk.UPQ2JL5V.js"; import { menu_default } from "../chunks/chunk.HV2Z2BBU.js"; import { menu_item_default -} from "../chunks/chunk.Y3VN6GCE.js"; +} from "../chunks/chunk.5T6ERPEL.js"; import { menu_label_default } from "../chunks/chunk.QATIXPMD.js"; @@ -84,16 +84,16 @@ import { } from "../chunks/chunk.LXVQNYXP.js"; import { option_default -} from "../chunks/chunk.XLVNHEC6.js"; +} from "../chunks/chunk.AAZEKXC4.js"; import { popup_default } from "../chunks/chunk.VCYKXDJ7.js"; import { progress_bar_default -} from "../chunks/chunk.VGFMDSAI.js"; +} from "../chunks/chunk.MPAT4V3I.js"; import { dropdown_default -} from "../chunks/chunk.WWLGKKJL.js"; +} from "../chunks/chunk.FSY7RZDG.js"; import { format_bytes_default } from "../chunks/chunk.NGIYNQ4S.js"; @@ -108,10 +108,10 @@ import { } from "../chunks/chunk.7GC25S3T.js"; import { icon_button_default -} from "../chunks/chunk.J67LBPKS.js"; +} from "../chunks/chunk.AOTJKWMX.js"; import { image_comparer_default -} from "../chunks/chunk.TZECUIPX.js"; +} from "../chunks/chunk.SQHWC2O3.js"; import { include_default } from "../chunks/chunk.75QZPJZS.js"; @@ -120,28 +120,28 @@ import { } from "../chunks/chunk.Z6YFF2NE.js"; import { checkbox_default -} from "../chunks/chunk.YOF2P2QN.js"; +} from "../chunks/chunk.WTGDMHCB.js"; import { color_picker_default -} from "../chunks/chunk.UNW6LWJI.js"; +} from "../chunks/chunk.PYB4RKJQ.js"; import { copy_button_default -} from "../chunks/chunk.TKH2FCTH.js"; +} from "../chunks/chunk.CPXW4SC4.js"; import { details_default -} from "../chunks/chunk.RQJPCZFL.js"; +} from "../chunks/chunk.YO6PE2U4.js"; import { dialog_default -} from "../chunks/chunk.EVGTMRV3.js"; +} from "../chunks/chunk.DDLAAFQL.js"; import { divider_default } from "../chunks/chunk.D3YQ4P5B.js"; import { drawer_default -} from "../chunks/chunk.F5YMP27H.js"; +} from "../chunks/chunk.RH52FQAZ.js"; import { avatar_default -} from "../chunks/chunk.QCSKTARG.js"; +} from "../chunks/chunk.YOXFY4TW.js"; import { badge_default } from "../chunks/chunk.G5MMWOXZ.js"; @@ -153,7 +153,7 @@ import { } from "../chunks/chunk.NJZ7PZNA.js"; import { button_default -} from "../chunks/chunk.2T47JI2Y.js"; +} from "../chunks/chunk.F3BK5VZ5.js"; import { button_group_default } from "../chunks/chunk.3K3OX4VC.js"; @@ -162,43 +162,43 @@ import { } from "../chunks/chunk.ENK3ESZ6.js"; import { carousel_default -} from "../chunks/chunk.BWM56YWB.js"; +} from "../chunks/chunk.HDJPOAMP.js"; import { alert_default -} from "../chunks/chunk.MTYZGYVJ.js"; +} from "../chunks/chunk.OYSDTFV2.js"; import { animated_image_default -} from "../chunks/chunk.JFXHKZRL.js"; +} from "../chunks/chunk.JWMI3NOK.js"; import { animation_default -} from "../chunks/chunk.P63VQA7M.js"; -import "../chunks/chunk.DSZSVCSX.js"; +} from "../chunks/chunk.GQVYY2ON.js"; +import "../chunks/chunk.AW64EVPI.js"; import "../chunks/chunk.CJB5WKGN.js"; -import "../chunks/chunk.I2VMJQGZ.js"; +import "../chunks/chunk.NSDAXWU5.js"; import "../chunks/chunk.GR65TH73.js"; import "../chunks/chunk.AOP56WXE.js"; import "../chunks/chunk.QXVYWNWE.js"; -import "../chunks/chunk.CS2FJAVB.js"; +import "../chunks/chunk.L5V2RVPF.js"; import "../chunks/chunk.4CNJZ4VC.js"; -import "../chunks/chunk.W6AXMEWH.js"; +import "../chunks/chunk.WEYLHTLN.js"; import "../chunks/chunk.DK6N4THU.js"; -import "../chunks/chunk.QYSV4AOQ.js"; +import "../chunks/chunk.IYOMW7E7.js"; import "../chunks/chunk.MYJL3FCG.js"; -import "../chunks/chunk.K2IH25YY.js"; +import "../chunks/chunk.CMVGJZQB.js"; import "../chunks/chunk.A63MQPPF.js"; -import "../chunks/chunk.ARHWQFOY.js"; +import "../chunks/chunk.OAUTL6YH.js"; import "../chunks/chunk.ROHOK2AY.js"; import "../chunks/chunk.TVZOSL42.js"; import "../chunks/chunk.LY2W3OWK.js"; -import "../chunks/chunk.U4O2H2B7.js"; -import "../chunks/chunk.GH4I3V5W.js"; +import "../chunks/chunk.NAMNOMAN.js"; +import "../chunks/chunk.GVMOZDVD.js"; import "../chunks/chunk.MVCCMDRT.js"; import "../chunks/chunk.ECLFWIFP.js"; import "../chunks/chunk.TQXSVZ6S.js"; import "../chunks/chunk.E3AD2PY7.js"; -import "../chunks/chunk.636GFVN7.js"; +import "../chunks/chunk.JDMEV6W6.js"; import "../chunks/chunk.E77YYWGC.js"; -import "../chunks/chunk.JOMOSJ6V.js"; +import "../chunks/chunk.D4HT5N2S.js"; import "../chunks/chunk.EPJHAO2T.js"; import "../chunks/chunk.WUT665TF.js"; import "../chunks/chunk.NTX55OI3.js"; @@ -210,11 +210,11 @@ import "../chunks/chunk.7EAA5BOB.js"; import "../chunks/chunk.D6IAFMUB.js"; import "../chunks/chunk.BRDZYKRW.js"; import "../chunks/chunk.ZTQCHOVN.js"; -import "../chunks/chunk.K2ROYTBB.js"; +import "../chunks/chunk.QKLVXD76.js"; import "../chunks/chunk.43Z4T7VZ.js"; -import "../chunks/chunk.RNPLPMI7.js"; +import "../chunks/chunk.HP6XNQLT.js"; import "../chunks/chunk.JXTNYING.js"; -import "../chunks/chunk.PTXGKMCM.js"; +import "../chunks/chunk.3EZHFHG3.js"; import "../chunks/chunk.HSWXQUHN.js"; import "../chunks/chunk.DPZ4PPWY.js"; import "../chunks/chunk.IMMKQQ6H.js"; @@ -222,10 +222,10 @@ import "../chunks/chunk.S5PKGTUY.js"; import "../chunks/chunk.5BQ3JFXK.js"; import "../chunks/chunk.EBCBKEXZ.js"; import "../chunks/chunk.JASCFJUS.js"; -import "../chunks/chunk.WMGEXFCN.js"; -import "../chunks/chunk.MZQVGI4G.js"; +import "../chunks/chunk.4VSLQP6A.js"; +import "../chunks/chunk.URMLYPYT.js"; import "../chunks/chunk.IPJHXFIL.js"; -import "../chunks/chunk.6OGSJDWU.js"; +import "../chunks/chunk.N3DJF6MW.js"; import "../chunks/chunk.KPESQDYT.js"; import "../chunks/chunk.LTRRIM77.js"; import "../chunks/chunk.4VFDNCQZ.js"; @@ -233,45 +233,45 @@ import "../chunks/chunk.XNEONNEJ.js"; import "../chunks/chunk.KEMKFFXX.js"; import "../chunks/chunk.46FZN2KS.js"; import "../chunks/chunk.M3HTBX76.js"; -import "../chunks/chunk.JURRYKMI.js"; +import "../chunks/chunk.6QIZUGEE.js"; import "../chunks/chunk.7KZHSE62.js"; -import "../chunks/chunk.SLMMUW6G.js"; +import "../chunks/chunk.CA4YGNMP.js"; import "../chunks/chunk.JH24DE2R.js"; -import "../chunks/chunk.QFY5BTZB.js"; +import "../chunks/chunk.JEDU5SAS.js"; import "../chunks/chunk.JEBKOPXW.js"; import "../chunks/chunk.F5JVBNK3.js"; import "../chunks/chunk.RYFK2CD3.js"; import "../chunks/chunk.GS47GAZF.js"; import "../chunks/chunk.3BLTEGRR.js"; -import "../chunks/chunk.VADWVLYW.js"; +import "../chunks/chunk.F5DJG2IC.js"; import "../chunks/chunk.DNDYQTWS.js"; -import "../chunks/chunk.CFH2JNVK.js"; +import "../chunks/chunk.EAH27JYQ.js"; import "../chunks/chunk.2FPAOYP2.js"; import "../chunks/chunk.WCW35DM2.js"; -import "../chunks/chunk.QT6X3RZ4.js"; +import "../chunks/chunk.N5QISGWZ.js"; import "../chunks/chunk.I4BWCXWK.js"; import "../chunks/chunk.ESELY2US.js"; import "../chunks/chunk.FQQ5K3WY.js"; -import "../chunks/chunk.CMHBKN7G.js"; +import "../chunks/chunk.MZEJHEPM.js"; import "../chunks/chunk.I7IBIORS.js"; import "../chunks/chunk.LXDTFLWU.js"; -import "../chunks/chunk.MB643KRE.js"; +import "../chunks/chunk.IRURSJVI.js"; import "../chunks/chunk.RQ7JZ4R7.js"; import "../chunks/chunk.2VV6AF6A.js"; import "../chunks/chunk.YU7UY5RS.js"; -import "../chunks/chunk.OUERAG24.js"; -import "../chunks/chunk.JXNEB52G.js"; +import "../chunks/chunk.PJ7UYN3F.js"; +import "../chunks/chunk.HIEWE77I.js"; import "../chunks/chunk.QYWEKP2N.js"; import "../chunks/chunk.CG46NLLA.js"; import "../chunks/chunk.HKVRF64Z.js"; import "../chunks/chunk.7EKSUNPQ.js"; -import "../chunks/chunk.4S2NCH2A.js"; +import "../chunks/chunk.EXPSTLYX.js"; import "../chunks/chunk.HF7GESMZ.js"; import "../chunks/chunk.F4VGSDIW.js"; import "../chunks/chunk.HUJPN4KF.js"; import "../chunks/chunk.HBCFOWLT.js"; import "../chunks/chunk.FQH4RL5J.js"; -import "../chunks/chunk.ANK5P6NL.js"; +import "../chunks/chunk.FY6XFGKF.js"; import "../chunks/chunk.O5224PTR.js"; import "../chunks/chunk.SZ6QMU5T.js"; import "../chunks/chunk.JWVNKU5Y.js"; @@ -280,33 +280,28 @@ import "../chunks/chunk.F3KB2RIB.js"; import "../chunks/chunk.EJOUFVOH.js"; import "../chunks/chunk.OPZTO4F2.js"; import "../chunks/chunk.G227ZG7E.js"; -import "../chunks/chunk.RXJPYCW4.js"; -import "../chunks/chunk.QF5Z6UDG.js"; +import "../chunks/chunk.TN7S72NW.js"; +import "../chunks/chunk.Z6EIXACR.js"; import "../chunks/chunk.KH7CDL5Q.js"; import "../chunks/chunk.RGQ7NICF.js"; -import "../chunks/chunk.ZPH3EXSL.js"; -import "../chunks/chunk.UG4GPH4N.js"; -import "../chunks/chunk.RAB4VAMR.js"; -import "../chunks/chunk.DRMJWHYW.js"; +import "../chunks/chunk.IDJPPGR6.js"; +import "../chunks/chunk.WIDVIH73.js"; +import "../chunks/chunk.YPIYOHSV.js"; import "../chunks/chunk.GTZHBAAH.js"; -import "../chunks/chunk.TN7S72NW.js"; -import "../chunks/chunk.Z6EIXACR.js"; -import "../chunks/chunk.PMQVOPBU.js"; -import "../chunks/chunk.EUMKZFJV.js"; +import "../chunks/chunk.RXJPYCW4.js"; +import "../chunks/chunk.QF5Z6UDG.js"; +import "../chunks/chunk.UKBSSTC3.js"; +import "../chunks/chunk.HECO4DZ2.js"; import "../chunks/chunk.OGR6IZGY.js"; import "../chunks/chunk.RCZVQXWP.js"; import "../chunks/chunk.B4BZKR24.js"; import "../chunks/chunk.S7GYYU7Z.js"; import "../chunks/chunk.LX7UG5WS.js"; -import "../chunks/chunk.2URMUHDY.js"; -import "../chunks/chunk.NYIIDP5N.js"; -import "../chunks/chunk.UZVKBFXH.js"; -import "../chunks/chunk.UP75L23G.js"; import "../chunks/chunk.NH3SRVOC.js"; import "../chunks/chunk.QPSNFEB2.js"; import "../chunks/chunk.O27EHOBW.js"; -import "../chunks/chunk.M2WZ4AXO.js"; -import "../chunks/chunk.THDZPG3S.js"; +import "../chunks/chunk.2URMUHDY.js"; +import "../chunks/chunk.NYIIDP5N.js"; import "../chunks/chunk.QQHXFE7X.js"; import "../chunks/chunk.2L6GHXIJ.js"; import "../chunks/chunk.7KGEATF3.js"; @@ -315,11 +310,16 @@ import "../chunks/chunk.P7ZG6EMR.js"; import "../chunks/chunk.X772EESY.js"; import "../chunks/chunk.4UBLNU4Z.js"; import "../chunks/chunk.33QRBYPI.js"; +import "../chunks/chunk.UZVKBFXH.js"; +import "../chunks/chunk.UP75L23G.js"; +import "../chunks/chunk.3Y6SB6QS.js"; +import "../chunks/chunk.M2WZ4AXO.js"; +import "../chunks/chunk.UYEAPXNR.js"; +import "../chunks/chunk.RAB4VAMR.js"; import "../chunks/chunk.FA5RT4K4.js"; import "../chunks/chunk.K23QWHWK.js"; import "../chunks/chunk.URGPTPT3.js"; -import "../chunks/chunk.3Y6SB6QS.js"; -import "../chunks/chunk.WIDVIH73.js"; +import "../chunks/chunk.UG4GPH4N.js"; import "../chunks/chunk.CXZZ2LVK.js"; import "../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/input/index.js b/dist/react/input/index.js index 8390dbc6..91e49527 100644 --- a/dist/react/input/index.js +++ b/dist/react/input/index.js @@ -1,19 +1,17 @@ import { input_default -} from "../../chunks/chunk.EJV2FSC6.js"; -import "../../chunks/chunk.QT6X3RZ4.js"; +} from "../../chunks/chunk.UPQ2JL5V.js"; +import "../../chunks/chunk.N5QISGWZ.js"; import "../../chunks/chunk.I4BWCXWK.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/menu-item/index.js b/dist/react/menu-item/index.js index 6a0596b4..b4c61a99 100644 --- a/dist/react/menu-item/index.js +++ b/dist/react/menu-item/index.js @@ -1,19 +1,17 @@ import { menu_item_default -} from "../../chunks/chunk.Y3VN6GCE.js"; -import "../../chunks/chunk.WMGEXFCN.js"; -import "../../chunks/chunk.MZQVGI4G.js"; +} from "../../chunks/chunk.5T6ERPEL.js"; +import "../../chunks/chunk.4VSLQP6A.js"; +import "../../chunks/chunk.URMLYPYT.js"; import "../../chunks/chunk.IPJHXFIL.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.O5224PTR.js"; import "../../chunks/chunk.SZ6QMU5T.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -22,10 +20,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/option/index.js b/dist/react/option/index.js index 4683edc0..a5d49318 100644 --- a/dist/react/option/index.js +++ b/dist/react/option/index.js @@ -1,10 +1,8 @@ import { option_default -} from "../../chunks/chunk.XLVNHEC6.js"; -import "../../chunks/chunk.RNPLPMI7.js"; +} from "../../chunks/chunk.AAZEKXC4.js"; +import "../../chunks/chunk.HP6XNQLT.js"; import "../../chunks/chunk.JXTNYING.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; @@ -16,10 +14,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/progress-bar/index.js b/dist/react/progress-bar/index.js index 0ffe9835..bd803a7d 100644 --- a/dist/react/progress-bar/index.js +++ b/dist/react/progress-bar/index.js @@ -1,15 +1,15 @@ import { progress_bar_default -} from "../../chunks/chunk.VGFMDSAI.js"; -import "../../chunks/chunk.PTXGKMCM.js"; +} from "../../chunks/chunk.MPAT4V3I.js"; +import "../../chunks/chunk.3EZHFHG3.js"; import "../../chunks/chunk.HSWXQUHN.js"; import "../../chunks/chunk.FQQ5K3WY.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; import "../../chunks/chunk.CXZZ2LVK.js"; diff --git a/dist/react/radio/index.js b/dist/react/radio/index.js index 9efe1f33..758d16af 100644 --- a/dist/react/radio/index.js +++ b/dist/react/radio/index.js @@ -1,10 +1,8 @@ import { radio_default -} from "../../chunks/chunk.TW53AQUU.js"; -import "../../chunks/chunk.K2ROYTBB.js"; +} from "../../chunks/chunk.KMS6K2ZC.js"; +import "../../chunks/chunk.QKLVXD76.js"; import "../../chunks/chunk.43Z4T7VZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -13,10 +11,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/range/index.js b/dist/react/range/index.js index baffe3f6..ff538d0e 100644 --- a/dist/react/range/index.js +++ b/dist/react/range/index.js @@ -1,20 +1,20 @@ import { range_default -} from "../../chunks/chunk.CMTWBNST.js"; -import "../../chunks/chunk.636GFVN7.js"; +} from "../../chunks/chunk.NQG7KWCE.js"; +import "../../chunks/chunk.JDMEV6W6.js"; import "../../chunks/chunk.E77YYWGC.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.2L6GHXIJ.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/react/rating/index.js b/dist/react/rating/index.js index 106bf7a4..4fbcbfcd 100644 --- a/dist/react/rating/index.js +++ b/dist/react/rating/index.js @@ -1,13 +1,11 @@ import { rating_default -} from "../../chunks/chunk.TUUNNIMD.js"; -import "../../chunks/chunk.JOMOSJ6V.js"; +} from "../../chunks/chunk.LJWD3SJX.js"; +import "../../chunks/chunk.D4HT5N2S.js"; import "../../chunks/chunk.EPJHAO2T.js"; import "../../chunks/chunk.WUT665TF.js"; import "../../chunks/chunk.FQQ5K3WY.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -16,10 +14,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/select/index.js b/dist/react/select/index.js index 365f20e6..552d6278 100644 --- a/dist/react/select/index.js +++ b/dist/react/select/index.js @@ -1,8 +1,8 @@ import { select_default -} from "../../chunks/chunk.SQZ5OT6N.js"; -import "../../chunks/chunk.U4O2H2B7.js"; -import "../../chunks/chunk.GH4I3V5W.js"; +} from "../../chunks/chunk.3ZGEZ6AF.js"; +import "../../chunks/chunk.NAMNOMAN.js"; +import "../../chunks/chunk.GVMOZDVD.js"; import "../../chunks/chunk.MVCCMDRT.js"; import "../../chunks/chunk.ECLFWIFP.js"; import "../../chunks/chunk.EPJHAO2T.js"; @@ -12,19 +12,17 @@ import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.JWVNKU5Y.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -33,10 +31,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/split-panel/index.js b/dist/react/split-panel/index.js index 928f6b74..6b2218d7 100644 --- a/dist/react/split-panel/index.js +++ b/dist/react/split-panel/index.js @@ -1,14 +1,14 @@ import { split_panel_default -} from "../../chunks/chunk.AYJVTYM4.js"; -import "../../chunks/chunk.K2IH25YY.js"; +} from "../../chunks/chunk.JRVKL7AO.js"; +import "../../chunks/chunk.CMVGJZQB.js"; import "../../chunks/chunk.A63MQPPF.js"; import "../../chunks/chunk.ESELY2US.js"; import "../../chunks/chunk.HF7GESMZ.js"; -import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/react/switch/index.js b/dist/react/switch/index.js index 528069f6..6c4f9581 100644 --- a/dist/react/switch/index.js +++ b/dist/react/switch/index.js @@ -1,17 +1,17 @@ import { switch_default -} from "../../chunks/chunk.OENC5VUK.js"; -import "../../chunks/chunk.ARHWQFOY.js"; +} from "../../chunks/chunk.PDIS3YDB.js"; +import "../../chunks/chunk.OAUTL6YH.js"; import "../../chunks/chunk.ROHOK2AY.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; +import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.UZVKBFXH.js"; import "../../chunks/chunk.UP75L23G.js"; -import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/react/tab-group/index.js b/dist/react/tab-group/index.js index f4c31f9d..5e99ceb5 100644 --- a/dist/react/tab-group/index.js +++ b/dist/react/tab-group/index.js @@ -1,18 +1,16 @@ import { tab_group_default -} from "../../chunks/chunk.IULN2B2Z.js"; -import "../../chunks/chunk.QYSV4AOQ.js"; +} from "../../chunks/chunk.FG3K56UG.js"; +import "../../chunks/chunk.IYOMW7E7.js"; import "../../chunks/chunk.MYJL3FCG.js"; import "../../chunks/chunk.F5JVBNK3.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -21,10 +19,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/tab/index.js b/dist/react/tab/index.js index 2aa1939e..612b8ae2 100644 --- a/dist/react/tab/index.js +++ b/dist/react/tab/index.js @@ -1,17 +1,15 @@ import { tab_default -} from "../../chunks/chunk.UBXOQCSK.js"; -import "../../chunks/chunk.W6AXMEWH.js"; +} from "../../chunks/chunk.VK2Q54G3.js"; +import "../../chunks/chunk.WEYLHTLN.js"; import "../../chunks/chunk.DK6N4THU.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/tag/index.js b/dist/react/tag/index.js index 1b046410..a13ff337 100644 --- a/dist/react/tag/index.js +++ b/dist/react/tag/index.js @@ -1,17 +1,15 @@ import { tag_default -} from "../../chunks/chunk.J72VNH2K.js"; -import "../../chunks/chunk.GH4I3V5W.js"; +} from "../../chunks/chunk.RYBGPLV6.js"; +import "../../chunks/chunk.GVMOZDVD.js"; import "../../chunks/chunk.MVCCMDRT.js"; -import "../../chunks/chunk.EUMKZFJV.js"; +import "../../chunks/chunk.HECO4DZ2.js"; import "../../chunks/chunk.OGR6IZGY.js"; import "../../chunks/chunk.LX7UG5WS.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -20,10 +18,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/textarea/index.js b/dist/react/textarea/index.js index 6a376271..efd6db9d 100644 --- a/dist/react/textarea/index.js +++ b/dist/react/textarea/index.js @@ -1,17 +1,17 @@ import { textarea_default -} from "../../chunks/chunk.KIAH3HVJ.js"; -import "../../chunks/chunk.CS2FJAVB.js"; +} from "../../chunks/chunk.W2PFS7FX.js"; +import "../../chunks/chunk.L5V2RVPF.js"; import "../../chunks/chunk.4CNJZ4VC.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.2URMUHDY.js"; import "../../chunks/chunk.NYIIDP5N.js"; +import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.UZVKBFXH.js"; import "../../chunks/chunk.UP75L23G.js"; -import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/react/tooltip/index.js b/dist/react/tooltip/index.js index cb9e0e18..ecbbbe6d 100644 --- a/dist/react/tooltip/index.js +++ b/dist/react/tooltip/index.js @@ -1,18 +1,18 @@ import { tooltip_default -} from "../../chunks/chunk.XMU6QYKR.js"; -import "../../chunks/chunk.JXNEB52G.js"; +} from "../../chunks/chunk.ZXSNECDV.js"; +import "../../chunks/chunk.HIEWE77I.js"; import "../../chunks/chunk.QYWEKP2N.js"; import "../../chunks/chunk.CG46NLLA.js"; import "../../chunks/chunk.HKVRF64Z.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.B4BZKR24.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; diff --git a/dist/react/tree-item/index.js b/dist/react/tree-item/index.js index 63d34a98..2eaa92b9 100644 --- a/dist/react/tree-item/index.js +++ b/dist/react/tree-item/index.js @@ -1,11 +1,11 @@ import { tree_item_default -} from "../../chunks/chunk.2A654XM4.js"; -import "../../chunks/chunk.I2VMJQGZ.js"; +} from "../../chunks/chunk.SQPWULD2.js"; +import "../../chunks/chunk.NSDAXWU5.js"; import "../../chunks/chunk.GR65TH73.js"; -import "../../chunks/chunk.VADWVLYW.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.O5224PTR.js"; @@ -13,13 +13,11 @@ import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -28,10 +26,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/react/tree/index.js b/dist/react/tree/index.js index 83f767e0..677f8ac2 100644 --- a/dist/react/tree/index.js +++ b/dist/react/tree/index.js @@ -1,13 +1,13 @@ import { tree_default -} from "../../chunks/chunk.LPDJYE6J.js"; -import "../../chunks/chunk.DSZSVCSX.js"; +} from "../../chunks/chunk.M7CLXYMX.js"; +import "../../chunks/chunk.AW64EVPI.js"; import "../../chunks/chunk.CJB5WKGN.js"; -import "../../chunks/chunk.I2VMJQGZ.js"; +import "../../chunks/chunk.NSDAXWU5.js"; import "../../chunks/chunk.GR65TH73.js"; -import "../../chunks/chunk.VADWVLYW.js"; +import "../../chunks/chunk.F5DJG2IC.js"; import "../../chunks/chunk.DNDYQTWS.js"; -import "../../chunks/chunk.MB643KRE.js"; +import "../../chunks/chunk.IRURSJVI.js"; import "../../chunks/chunk.RQ7JZ4R7.js"; import "../../chunks/chunk.2VV6AF6A.js"; import "../../chunks/chunk.HF7GESMZ.js"; @@ -16,13 +16,11 @@ import "../../chunks/chunk.SZ6QMU5T.js"; import "../../chunks/chunk.JWVNKU5Y.js"; import "../../chunks/chunk.RCZVQXWP.js"; import "../../chunks/chunk.S7GYYU7Z.js"; -import "../../chunks/chunk.2URMUHDY.js"; -import "../../chunks/chunk.NYIIDP5N.js"; -import "../../chunks/chunk.UZVKBFXH.js"; -import "../../chunks/chunk.UP75L23G.js"; import "../../chunks/chunk.NH3SRVOC.js"; import "../../chunks/chunk.QPSNFEB2.js"; import "../../chunks/chunk.O27EHOBW.js"; +import "../../chunks/chunk.2URMUHDY.js"; +import "../../chunks/chunk.NYIIDP5N.js"; import "../../chunks/chunk.QQHXFE7X.js"; import "../../chunks/chunk.2L6GHXIJ.js"; import "../../chunks/chunk.7KGEATF3.js"; @@ -31,10 +29,12 @@ import "../../chunks/chunk.P7ZG6EMR.js"; import "../../chunks/chunk.X772EESY.js"; import "../../chunks/chunk.4UBLNU4Z.js"; import "../../chunks/chunk.33QRBYPI.js"; +import "../../chunks/chunk.UZVKBFXH.js"; +import "../../chunks/chunk.UP75L23G.js"; +import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.FA5RT4K4.js"; import "../../chunks/chunk.K23QWHWK.js"; import "../../chunks/chunk.URGPTPT3.js"; -import "../../chunks/chunk.3Y6SB6QS.js"; import "../../chunks/chunk.CXZZ2LVK.js"; import "../../chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/shoelace.js b/dist/shoelace.js index abba68c9..4dbcdbd9 100644 --- a/dist/shoelace.js +++ b/dist/shoelace.js @@ -6,22 +6,22 @@ import "./chunks/chunk.HAL7R4WT.js"; import "./chunks/chunk.QL5C2XOW.js"; import { tree_item_default -} from "./chunks/chunk.R3FA5JLK.js"; +} from "./chunks/chunk.GA6KQAOQ.js"; import { visually_hidden_default } from "./chunks/chunk.R4VMIQMV.js"; import { textarea_default -} from "./chunks/chunk.MA64RL76.js"; +} from "./chunks/chunk.YALLUFXD.js"; import { tooltip_default -} from "./chunks/chunk.Z5WPL7FK.js"; +} from "./chunks/chunk.K2G6YYR3.js"; import { tree_default -} from "./chunks/chunk.F5FBHKBI.js"; -import "./chunks/chunk.DSZSVCSX.js"; +} from "./chunks/chunk.A4BE7OVG.js"; +import "./chunks/chunk.AW64EVPI.js"; import "./chunks/chunk.CJB5WKGN.js"; -import "./chunks/chunk.I2VMJQGZ.js"; +import "./chunks/chunk.NSDAXWU5.js"; import "./chunks/chunk.GR65TH73.js"; import { tab_panel_default @@ -30,21 +30,21 @@ import "./chunks/chunk.AOP56WXE.js"; import "./chunks/chunk.QXVYWNWE.js"; import { tag_default -} from "./chunks/chunk.ZVYU26EE.js"; -import "./chunks/chunk.CS2FJAVB.js"; +} from "./chunks/chunk.AT35VHTC.js"; +import "./chunks/chunk.L5V2RVPF.js"; import "./chunks/chunk.4CNJZ4VC.js"; import { switch_default -} from "./chunks/chunk.4TOASGPU.js"; +} from "./chunks/chunk.TJHEY5YZ.js"; import { tab_default -} from "./chunks/chunk.Q4JOTESV.js"; -import "./chunks/chunk.W6AXMEWH.js"; +} from "./chunks/chunk.WMTR3AJO.js"; +import "./chunks/chunk.WEYLHTLN.js"; import "./chunks/chunk.DK6N4THU.js"; import { tab_group_default -} from "./chunks/chunk.YD3SR4QD.js"; -import "./chunks/chunk.QYSV4AOQ.js"; +} from "./chunks/chunk.5YM23XW6.js"; +import "./chunks/chunk.IYOMW7E7.js"; import "./chunks/chunk.MYJL3FCG.js"; import { skeleton_default @@ -54,10 +54,10 @@ import { } from "./chunks/chunk.3XE2FHPY.js"; import { split_panel_default -} from "./chunks/chunk.IZLUHFAR.js"; -import "./chunks/chunk.K2IH25YY.js"; +} from "./chunks/chunk.IPBA3RL7.js"; +import "./chunks/chunk.CMVGJZQB.js"; import "./chunks/chunk.A63MQPPF.js"; -import "./chunks/chunk.ARHWQFOY.js"; +import "./chunks/chunk.OAUTL6YH.js"; import "./chunks/chunk.ROHOK2AY.js"; import { resize_observer_default @@ -66,22 +66,22 @@ import "./chunks/chunk.TVZOSL42.js"; import "./chunks/chunk.LY2W3OWK.js"; import { select_default -} from "./chunks/chunk.XYZE4CTX.js"; -import "./chunks/chunk.U4O2H2B7.js"; -import "./chunks/chunk.GH4I3V5W.js"; +} from "./chunks/chunk.I5J75LJ5.js"; +import "./chunks/chunk.NAMNOMAN.js"; +import "./chunks/chunk.GVMOZDVD.js"; import "./chunks/chunk.MVCCMDRT.js"; import "./chunks/chunk.ECLFWIFP.js"; import "./chunks/chunk.TQXSVZ6S.js"; import "./chunks/chunk.E3AD2PY7.js"; import { range_default -} from "./chunks/chunk.SRVZQDLF.js"; -import "./chunks/chunk.636GFVN7.js"; +} from "./chunks/chunk.4BS7E4WA.js"; +import "./chunks/chunk.JDMEV6W6.js"; import "./chunks/chunk.E77YYWGC.js"; import { rating_default -} from "./chunks/chunk.DAKI4CJK.js"; -import "./chunks/chunk.JOMOSJ6V.js"; +} from "./chunks/chunk.ZK7UG7BY.js"; +import "./chunks/chunk.D4HT5N2S.js"; import "./chunks/chunk.EPJHAO2T.js"; import "./chunks/chunk.WUT665TF.js"; import { @@ -90,7 +90,7 @@ import { import "./chunks/chunk.NTX55OI3.js"; import { radio_default -} from "./chunks/chunk.T7KYOX3S.js"; +} from "./chunks/chunk.3KSLHZUI.js"; import { radio_button_default } from "./chunks/chunk.ISYBJPN6.js"; @@ -103,7 +103,7 @@ import "./chunks/chunk.7QVMOEU7.js"; import "./chunks/chunk.ZDBZWNPG.js"; import { progress_bar_default -} from "./chunks/chunk.QWPPJ6MK.js"; +} from "./chunks/chunk.KHZVE7CV.js"; import { progress_ring_default } from "./chunks/chunk.ZC6DCL5V.js"; @@ -114,21 +114,21 @@ import { } from "./chunks/chunk.S5WM3SMG.js"; import "./chunks/chunk.BRDZYKRW.js"; import "./chunks/chunk.ZTQCHOVN.js"; -import "./chunks/chunk.K2ROYTBB.js"; +import "./chunks/chunk.QKLVXD76.js"; import "./chunks/chunk.43Z4T7VZ.js"; import { option_default -} from "./chunks/chunk.4RZCCS72.js"; -import "./chunks/chunk.RNPLPMI7.js"; +} from "./chunks/chunk.HJLSNBIP.js"; +import "./chunks/chunk.HP6XNQLT.js"; import "./chunks/chunk.JXTNYING.js"; import { popup_default } from "./chunks/chunk.7N7CKV33.js"; -import "./chunks/chunk.PTXGKMCM.js"; +import "./chunks/chunk.3EZHFHG3.js"; import "./chunks/chunk.HSWXQUHN.js"; import { menu_item_default -} from "./chunks/chunk.NQXFTJK2.js"; +} from "./chunks/chunk.IE2PU6PU.js"; import { menu_label_default } from "./chunks/chunk.V6UL33GH.js"; @@ -141,22 +141,22 @@ import "./chunks/chunk.S5PKGTUY.js"; import "./chunks/chunk.5BQ3JFXK.js"; import { input_default -} from "./chunks/chunk.CBWL3I6V.js"; +} from "./chunks/chunk.KLYKT4LR.js"; import { menu_default } from "./chunks/chunk.ZARLQFA2.js"; import "./chunks/chunk.EBCBKEXZ.js"; import "./chunks/chunk.JASCFJUS.js"; -import "./chunks/chunk.WMGEXFCN.js"; -import "./chunks/chunk.MZQVGI4G.js"; +import "./chunks/chunk.4VSLQP6A.js"; +import "./chunks/chunk.URMLYPYT.js"; import "./chunks/chunk.IPJHXFIL.js"; import { icon_button_default -} from "./chunks/chunk.YJFDGOZ2.js"; +} from "./chunks/chunk.77NS7GHF.js"; import { image_comparer_default -} from "./chunks/chunk.3XSEVTOL.js"; -import "./chunks/chunk.6OGSJDWU.js"; +} from "./chunks/chunk.3ZTS7K3T.js"; +import "./chunks/chunk.N3DJF6MW.js"; import "./chunks/chunk.KPESQDYT.js"; import { include_default @@ -184,24 +184,24 @@ import { } from "./chunks/chunk.6QA6KGPD.js"; import { drawer_default -} from "./chunks/chunk.IJORZ53P.js"; -import "./chunks/chunk.JURRYKMI.js"; +} from "./chunks/chunk.SAQU6XWJ.js"; +import "./chunks/chunk.6QIZUGEE.js"; import "./chunks/chunk.7KZHSE62.js"; import { dropdown_default -} from "./chunks/chunk.JJSRKCKW.js"; +} from "./chunks/chunk.NZULQTUJ.js"; import { copy_button_default -} from "./chunks/chunk.S6WKFUYV.js"; +} from "./chunks/chunk.VN7UQORF.js"; import { details_default -} from "./chunks/chunk.GBETTBLG.js"; -import "./chunks/chunk.SLMMUW6G.js"; +} from "./chunks/chunk.I6TGOM6Z.js"; +import "./chunks/chunk.CA4YGNMP.js"; import "./chunks/chunk.JH24DE2R.js"; import { dialog_default -} from "./chunks/chunk.A2BFSQ3C.js"; -import "./chunks/chunk.QFY5BTZB.js"; +} from "./chunks/chunk.3H4P7QZ5.js"; +import "./chunks/chunk.JEDU5SAS.js"; import "./chunks/chunk.JEBKOPXW.js"; import "./chunks/chunk.F5JVBNK3.js"; import "./chunks/chunk.RYFK2CD3.js"; @@ -209,28 +209,28 @@ import "./chunks/chunk.GS47GAZF.js"; import "./chunks/chunk.3BLTEGRR.js"; import { checkbox_default -} from "./chunks/chunk.SETBDGGP.js"; -import "./chunks/chunk.VADWVLYW.js"; +} from "./chunks/chunk.Z4DU36RP.js"; +import "./chunks/chunk.F5DJG2IC.js"; import "./chunks/chunk.DNDYQTWS.js"; import { color_picker_default -} from "./chunks/chunk.CKGCU5UH.js"; -import "./chunks/chunk.CFH2JNVK.js"; +} from "./chunks/chunk.JIZBX5ZW.js"; +import "./chunks/chunk.EAH27JYQ.js"; import "./chunks/chunk.2FPAOYP2.js"; import "./chunks/chunk.WCW35DM2.js"; -import "./chunks/chunk.QT6X3RZ4.js"; +import "./chunks/chunk.N5QISGWZ.js"; import "./chunks/chunk.I4BWCXWK.js"; import "./chunks/chunk.ESELY2US.js"; import "./chunks/chunk.FQQ5K3WY.js"; -import "./chunks/chunk.CMHBKN7G.js"; +import "./chunks/chunk.MZEJHEPM.js"; import "./chunks/chunk.I7IBIORS.js"; import "./chunks/chunk.LXDTFLWU.js"; -import "./chunks/chunk.MB643KRE.js"; +import "./chunks/chunk.IRURSJVI.js"; import "./chunks/chunk.RQ7JZ4R7.js"; import "./chunks/chunk.2VV6AF6A.js"; import "./chunks/chunk.YU7UY5RS.js"; -import "./chunks/chunk.OUERAG24.js"; -import "./chunks/chunk.JXNEB52G.js"; +import "./chunks/chunk.PJ7UYN3F.js"; +import "./chunks/chunk.HIEWE77I.js"; import "./chunks/chunk.QYWEKP2N.js"; import "./chunks/chunk.CG46NLLA.js"; import "./chunks/chunk.HKVRF64Z.js"; @@ -240,8 +240,8 @@ import { } from "./chunks/chunk.NTRI4B3M.js"; import { carousel_default -} from "./chunks/chunk.JQ4XSVZH.js"; -import "./chunks/chunk.4S2NCH2A.js"; +} from "./chunks/chunk.VVCN2VEU.js"; +import "./chunks/chunk.EXPSTLYX.js"; import "./chunks/chunk.HF7GESMZ.js"; import "./chunks/chunk.F4VGSDIW.js"; import "./chunks/chunk.HUJPN4KF.js"; @@ -252,8 +252,8 @@ import "./chunks/chunk.HBCFOWLT.js"; import "./chunks/chunk.FQH4RL5J.js"; import { button_default -} from "./chunks/chunk.ZH2KM23Q.js"; -import "./chunks/chunk.ANK5P6NL.js"; +} from "./chunks/chunk.37J3NAYG.js"; +import "./chunks/chunk.FY6XFGKF.js"; import "./chunks/chunk.O5224PTR.js"; import "./chunks/chunk.SZ6QMU5T.js"; import "./chunks/chunk.JWVNKU5Y.js"; @@ -265,57 +265,46 @@ import "./chunks/chunk.F3KB2RIB.js"; import "./chunks/chunk.EJOUFVOH.js"; import "./chunks/chunk.OPZTO4F2.js"; import "./chunks/chunk.G227ZG7E.js"; -import { - breadcrumb_default -} from "./chunks/chunk.6OPQXAZ4.js"; import { badge_default } from "./chunks/chunk.5F7GQVVI.js"; -import "./chunks/chunk.RXJPYCW4.js"; -import "./chunks/chunk.QF5Z6UDG.js"; +import { + breadcrumb_default +} from "./chunks/chunk.6OPQXAZ4.js"; +import "./chunks/chunk.TN7S72NW.js"; +import "./chunks/chunk.Z6EIXACR.js"; import { breadcrumb_item_default } from "./chunks/chunk.APCEX7KX.js"; import "./chunks/chunk.KH7CDL5Q.js"; import "./chunks/chunk.RGQ7NICF.js"; import { - animation_default -} from "./chunks/chunk.SSHR2JDI.js"; -import "./chunks/chunk.ZPH3EXSL.js"; -import "./chunks/chunk.UG4GPH4N.js"; -import { - getAnimationNames, - getEasingNames -} from "./chunks/chunk.RAB4VAMR.js"; + animated_image_default +} from "./chunks/chunk.E4DVWLFF.js"; +import "./chunks/chunk.IDJPPGR6.js"; +import "./chunks/chunk.WIDVIH73.js"; import { avatar_default -} from "./chunks/chunk.6IYKUC4J.js"; -import "./chunks/chunk.DRMJWHYW.js"; +} from "./chunks/chunk.7MNXVO5H.js"; +import "./chunks/chunk.YPIYOHSV.js"; import "./chunks/chunk.GTZHBAAH.js"; -import "./chunks/chunk.TN7S72NW.js"; -import "./chunks/chunk.Z6EIXACR.js"; +import "./chunks/chunk.RXJPYCW4.js"; +import "./chunks/chunk.QF5Z6UDG.js"; import { alert_default -} from "./chunks/chunk.Y44PSRDY.js"; -import "./chunks/chunk.PMQVOPBU.js"; -import "./chunks/chunk.EUMKZFJV.js"; +} from "./chunks/chunk.ZMNSPLYC.js"; +import "./chunks/chunk.UKBSSTC3.js"; +import "./chunks/chunk.HECO4DZ2.js"; import "./chunks/chunk.OGR6IZGY.js"; import "./chunks/chunk.RCZVQXWP.js"; import "./chunks/chunk.B4BZKR24.js"; import "./chunks/chunk.S7GYYU7Z.js"; import "./chunks/chunk.LX7UG5WS.js"; -import "./chunks/chunk.2URMUHDY.js"; -import "./chunks/chunk.NYIIDP5N.js"; -import "./chunks/chunk.UZVKBFXH.js"; -import "./chunks/chunk.UP75L23G.js"; import "./chunks/chunk.NH3SRVOC.js"; import "./chunks/chunk.QPSNFEB2.js"; import "./chunks/chunk.O27EHOBW.js"; -import "./chunks/chunk.M2WZ4AXO.js"; -import { - animated_image_default -} from "./chunks/chunk.TQRRFFWX.js"; -import "./chunks/chunk.THDZPG3S.js"; +import "./chunks/chunk.2URMUHDY.js"; +import "./chunks/chunk.NYIIDP5N.js"; import "./chunks/chunk.QQHXFE7X.js"; import "./chunks/chunk.2L6GHXIJ.js"; import { @@ -327,14 +316,25 @@ import "./chunks/chunk.P7ZG6EMR.js"; import "./chunks/chunk.X772EESY.js"; import "./chunks/chunk.4UBLNU4Z.js"; import "./chunks/chunk.33QRBYPI.js"; -import "./chunks/chunk.FA5RT4K4.js"; -import "./chunks/chunk.K23QWHWK.js"; -import "./chunks/chunk.URGPTPT3.js"; +import "./chunks/chunk.UZVKBFXH.js"; +import "./chunks/chunk.UP75L23G.js"; import { getBasePath, setBasePath } from "./chunks/chunk.3Y6SB6QS.js"; -import "./chunks/chunk.WIDVIH73.js"; +import "./chunks/chunk.M2WZ4AXO.js"; +import { + animation_default +} from "./chunks/chunk.6PGWJ74B.js"; +import "./chunks/chunk.UYEAPXNR.js"; +import { + getAnimationNames, + getEasingNames +} from "./chunks/chunk.RAB4VAMR.js"; +import "./chunks/chunk.FA5RT4K4.js"; +import "./chunks/chunk.K23QWHWK.js"; +import "./chunks/chunk.URGPTPT3.js"; +import "./chunks/chunk.UG4GPH4N.js"; import "./chunks/chunk.CXZZ2LVK.js"; import "./chunks/chunk.KIILAQWQ.js"; export { diff --git a/dist/types/vue/index.d.ts b/dist/types/vue/index.d.ts index 4306804f..27305923 100644 --- a/dist/types/vue/index.d.ts +++ b/dist/types/vue/index.d.ts @@ -1,8 +1,8 @@ import type { DefineComponent } from "vue"; import type { SlAlert } from "../../components/alert/alert.component.js"; -import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js"; import type { SlAnimation } from "../../components/animation/animation.component.js"; +import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js"; import type { SlAvatar } from "../../components/avatar/avatar.component.js"; import type { SlBadge } from "../../components/badge/badge.component.js"; import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js"; @@ -83,25 +83,6 @@ the alert will not close on its own. */ onSlAfterHide?: (e: CustomEvent) => void; }; -type SlAnimatedImageProps = { - /** The path to the image to load. */ - src?: SlAnimatedImage["src"]; - /** A description of the image used by assistive devices. */ - alt?: SlAnimatedImage["alt"]; - /** Plays the animation. When this attribute is remove, the animation will pause. */ - play?: SlAnimatedImage["play"]; - /** */ - animatedImage?: SlAnimatedImage["animatedImage"]; - /** */ - frozenFrame?: SlAnimatedImage["frozenFrame"]; - /** */ - isLoaded?: SlAnimatedImage["isLoaded"]; - /** Emitted when the image loads successfully. */ - onSlLoad?: (e: CustomEvent) => void; - /** Emitted when the image fails to load. */ - onSlError?: (e: CustomEvent) => void; -}; - type SlAnimationProps = { /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */ name?: SlAnimation["name"]; @@ -144,6 +125,25 @@ value can be changed without causing the animation to restart. */ onSlStart?: (e: CustomEvent) => void; }; +type SlAnimatedImageProps = { + /** The path to the image to load. */ + src?: SlAnimatedImage["src"]; + /** A description of the image used by assistive devices. */ + alt?: SlAnimatedImage["alt"]; + /** Plays the animation. When this attribute is remove, the animation will pause. */ + play?: SlAnimatedImage["play"]; + /** */ + animatedImage?: SlAnimatedImage["animatedImage"]; + /** */ + frozenFrame?: SlAnimatedImage["frozenFrame"]; + /** */ + isLoaded?: SlAnimatedImage["isLoaded"]; + /** Emitted when the image loads successfully. */ + onSlLoad?: (e: CustomEvent) => void; + /** Emitted when the image fails to load. */ + onSlError?: (e: CustomEvent) => void; +}; + type SlAvatarProps = { /** The image source to use for the avatar. */ image?: SlAvatar["image"]; @@ -1591,6 +1591,25 @@ export type CustomElements = { */ "sl-alert": DefineComponent; + /** + * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). + * --- + * + * + * ### **Events:** + * - **sl-cancel** - Emitted when the animation is canceled. + * - **sl-finish** - Emitted when the animation finishes. + * - **sl-start** - Emitted when the animation starts or restarts. + * + * ### **Methods:** + * - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback. + * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction. + * + * ### **Slots:** + * - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `` elements. + */ + "sl-animation": DefineComponent; + /** * A component for displaying animated GIFs and WEBPs that play and pause on interaction. * --- @@ -1613,25 +1632,6 @@ export type CustomElements = { */ "sl-animated-image": DefineComponent; - /** - * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). - * --- - * - * - * ### **Events:** - * - **sl-cancel** - Emitted when the animation is canceled. - * - **sl-finish** - Emitted when the animation finishes. - * - **sl-start** - Emitted when the animation starts or restarts. - * - * ### **Methods:** - * - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback. - * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction. - * - * ### **Slots:** - * - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `` elements. - */ - "sl-animation": DefineComponent; - /** * Avatars are used to represent a person or object. * --- diff --git a/dist/vscode.html-custom-data.json b/dist/vscode.html-custom-data.json index 36d08d01..a1540648 100644 --- a/dist/vscode.html-custom-data.json +++ b/dist/vscode.html-custom-data.json @@ -40,33 +40,6 @@ } ] }, - { - "name": "sl-animated-image", - "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with ``.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with ``.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.", - "attributes": [ - { - "name": "src", - "description": "The path to the image to load.", - "values": [] - }, - { - "name": "alt", - "description": "A description of the image used by assistive devices.", - "values": [] - }, - { - "name": "play", - "description": "Plays the animation. When this attribute is remove, the animation will pause.", - "values": [] - } - ], - "references": [ - { - "name": "Documentation", - "url": "https://shoelace.style/components/animated-image" - } - ] - }, { "name": "sl-animation", "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **sl-cancel** - Emitted when the animation is canceled.\n- **sl-finish** - Emitted when the animation finishes.\n- **sl-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `` elements.", @@ -134,6 +107,33 @@ } ] }, + { + "name": "sl-animated-image", + "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with ``.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with ``.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.", + "attributes": [ + { + "name": "src", + "description": "The path to the image to load.", + "values": [] + }, + { + "name": "alt", + "description": "A description of the image used by assistive devices.", + "values": [] + }, + { + "name": "play", + "description": "Plays the animation. When this attribute is remove, the animation will pause.", + "values": [] + } + ], + "references": [ + { + "name": "Documentation", + "url": "https://shoelace.style/components/animated-image" + } + ] + }, { "name": "sl-avatar", "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with ``.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.", diff --git a/dist/web-types.json b/dist/web-types.json index 1511b0a6..87e3c468 100644 --- a/dist/web-types.json +++ b/dist/web-types.json @@ -105,77 +105,6 @@ ] } }, - { - "name": "sl-animated-image", - "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with ``.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with ``.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.", - "doc-url": "", - "attributes": [ - { - "name": "src", - "description": "The path to the image to load.", - "value": { "type": "string" } - }, - { - "name": "alt", - "description": "A description of the image used by assistive devices.", - "value": { "type": "string" } - }, - { - "name": "play", - "description": "Plays the animation. When this attribute is remove, the animation will pause.", - "value": { "type": "boolean" } - } - ], - "slots": [ - { - "name": "play-icon", - "description": "Optional play icon to use instead of the default. Works best with ``." - }, - { - "name": "pause-icon", - "description": "Optional pause icon to use instead of the default. Works best with ``." - } - ], - "events": [ - { - "name": "sl-load", - "description": "Emitted when the image loads successfully." - }, - { - "name": "sl-error", - "description": "Emitted when the image fails to load." - } - ], - "js": { - "properties": [ - { - "name": "src", - "description": "The path to the image to load.", - "value": { "type": "string" } - }, - { - "name": "alt", - "description": "A description of the image used by assistive devices.", - "value": { "type": "string" } - }, - { - "name": "play", - "description": "Plays the animation. When this attribute is remove, the animation will pause.", - "value": { "type": "boolean" } - } - ], - "events": [ - { - "name": "sl-load", - "description": "Emitted when the image loads successfully." - }, - { - "name": "sl-error", - "description": "Emitted when the image fails to load." - } - ] - } - }, { "name": "sl-animation", "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **sl-cancel** - Emitted when the animation is canceled.\n- **sl-finish** - Emitted when the animation finishes.\n- **sl-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `` elements.", @@ -331,6 +260,77 @@ ] } }, + { + "name": "sl-animated-image", + "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with ``.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with ``.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.", + "doc-url": "", + "attributes": [ + { + "name": "src", + "description": "The path to the image to load.", + "value": { "type": "string" } + }, + { + "name": "alt", + "description": "A description of the image used by assistive devices.", + "value": { "type": "string" } + }, + { + "name": "play", + "description": "Plays the animation. When this attribute is remove, the animation will pause.", + "value": { "type": "boolean" } + } + ], + "slots": [ + { + "name": "play-icon", + "description": "Optional play icon to use instead of the default. Works best with ``." + }, + { + "name": "pause-icon", + "description": "Optional pause icon to use instead of the default. Works best with ``." + } + ], + "events": [ + { + "name": "sl-load", + "description": "Emitted when the image loads successfully." + }, + { + "name": "sl-error", + "description": "Emitted when the image fails to load." + } + ], + "js": { + "properties": [ + { + "name": "src", + "description": "The path to the image to load.", + "value": { "type": "string" } + }, + { + "name": "alt", + "description": "A description of the image used by assistive devices.", + "value": { "type": "string" } + }, + { + "name": "play", + "description": "Plays the animation. When this attribute is remove, the animation will pause.", + "value": { "type": "boolean" } + } + ], + "events": [ + { + "name": "sl-load", + "description": "Emitted when the image loads successfully." + }, + { + "name": "sl-error", + "description": "Emitted when the image fails to load." + } + ] + } + }, { "name": "sl-avatar", "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with ``.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.", diff --git a/frameworks/angular/index.html b/frameworks/angular/index.html new file mode 100644 index 00000000..23eebe30 --- /dev/null +++ b/frameworks/angular/index.html @@ -0,0 +1,599 @@ + + + + + + + Angular + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Angular

+

+ Angular + plays nice + with custom elements, so you can use Nebula in your Angular apps with ease. +

+

+ Installation +

+

+ Download the npm package +

+

To add Nebula to your Angular app, install the package from npm.

+ 
npm install @onsonr/nebula
+
+

+ Update the Angular Configuration +

+

+ Next, include a theme. In this example, we’ll import the light theme. +

+

+ Its also important to load the components by using a <script> tag into the index.html + file. However, the Angular way to do it is by adding a script configurations into your angular.json file as + follows: +

+ 
"architect": {
+  "build": {
+    ...
+    "options": {
+      ...
+      "styles": [
+        "src/styles.scss",
+        "@onsonr/nebula/dist/themes/light.css"
+       ],
+      "scripts": [
+        "@onsonr/nebula/dist/shoelace.js"
+      ]
+      ...
+
+

+ Setting up the base path +

+

+ Next, set the base path for icons and + other assets in the main.ts. In this example, we’ll use the CDN as a base path. +

+ 
import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/');
+
+ +

+ Configuration +

+

Then make sure to apply the custom elements schema as shown below.

+ 
import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+
+

+ Reference Nebula components in your Angular component code +

+ 
import { SlDrawer } from '@onsonr/nebula';
+
+@Component({
+  selector: 'app-drawer-example',
+  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>'
+})
+export class DrawerExampleComponent implements OnInit {
+
+  // use @ViewChild to get a reference to the #drawer element within component template
+  @ViewChild('drawer')
+  drawer?: ElementRef<SlDrawer>;
+
+  ...
+
+  constructor(...) {
+  }
+
+  ngOnInit() {
+  }
+
+  ...
+
+  showDrawer() {
+    // use nativeElement to access Nebula components
+    this.drawer?.nativeElement.show();
+  }
+}
+
+

Now you can start using Nebula components in your app!

+ +
+
+
+ + diff --git a/frameworks/react/index.html b/frameworks/react/index.html new file mode 100644 index 00000000..4867c176 --- /dev/null +++ b/frameworks/react/index.html @@ -0,0 +1,743 @@ + + + + + + + React + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

React

+

+ Nebula offers a React version of every component to provide an idiomatic experience for React users. You can + easily toggle between HTML and React examples throughout the documentation. +

+

+ Installation +

+

To add Nebula to your React app, install the package from npm.

+ 
npm install @onsonr/nebula
+
+

+ Next, include a theme and set the + base path for icons and other assets. In + this example, we’ll import the light theme and use the CDN as a base path. +

+ 
// App.jsx
+import '@onsonr/nebula/dist/themes/light.css';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/');
+
+ +

Now you can start using components!

+

Preact

+

+ Preact users facing type errors using components may benefit from setting “paths” in their tsconfig.json so + that react types will instead resolve to preact/compat as described in + Preact’s typescript documentation. +

+

Usage

+

+ Importing Components +

+

+ Every Nebula component is available to import as a React component. Note that we’re importing the + <SlButton> React component instead of the <sl-button> + custom element in the example below. +

+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+
+const MyComponent = () => <SlButton variant="primary">Click me</SlButton>;
+
+export default MyComponent;
+
+

+ Notes about tree shaking +

+

Previously, it was recommended to import from a single entrypoint like so:

+ 
import { SlButton } from '@onsonr/nebula/dist/react';
+
+

+ However, tree-shaking extra Nebula components proved to be a challenge. As a result, we now recommend + cherry-picking components you want to use, rather than importing from a single entrypoint. +

+ 
- import { SlButton } from '@onsonr/nebula/dist/react';
++ import SlButton from '@onsonr/nebula/dist/react/button';
+
+

You can find a copy + paste import for each component in the “importing” section of its documentation.

+

+ Event Handling +

+

+ Many Nebula components emit + custom events. For example, the input component emits the sl-input event + when it receives input. In React, you can listen for the event using onSlInput. +

+

Here’s how you can bind the input’s value to a state variable.

+ 
import { useState } from 'react';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+function MyComponent() {
+  const [value, setValue] = useState('');
+
+  return <SlInput value={value} onSlInput={event => setValue(event.target.value)} />;
+}
+
+export default MyComponent;
+
+

+ If you’re using TypeScript, it’s important to note that event.target will be a reference to the + underlying custom element. You can use (event.target as any).value as a quick fix, or you can + strongly type the event target as shown below. +

+ 
import { useState } from 'react';
+import SlInput from '@onsonr/nebula/dist/react/input';
+import type SlInputElement from '@onsonr/nebula/dist/components/input/input';
+
+function MyComponent() {
+  const [value, setValue] = useState('');
+
+  return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
+}
+
+export default MyComponent;
+
+

You can also import the event type for use in your callbacks, shown below.

+ 
import { useCallback, useState } from 'react';
+import SlInput, { type SlInputEvent } from '@onsonr/nebula/dist/react/input';
+import type SlInputElement from '@onsonr/nebula/dist/components/input/input';
+
+function MyComponent() {
+  const [value, setValue] = useState('');
+  const onInput = useCallback((event: SlInputEvent) => {
+    setValue(event.detail);
+  }, []);
+
+  return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
+}
+
+export default MyComponent;
+
+

+ Testing with Jest +

+

+ Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it + doesn’t run in a real browser). Fortunately, + Jest has + made a number of strides to support web components and provide additional browser APIs. However, it’s still + not a complete replication of a browser environment. +

+

Here are some tips that will help smooth things over if you’re having trouble with Jest + Nebula.

+ +

+ Upgrade Jest +

+

+ Jest underwent a major revamp and received support for web components in + version 26.5.0 + when it introduced + JSDOM 16.2.0. This release also included a number of mocks for built-in browser functions such as + MutationObserver, document.createRange, and others. +

+

+ If you’re using + Create React App, you can update react-scripts which will also update Jest. +

+ 
npm install react-scripts@latest
+
+

+ Mock Missing APIs +

+

+ Some components use window.matchMedia, but this function isn’t supported by JSDOM so you’ll + need to mock it yourself. +

+

In src/setupTests.js, add the following.

+ 
Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+});
+
+

+ For more details, refer to Jest’s + manual mocking + documentation. +

+

+ Transform ES Modules +

+

+ ES Modules are a + well-supported browser standard. This is how Nebula is distributed, but most React apps expect CommonJS. As a result, you’ll probably run + into the following error. +

+ 
Error: Unable to import outside of a module
+
+

+ To fix this, add the following to your package.json which tells the transpiler to process + Nebula modules. +

+ 
{
+  "jest": {
+    "transformIgnorePatterns": ["node_modules/(?!(@shoelace))"]
+  }
+}
+
+

+ These instructions are for apps created via Create React App. If you’re using Jest directly, you can add + transformIgnorePatterns directly into jest.config.js. +

+

+ For more details, refer to Jest’s + transformIgnorePatterns customization + documentation. +

+ +
+
+
+ + diff --git a/frameworks/templ/index.html b/frameworks/templ/index.html new file mode 100644 index 00000000..ccc4cbc4 --- /dev/null +++ b/frameworks/templ/index.html @@ -0,0 +1,458 @@ + + + + + + + Templ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Templ (golang)

+

Nebula was designed with the purpose to enable the creation of HyperMedia Systems in Golang.

+

+ Installation +

+

TODO

+
+
+
+ + diff --git a/frameworks/vue-2/index.html b/frameworks/vue-2/index.html new file mode 100644 index 00000000..41b2d33c --- /dev/null +++ b/frameworks/vue-2/index.html @@ -0,0 +1,587 @@ + + + + + + + Vue (version 2) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Vue (version 2)

+

+ Vue + plays nice + with custom elements, so you can use Nebula in your Vue apps with ease. +

+ +

+ Installation +

+

To add Nebula to your Vue app, install the package from npm.

+ 
npm install @onsonr/nebula
+
+

+ Next, include a theme and set the + base path for icons and other assets. In + this example, we’ll import the light theme and use the CDN as a base path. +

+ 
import '@onsonr/nebula/dist/themes/light.css';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/');
+
+ +

+ Configuration +

+

+ You’ll need to tell Vue to ignore Nebula components. This is pretty easy because they all start with + sl-. +

+ 
import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.ignoredElements = [/sl-/];
+
+const app = new Vue({
+  render: h => h(App)
+});
+
+app.$mount('#app');
+
+

Now you can start using Nebula components in your app!

+

Usage

+

+ Binding Complex Data +

+

+ When binding complex data such as objects and arrays, use the .prop modifier to make Vue bind + them as a property instead of an attribute. +

+ 
<sl-color-picker :swatches.prop="mySwatches" />
+
+

+ Two-way Binding +

+

+ One caveat is there’s currently + no support for v-model on custom elements, but you can still achieve two-way binding manually. +

+ 
<!-- This doesn't work -->
+<sl-input v-model="name"></sl-input>
+<!-- This works, but it's a bit longer -->
+<sl-input :value="name" @input="name = $event.target.value"></sl-input>
+
+

+ If that’s too verbose for your liking, you can use a custom directive instead. + This utility + adds a custom directive that will work just like v-model but for Nebula components. To install + it, use this command. +

+ 
npm install @shoelace-style/vue-sl-model@1
+
+

Next, import the directive and enable it like this.

+ 
import Vue from 'vue';
+import NebulaModelDirective from '@shoelace-style/vue-sl-model';
+import App from './App.vue';
+
+Vue.use(NebulaModelDirective);
+Vue.config.ignoredElements = [/sl-/];
+
+const app = new Vue({
+  render: h => h(App)
+});
+
+app.$mount('#app');
+
+

Now you can use the v-sl-model directive to keep your data in sync!

+ 
<sl-input v-sl-model="name"></sl-input>
+
+ +
+
+
+ + diff --git a/frameworks/vue/index.html b/frameworks/vue/index.html new file mode 100644 index 00000000..0367f1d1 --- /dev/null +++ b/frameworks/vue/index.html @@ -0,0 +1,630 @@ + + + + + + + Vue + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Vue

+

+ Vue + plays nice + with custom elements, so you can use Nebula in your Vue apps with ease. +

+ +

+ Installation +

+

To add Nebula to your Vue app, install the package from npm.

+ 
npm install @onsonr/nebula
+
+

+ Next, include a theme and set the + base path for icons and other assets. In + this example, we’ll import the light theme and use the CDN as a base path. +

+ 
// main.js or main.ts
+import '@onsonr/nebula/dist/themes/light.css';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/');
+
+ +

+ Configuration +

+

+ If you haven’t configured your Vue.js project to work with custom elements/web components, follow + the instructions here + based on your project type to ensure your project will not throw an error when it encounters a custom + element. +

+

Now you can start using Nebula components in your app!

+

Types

+

+ Once you have configured your application for custom elements, you should be able to use Nebula in your + application without it causing any errors. Unfortunately, this doesn’t register the custom elements to + behave like components built using Vue. To provide autocomplete information and type safety for your + components, you can import the Nebula Vue types into your tsconfig.json to get better + integration in your standard Vue and JSX templates. +

+ 
{
+  "compilerOptions": {
+    "types": ["@onsonr/nebula/dist/types/vue"]
+  }
+}
+
+

Usage

+

+ QR code generator example +

+ 
<template>
+  <div class="container">
+    <h1>QR code generator</h1>
+
+    <sl-input maxlength="255" clearable label="Value" v-model="qrCode"></sl-input>
+
+    <sl-qr-code :value="qrCode"></sl-qr-code>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import '@onsonr/nebula/dist/components/qr-code/qr-code.js';
+  import '@onsonr/nebula/dist/components/input/input.js';
+
+  const qrCode = ref();
+</script>
+
+<style>
+  .container {
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  sl-input {
+    margin: var(--sl-spacing-large) 0;
+  }
+</style>
+
+

+ Binding Complex Data +

+

+ When binding complex data such as objects and arrays, use the .prop modifier to make Vue bind + them as a property instead of an attribute. +

+ 
<sl-color-picker :swatches.prop="mySwatches" />
+
+

+ Two-way Binding +

+

+ One caveat is there’s currently + no support for v-model on custom elements, but you can still achieve two-way binding manually. +

+ 
<!-- This doesn't work -->
+<sl-input v-model="name"></sl-input>
+<!-- This works, but it's a bit longer -->
+<sl-input :value="name" @input="name = $event.target.value"></sl-input>
+
+

+ If that’s too verbose for your liking, you can use a custom directive instead. + This utility + adds a custom directive that will work just like v-model but for Nebula components. +

+ +

Slots

+

+ Slots in Nebula/web components are functionally the same as basic slots in Vue. Slots can be assigned to + elements using the slot attribute followed by the name of the slot it is being assigned to. +

+

Here is an example:

+ 
<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" :open="drawerIsOpen">
+  This drawer slides in from the start.
+  <div slot="footer">
+    <sl-button variant="primary" @click=" drawerIsOpen = false">Close</sl-button>
+  </div>
+</sl-drawer>
+
+
+
+
+ + diff --git a/getting-started/customizing/index.html b/getting-started/customizing/index.html new file mode 100644 index 00000000..997c9028 --- /dev/null +++ b/getting-started/customizing/index.html @@ -0,0 +1,773 @@ + + + + + + + Customizing + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Customizing

+

+ Nebula components can be customized at a high level through design tokens. This gives you control over theme + colors and general styling. For more advanced customizations, you can make use of CSS parts and custom + properties to target individual components. +

+

+ Design Tokens +

+

+ Nebula makes use of several design tokens to provide a consistent appearance across components. You can + customize them and use them in your own application with pure CSS — no preprocessor required. +

+

+ Design tokens offer a high-level way to customize the library with minimal effort. There are no + component-specific variables, however, as design tokens are intended to be generic and highly reusable. To + customize an individual component, refer to the section entitled CSS Parts. +

+

+ Design tokens are accessed through CSS custom properties that are defined in your theme. Because design + tokens live at the page level, they’re prefixed with --sl- to avoid collisions with other + libraries. +

+

+ To customize a design token, simply override it in your stylesheet using a :root block. Here’s + an example that changes the primary theme to purple based on existing + color primitives. +

+ 
:root {
+  /* Changes the primary theme color to purple using primitives */
+  --sl-color-primary-50: var(--sl-color-purple-50);
+  --sl-color-primary-100: var(--sl-color-purple-100);
+  --sl-color-primary-200: var(--sl-color-purple-200);
+  --sl-color-primary-300: var(--sl-color-purple-300);
+  --sl-color-primary-400: var(--sl-color-purple-400);
+  --sl-color-primary-500: var(--sl-color-purple-500);
+  --sl-color-primary-600: var(--sl-color-purple-600);
+  --sl-color-primary-700: var(--sl-color-purple-700);
+  --sl-color-primary-800: var(--sl-color-purple-800);
+  --sl-color-primary-900: var(--sl-color-purple-900);
+  --sl-color-primary-950: var(--sl-color-purple-950);
+}
+
+

+ Many design tokens are described further along in this documentation. For a complete list, refer to + src/themes/light.css in the project’s + source code. +

+

+ CSS Parts +

+

+ Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to + customize individual components. Again, this is done with pure CSS — no preprocessor required. +

+

+ Nebula components use a + shadow DOM + to encapsulate their styles and behaviors. As a result, you can’t simply target their internals with the + usual CSS selectors. Instead, components expose “parts” that can be targeted with the + CSS part selector, or ::part(). +

+

Here’s an example that modifies buttons with the tomato-button class.

+ +
+
+ Tomato Button + + + +
+ +
+
+ +
+
+ 
<sl-button class="tomato-button"> Tomato Button </sl-button>
+
+<style>
+  .tomato-button::part(base) {
+    background: var(--sl-color-neutral-0);
+    border: solid 1px tomato;
+  }
+
+  .tomato-button::part(base):hover {
+    background: rgba(255, 99, 71, 0.1);
+  }
+
+  .tomato-button::part(base):active {
+    background: rgba(255, 99, 71, 0.2);
+  }
+
+  .tomato-button::part(base):focus-visible {
+    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
+  }
+
+  .tomato-button::part(label) {
+    color: tomato;
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ +

+ At first glance, this approach might seem a bit verbose or even limiting, but it comes with a few important + advantages: +

+
    +
  • +

    + Customizations can be made to components with explicit selectors, such as ::part(icon), + rather than implicit selectors, such as .button > div > span + .icon, that are much + more fragile. +

    +
    • +
  • +

    + The internal structure of a component will likely change as it evolves. By exposing CSS parts through an + API, the internals can be reworked without fear of breaking customizations as long as its parts remain + intact. +

    +
    • +
  • +

    + It encourages us to think more about how components are designed and how customizations should be + allowed before users can take advantage of them. Once we opt a part into the component’s API, it’s + guaranteed to be supported and can’t be removed until a major version of the library is released. +

    +
    • +
+

+ Most (but not all) components expose parts. You can find them in each component’s API documentation under + the “CSS Parts” section. +

+

+ Custom Properties +

+

+ For convenience, some components expose CSS custom properties you can override. These are not design tokens, + nor do they have the same --sl- prefix since they’re scoped to a component. +

+

You can set custom properties on a component in your stylesheet.

+ 
sl-avatar {
+  --size: 6rem;
+}
+
+

This will also work if you need to target a subset of components with a specific class.

+ 
sl-avatar.your-class {
+  --size: 6rem;
+}
+
+

Alternatively, you can set them inline directly on the element.

+ 
<sl-avatar style="--size: 6rem;"></sl-avatar>
+
+

+ Not all components expose CSS custom properties. For those that do, they can be found in the component’s API + documentation. +

+

+ Animations +

+

+ Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the + Web Animations API + rather than CSS. However, you can still customize them through Nebula’s animation registry. If a component + has customizable animations, they’ll be listed in the “Animation” section of its documentation. +

+

+ To customize a default animation, use the setDefaultAnimation() method. The function accepts an + animation name (found in the component’s docs) and an object with keyframes, and + options or null to disable the animation. +

+

This example will make all dialogs use a custom show animation.

+ 
import { setDefaultAnimation } from '@onsonr/nebula/dist/utilities/animation-registry.js';
+
+// Change the default animation for all dialogs
+setDefaultAnimation('dialog.show', {
+  keyframes: [
+    { transform: 'rotate(-10deg) scale(0.5)', opacity: '0' },
+    { transform: 'rotate(0deg) scale(1)', opacity: '1' }
+  ],
+  options: {
+    duration: 500
+  }
+});
+
+ +

+ If you only want to target a single component, use the setAnimation() method instead. This + function accepts an element, an animation name, and an object comprised of animation + keyframes and options. +

+

In this example, only the target dialog will use a custom show animation.

+ 
import { setAnimation } from '@onsonr/nebula/dist/utilities/animation-registry.js';
+
+// Change the animation for a single dialog
+const dialog = document.querySelector('#my-dialog');
+
+setAnimation(dialog, 'dialog.show', {
+  keyframes: [
+    { transform: 'rotate(-10deg) scale(0.5)', opacity: '0' },
+    { transform: 'rotate(0deg) scale(1)', opacity: '1' }
+  ],
+  options: {
+    duration: 500
+  }
+});
+
+

+ To learn more about creating Web Animations, refer to the documentation for + Element.animate(). +

+ +
+
+
+ + diff --git a/getting-started/form-controls/index.html b/getting-started/form-controls/index.html new file mode 100644 index 00000000..795dacfa --- /dev/null +++ b/getting-started/form-controls/index.html @@ -0,0 +1,1899 @@ + + + + + + + Form Controls + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Form Controls

+

+ Every Nebula component makes use of a + shadow DOM + to encapsulate markup, styles, and behavior. One caveat of this approach is that native + <form> elements do not recognize form controls located inside a shadow root. +

+

+ Nebula solves this problem by using the + formdata + event, which is + available in all modern browsers. This means, when a form is submitted, Nebula form controls will automatically append their values to the + FormData object that’s used to submit the form. In most cases, things will “just work.” + However, if you’re using a form serialization library, it might need to be adapted to recognize Nebula form + controls. +

+ +

+ Data Serialization +

+

+ Serialization is just a fancy word for collecting form data. If you’re relying on standard form submissions, + e.g. <form action="...">, you can probably skip this section. However, most modern apps + use the + Fetch API + or a library such as + axios + to submit forms using JavaScript. +

+

+ The + FormData + interface offers a standard way to serialize forms in the browser. You can create a + FormData object from any <form> element like this. +

+ 
const form = document.querySelector('form');
+const data = new FormData(form);
+
+// All form control data is available in a FormData object
+
+

+ However, some folks find FormData tricky to work with or they need to pass a JSON payload to + their server. To accommodate this, Nebula offers a serialization utility that gathers form data and returns + a simple JavaScript object instead. +

+ 
import { serialize } from '@onsonr/nebula/dist/utilities/form.js';
+
+const form = document.querySelector('form');
+const data = serialize(form);
+
+// All form control data is available in a plain object
+
+

+ This results in an object with name/value pairs that map to each form control. If more than one form control + shares the same name, the values will be passed as an array, e.g. + { name: ['value1', 'value2'] }. +

+

+ Constraint Validation +

+

+ Client-side validation can be enabled through the browser’s + Constraint Validation API + for Nebula form controls. You can activate it using attributes such as required, + pattern, minlength, maxlength, etc. Nebula implements many of the + same attributes as native form controls, but check the documentation for a list of supported properties for + each component. +

+

+ If you don’t want to use client-side validation, you can suppress this behavior by adding + novalidate to the surrounding <form> element. +

+ + +

+ Required Fields +

+

+ To make a field required, use the required attribute. Required fields will automatically + receive a * after their labels. This is configurable through the + --sl-input-required-content custom property. +

+

The form will not be submitted if a required field is incomplete.

+ +
+
+
+ +
+ + Birds + Cats + Dogs + Other + +
+ +
+ Check me before submitting +

+ Submit +
+ + + +
+ +
+
+ +
+
+ 
<form class="input-validation-required">
+  <sl-input name="name" label="Name" required></sl-input>
+  <br />
+  <sl-select label="Favorite Animal" clearable required>
+    <sl-option value="birds">Birds</sl-option>
+    <sl-option value="cats">Cats</sl-option>
+    <sl-option value="dogs">Dogs</sl-option>
+    <sl-option value="other">Other</sl-option>
+  </sl-select>
+  <br />
+  <sl-textarea name="comment" label="Comment" required></sl-textarea>
+  <br />
+  <sl-checkbox required>Check me before submitting</sl-checkbox>
+  <br /><br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.input-validation-required');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-checkbox'),
+    customElements.whenDefined('sl-input'),
+    customElements.whenDefined('sl-option'),
+    customElements.whenDefined('sl-select'),
+    customElements.whenDefined('sl-textarea')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
+import SlInput from '@onsonr/nebula/dist/react/input';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
+import SlSelect from '@onsonr/nebula/dist/react/select';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
+
+const App = () => {
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <SlInput name="name" label="Name" required />
+      <br />
+      <SlSelect label="Favorite Animal" clearable required>
+        <SlMenuItem value="birds">Birds</SlMenuItem>
+        <SlMenuItem value="cats">Cats</SlMenuItem>
+        <SlMenuItem value="dogs">Dogs</SlMenuItem>
+        <SlMenuItem value="other">Other</SlMenuItem>
+      </SlSelect>
+      <br />
+      <SlTextarea name="comment" label="Comment" required></SlTextarea>
+      <br />
+      <SlCheckbox required>Check me before submitting</SlCheckbox>
+      <br />
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Input Patterns +

+

+ To restrict a value to a specific + pattern, use the pattern attribute. This example only allows the letters A-Z, so the form will not + submit if a number or symbol is entered. This only works with <sl-input> elements. +

+ +
+
+
+ +
+ Submit + Reset +
+ + + +
+ +
+
+ +
+
+ 
<form class="input-validation-pattern">
+  <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+  <sl-button type="reset" variant="default">Reset</sl-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.input-validation-pattern');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Input Types +

+

+ Some input types will automatically trigger constraints, such as email and url. +

+ +
+
+
+ +
+ +
+ Submit + Reset +
+ + + +
+ +
+
+ +
+
+ 
<form class="input-validation-type">
+  <sl-input type="email" label="Email" placeholder="you@example.com" required></sl-input>
+  <br />
+  <sl-input type="url" label="URL" placeholder="https://example.com/" required></sl-input>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+  <sl-button type="reset" variant="default">Reset</sl-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.input-validation-type');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+
+
+ +
+ 
import SlButton from '@onsonr/nebula/dist/react/button';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <SlInput type="email" label="Email" placeholder="you@example.com" required />
+      <br />
+      <SlInput type="url" label="URL" placeholder="https://example.com/" required />
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ +

+ Custom Error Messages +

+

+ To create a custom validation error, pass a non-empty string to the setCustomValidity() method. + This will override any existing validation constraints. The form will not be submitted when a custom + validity is set and the browser will show a validation error when the containing form is submitted. To make + the input valid again, call setCustomValidity() again with an empty string. +

+ +
+
+
+ +
+ Submit + Reset +
+ + + +
+ +
+
+ +
+
+ 
<form class="input-validation-custom">
+  <sl-input label="Type “shoelace”" required></sl-input>
+  <br />
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+  <sl-button type="reset" variant="default">Reset</sl-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.input-validation-custom');
+  const input = form.querySelector('sl-input');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+
+    input.addEventListener('sl-input', () => {
+      if (input.value === 'shoelace') {
+        input.setCustomValidity('');
+      } else {
+        input.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
+      }
+    });
+  });
+</script>
+
+
+ +
+ 
import { useRef, useState } from 'react';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlInput from '@onsonr/nebula/dist/react/input';
+
+const App = () => {
+  const input = useRef(null);
+  const [value, setValue] = useState('');
+
+  function handleInput(event) {
+    setValue(event.target.value);
+
+    if (event.target.value === 'shoelace') {
+      input.current.setCustomValidity('');
+    } else {
+      input.current.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
+    }
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert('All fields are valid!');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <SlInput ref={input} label="Type 'shoelace'" required value={value} onSlInput={handleInput} />
+      <br />
+      <SlButton type="submit" variant="primary">
+        Submit
+      </SlButton>
+    </form>
+  );
+};
+
+
+
+ +
+ + + + + + + +
+
+ + +

+ Custom Validation Styles +

+

+ Due to the many ways form controls are used, Nebula doesn’t provide out of the box validation styles for + form controls as part of its default theme. Instead, the following attributes will be applied to reflect a + control’s validity as users interact with it. You can use them to create custom styles for any of the + validation states you’re interested in. +

+
    +
  • data-required - the form control is required
    • +
  • data-optional - the form control is optional
    • +
  • data-invalid - the form control is currently invalid
    • +
  • data-valid - the form control is currently valid
    • +
  • + data-user-invalid - the form control is currently invalid and the user has interacted with it +
    • +
  • + data-user-valid - the form control is currently valid and the user has interacted with it +
    • +
+

+ These attributes map to the browser’s built-in pseudo classes for validation: + :required, + :optional, + :invalid, + :valid, and the proposed + :user-invalid + and + :user-valid. +

+ +

+ Styling Invalid Form Controls +

+

+ You can target validity using any of the aforementioned data attributes, but it’s usually preferable to + target data-user-invalid and data-user-valid since they get applied only after a + user interaction such as typing or submitting. This prevents empty form controls from appearing invalid + immediately, which often results in a poor user experience. +

+

+ This example demonstrates custom validation styles using data-user-invalid and + data-user-valid. Try Typing in the fields to see how validity changes with user input. +

+ +
+
+
+ + + + Birds + Cats + Dogs + Other + + + Accept terms and conditions + + Submit + Reset +
+ + + + + +
+ +
+
+ +
+
+ 
<form class="validity-styles">
+  <sl-input
+    name="name"
+    label="Name"
+    help-text="What would you like people to call you?"
+    autocomplete="off"
+    required
+  ></sl-input>
+
+  <sl-select name="animal" label="Favorite Animal" help-text="Select the best option." clearable required>
+    <sl-option value="birds">Birds</sl-option>
+    <sl-option value="cats">Cats</sl-option>
+    <sl-option value="dogs">Dogs</sl-option>
+    <sl-option value="other">Other</sl-option>
+  </sl-select>
+
+  <sl-checkbox value="accept" required>Accept terms and conditions</sl-checkbox>
+
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+  <sl-button type="reset" variant="default">Reset</sl-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.validity-styles');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-checkbox'),
+    customElements.whenDefined('sl-input'),
+    customElements.whenDefined('sl-option'),
+    customElements.whenDefined('sl-select')
+  ]).then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
+  });
+</script>
+
+<style>
+  .validity-styles sl-input,
+  .validity-styles sl-select,
+  .validity-styles sl-checkbox {
+    display: block;
+    margin-bottom: var(--sl-spacing-medium);
+  }
+
+  /* user invalid styles */
+  .validity-styles sl-input[data-user-invalid]::part(base),
+  .validity-styles sl-select[data-user-invalid]::part(combobox),
+  .validity-styles sl-checkbox[data-user-invalid]::part(control) {
+    border-color: var(--sl-color-danger-600);
+  }
+
+  .validity-styles [data-user-invalid]::part(form-control-label),
+  .validity-styles [data-user-invalid]::part(form-control-help-text),
+  .validity-styles sl-checkbox[data-user-invalid]::part(label) {
+    color: var(--sl-color-danger-700);
+  }
+
+  .validity-styles sl-checkbox[data-user-invalid]::part(control) {
+    outline: none;
+  }
+
+  .validity-styles sl-input:focus-within[data-user-invalid]::part(base),
+  .validity-styles sl-select:focus-within[data-user-invalid]::part(combobox),
+  .validity-styles sl-checkbox:focus-within[data-user-invalid]::part(control) {
+    border-color: var(--sl-color-danger-600);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
+  }
+
+  /* User valid styles */
+  .validity-styles sl-input[data-user-valid]::part(base),
+  .validity-styles sl-select[data-user-valid]::part(combobox),
+  .validity-styles sl-checkbox[data-user-valid]::part(control) {
+    border-color: var(--sl-color-success-600);
+  }
+
+  .validity-styles [data-user-valid]::part(form-control-label),
+  .validity-styles [data-user-valid]::part(form-control-help-text),
+  .validity-styles sl-checkbox[data-user-valid]::part(label) {
+    color: var(--sl-color-success-700);
+  }
+
+  .validity-styles sl-checkbox[data-user-valid]::part(control) {
+    background-color: var(--sl-color-success-600);
+    outline: none;
+  }
+
+  .validity-styles sl-input:focus-within[data-user-valid]::part(base),
+  .validity-styles sl-select:focus-within[data-user-valid]::part(combobox),
+  .validity-styles sl-checkbox:focus-within[data-user-valid]::part(control) {
+    border-color: var(--sl-color-success-600);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ +

+ Inline Form Validation +

+

+ By default, Nebula form controls use the browser’s tooltip-style error messages. No mechanism is provided to + show errors inline, as there are too many opinions on how that would work when combined with native form + controls and other custom elements. You can, however, implement your own solution using the following + technique. +

+

+ To disable the browser’s error messages, you need to cancel the sl-invalid event. Then you can + apply your own inline validation errors. This example demonstrates a primitive way to do this. +

+ +
+
+
+ + + + + Submit + Reset +
+ + + + + +
+ +
+
+ +
+
+ 
<form class="inline-validation">
+  <sl-input
+    name="name"
+    label="Name"
+    help-text="What would you like people to call you?"
+    autocomplete="off"
+    required
+  ></sl-input>
+
+  <div id="name-error" aria-live="polite" hidden></div>
+
+  <sl-button type="submit" variant="primary">Submit</sl-button>
+  <sl-button type="reset" variant="default">Reset</sl-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.inline-validation');
+  const nameError = document.querySelector('#name-error');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-input')
+  ]).then(() => {
+    // A form control is invalid
+    form.addEventListener(
+      'sl-invalid',
+      event => {
+        // Suppress the browser's constraint validation message
+        event.preventDefault();
+
+        nameError.textContent = `Error: ${event.target.validationMessage}`;
+        nameError.hidden = false;
+
+        event.target.focus();
+      },
+      { capture: true } // you must use capture since sl-invalid doesn't bubble!
+    );
+
+    // Handle form submit
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      nameError.hidden = true;
+      nameError.textContent = '';
+      setTimeout(() => alert('All fields are valid'), 50);
+    });
+
+    // Handle form reset
+    form.addEventListener('reset', event => {
+      nameError.hidden = true;
+      nameError.textContent = '';
+    });
+  });
+</script>
+
+<style>
+  #name-error {
+    font-size: var(--sl-input-help-text-font-size-medium);
+    color: var(--sl-color-danger-700);
+  }
+
+  #name-error ~ sl-button {
+    margin-top: var(--sl-spacing-medium);
+  }
+
+  .inline-validation sl-input {
+    display: block;
+  }
+
+  /* user invalid styles */
+  .inline-validation sl-input[data-user-invalid]::part(base) {
+    border-color: var(--sl-color-danger-600);
+  }
+
+  .inline-validation [data-user-invalid]::part(form-control-label),
+  .inline-validation [data-user-invalid]::part(form-control-help-text) {
+    color: var(--sl-color-danger-700);
+  }
+
+  .inline-validation sl-input:focus-within[data-user-invalid]::part(base) {
+    border-color: var(--sl-color-danger-600);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
+  }
+
+  /* User valid styles */
+  .inline-validation sl-input[data-user-valid]::part(base) {
+    border-color: var(--sl-color-success-600);
+  }
+
+  .inline-validation [data-user-valid]::part(form-control-label),
+  .inline-validation [data-user-valid]::part(form-control-help-text) {
+    color: var(--sl-color-success-700);
+  }
+
+  .inline-validation sl-input:focus-within[data-user-valid]::part(base) {
+    border-color: var(--sl-color-success-600);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
+  }
+</style>
+
+
+
+ +
+ + + +
+
+ + +

+ Getting Associated Form Controls +

+

+ At this time, using + HTMLFormElement.elements + will not return Nebula form controls because the browser is unaware of their status as custom element form + controls. Fortunately, Nebula provides an elements() function that does something very similar. + However, instead of returning an + HTMLFormControlsCollection, it returns an array of HTML and Nebula form controls in the order they appear in the DOM. +

+ 
import { getFormControls } from '@onsonr/nebula/dist/utilities/form.js';
+
+const form = document.querySelector('#my-form');
+const formControls = getFormControls(form);
+
+console.log(formControls); // e.g. [input, sl-input, ...]
+
+ +
+
+
+ + diff --git a/getting-started/installation/index.html b/getting-started/installation/index.html new file mode 100644 index 00000000..87f4ed06 --- /dev/null +++ b/getting-started/installation/index.html @@ -0,0 +1,766 @@ + + + + + + + Installation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Installation

+

+ You can load Nebula via CDN or by installing it locally. If you’re using a framework, make sure to check out + the pages for React, Vue, and + Angular for additional information. +

+

+ CDN Installation (Easiest) +

+ + Autoloader + Traditional Loader + +

+ The experimental autoloader is the easiest and most efficient way to use Nebula. A lightweight script + watches the DOM for unregistered Nebula elements and lazy loads them for you — even if they’re + added dynamically. +

+

+ While convenient, autoloading may lead to a + Flash of Undefined Custom Elements. The linked article describes some ways to alleviate it. +

+ + 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/light.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/shoelace-autoloader.js"></script>
+
+ + +

+ The traditional CDN loader registers all Nebula elements up front. Note that, if you’re only using a + handful of components, it will be much more efficient to stick with the autoloader. However, you can + also cherry pick components if you want to load specific ones up front. +

+ + 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/light.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/shoelace.js" ></script>
+
+ + +

+ Dark Theme +

+

+ The code above will load the light theme. If you want to use the + dark theme instead, update the stylesheet as shown below + and add <html class="sl-theme-dark"> to your page. +

+ + 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/dark.css" />
+
+

+ Light & Dark Theme +

+

+ If you want to load the light or dark theme based on the user’s prefers-color-scheme setting, + use the stylesheets below. The media attributes ensure that only the user’s preferred theme + stylesheet loads and the onload attribute sets the appropriate + theme class on the <html> element. +

+ 
<link
+  rel="stylesheet"
+  media="(prefers-color-scheme:light)"
+  href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/light.css"
+/>
+<link
+  rel="stylesheet"
+  media="(prefers-color-scheme:dark)"
+  href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/dark.css"
+  onload="document.documentElement.classList.add('sl-theme-dark');"
+/>
+
+

Now you can start using Nebula!

+

+ npm installation +

+

If you don’t want to use the CDN, you can install Nebula from npm with the following command.

+ 
npm install @onsonr/nebula
+
+

+ It’s up to you to make the source files available to your app. One way to do this is to create a route in + your app called /shoelace that serves static files from + node_modules/@onsonr/nebula. +

+

+ Once you’ve done that, add the following tags to your page. Make sure to update href and + src so they point to the route you created. +

+ 
<link rel="stylesheet" href="/shoelace/dist/themes/light.css" />
+<script type="module" src="/shoelace/dist/shoelace.js"></script>
+
+

Alternatively, you can use a bundler.

+ +

+ Setting the Base Path +

+

+ Some components rely on assets (icons, images, etc.) and Nebula needs to know where they’re located. For + convenience, Nebula will try to auto-detect the correct location based on the script you’ve loaded it from. + This assumes assets are colocated with shoelace.js or shoelace-autoloader.js and + will “just work” for most users. +

+

+ However, if you’re cherry picking or bundling Nebula, + you’ll need to set the base path. You can do this one of two ways. +

+ 
<!-- Option 1: the data-shoelace attribute -->
+<script src="bundle.js" data-shoelace="/path/to/shoelace/dist"></script>
+
+<!-- Option 2: the setBasePath() method -->
+<script src="bundle.js"></script>
+<script type="module">
+  import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+  setBasePath('/path/to/shoelace/dist');
+</script>
+
+ +

+ Referencing Assets +

+

+ Most of the magic behind assets is handled internally by Nebula, but if you need to reference the base path + for any reason, the same module exports a function called getBasePath(). An optional string + argument can be passed, allowing you to get the full path to any asset. +

+ 
<script type="module">
+  import { getBasePath, setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+
+  setBasePath('/path/to/assets');
+
+  // ...
+
+  // Get the base path, e.g. /path/to/assets
+  const basePath = getBasePath();
+
+  // Get the path to an asset, e.g. /path/to/assets/file.ext
+  const assetPath = getBasePath('file.ext');
+</script>
+
+

+ Cherry Picking +

+

+ Cherry picking can be done from the CDN or from + npm. This approach will load only the components you need up front, while + limiting the number of files the browser has to download. The disadvantage is that you need to import each + individual component. +

+

+ Here’s an example that loads only the button component. Again, if you’re not using a module resolver, you’ll + need to adjust the path to point to the folder Nebula is in. +

+ 
<link rel="stylesheet" href="/path/to/shoelace/dist/themes/light.css" />
+
+<script type="module" data-shoelace="/path/to/shoelace/dist">
+  import '@onsonr/nebula/dist/components/button/button.js';
+
+  // <sl-button> is ready to use!
+</script>
+
+

+ You can copy and paste the code to import a component from the “Importing” section of the component’s + documentation. Note that some components have dependencies that are automatically imported when you cherry + pick. If a component has dependencies, they will be listed in the “Dependencies” section of its docs. +

+ + +

+ Bundling +

+

+ Nebula is distributed as a collection of standard ES modules that + all modern browsers can understand. However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load + times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a + bundler. +

+

To use Nebula with a bundler, first install Nebula along with your bundler of choice.

+ 
npm install @onsonr/nebula
+
+

+ Now it’s time to configure your bundler. Configurations vary for each tool, but here are some examples to + help you get started. +

+ +

Once your bundler is configured, you’ll be able to import Nebula components and utilities.

+ 
import '@onsonr/nebula/dist/themes/light.css';
+import '@onsonr/nebula/dist/components/button/button.js';
+import '@onsonr/nebula/dist/components/icon/icon.js';
+import '@onsonr/nebula/dist/components/input/input.js';
+import '@onsonr/nebula/dist/components/rating/rating.js';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+
+// Set the base path to the folder you copied Nebula's assets to
+setBasePath('/path/to/shoelace/dist');
+
+// <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
+
+ +

+ Avoiding auto-registering imports +

+

+ By default, imports to components will auto-register themselves. This may not be ideal in all cases. To + import just the component’s class without auto-registering it’s tag we can do the following: +

+ 
- import SlButton from '@onsonr/nebula/dist/components/button/button.js';
++ import SlButton from '@onsonr/nebula/dist/components/button/button.component.js';
+
+

+ Notice how the import ends with .component.js. This is the current convention to convey the + import does not register itself. +

+ +

+ The difference between CDN and npm +

+

+ You’ll notice that the CDN links all start with /cdn/<path> and npm imports use + /dist/<path>. The /cdn files are bundled separately from the + /dist files. The /cdn files come pre-bundled, which means all dependencies are + inlined so you do not need to worry about loading additional libraries. The /dist files + DO NOT come pre-bundled, allowing your bundler of choice to more efficiently deduplicate + dependencies, resulting in smaller bundles and optimal code sharing. +

+

TL;DR:

+
    +
  • @onsonr/nebula/cdn is for CDN users
    • +
  • @onsonr/nebula/dist is for npm users
    • +
+

+ This change was introduced in v2.5.0 to address issues around installations from npm loading + multiple versions of libraries (such as the Lit) that Nebula uses internally. +

+
+
+
+ + diff --git a/getting-started/localization/index.html b/getting-started/localization/index.html new file mode 100644 index 00000000..263a0b44 --- /dev/null +++ b/getting-started/localization/index.html @@ -0,0 +1,697 @@ + + + + + + + Localization + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Localization

+

+ Components can be localized by importing the appropriate translation file and setting the desired + lang attribute + and/or + dir attribute + on the <html> element. Here’s an example that renders Nebula components in Spanish. +

+ 
<html lang="es">
+  <head>
+    <script type="module" src="/path/to/shoelace/dist/translations/es.js"></script>
+  </head>
+
+  <body>
+    ...
+  </body>
+</html>
+
+

+ Through the magic of a mutation observer, changing the lang attribute will automatically update + all localized components to use the new locale. +

+

+ Available Translations +

+

+ Nebula ships with a number of translations. The default is English (US), which also serves as the fallback + locale. As such, you do not need to import the English translation. To see a list of all available + translations in the latest version, + refer to this directory. +

+

The location of translations depends on how you’re consuming Nebula.

+
    +
  • + If you’re using the CDN, + import them from the CDN +
    • +
  • If you’re using a bundler, import them from @onsonr/nebula/dist/translations/[lang].js
    • +
+

+ You do not need to load translations up front. You can import them dynamically even after updating the + lang attribute. Once a translation is registered, localized components will update + automatically. +

+ 
// Same as setting <html lang="de">
+document.documentElement.lang = 'de';
+
+// Import the translation
+import('/path/to/shoelace/dist/translations/de.js');
+
+

+ Translation Resolution +

+

+ The locale set by <html lang="..."> is the default locale for the document. If a country + code is provided, e.g. es-PE for Peruvian Spanish, the localization library will resolve it + like this: +

+
    +
  1. Look for es-PE
    2. +
  2. Look for es
    3. +
  3. Fall back to en
    4. +
+

+ Nebula uses English as a fallback to provide a better experience than rendering nothing or throwing an + error. +

+

+ Submitting New Translations or Improvements +

+

+ To contribute new translations or improvements to existing translations, please submit a pull request on + GitHub. Translations are located in + src/translations + and can be edited directly on GitHub if you don’t want to clone the repo locally. +

+

+ Regional translations are welcome! For example, if a German translation (de) exists it’s + perfectly acceptable to submit a German (Switzerland) (de-CH) translation. +

+

+ If you have any questions, please start a + discussion + or ask in the + community chat. +

+ +

+ Multiple Locales Per Page +

+

+ You can use a different locale for an individual component by setting its lang and/or + dir attributes. Here’s a contrived example to demonstrate. +

+ 
<html lang="es">
+  ...
+
+  <body>
+    <sl-button><!-- Spanish --></sl-button>
+    <sl-button lang="ru"><!-- Russian --></sl-button>
+  </body>
+</html>
+
+

+ For performance reasons, the lang and dir attributes must be on the component + itself, not on an ancestor element. +

+ 
<html lang="es">
+  ...
+
+  <body>
+    <div lang="ru">
+      <sl-button><!-- still in Spanish --></sl-button>
+    </div>
+  </body>
+</html>
+
+

+ This limitation exists because there’s no efficient way to determine the current locale of a given element + in a DOM tree. I consider this a gap in the platform and + I’ve proposed a couple properties + to make this possible. +

+

+ Creating Your Own Translations +

+

+ You can provide your own translations if you have specific needs or if you don’t want to wait for a + translation to land upstream. The easiest way to do this is to copy src/translations/en.ts into + your own project and translate the terms inside. When your translation is done, you can import it and use it + just like a built-in translation. +

+

+ Let’s create a Spanish translation as an example. The following assumes you’re using TypeScript, but you can + also create translations with regular JavaScript. +

+ 
import { registerTranslation } from '@onsonr/nebula/dist/utilities/localize';
+import type { Translation } from '@onsonr/nebula/dist/utilities/localize';
+
+const translation: Translation = {
+  $code: 'es',
+  $name: 'Español',
+  $dir: 'ltr',
+
+  term1: '...',
+  term2: '...',
+  ...
+};
+
+registerTranslation(translation);
+
+export default translation;
+
+

Once your translation has been compiled to JavaScript, import it and activate it like this.

+ 
<html lang="es">
+  <head>
+    <script type="module" src="/path/to/es.js"></script>
+  </head>
+
+  <body>
+    ...
+  </body>
+</html>
+
+ +
+
+
+ + diff --git a/getting-started/themes/index.html b/getting-started/themes/index.html new file mode 100644 index 00000000..91079b86 --- /dev/null +++ b/getting-started/themes/index.html @@ -0,0 +1,696 @@ + + + + + + + Themes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Themes

+

+ Nebula is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light + or dark theme. Alternatively, you can design your own theme. +

+

+ A theme is nothing more than a stylesheet that uses the Nebula API to define design tokens and apply custom + styles to components. To create a theme, you will need a decent understanding of CSS, including + CSS Custom Properties + and the + ::part selector. +

+ +

+ Theme Basics +

+

+ All themes are scoped to classes using the sl-theme-{name} convention, where + {name} is a lowercase, hyphen-delimited value representing the name of the theme. The included + light and dark themes use sl-theme-light and sl-theme-dark, respectively. A custom + theme called “Purple Power”, for example, would use a class called sl-theme-purple-power +

+

+ All selectors must be scoped to the theme’s class to ensure interoperability with other themes. You should + also scope them to :host so they can be imported and applied to custom element shadow roots. +

+ 
:host,
+.sl-theme-purple-power {
+  /* ... */
+}
+
+

+ Activating Themes +

+

+ To activate a theme, import it and apply the theme’s class to the <html> element. This + example imports and activates the built-in dark theme. +

+ 
<html class="sl-theme-dark">
+  <head>
+    <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css" />
+  </head>
+
+  <body>
+    ...
+  </body>
+</html>
+
+ +

+ Using Multiple Themes +

+

+ You can activate themes on various containers throughout the page. This example uses the light theme with a + dark-themed sidebar. +

+ 
<html>
+  <head>
+    <link rel="stylesheet" href="path/to/shoelace/dist/themes/light.css" />
+    <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css" />
+  </head>
+
+  <body>
+    <nav class="sl-theme-dark">
+      <!-- dark-themed sidebar -->
+    </nav>
+
+    <!-- light-themed content -->
+  </body>
+</html>
+
+

It’s for this reason that themes must be scoped to specific classes.

+

+ Creating Themes +

+

+ There are two ways to create themes. The easiest way is to customize a built-in theme. The advanced way is + to create a new theme from scratch. Which method you choose depends on your project’s requirements and the + amount of effort you’re willing to commit to. +

+

+ Customizing a Built-in Theme +

+

+ The easiest way to customize Nebula is to override one of the built-in themes. You can do this by importing + the light or dark theme as-is, then creating a separate stylesheet that overrides + design tokens and adds + component styles to your liking. You must import + your theme after the built-in theme. +

+

If you’re customizing the light theme, you should scope your styles to the following selectors.

+ 
:root,
+:host,
+.sl-theme-light {
+  /* your custom styles here */
+}
+
+

If you’re customizing the dark theme, you should scope your styles to the following selectors.

+ 
:host,
+.sl-theme-dark {
+  /* your custom styles here */
+}
+
+

+ By customizing a built-in theme, you’ll maintain a smaller stylesheet containing only the changes you’ve + made. Contrast this to creating a new theme, where you need to + explicitly define every design token required by the library. This approach is more “future-proof,” as new + design tokens that emerge in subsequent versions of Nebula will be accounted for by the built-in theme. +

+

+ While this approach is easier to maintain, the drawback is that your theme can’t be activated independently + — it’s tied to the built-in theme you’re extending. +

+

+ Creating a New Theme +

+

+ Creating a new theme is more of an undertaking than + customizing an existing one. At a minimum, you must implement + all of the required design tokens. The easiest way to do this is by “forking” one of the built-in themes and + modifying it from there. +

+

+ Start by changing the selector to match your theme’s name. Assuming your new theme is called “Purple Power”, + your theme should be scoped like this. +

+ 
:host,
+.sl-theme-purple-power {
+  /* your custom styles here */
+}
+
+

+ By creating a new theme, you won’t be relying on a built-in theme as a foundation. Because the theme is + decoupled from the built-ins, you can activate it independently as an alternative to the built-ins. This is + the recommended approach if you’re looking to open source your theme for others to use. +

+

+ You will, however, need to maintain your theme more carefully, as new versions of Nebula may introduce new + design tokens that your theme won’t have accounted for. Because of this, it’s recommended that you clearly + specify which version(s) of Nebula your theme is designed to work with and keep it up to date as new + versions of Nebula are released. +

+

+ Dark Theme +

+

+ The built-in dark theme uses an inverted color scale so, if you’re using design tokens as intended, you’ll + get dark mode for free. While this isn’t the same as a professionally curated dark theme, it provides an + excellent baseline for one and you’re encouraged to customize it depending on your needs. +

+

+ The dark theme works by taking the light theme’s color tokens and “flipping” the + scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was + fine-tuned to avoid true black, which is often undesirable in dark themes, and provide a richer experience. + The result is a custom dark palette that complements the light theme and makes it easy to offer light and + dark modes with minimal effort. +

+

To install the dark theme, add the following to the <head> section of your page.

+ 
<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/dark.css"
+/>
+
+

+ To activate the theme, apply the sl-theme-dark class to the <html> element. +

+ 
<html class="sl-theme-dark">
+  ...
+</html>
+
+

+ Detecting the User’s Color Scheme Preference +

+

+ Nebula doesn’t try to auto-detect the user’s light/dark mode preference. This should be done at the + application level. As a best practice, to provide a dark theme in your app, you should: +

+
    +
  • + Check for + prefers-color-scheme + and use its value by default +
    • +
  • Allow the user to override the setting in your app
    • +
  • Remember the user’s preference and restore it on subsequent logins
    • +
+

+ Nebula avoids using the prefers-color-scheme media query because not all apps support dark + mode, and it would break things for the ones that don’t. +

+
+
+
+ + diff --git a/getting-started/usage/index.html b/getting-started/usage/index.html new file mode 100644 index 00000000..7e57826c --- /dev/null +++ b/getting-started/usage/index.html @@ -0,0 +1,837 @@ + + + + + + + Usage + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Usage

+

+ Nebula components are just regular HTML elements, or + custom elements + to be precise. You can use them like any other element. Each component has detailed documentation that + describes its full API, including properties, events, methods, and more. +

+

+ If you’re new to custom elements, often referred to as “web components,” this section will familiarize you + with how to use them. +

+

+ Attributes & Properties +

+

+ Many components have properties that can be set using attributes. For example, buttons accept a + size attribute that maps to the size property which dictates the button’s size. +

+ 
<sl-button size="small">Click me</sl-button>
+
+

+ Some properties are boolean, so they only have true/false values. To activate a boolean property, add the + corresponding attribute without a value. +

+ 
<sl-button disabled>Click me</sl-button>
+
+

+ In rare cases, a property may require an array, an object, or a function. For example, to customize the + color picker’s list of preset swatches, you set the swatches property to an array of colors. + This must be done with JavaScript. +

+ 
<sl-color-picker></sl-color-picker>
+
+<script>
+  const colorPicker = document.querySelector('sl-color-picker');
+  colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
+</script>
+
+

Refer to a component’s documentation for a complete list of its properties.

+

Events

+

+ You can listen for standard events such as click, mouseover, etc. as you normally + would. However, it’s important to note that many events emitted within a component’s shadow root will be + retargeted + to the host element. This may result in, for example, multiple click handlers executing even if + the user clicks just once. Furthermore, event.target will point to the host element, making + things even more confusing. +

+

+ As a result, you should almost always listen for custom events instead. For example, instead of listening to + click to determine when an <sl-checkbox> gets toggled, listen to + sl-change. +

+ 
<sl-checkbox>Check me</sl-checkbox>
+
+<script>
+  const checkbox = document.querySelector('sl-checkbox');
+  checkbox.addEventListener('sl-change', event => {
+    console.log(event.target.checked ? 'checked' : 'not checked');
+  });
+</script>
+
+

+ All custom events are prefixed with sl- to prevent collisions with standard events and other + libraries. Refer to a component’s documentation for a complete list of its custom events. +

+

+ Methods +

+

+ Some components have methods you can call to trigger various behaviors. For example, you can set focus on a + Nebula input using the focus() method. +

+ 
<sl-input></sl-input>
+
+<script>
+  const input = document.querySelector('sl-input');
+  input.focus();
+</script>
+
+

Refer to a component’s documentation for a complete list of its methods and their arguments.

+

Slots

+

+ Many components use slots to accept content inside of them. The most common slot is the + default slot, which includes any content inside the component that doesn’t have a + slot attribute. +

+

For example, a button’s default slot is used to populate its label.

+ 
<sl-button>Click me</sl-button>
+
+

+ Some components also have named slots. A named slot can be populated by adding a child element with + the appropriate slot attribute. Notice how the icon below has the + slot="prefix" attribute? This tells the component to place the icon into its + prefix slot. +

+ 
<sl-button>
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+
+

+ The location of a named slot doesn’t matter. You can put it anywhere inside the component and the browser + will move it to the right place automatically! +

+

Refer to a component’s documentation for a complete list of available slots.

+

+ Don’t Use Self-closing Tags +

+

+ Custom elements cannot have self-closing tags. Similar to <script> and + <textarea>, you must always include the full closing tag. +

+ 
<!-- Don't do this -->
+<sl-input />
+
+<!-- Always do this -->
+<sl-input></sl-input>
+
+

+ Differences from Native Elements +

+

+ You might expect similarly named elements to share the same API as native HTML elements, but this is not + always the case. Nebula components are not designed to be one-to-one replacements for their + HTML counterparts. While they usually share the same API, there may be subtle differences. +

+

+ For example, <button> and <sl-button> both have a + type attribute, but the native one defaults to submit while the Nebula one + defaults to button since this is a better default for most users. +

+ +

+ Waiting for Components to Load +

+

+ Web components are registered with JavaScript, so depending on how and when you load Nebula, you may notice + a + Flash of Undefined Custom Elements (FOUCE) + when the page loads. There are a couple ways to prevent this, both of which are described in the linked + article. +

+

+ One option is to use the + :defined + CSS pseudo-class to “hide” custom elements that haven’t been registered yet. You can scope it to specific + tags or you can hide all undefined custom elements as shown below. +

+ 
:not(:defined) {
+  visibility: hidden;
+}
+
+

+ As soon as a custom element is registered, it will immediately appear with all of its styles, effectively + eliminating FOUCE. Note the use of visibility: hidden instead of display: none to + reduce shifting as elements are registered. The drawback to this approach is that custom elements can + potentially appear one by one instead of all at the same time. +

+

+ Another option is to use + customElements.whenDefined(), which returns a promise that resolves when the specified element gets registered. You’ll probably want to + use it with + Promise.allSettled() + in case an element fails to load for some reason. +

+

+ A clever way to use this method is to hide the <body> with opacity: 0 and + add a class that fades it in as soon as all your custom elements are defined. +

+ 
<style>
+  body {
+    opacity: 0;
+  }
+
+  body.ready {
+    opacity: 1;
+    transition: 0.25s opacity;
+  }
+</style>
+
+<script type="module">
+  await Promise.allSettled([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-card'),
+    customElements.whenDefined('sl-rating')
+  ]);
+
+  // Button, card, and rating are registered now! Add
+  // the `ready` class so the UI fades in.
+  document.body.classList.add('ready');
+</script>
+
+

+ Component Rendering and Updating +

+

+ Nebula components are built with + Lit, a tiny + library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Nebula user, + here is some helpful information about rendering and updating you should probably be aware of. +

+

+ To optimize performance and reduce re-renders, Lit batches component updates. This means changing multiple + attributes or properties at the same time will result in just a single re-render. In most cases, this isn’t + an issue, but there may be times you’ll need to wait for the component to update before continuing. +

+

+ Consider this example. We’re going to change the checked property of the checkbox and observe + its corresponding checked attribute, which happens to reflect. +

+ 
const checkbox = document.querySelector('sl-checkbox');
+checkbox.checked = true;
+
+console.log(checkbox.hasAttribute('checked')); // false
+
+

+ Most developers will expect this to be true instead of false, but the component + hasn’t had a chance to re-render yet so the attribute doesn’t exist when hasAttribute() is + called. Since changes are batched, we need to wait for the update before proceeding. This can be done using + the updateComplete property, which is available on all Lit-based components. +

+ 
const checkbox = document.querySelector('sl-checkbox');
+checkbox.checked = true;
+
+checkbox.updateComplete.then(() => {
+  console.log(checkbox.hasAttribute('checked')); // true
+});
+
+

This time we see an empty string, which means the boolean attribute is now present!

+ +

+ Code Completion +

+

+ VS Code +

+

+ Nebula ships with a file called vscode.html-custom-data.json that can be used to describe it’s + custom elements to Visual Studio Code. This enables code completion for Nebula components (also known as + “code hinting” or “IntelliSense”). To enable it, you need to tell VS Code where the file is. +

+
    +
  1. Install Nebula locally
    2. +
  2. + If it doesn’t already exist, create a folder called .vscode at the root of your project +
    3. +
  3. If it doesn’t already exist, create a file inside that folder called settings.json
    4. +
  4. Add the following to the file
    5. +
+ 
{
+  "html.customData": ["./node_modules/@onsonr/nebula/dist/vscode.html-custom-data.json"]
+}
+
+

+ If settings.json already exists, simply add the above line to the root of the object. Note that + you may need to restart VS Code for the changes to take effect. +

+

+ JetBrains IDEs +

+

+ If you are using a + JetBrains IDE + and you are installing Nebula from NPM, the editor will automatically detect the + web-types.json file from the package and you should immediately see component information in + your editor. +

+

+ If you are installing from the CDN, you can + download a local copy + and add it to the root of your project. Be sure to add a reference to the web-types.json file + in your package.json in order for your editor to properly detect it. +

+ 
{
+  ...
+  "web-types": "./web-types.json"
+  ...
+}
+
+

If you are using types from multiple projects, you can add an array of references.

+ 
{
+  ...
+  "web-types": [
+    ...,
+    "./web-types.json"
+  ]
+  ...
+}
+
+

+ Other Editors +

+

+ Most popular editors support custom code completion with a bit of configuration. Please + submit a feature request + for your editor of choice. PRs are also welcome! +

+
+
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 00000000..6ec442bc --- /dev/null +++ b/index.html @@ -0,0 +1,764 @@ + + + + + + + Nebula: A specialized fork of Nebula for Crypto and Blockchain interfaces. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+
+
+ +

+ Nebula: A forward-thinking library of web components, + specifically designed for Blockchain Clients. +

+
    +
  • Works with all frameworks 🧩
    • +
  • Works with CDNs 🚛
    • +
  • Fully customizable with CSS 🎨
    • +
  • Includes a dark theme 🌛
    • +
  • Built with accessibility in mind ♿️
    • +
  • Built-in localization 💬
    • +
  • Open source 😸
    • +
+
+
+ Illustration of a sonr login box. +
+
+
+

+ jsDelivr + npm + License
+ Twitter +

+
+

+ Quick Start +

+

Add the following code to your page.

+ + 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/themes/light.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/shoelace-autoloader.js"></script>
+
+

Now you have access to all of Nebula’s components! Try adding a button:

+ +
+
+ Click me + +
+ +
+
+ +
+
+ 
<sl-button>Click me</sl-button>
+
+
+
+ +
+ +
+
+ + +

+ New to Web Components? +

+

+ TL;DR – we finally have a way to create + our own HTML elements + and use them in any framework we want! +

+

+ Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has + become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable + building blocks. They make a lot of sense in terms of design, development, and testing. +

+

Unfortunately, framework-specific components fail us in a number of ways:

+
    +
  • You can only use them in the framework they’re designed for 🔒
    • +
  • Their lifespan is limited to that of the framework’s ⏳
    • +
  • + New frameworks/versions can lead to breaking changes, requiring substantial effort to update components 😭 +
    • +
+

+ Web components solve these problems. They’re + supported by all modern browsers, they’re framework-agnostic, and they’re + part of the standard, so we know they’ll be supported for many years to come. +

+

This is the technology that Nebula is built on.

+

+ What Problem Does This Solve? +

+

+ Nebula provides a collection of professionally designed, highly customizable UI components built on a + framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? + Why make a component library that only works with one framework? +

+

With Nebula, you can:

+
    +
  • Start building things faster (no need to roll your own buttons)
    • +
  • Build multiple apps with different frameworks that all share the same UI components
    • +
  • Fully customize components to match your existing designs
    • +
  • Incrementally adopt components as needed (no need to ditch your framework)
    • +
  • Upgrade or switch frameworks without rebuilding foundational components
    • +
+

+ If your organization is looking to build a design system, + Nebula will save you thousands of dollars. All the foundational components you need are right here, ready to be customized for your brand. And since + it’s built on web standards, browsers will continue to support it for many years to come. +

+

+ Whether you use Nebula as a starting point for your organization’s design system or for a fun personal + project, there’s no limit to what you can do with it. +

+

+ Browser Support +

+

Nebula is tested in the latest two versions of the following browsers.

+ Chrome + Edge + Firefox + Opera + Safari +

Critical bug fixes in earlier versions will be addressed based on their severity and impact.

+

+ If you need to support IE11 or pre-Chromium Edge, this library isn’t for you. Although web components can + (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If + you’re using Nebula in such a browser, you’re gonna have a bad time. ⛷ +

+

+ License +

+

+ Nebula was created in New Hampshire by + Cory LaViska. It’s available under the terms of the + MIT license. +

+

+ Attribution +

+

Special thanks to the following projects and individuals that help make Nebula possible.

+
    +
  • + Components are built with + Lit +
    • +
  • + Component metadata is generated by the + Custom Elements Manifest Analyzer +
    • +
  • + Documentation is powered by + 11ty +
    • +
  • + CDN services are provided by + jsDelivr +
    • +
  • + Color primitives are inspired by + Tailwind +
    • +
  • + Icons are courtesy of + Bootstrap Icons +
    • +
  • + The homepage illustration is courtesy of + unDraw +
    • +
  • + Positioning of dropdowns, tooltips, et al is handled by + Floating UI +
    • +
  • + Animations are courtesy of + animate.css +
    • +
  • + Search is powered by + Lunr +
    • +
  • + The Nebula logo was designed with a single shoelace by + Adam K Olson +
    • +
+
+
+
+ + diff --git a/resources/accessibility/index.html b/resources/accessibility/index.html new file mode 100644 index 00000000..f2e8c5a2 --- /dev/null +++ b/resources/accessibility/index.html @@ -0,0 +1,522 @@ + + + + + + + Accessibility Commitment + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Accessibility Commitment

+

+ Nebula recognizes the need for all users, regardless of ability and device, to have undeterred access to the + websites and applications that are created with it. This is an important goal of the project. +

+

+ Oftentimes, people will ask “is Nebula accessible?” I’m reluctant to answer because accessibility isn’t + binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might + be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you + still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and + more. +

+

+ Accessibility is something you have to continuously strive for. No individual contributor — or perhaps even + an entire team — can claim their software is 100% accessible because of the sheer diversity of abilities, + devices, assistive technologies, and individual use cases. +

+

+ Furthermore, accessibility doesn’t stop at the component level. Using accessible building blocks doesn’t + magically make the rest of your webpage or application compliant. There is no library or overlay that will + make your software “fully accessible” without putting in the effort. It’s also worth noting that web + components are still somewhat bleeding edge, so browsers, assistive devices, and + even specifications + are still evolving to help improve accessibility on the web platform. +

+

+ My commitment to Nebula users is this: Everything I develop will be built with accessibility in mind. I will + test and improve every component to the best of my ability and knowledge. I will work around upstream + issues, such as browser bugs and limitations, to the best of my ability and within reason. +

+

+ I’m fully aware that I may not get it right every time for every user, so I invite the community to + participate in this ongoing effort by submitting + issues, + pull requests, and + discussions. Many accessibility improvements have already been made thanks to contributors submitting code, feedback, + and suggestions. +

+

+ This is the path forward. Together, we will continue to make Nebula accessible to as many users as possible. +

+

+ — Cory LaViska
+ Creator of Nebula +

+
+
+
+ + diff --git a/resources/changelog/index.html b/resources/changelog/index.html new file mode 100644 index 00000000..16782f42 --- /dev/null +++ b/resources/changelog/index.html @@ -0,0 +1,8516 @@ + + + + + + + Changelog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Changelog

+

+ Nebula follows + Semantic Versioning. Breaking changes in components with the Stable badge will + not be accepted until the next major version. As such, all contributions must consider the project’s roadmap + and take this into consideration. Features that are deemed no longer necessary will be deprecated but not + removed. +

+

+ Components with the Experimental badge should not be used in + production. They are made available as release candidates for development and testing purposes. As such, + changes to experimental components will not be subject to semantic versioning. +

+

+ New versions of Nebula are released as-needed and generally occur when a critical mass of changes have + accumulated. At any time, you can see what’s coming in the next release by visiting + next.shoelace.style. +

+

Next

+
    +
  • + Added the Czech translation + #2084 +
    • +
  • + Added the base__popup part to <sl-dropdown> + #2078 +
    • +
  • + <sl-tab> closable property now reflects. + #2041 +
    • +
  • + <sl-tab-group> now implements a proper “roving tabindex” and + <sl-tab> is no longer tabbable by default. This aligns closer to the APG pattern for + tabs. + #2041 +
    • +
  • + Fixed a bug in the submenu controller that prevented submenus from rendering in RTL without explicitly + setting dir on the parent menu item + #1992 +
    • +
  • + Fixed a bug where <sl-relative-time> would announce the full time instead of the + relative time in screen readers +
    • +
  • + When calling customElements.define we no longer register with anonymous classes by default + #2079 +
    • +
+

+ 2.15.1 +

+
    +
  • + Fixed a bug in <sl-radio-group> where if a click did not contain a + <sl-radio> it would show a console error. + #2009 +
    • +
  • + Fixed a bug in <sl-split-panel> that caused it not to recalculate it’s position when + going from being display: none; to its original display value. + #1942 +
    • +
  • + Fixed a bug in <dialog> where when it showed it would cause a layout shift. + #1967 +
    • +
  • + Fixed a bug in <sl-tooltip> that allowed unwanted text properties to leak in + #1947 +
    • +
  • + Fixed a bug in <sl-button-group> classes + #1974 +
    • +
  • + Fixed a bug in <sl-textarea> that may throw errors on + disconnectedCallback in test environments + #1985 +
    • +
  • + Fixed a bug in <sl-color-picker> that would log a non-passive event listener warning + #2005 +
    • +
  • + Fixed a bug in the submenu controller that allowed submenus to go offscreen and not be scrollable + #2001 +
    • +
  • + Fixed a bug in <sl-range> that caused the tooltip position to be incorrect in some + cases + #1979 +
    • +
+

+ 2.15.0 +

+
    +
  • + Added the Slovenian translation + #1893 +
    • +
  • + Added support for contextElement to VirtualElements in + <sl-popup> + #1874 +
    • +
  • + Added the spinner and spinner__base parts to <sl-tree-item> + #1937 +
    • +
  • + Added the sync property to <sl-dropdown> so the menu can easily sync sizes + with the trigger element + #1935 +
    • +
  • + Fixed a bug in <sl-icon> that did not properly apply mutators to spritesheets + #1927 +
    • +
  • + Fixed a bug in .sl-scroll-lock causing layout shifts + #1895 +
    • +
  • + Fixed a bug in <sl-rating> that caused the rating to not reset in some circumstances + #1877 +
    • +
  • + Fixed a bug in <sl-select> that caused the menu to not close when rendered in a shadow + root + #1878 +
    • +
  • + Fixed a bug in <sl-tree> that caused a new stacking context resulting in tooltips being + clipped + #1709 +
    • +
  • + Fixed a bug in <sl-tab-group> that caused the scroll controls to toggle indefinitely + when zoomed in Safari + #1839 +
    • +
  • + Fixed a bug in the submenu controller that allowed two submenus to be open at the same time + #1880 +
    • +
  • + Fixed a bug in <sl-select> where the tag size wouldn’t update with the control’s size + #1886 +
    • +
  • + Fixed a bug in <sl-checkbox> and <sl-switch> where the color of the + required content wasn’t applying correctly +
    • +
  • + Fixed a bug in <sl-checkbox> where help text was incorrectly styled + #1897 +
    • +
  • + Fixed a bug in <sl-input> that prevented the control from receiving focus when clicking + over the clear button +
    • +
  • + Fixed a bug in <sl-carousel> that caused the carousel to be out of sync when used with + reduced motion settings + #1887 +
    • +
  • + Fixed a bug in <sl-button-group> that caused styles to stop working when using + className on buttons in React + #1926 +
    • +
+

+ 2.14.0 +

+
    +
  • + Added the Arabic translation + #1852 +
    • +
  • + Added help text to <sl-checkbox> + #1860 +
    • +
  • + Added help text to <sl-switch> + #1800 +
    • +
  • + Fixed a bug in <sl-option> that caused HTML tags to be included in + getTextLabel() +
    • +
  • + Fixed a bug in <sl-carousel> that caused slides to not switch correctly + #1862 +
    • +
  • + Refactored component styles to be consumed more efficiently + #1692 +
    • +
+

+ 2.13.1 +

+
    +
  • + Fixed a bug where the safe triangle was always visible when selecting nested + <sl-menu> elements + #1835 +
    • +
+

+ 2.13.0 +

+
    +
  • + Added the hover-bridge feature to <sl-popup> to support better tooltip + accessibility + #1734 +
    • +
  • + Added the loading attribute and the spinner and spinner__base part + to <sl-menu-item> + #1700 +
    • +
  • + Fixed files that did not have .js extensions. + #1770 +
    • +
  • + Fixed a bug in <sl-tree> when providing custom expand / collapse icons + #1922 +
    • +
  • + Fixed <sl-dialog> not accounting for elements with hidden dialog controls like + <video> + #1755 +
    • +
  • + Fixed focus trapping not scrolling elements into view. + #1750 +
    • +
  • + Fixed more performance issues with focus trapping performance. + #1750 +
    • +
  • + Fixed a bug in <sl-input> and <sl-textarea> that made it work + differently from <input> and <textarea> when using defaults + #1746 +
    • +
  • + Fixed a bug in <sl-select> that prevented it from closing when tabbing to another + select inside a shadow root + #1763 +
    • +
  • + Fixed a bug in <sl-spinner> that caused the animation to appear strange in certain + circumstances + #1787 +
    • +
  • + Fixed a bug in <sl-dialog> with focus trapping + #1813 +
    • +
  • + Fixed a bug that caused form controls to submit even after they were removed from the DOM + #1823 +
    • +
  • + Fixed a bug that caused empty <sl-radio-group> elements to log an error in the console + #1795 +
    • +
  • + Fixed a bug that caused modal scroll locking to conflict with the scrollbar-gutter property + #1805 +
    • +
  • + Fixed a bug in <sl-option> that caused slotted content to show up when calling + getTextLabel() + #1730 +
    • +
  • + Fixed a bug in <sl-color-picker> that caused picker values to not match the preview + color + #1831 +
    • +
  • + Fixed a bug in <sl-carousel> where pagination dots don’t update when swiping slide in + iOS Safari + #1748 +
    • +
  • + Fixed a bug in<sl-carousel> where trying to swipe doesn’t change the slide in Firefox + for Android + #1748 +
    • +
  • + Improved the accessibility of <sl-tooltip> so they persist when hovering over the + tooltip and dismiss when pressing Esc + #1734 +
    • +
  • + Improved “close” behavior of multiple components in supportive browsers using the + CloseWatcher API + #1788 +
    • +
  • + Removed the scroll controller from the experimental <sl-carousel> and moved all mouse + related logic into the component + #1748 +
    • +
+

+ 2.12.0 +

+
    +
  • + Added the Italian translation + #1727 +
    • +
  • + Added the ability to call form.checkValidity() and it will use Nebula’s custom + checkValidity() handler. + #1708 +
    • +
  • + Fixed a bug where nested dialogs were not properly trapping focus. + #1711 +
    • +
  • + Fixed a bug with form controls removing the custom validity handlers from the form. + #1708 +
    • +
  • + Fixed a bug in form control components that used a form property, but not an attribute. + #1707 +
    • +
  • + Fixed a bug with bundled components using CDN builds not having translations on initial connect + #1696 +
    • +
  • + Fixed a bug where the "sl-change" event would always fire simultaneously with + "sl-input" event in <sl-color-picker>. The + <sl-change> event now only fires when a user stops dragging a slider or stops dragging + on the color canvas. + #1689 +
    • +
  • + Updated the copy icon in the system library + #1702 +
    • +
+

+ 2.11.2 +

+
    +
  • + Fixed a bug in <sl-carousel> component that caused an error to be thrown when rendered + with Lit + #1684 +
    • +
+

+ 2.11.1 +

+
    +
  • + Improved the experimental <sl-carousel> component + #1605 +
    • +
+

+ 2.11.0 +

+
    +
  • + Added the Croatian translation + #1656 +
    • +
  • + Fixed a bug that caused the Escape key to stop propagating when tooltips are disabled + #1607 +
    • +
  • + Fixed a bug that made it impossible to style placeholders in <sl-select> + #1667 +
    • +
  • + Fixed a bug that caused dist/react/index.js to be blank + #1659 +
    • +
+

+ 2.10.0 +

+
    +
  • + Added the Simplified Chinese translation + #1604 +
    • +
  • + Fixed a bug + in the localize dependency + that caused underscores in language codes to throw a RangeError +
    • +
  • + Fixed a bug in the focus trapping utility used by modals that caused unexpected focus behavior. + #1583 +
    • +
  • + Fixed a bug in <sl-copy-button> that prevented exported tooltip parts from being styled + #1586 +
    • +
  • + Fixed a bug in <sl-menu> that caused it not to fire the sl-select event if + you clicked an element inside of a <sl-menu-item> + #1599 +
    • +
  • + Fixed a bug that caused focus trap logic to hang the browser in certain circumstances + #1612 +
    • +
  • + Improved submenu selection by implementing the + safe triangle + method + #1550 +
    • +
  • Updated @shoelace-style/localize to 3.1.0
    • +
  • Updated @lib-labs/react to stable @lit/react
    • +
  • Updated Bootstrap Icons to 1.11.1
    • +
  • Updated Lit to 3.0.0
    • +
  • Updated TypeScript to 5.2.2
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.9.0 +

+
    +
  • + Added the modal property to <sl-dialog> and + <sl-drawer> to support third-party modals + #1571 +
    • +
  • + Fixed a bug in the autoloader causing it to register non-Nebula elements + #1563 +
    • +
  • + Fixed a bug in <sl-switch> that resulted in improper spacing between the label and the + required asterisk + #1540 +
    • +
  • + Fixed a bug in <sl-icon> that caused icons to not load when the default library used a + sprite sheet + #1572 +
    • +
  • + Removed error when a missing popup anchor is provided + #1548 +
    • +
  • + Updated @ctrl/tinycolor to 4.0.1 + #1542 +
    • +
  • Updated Bootstrap Icons to 1.11.0
    • +
+

+ 2.8.0 +

+
    +
  • + Added --isolatedModules and --verbatimModuleSyntax to + tsconfig.json. For anyone directly importing event types, they no longer provide a default + export due to these options being enabled. For people using the events/event.js file + directly, there is no change. +
    • +
  • + Added support for submenus in <sl-menu-item> + #1410 +
    • +
  • + Added the --submenu-offset custom property to <sl-menu-item> + #1410 +
    • +
  • + Fixed an issue with focus trapping elements like <sl-dialog> when wrapped by other + elements not checking the assigned elements of <slot>s. + #1537 +
    • +
  • + Fixed type issues with the ref attribute in React Wrappers. + #1526 +
    • +
  • + Fixed a regression that caused <sl-radio-button> to render incorrectly with gaps + #1523 +
    • +
  • + Improved expand/collapse behavior of <sl-tree> to work more like users expect + #1521 +
    • +
  • + Improved <sl-menu-item> so labels truncate properly instead of getting chopped and + overflowing +
    • +
  • + Removed the extra React.Component around @lit-labs/react wrapper. + #1531 +
    • +
  • + Updated @lit-labs/react to v2.0.1. + #1531 +
    • +
+

+ 2.7.0 +

+
    +
  • + Added the experimental <sl-copy-button> component + #1473 +
    • +
  • + Fixed a bug in <sl-dropdown> where pressing Up or Down when + focused on the trigger wouldn’t focus the first/last menu items + #1472 +
    • +
  • + Fixed a bug that caused key presses in text fields to be hijacked when used inside + <sl-tree> + #1492 +
    • +
  • Fixed an upstream bug that caused React CodePen examples to stop working
    • +
  • + Improved the behavior of the clear button in <sl-input> to prevent the component’s + width from shifting when toggled + #1496 +
    • +
  • + Improved <sl-tooltip> to prevent user selection so the tooltip doesn’t get highlighted + when dragging selections +
    • +
  • Moved tag type definitions out of component files and into definition files
    • +
  • + Removed sideEffects key from package.json. Update React docs to use + cherry-picking. + #1485 +
    • +
  • Updated Bootstrap Icons to 1.10.5
    • +
+

+ 2.6.0 +

+
    +
  • + Added JSDoc comments to React Wrappers for better documentation when hovering a component. + #1450 +
    • +
  • + Added displayName to React Wrappers for better debugging. + #1450 +
    • +
  • + Added non-auto-registering routes for Components to fix a number of issues around auto-registration. + #1450 +
    • +
  • + Added a console warning if you attempt to register the same Nebula component twice. + #1450 +
    • +
  • + Added tests for <sl-qr-code> + #1416 +
    • +
  • + Added support for pressing Space to select/toggle selected + <sl-menu-item> elements + #1429 +
    • +
  • + Added support for virtual elements in <sl-popup> + #1449 +
    • +
  • + Added the spinner part to <sl-button> + #1460 +
    • +
  • + Added a shoelace.js and shoelace-autoloader.js to exportmaps. + #1450 +
    • +
  • + Added types to events emitted by React wrapped components + #1419 +
    • +
  • + Fixed React component treeshaking by introducing sideEffects key in + package.json. + #1450 +
    • +
  • + Fixed a bug in <sl-tree> where it was auto-defining <sl-tree-item>. + #1450 +
    • +
  • + Fixed a bug in focus trapping of modal elements like <sl-dialog>. We now manually + handle focus ordering as well as added offsetParent() check for tabbable boundaries in + Safari. Test cases added for <sl-dialog> inside a shadowRoot + #1403 +
    • +
  • + Fixed a bug in valueAsDate on <sl-input> where it would always set + type="date" for the underlying <input> element. It now falls back to the + native browser implementation for the in-memory input. This may cause unexpected behavior if you’re using + valueAsDate on any input elements that aren’t type="date". + #1399 +
    • +
  • + Fixed a bug in <sl-qr-code> where the background attribute was never + passed to the QR code + #1416 +
    • +
  • + Fixed a bug in <sl-dropdown> where aria attributes were incorrectly applied to the + default <slot> causing Lighthouse errors + #1417 +
    • +
  • + Fixed a bug in <sl-carousel> that caused navigation to work incorrectly in some case + #1420 +
    • +
  • + Fixed a number of slots that incorrectly had aria- and/or role attributes directly on them + #1422 +
    • +
  • + Fixed a bug in <sl-tree> that caused focus to be stolen when removing focused tree + items + #1430 +
    • +
  • + Fixed a bug in <sl-dialog> and <sl-drawer> that caused nested modals + to respond too eagerly to the Esc key + #1457 +
    • +
  • + Improved <sl-details> to use <details> internally for better + semantics and to enable search to find in supportive browsers when collapsed + #1470 +
    • +
  • Updated ESLint and related plugins to the latest versions
    • +
  • + Changed the default entrypoint for jsDelivr to point to the autoloader. + #1450 +
    • +
+

+ 2.5.2 +

+
    +
  • + Fixed broken source buttons in the docs + #1401 +
    • +
+

+ 2.5.1 +

+
    +
  • + Fixed missing extensions from imports that broke with TypeScript 5 + #1391 +
    • +
  • + Fixed a regression that caused slotted styles to not work in <sl-select> + #1387 +
    • +
  • + Reimplemented the theme switcher so it supports light, dark, and system (auto) in the docs + #1395 +
    • +
+

+ 2.5.0 +

+

+ This release + unbundles Lit + (and other dependencies) from Nebula. There are now two distributions for the project: +

+
    +
  1. cdn/ – a bundled, CDN-ready distribution
    2. +
  2. dist/ – an unbundled, npm-ready distribution
    3. +
+ +
    +
  • + Added a cdn/ distribution for bundled dependencies (imports for npm users remain the same) + #1369 +
    • +
  • + Added the checkbox part and related exported parts to <sl-tree-item> so + you can target it with CSS + #1318 +
    • +
  • + Added the submenu-icon part to <sl-menu-item> (submenus have not been + implemented yet, but this part is required to allow customizations) +
    • +
  • + Added the ability to use Sprite Sheets when using <sl-icon> via a custom resolver. +
    • +
  • + Added tests for <sl-split-panel> + #1343 +
    • +
  • + Fixed a bug where changing the size of <sl-radio-group> wouldn’t update the size of + child elements +
    • +
  • + Fixed a bug in <sl-select> and <sl-color-picker> where the + size attribute wasn’t being reflected + #1318 +
    • +
  • + Fixed a bug in <sl-radio-group> where <sl-radio> would not get + checked if <sl-radio-group> was defined first. + #1364 +
    • +
  • + Fixed a bug in <sl-input> that caused date pickers to look filled in even when empty in + Safari + #1341 +
    • +
  • + Fixed a bug in <sl-radio-group> that sometimes caused dual scrollbars in containers + that overflowed + #1380 +
    • +
  • + Fixed a bug in <sl-carousel> not loading the English language pack automatically. + #1384 +
    • +
  • + Improved <sl-button> so it can accept children of variable heights + #1317 +
    • +
  • Improved the docs to more clearly explain sizing radios and radio buttons
    • +
  • + Improved the performance of <sl-rating> by partially rendering unseen icons + #1310 +
    • +
  • + Improved the Portuguese translation + #1336 +
    • +
  • + Improved the German translation + #1339 +
    • +
  • + Improved the autoloader so it watches <html> instead of <body> since + the latter gets replaced by some frameworks + #1338 +
    • +
  • + Improved the Rails documentation + #1258 +
    • +
  • Replaced Docsify with Eleventy to generate a static HTML version of the docs
    • +
  • Updated esbuild to 0.18.2
    • +
  • Updated Lit to 2.7.5
    • +
  • Updated TypeScript to 5.1.3
    • +
+

+ 2.4.0 +

+
    +
  • + Added the discover() function to the experimental autoloader’s exports + #1236 +
    • +
  • + Added the size attribute to <sl-radio-group> so labels and controls will + be sized consistently + #1301 +
    • +
  • + Added tests for <sl-animated-image> + #1246 +
    • +
  • + Added tests for <sl-animation> + #1274 +
    • +
  • + Fixed a bug in <sl-tree-item> that prevented long labels from wrapping + #1243 +
    • +
  • + Fixed a bug in <sl-tree-item> that caused labels to be misaligned when text wraps + #1244 +
    • +
  • + Fixed an incorrect CSS property value in <sl-checkbox> + #1272 +
    • +
  • + Fixed a bug in <sl-avatar> that caused the initials to show up behind images with + transparency + #1260 +
    • +
  • + Fixed a bug in <sl-split-panel> that prevented the divider from being focusable in some + browsers + #1288 +
    • +
  • + Fixed a bug that caused <sl-tab-group> to affect scrolling when initializing + #1292 +
    • +
  • + Fixed a bug in <sl-menu-item> that allowed the hover state to show when focused + #1282 +
    • +
  • + Fixed a bug in <sl-carousel> that prevented interactive elements from receiving clicks + #1262 +
    • +
  • + Fixed a bug in <sl-input> that caused valueAsDate and + valueAsNumber to not be set synchronously in some cases + #1302 +
    • +
  • + Improved the behavior of <sl-carousel> when used inside a flex container + #1235 +
    • +
  • + Improved the behavior of <sl-tree-item> to support buttons and other interactive + elements + #1234 +
    • +
  • + Improved the performance of <sl-include> to prevent an apparent memory leak in some + browsers + #1284 +
    • +
  • + Improved the accessibility of <sl-select>, <sl-split-panel>, and + <sl-details> by ensuring slots don’t have roles + #1287 +
    • +
+

+ 2.3.0 +

+
    +
  • Added an experimental autoloader
    • +
  • + Added the subpath argument to getBasePath() to make it easier to generate full + paths to any file +
    • +
  • Added custom-elements.json to package exports
    • +
  • + Added tag__base, tag__content, tag__remove-button, + tag__remove-button__base parts to <sl-select> +
    • +
  • + Fixed a bug in <sl-rating> that allowed the sl-change event to be emitted + when disabled + #1220 +
    • +
  • + Fixed a regression in <sl-input> that caused min and max to + stop working when type="date" + #1224 +
    • +
  • + Improved accessibility of <sl-carousel> + #1218 +
    • +
  • + Improved <sl-option> so it converts non-string values to strings for convenience + #1226 +
    • +
  • Updated the docs to dogfood the autoloader
    • +
+

+ 2.2.0 +

+
    +
  • + Added TypeScript types to all custom events + #1183 +
    • +
  • Added the svg part to <sl-icon>
    • +
  • + Added the getForm() method to all form controls + #1180 +
    • +
  • + Added the experimental carousel component + #851 +
    • +
  • + Fixed a bug in <sl-select> that caused the display label to render incorrectly in + Chrome after form validation + #1197 +
    • +
  • + Fixed a bug in <sl-input> that prevented users from applying their own value for + autocapitalize, autocomplete, and autocorrect when using + type="password + #1205 +
    • +
  • + Fixed a bug in <sl-tab-group> that prevented scroll controls from showing when + dynamically adding tabs + #1208 +
    • +
  • + Fixed a bug in <sl-input> that caused the calendar icon to be clipped in Firefox + #1213 +
    • +
  • + Fixed a bug in <sl-tab> that caused sl-tab-show to be emitted when + activating the close button +
    • +
  • + Fixed a bug in <sl-spinner> that caused --track-color to be invisible with + certain colors +
    • +
  • + Fixed a bug in <sl-menu-item> that caused the focus color to show when selecting menu + items with a mouse or touch device +
    • +
  • + Fixed a bug in <sl-select> that caused sl-change and + sl-input to be emitted too early + #1201 +
    • +
  • + Fixed a positioning edge case that caused <sl-popup> to positioned nested popups + incorrectly + #1135 +
    • +
  • + Fixed a bug in <sl-tree> that caused the tree item to collapse when clicking a child + item, dragging the mouse, and releasing it on the parent node + #1082 +
    • +
  • Updated @shoelace-style/localize to 3.1.0
    • +
  • Updated @floating-ui/dom to 1.2.1
    • +
+

+ When using <input type="password"> the default value for autocapitalize, + autocomplete, and autocorrect may be affected due to the bug fixed in + #1205restore the previous behavior. +

+

+ 2.1.0 +

+
    +
  • + Added the sl-focus and sl-blur events to <sl-color-picker> +
    • +
  • + Added the focus() and blur() methods to <sl-color-picker> +
    • +
  • + Added the sl-invalid event to all form controls to enable custom validation logic + #1167 +
    • +
  • + Added validity and validationMessage properties to all form controls + #1167 +
    • +
  • + Added the rel attribute to <sl-button> to allow users to create button + links that point to specific targets + #1200 +
    • +
  • + Fixed a bug in <sl-animated-image> where the play and pause buttons were transposed + #1147 +
    • +
  • + Fixed a bug that prevented web-types.json from being generated + #1154 +
    • +
  • + Fixed a bug in <sl-color-picker> that prevented sl-change and + sl-input from emitting when using the eye dropper + #1157 +
    • +
  • + Fixed a bug in <sl-dropdown> that prevented keyboard users from selecting menu items + when using the keyboard + #1165 +
    • +
  • + Fixed a bug in the template for <sl-select> that caused the + form-control-help-text part to not be in the same location as other form controls + #1178 +
    • +
  • + Fixed a bug in <sl-checkbox> and <sl-switch> that caused the browser + to scroll incorrectly when focusing on a control in a container with overflow + #1169 +
    • +
  • + Fixed a bug in <sl-menu-item> that caused the click event to be emitted + when the item was disabled + #1113 +
    • +
  • + Fixed a bug in form controls that erroneously prevented validation states from being set when + novalidate was used on the containing form + #1164 +
    • +
  • + Fixed a bug in <sl-checkbox> that caused the required asterisk to appear before the + label in Chrome +
    • +
  • + Fixed a bug that prevented large form control labels from having the correct font size + #1195 +
    • +
  • + Improved the behavior of <sl-dropdown> in Safari so keyboard interaction works the same + as in other browsers + #1177 +
    • +
  • + Improved the icons page so it’s not as sluggish in Safari + #1122 +
    • +
  • + Improved the accessibility of <sl-switch> when used in forced-colors / Windows High + Contrast mode + #1114 +
    • +
  • + Improved user interaction heuristics for all form controls + #1175 +
    • +
+

+ 2.0.0 +

+

+ This is the first stable release of Nebula 2, meaning breaking changes to the API will no longer be accepted + for this version. Development of Nebula 2.0 started in January 2020. The first beta was released on + July 15, 2020. Since then, Nebula has grown quite a bit! Here are some stats from the project as of January 24, 2023: +

+ +

+ I’d like to extend a very special thank you to every single contributor who worked to make this possible. + Everyone who’s filed a bug, submitted a PR, requested a feature, started a discussion, helped with testing, + and advocated for the project. You are just as responsible for Nebula’s success as I am. I’d also like to + thank the folks at + Font Awesome + for recognizing Nebula’s potential and + believing in me + to make it happen. +

+

Thank you! And keep building awesome stuff!

+

Without further ado, here are the notes for this release.

+
    +
  • + Added support for the inert attribute on <sl-menu-item> to allow hidden + menu items to not accept focus + #1107 +
    • +
  • Added the tag part to <sl-select>
    • +
  • + Added sl-hover event to <sl-rating> + #1125 +
    • +
  • Added the @documentation tag with a link to the docs for each component
    • +
  • + Added the form attribute to all form controls to allow placing them outside of a + <form> element + #1130 +
    • +
  • + Added the getFormControls() function as an alternative to + HTMLFormElement.elements +
    • +
  • + Added missing docs for the header-actions slot in <sl-dialog> and + <sl-drawer> +
    • +
  • + Added hue-slider-handle and opacity-slider-handle parts to + <sl-color-picker> and correct other part names in the docs + #1142 +
    • +
  • + Fixed a bug in <sl-select> that prevented placeholders from showing when + multiple was used + #1109 +
    • +
  • + Fixed a bug in <sl-select> that caused tags to not be rounded when using the + pill attribute + #1117 +
    • +
  • + Fixed a bug in <sl-select> where the sl-change and + sl-input events didn’t weren’t emitted when removing tags + #1119 +
    • +
  • + Fixed a bug in <sl-select> that caused the listbox to scroll to the first selected item + when selecting multiple items + #1138 +
    • +
  • + Fixed a bug in <sl-select> where the input color and input hover color wasn’t using the + correct design tokens + #1143 +
    • +
  • + Fixed a bug in <sl-color-picker> that logged a console error when parsing swatches with + whitespace +
    • +
  • + Fixed a bug in <sl-color-picker> that caused selected colors to be wrong due to + incorrect HSV calculations +
    • +
  • + Fixed a bug in <sl-color-picker> that prevented the initial value from being set + correct when assigned as a property + #1141 +
    • +
  • + Fixed a bug in <sl-radio-button> that caused the checked button’s right border to be + incorrect + #1110 +
    • +
  • + Fixed a bug in <sl-spinner> that caused the animation to stop working correctly in + Safari + #1121 +
    • +
  • Fixed a bug that prevented the entire <sl-tab-panel> to be hidden when inactive
    • +
  • + Fixed a bug that caused the value of <sl-radio-group> to be + undefined depending on where the radio was activated + #1134 +
    • +
  • + Fixed a bug that caused body content to shift when scroll locking was enabled + #1132 +
    • +
  • Fixed a bug in <sl-icon> that caused icons to sometimes be clipped in Safari
    • +
  • + Fixed a bug that prevented label colors from inheriting by default in <sl-checkbox>, + <sl-radio>, and <sl-switch> +
    • +
  • + Fixed a bug in <sl-radio-group> that caused an extra margin between the host element + and the internal fieldset + #1139 +
    • +
  • + Refactored the NebulaFormControl interface to remove the invalid property, + allowing a more intuitive API for controlling validation internally +
    • +
  • + Renamed the internal FormSubmitController to FormControlController to better + reflect what it’s used for +
    • +
  • Updated Lit to 2.6.1
    • +
  • Updated Floating UI to 1.1.0
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.88 +

+

+ This release includes a complete rewrite of <sl-select> to improve accessibility and + simplify its internals. +

+
    +
  • + 🚨 BREAKING: rewrote <sl-select> +
      +
    • Accessibility has been significantly improved, especially in screen readers
      • +
    • + You must use <sl-option> instead of <sl-menu-item> for options + now +
      • +
    • + The suffix slot was removed because it was confusing to users and its position made the + clear button inaccessible +
      • +
    • + The max-tags-visible attribute has been renamed to max-options-visible +
      • +
    • Many parts have been removed or renamed (please see the docs for more details)
      • +
    +
    • +
  • + 🚨 BREAKING: removed the sl-label-change event from <sl-menu-item> (listen + for slotchange instead) +
    • +
  • + 🚨 BREAKING: removed type to select logic from <sl-menu> (this was added specifically + for <sl-select> which no longer uses <sl-menu>) +
    • +
  • + 🚨 BREAKING: swatches in <sl-color-picker> are no longer present by default (but you + can set them using the swatches attribute now) +
    • +
  • + 🚨 BREAKING: improved the accessibility of <sl-menu-item> so checked items are + announced as such +
      +
    • + Checkbox menu items must now have type="checkbox" before applying the + checked attribute +
      • +
    • Checkbox menu items will now toggle their checked state on their own when selected
      • +
    • Disabled menu items will now receive focus, but are still not selectable
      • +
    +
    • +
  • Added the <sl-option> component
    • +
  • + Added Traditional Chinese translation + #1086 +
    • +
  • + Added support for swatches to be an attribute of <sl-color-picker> so + swatches can be defined declaratively (it was previously a property; use a ; to separate + color values) +
    • +
  • + Fixed a bug in <sl-tree-item> where the checked/indeterminate states could get out of + sync when using the multiple option + #1076 +
    • +
  • + Fixed a bug in <sl-tree> that caused sl-selection-change to emit before + the DOM updated + #1096 +
    • +
  • + Fixed a bug that prevented <sl-switch> from submitting a default value of + on when no value was provided + #1103 +
    • +
  • + Fixed a bug in <sl-textarea> that caused the scrollbar to show sometimes when using + resize="auto" +
    • +
  • + Fixed a bug in <sl-input> and <sl-textarea> that caused its + validation states to be out of sync in some cases + #1063 +
    • +
  • Reorganized all components to make class structures more consistent
    • +
  • + Updated some incorrect default values for design tokens in the docs + #1097 +
    • +
  • + Updated non-public fields to use the private keyword (these were previously private only by + convention, but now TypeScript will warn you) +
    • +
  • + Updated the hover style of <sl-menu-item> to be consistent with + <sl-option> +
    • +
  • + Updated the status of <sl-tree> and <sl-tree-item> from experimental + to stable +
    • +
  • + Updated React wrappers to use the latest API from @lit-labs/react + #1090 +
    • +
  • Updated Bootstrap Icons to 1.10.3
    • +
+

+ 2.0.0-beta.87 +

+
    +
  • + 🚨 BREAKING: changed the default size of medium checkboxes, radios, and switches to 18px instead of 16px +
    • +
  • + 🚨 BREAKING: renamed the --sl-toggle-size design token to + --sl-toggle-size-medium +
    • +
  • Added the --sl-toggle-size-small and --sl-toggle-size-large design tokens
    • +
  • + Added the size attribute to <sl-checkbox>, <sl-radio>, + and <sl-switch> + #1071 +
    • +
  • + Added the sl-input event to <sl-checkbox>, + <sl-color-picker>, <sl-radio>, <sl-range>, and + <sl-switch> +
    • +
  • + Added HSV format to <sl-color-picker> + #1072 +
    • +
  • + Fixed a bug in <sl-color-picker> that sometimes prevented the color from updating when + clicking or tapping on the controls +
    • +
  • + Fixed a bug in <sl-color-picker> that prevented text from being entered in the color + input +
    • +
  • + Fixed a bug in <sl-input> that caused the sl-change event to be + incorrectly emitted when the value was set programmatically + #917 +
    • +
  • + Fixed a bug in <sl-input> and <sl-textarea> that made it impossible + to disable spell checking + #1061 +
    • +
  • + Fixed non-modal behaviors in <sl-drawer> when using the + contained attribute + #1051 +
    • +
  • + Fixed a bug in <sl-checkbox> and <sl-radio> that caused the checked + icons to not scale property when resized +
    • +
  • + Fixed a bug that broke React imports + #1050 +
    • +
  • + Refactored <sl-color-picker> to use @ctrl/tinycolor instead of + color saving ~67KB + #1072 +
    • +
  • + Removed the formdata event polyfill since it’s now available in the last two versions of all + major browsers +
    • +
+

+ 2.0.0-beta.86 +

+
    +
  • + 🚨 BREAKING: changed the default value of date in <sl-relative-time> to + the current date instead of the Unix epoch +
    • +
  • + 🚨 BREAKING: removed the handle-icon part and slot from + <sl-image-comparer> (use handle instead) +
    • +
  • + 🚨 BREAKING: removed the handle slot from <sl-split-panel> (use the + divider slot instead) +
    • +
  • + 🚨 BREAKING: removed the --box-shadow custom property from + <sl-alert> (apply a box shadow to ::part(base) instead) +
    • +
  • + 🚨 BREAKING: removed the play-icon and pause-icon parts (use the + play-icon and pause-icon slots instead) +
    • +
  • + Added header-actions slot to <sl-dialog> and + <sl-drawer> +
    • +
  • + Added the expand-icon and collapse-icon slots to + <sl-details> and refactored the icon animation + #1046 +
    • +
  • + Added the play-icon and pause-icon slots to + <sl-animated-image> so you can customize the default icons +
    • +
  • Converted isTreeItem() export to a static method of <sl-tree-item>
    • +
  • + Fixed a bug in <sl-tree-item> where sl-selection-change was emitted when + the selection didn’t change + #1030 +
    • +
  • + Fixed a bug in <sl-button-group> that caused the border to render incorrectly when + hovering over icons inside buttons + #1035 +
    • +
  • + Fixed an incorrect default for flip-fallback-strategy in <sl-popup> that + caused the fallback strategy to be initial instead of best-fit, which is + inconsistent with Floating UI’s default + #1036 +
    • +
  • + Fixed a bug where browser validation tooltips would show up when hovering over form controls + #1037 +
    • +
  • + Fixed a bug in <sl-tab-group> that sometimes caused the active tab indicator to not + animate +
    • +
  • + Fixed a bug in <sl-tree-item> that caused the expand/collapse icon slot to be out of + sync when the node is open initially +
    • +
  • + Fixed the mislabeled handle-icon slot in <sl-image-comparer> (it now + points to the <slot>, not the slot’s fallback content) +
    • +
  • + Fixed the border radius in <sl-dropdown> so it matches with nested + <sl-menu> elements +
    • +
  • + Fixed a bug that caused all button values to appear in submitted form data even if they weren’t the + submitter +
    • +
  • + Improved IntelliSense in VS Code, courtesy of + Burton’s amazing CEM Analyzer plugin +
    • +
  • + Improved accessibility of <sl-alert> so the alert is announced and the close button has + a label +
    • +
  • + Improved accessibility of <sl-progress-ring> so slotted labels are announced along with + visually hidden labels +
    • +
  • + Refactored all styles and animations to use translate, rotate, and + scale instead of transform +
    • +
  • Removed slot wrappers from many components, allowing better control over user-applied styles
    • +
  • Removed unused aria attributes from <sl-skeleton>
    • +
  • + Replaced the x icon in the system icon library with x-lg to improve icon + consistency +
    • +
+

+ 2.0.0-beta.85 +

+
    +
  • + Fixed a bug in <sl-dropdown> that caused containing dialogs, drawers, etc. to close + when pressing Escape while focused + #1024 +
    • +
  • + Fixed a bug in <sl-tree-item> that allowed lazy nodes to be incorrectly selected + #1023 +
    • +
  • + Fixed a typing bug in <sl-tree-item> + #1026 +
    • +
  • + Updated Floating UI to 1.0.7 to fix a bug that prevented hoist from working correctly in + <sl-dropdown> after a recent update + #1024 +
    • +
+

+ 2.0.0-beta.84 +

+
    +
  • + 🚨 BREAKING: Removed the fieldset property from <sl-radio-group> (use CSS + parts if you want to keep the border) + #965 +
    • +
  • + 🚨 BREAKING: Removed base and label parts from + <sl-radio-group> (use form-control and + form-control__label instead) + #965 +
    • +
  • + 🚨 BREAKING: Removed the base part from <sl-icon> (style the host element + directly instead) +
    • +
  • + 🚨 BREAKING: Removed the invalid attribute from form controls (use + [data-invalid] to target it with CSS) +
    • +
  • + Added validation states to all form controls to allow styling based on various validation states + #1011 +
      +
    • data-required - indicates that a value is required
      • +
    • data-optional - indicates that a value is NOT required
      • +
    • data-invalid - indicates that the form control is invalid
      • +
    • data-valid - indicates that the form control is valid
      • +
    • + data-user-invalid - indicates the form control is invalid and the user has interacted + with it +
      • +
    • + data-user-valid - indicates the form control is valid and the user has interacted with it +
      • +
    +
    • +
  • + Added npm exports + #1020 +
    • +
  • Added checkValidity() method to all form controls
    • +
  • Added reportValidity() method to <sl-range>
    • +
  • + Added button--checked to <sl-radio-button> and + control--checked to <sl-radio> to style just the checked state + #933 +
    • +
  • + Added tests for <sl-menu>, <sl-menu-item>, + <sl-menu-label>, <sl-rating>, <sl-relative-time>, + <sl-skeleton>, <sl-tab-panel> and <sl-tag> + #935 + #949 + #956 +
    • +
  • + Added translations for Hungarian, Turkish, English (United Kingdom) and German (Austria) + #982 +
    • +
  • + Added --indicator-transition-duration custom property to + <sl-progress-ring> + #986 +
    • +
  • + Added --sl-input-required-content-color custom property to all form controls + #948 +
    • +
  • + Added the ability to cancel sl-show and sl-hide events in + <sl-details> + #993 +
    • +
  • Added focus() and blur() methods to <sl-radio-button>
    • +
  • + Added stepUp() and stepDown() methods to <sl-input> and + <sl-range> + #1013 +
    • +
  • + Added showPicker() method to <sl-input> + #1013 +
    • +
  • Added the handle-icon part to <sl-image-comparer>
    • +
  • + Added caret, check, grip-vertical, indeterminate, and + radio icons to the system library and removed check-lg + #985 +
    • +
  • + Added the loading attribute to <sl-avatar> to allow lazy loading of image + avatars + #1006 +
    • +
  • + Added formenctype attribute to <sl-button> + #1009 +
    • +
  • + Added exports to package.json and removed the main and + module properties + #1007 +
    • +
  • + Fixed a bug in <sl-card> that prevented the border radius to apply correctly to the + header + #934 +
    • +
  • + Fixed a bug in <sl-button-group> where the inner border disappeared on focus + #980 +
    • +
  • + Fixed a bug that caused prefix/suffix animations in <sl-input> to wobble + #996 +
    • +
  • + Fixed a bug in <sl-icon> that prevented color from being set on the host element + #999 +
    • +
  • + Fixed a bug in <sl-dropdown> where the keydown event erroneously + propagated to ancestors when pressing Escape + #990 +
    • +
  • + Fixed a bug that prevented arrow keys from scrolling content within <sl-dialog> and + <sl-drawer> + #925 +
    • +
  • + Fixed a bug that prevented Escape from closing <sl-dialog> and + <sl-drawer> in some cases +
    • +
  • + Fixed a bug that caused forms to submit unexpectedly when selecting certain characters + #988 +
    • +
  • + Fixed a bug in <sl-radio-group> that prevented the invalid property from + correctly reflecting validity sometimes + #992 +
    • +
  • + Fixed a bug in <sl-tree> that prevented selections from working correctly on + dynamically added tree items + #963 +
    • +
  • + Fixed module paths in custom-elements.json so they point to the dist file instead of the + source file + #725 +
    • +
  • + Fixed an incorrect return value for reportValidity() in <sl-color-picker> +
    • +
  • + Improved <sl-badge> to improve padding and render relative to the current font size +
    • +
  • + Improved how many components display in forced-colors mode / Windows High Contrast mode +
      +
    • Improved <sl-color-picker> so it’s usable in forced-colors mode
      • +
    • + Improved <sl-dialog> and <sl-drawer> so the panel is more + visible in forced-colors mode +
      • +
    • Improved <sl-menu-item> so selections are visible in forced-colors mode
      • +
    • Improved <sl-progress-bar> so it’s visible in forced-colors mode
      • +
    • + Improved <sl-radio-button> so checked states are visible in forced-colors mode +
      • +
    • + Improved <sl-range> so the thumb, track, and tooltips are visible in forced-colors + mode +
      • +
    • Improved <sl-rating> so icons are visible in forced-colors mode
      • +
    • Improved <sl-split-panel> so the divider is visible in forced-colors mode
      • +
    • Improved <sl-tree-item> so selected items are visible in forced-colors mode
      • +
    • + Improved <sl-tab-group> so tabs are cleaner and easier to understand in + forced-colors mode +
      • +
    +
    • +
  • + Improved positioning of the menu in <sl-select> so you can customize the menu width + #1018 +
    • +
  • + Moved all component descriptions to @summary to get them within documentation tools + #962 +
    • +
  • + Refactored form controls to use the NebulaFormControl interface to improve type safety and + consistency +
    • +
  • Updated Lit to 2.4.1
    • +
  • Updated @shoelace-style/localize t0 3.0.3 to support for extended language codes
    • +
  • Updated Bootstrap Icons to 1.10.2
    • +
  • Updated TypeScript to 4.8.4
    • +
  • Updated esbuild to 0.15.14
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.83 +

+

+ This release removes the <sl-responsive-media> component. When this component was + introduced, support for + aspect-ratio) wasn’t great. These days, + the property is supported + by all of Nebula’s target browsers, making a dedicated component redundant. +

+
    +
  • + 🚨 BREAKING: Removed <sl-responsive-media> (use the well-supported + aspect-ratio CSS property instead) +
    • +
  • + 🚨 BREAKING: Changed the toggle-password attribute of <sl-input> to + password-toggle for consistency +
    • +
  • Added an expand/collapse animation to <sl-tree-item>
    • +
  • Added sl-lazy-change event to <sl-tree-item>
    • +
  • + Added expand-button part to <sl-tree-item> + #893 +
    • +
  • + Added password-visible attribute to <sl-input> + #913 +
    • +
  • Fixed a bug in <sl-popup> that didn’t account for the arrow’s diagonal size
    • +
  • Fixed a bug in <sl-popup> that caused arrow placement to be incorrect with RTL
    • +
  • + Fixed a bug in <sl-progress-ring> that caused the indeterminate animation to stop + working in Safari + #891 +
    • +
  • + Fixed a bug in <sl-range> that caused it to overflow a container at 100% width + #905 +
    • +
  • + Fixed a bug in <sl-tree-item> that prevented custom expand/collapse icons from + rendering +
    • +
  • + Fixed a bug in <sl-tree-item> where the expand-icon and + collapse-icon slots were reversed +
    • +
  • + Fixed a bug in <sl-tree-item> that prevented the keyboard from working after lazy + loading + #882 +
    • +
  • + Fixed a bug in <sl-textarea> that prevented the textarea from resizing automatically + when setting the value programmatically + #912 +
    • +
  • + Fixed a handful of paths to prevent TypeScript from getting upset + #886 +
    • +
  • + Fixed a bug in <sl-radio-group> where the button-group__base part was + documented but not exposed + #909 +
    • +
  • + Fixed a bug in <sl-range> that caused the active track color to render on the wrong + side in RTL + #916 +
    • +
  • + Refactored the internal event emitter to be part of NebulaElement to reduce imports and + improve DX +
    • +
  • + Downgraded Floating UI from 1.0.1 to 1.0.0 due to new logic that makes positioning much slower for certain + components + #915 +
    • +
  • + Upgraded the status of <sl-animated-image>, <sl-popup>, and + <sl-split-panel> from experimental to stable +
    • +
+

+ 2.0.0-beta.82 +

+
    +
  • + Added the sync and arrow-placement attributes to <sl-popup> +
    • +
  • + Changed the auto-size attribute of the experimental <sl-popup> component + so it accepts horizontal, vertical, and both instead of a boolean + value +
    • +
  • + Changed the flip-fallback-placement attribute of the experimental + <sl-popup> component to flip-fallback-placements +
    • +
  • + Changed the flip-fallback-strategy in the experimental + <sl-popup> component to accept best-fit and initial instead + of bestFit and initialPlacement +
    • +
  • + Fixed a bug in <sl-dropdown> that caused the panel to resize horizontally when the + trigger is clipped by the viewport + #860 +
    • +
  • + Fixed a bug in <sl-tree> where dynamically changing slotted items wouldn’t update the + tree properly +
    • +
  • + Fixed a bug in <sl-split-panel> that caused the panel to stack when clicking on the + divider in mobile versions of Chrome + #862 +
    • +
  • Fixed a bug in <sl-popup> that prevented flip fallbacks from working as intended
    • +
  • + Fixed a bug that caused concurrent animations to work incorrectly when the durations were different + #867 +
    • +
  • + Fixed a bug in <sl-color-picker> that caused the trigger and color preview to ignore + opacity on first render + #869 +
    • +
  • + Fixed a bug in <sl-tree> that prevented the keyboard from working when the component + was nested in a shadow root + #871 +
    • +
  • + Fixed a bug in <sl-tab-group> that prevented the keyboard from working when the + component was nested in a shadow root + #872 +
    • +
  • Fixed a bug in <sl-tab> that allowed disabled tabs to erroneously receive focus
    • +
  • + Improved single selection in <sl-tree> so nodes expand and collapse and receive + selection when clicking on the label +
    • +
  • + Renamed expanded-icon and collapsed-icon slots to expand-icon and + collapse-icon in the experimental <sl-tree> and + <sl-tree-item> components +
    • +
  • Improved RTL support for <sl-image-comparer>
    • +
  • + Refactored components to extend from NebulaElement to make dir and + lang reactive properties in all components +
    • +
+

+ 2.0.0-beta.81 +

+
    +
  • + 🚨 BREAKING: removed the base part from <sl-menu> and removed an + unnecessary <div> that made styling more difficult +
    • +
  • Added the anchor property to <sl-popup> to support external anchors
    • +
  • + Added read-only custom properties --auto-size-available-width and + --auto-size-available-height to <sl-popup> to improve support for + overflowing popup content +
    • +
  • + Added label to <sl-rating> to improve accessibility for screen readers +
    • +
  • + Added the base__popup and base__arrow parts to <sl-tooltip> + #858 +
    • +
  • + Fixed a bug where auto-size wasn’t being applied to <sl-dropdown> and + <sl-select> +
    • +
  • Fixed a bug in <sl-popup> that caused auto-size to kick in before flip
    • +
  • + Fixed a bug in <sl-popup> that prevented the arrow-padding attribute from + working as expected +
    • +
  • + Fixed a bug in <sl-tooltip> that prevented the popup from appearing with the correct + z-index + #854 +
    • +
  • + Improved accessibility of <sl-rating> so keyboard nav works better and screen readers + announce it properly +
    • +
  • Improved accessibility of <sl-spinner> so screen readers no longer skip over it
    • +
  • + Removed a user agent sniffing notice that appeared in Chrome + #855 +
    • +
  • + Removed the default hover effect in <sl-tree-items> to make selections more obvious +
    • +
  • Updated Floating UI to 1.0.1
    • +
  • Updated esbuild to 0.15.1
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.80 +

+

+ This release breaks radio buttons, which is something that needed to happen to solve a longstanding + accessibility issue where screen readers announced an incorrect number of radios, e.g. “1 of 1” instead of + “1 of 3.” Many attempts to solve this without breaking the existing API were made, but none worked across + the board. The new implementation upgrades <sl-radio-group> to serve as the “form + control” while <sl-radio> and <sl-radio-button> serve as options + within the form control. +

+

+ To upgrade to this version, you will need to rework your radio controls by moving name up to + the radio group. And instead of setting checked to select a specific radio, you can set + value on the radio group and the checked item will update automatically. +

+
    +
  • + 🚨 BREAKING: improved accessibility of <sl-radio-group>, <sl-radio>, + and <sl-radio-button> so they announce properly in screen readers +
      +
    • + Added the name attribute to <sl-radio-group> and removed it from + <sl-radio> and <sl-radio-button> +
      • +
    • + Added the value attribute to <sl-radio-group> (use this to control + which radio is checked) +
      • +
    • Added the sl-change event to sl-radio-group
      • +
    • + Added setCustomValidity() and reportValidity() to + <sl-radio-group> +
      • +
    • + Removed the checked attribute from <sl-radio> and + <sl-radio-button> (use the radio group’s value attribute instead) +
      • +
    • + Removed the sl-change event from <sl-radio> and + <sl-radio-button> (listen for it on the radio group instead) +
      • +
    • + Removed the invalid attribute from <sl-radio> and + <sl-radio-button> +
      • +
    • + Removed setCustomValidity() and reportValidity() from + <sl-radio> and <sl-radio-button> (now available on the radio + group) +
      • +
    +
    • +
  • Added the experimental <sl-popup> component
    • +
  • Fixed a bug in <sl-menu-item> where labels weren’t always aligned correctly
    • +
  • + Fixed a bug in <sl-range> that caused the tooltip to be positioned incorrectly when + switching between LTR/RTL +
    • +
  • Refactored <sl-dropdown> to use <sl-popup>
    • +
  • + Refactored <sl-tooltip> to use <sl-popup> and added the + body part +
    • +
  • + Revert disabled focus behavior in <sl-tab-group>, <sl-menu>, and + <sl-tree> to be consistent with native form controls and menus + #845 +
    • +
+

+ 2.0.0-beta.79 +

+
    +
  • + Added experimental <sl-tree> and <sl-tree-item> components + #823 +
    • +
  • + Added --indicator-width custom property to <sl-progress-ring> + #837 +
    • +
  • + Added Swedish translation + #838 +
    • +
  • + Added support for step="any" for <sl-input type="number"> + #839 +
    • +
  • + Changed the type of component styles from CSSResult to CSSResultGroup + #828 +
    • +
  • + Fixed a bug in <sl-color-picker> where using Left and Right would + select the wrong color +
    • +
  • + Fixed a bug in <sl-dropdown> that caused the position to be incorrect on the first show + when using hoist + #843 +
    • +
  • + Fixed a bug in <sl-tab-group> where the divider was on the wrong side when using + placement="end" +
    • +
  • + Fixed a bug in <sl-tab-group> that caused nested tab groups to scroll when using + placement="start|end" + #815 +
    • +
  • + Fixed a bug in <sl-tooltip> that caused the target to be lost after a slot change + #831 +
    • +
  • + Fixed a bug in <sl-tooltip> that caused the position to be incorrect on the first show + when using hoist +
    • +
  • + Improved accessibility of <sl-tab-group>, <sl-tab>, and + <sl-tab-panel> to announce better in screen readers and by allowing focus on disabled + items +
    • +
  • + Improved accessibility of <sl-menu> and <sl-menu-item> by allowing + focus on disabled items +
    • +
  • Updated Lit to 2.2.8
    • +
  • Update esbuild to 0.14.50
    • +
  • Updated Bootstrap Icons to 1.9.1
    • +
  • Updated Floating UI to 1.0.0
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.78 +

+
    +
  • + 🚨 BREAKING: Moved the checked-icon and indeterminate-icon parts from a wrapper + <span> to the <svg> in <sl-checkbox> + #786 +
    • +
  • + 🚨 BREAKING: Moved the checked-icon part from a wrapper <span> to the + <svg> in <sl-radio> + #786 +
    • +
  • + Added the --track-active-offset custom property to <sl-range> + #806 +
    • +
  • + Fixed a bug that caused <sl-select> to sometimes have two vertical scrollbars + #814 +
    • +
  • + Fixed a bug that caused a gray line to appear between radio buttons + #821 +
    • +
  • + Fixed a bug that caused <sl-animated-image> to not render anything when using the + play attribute initially + #824 +
    • +
  • Removed :focus-visible shim now that the last two major versions of Safari support it
    • +
  • Updated Bootstrap Icons to 1.9.0
    • +
  • Updated esbuild to 0.14.49
    • +
  • Updated Floating UI to 0.5.4
    • +
  • Updated Lit to 2.2.7
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.77 +

+
    +
  • Added styles to required form controls so they show an asterisk next to the label by default
    • +
  • Added the --sl-input-required-content design token
    • +
  • + Added the required attribute to <sl-radio-group> and fixed constraint + validation logic to support custom validation +
    • +
  • Added the checked-icon part to <sl-menu-item>
    • +
  • + Added the no-spin-buttons attribute to <sl-input type="number"> + #798 +
    • +
  • + Added support for resetting forms using <sl-button type="reset"> + #799 +
    • +
  • + Fixed a bug where a duplicate clear button showed in Firefox + #791 +
    • +
  • + Fixed a bug where setting valueAsDate or valueAsNumber too early on + <sl-input> would throw an error + #796 +
    • +
  • + Fixed a bug in <sl-color-picker> where empty values weren’t properly supported + #797 +
    • +
  • + Fixed a bug in <sl-color-picker> where values were logged to the console when using the + keyboard +
    • +
  • + Fixed a bug in <sl-input> where password controls would try to + autocorrect/autocomplete/autocapitalize when the password is visible +
    • +
  • + Fixed label alignment in <sl-checkbox> and <sl-radio> so they align + to the top of the control instead of the center when wrapping +
    • +
  • + Fixed labels in <sl-checkbox> and <sl-radio> so they use the + --sl-input-label-color design token +
    • +
  • + Improved performance of the tabbable utility which can prevent the browser from temporarily locking up in + focus traps + #800 +
    • +
  • Updated the fieldset attribute so it reflects in <sl-radio-group>
    • +
+

+ 2.0.0-beta.76 +

+
    +
  • Added support for RTL animations in the Animation Registry
    • +
  • + Fixed a bug where the bottom border of <sl-select> could be cut off when the dropdown + scrolls +
    • +
  • + Fixed a bug in <sl-select> that could result in the browser locking up due to an + infinite positioning loop + #777 +
    • +
  • + Improved RTL animations for <sl-drawer> + #784 +
    • +
  • + Improved RTL styles for <sl-button-group> + #783 +
    • +
  • + Improved RTL styles for the toast stack + #785 +
    • +
  • Improved typings for translations and localized terms
    • +
  • Upgraded @shoelace-style/localize to 3.0
    • +
+

+ 2.0.0-beta.75 +

+
    +
  • + Added Persian translation + #774 +
    • +
  • + Added color-scheme to light and dark themes to improve rendering of browser-provided UI + #776 +
    • +
  • Added --track-width custom property to <sl-tab-group>
    • +
  • + Fixed focus rings for <sl-input>, <sl-select>, and + <sl-textarea> in Safari since they don’t use :focus-visible + #767 +
    • +
  • + Fixed a bug where calling HTMLFormElement.reportValidity() would skip Nebula form controls + #772 +
    • +
  • + Fixed a bug that prevented <sl-tooltip> from closing when disabled + #775 +
    • +
  • + Fixed a bug that allowed <sl-icon-button> to emit a click event when + disabled + #781 +
    • +
  • + Improved the default icon for <sl-image-comparer> so it’s more intuitive and removed + grip-vertical from system icon library +
    • +
  • + Improved RTL styles for many components + #768 +
    • +
  • + Improved base path logic to execute only when getBasePath() is first called to better support + SSR + #778 +
    • +
  • + Improved DOMParser instantiation in <sl-icon> to better support SSR + #778 +
    • +
  • + Reverted menu item caching due to regression + #766 +
    • +
  • Updated Floating UI to 0.5.2
    • +
+

+ 2.0.0-beta.74 +

+
    +
  • + 🚨 BREAKING: reworked focus rings to use outlines instead of box shadows +
      +
    • Removed the --sl-focus-ring-alpha design token
      • +
    • + Refactored --sl-focus-ring to be an outline property instead of a + box-shadow property +
      • +
    • + Added --sl-focus-ring-color, --sl-focus-ring-style, and + --sl-focus-ring-offset +
      • +
    +
    • +
  • 🚨 BREAKING: removed variant from <sl-radio-button>
    • +
  • Added sl-label-change event to <sl-menu-item>
    • +
  • + Added blur(), click(), and focus() methods as well as + sl-blur and sl-focus events to <sl-icon-button> + #730 +
    • +
  • Added Tabler Icons example to icons page
    • +
  • + Fixed a bug where updating a menu item’s label wouldn’t update the display label in + <sl-select> + #729 +
    • +
  • + Fixed a bug where the FormData event polyfill was causing issues with older browsers + #747 +
    • +
  • + Fixed a bug that caused a console error when setting value to null or + undefined in <sl-input>, <sl-select>, and + <sl-textarea> + #751 +
    • +
  • + Fixed a bug that caused <sl-checkbox> and <sl-radio> controls + without a value to submit as null instead of on like native inputs + #744 +
    • +
  • + Fixed a bug that caused <sl-dropdown> and dependent components to add unexpected + padding around the panel + #743 +
    • +
  • + Fixed a bug that prevented valueAsDate and valueAsNumber from updating + synchronously + #760 +
    • +
  • + Fixed a bug that caused <sl-menu-item> to load icons from the default library instead + of the system library + #765 +
    • +
  • + Fixed a bug in <sl-input> that prevented a canceled keydown event from + submitting the containing form when pressing enter + #764 +
    • +
  • + Improved behavior of clearable and password toggle buttons in <sl-input> and + <sl-select> + #745 +
    • +
  • + Improved performance of <sl-select> by caching menu items instead of traversing for + them each time +
    • +
  • + Improved drag utility so initial click/touch events can be accepted + #758 +
    • +
  • + Improved <sl-color-picker> to use an HSB grid instead of HSL to be more consistent with + existing color picker implementations + #762 +
    • +
  • + Improved <sl-color-picker> so the cursor is hidden and the preview is larger when + dragging the grid +
    • +
  • Refactored <sl-menu> to be more performant by caching menu items on slot change
    • +
  • + Reverted form submit logic + #718 +
    • +
  • + Updated the disabled attribute so it reflects in <sl-dropdown> + #741 +
    • +
  • + Updated the name and icon attribute so they reflect in + <sl-icon> + #742 +
    • +
  • Updated Lit to 2.2.5
    • +
  • Updated Bootstrap Icons to 1.8.3
    • +
  • Updated TypeScript to 4.7.2
    • +
  • Updated esbuild to 0.14.40
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.73 +

+
    +
  • Added button part to <sl-radio-button>
    • +
  • + Added custom validity examples and tests to <sl-checkbox>, + <sl-radio>, and <sl-radio-button> +
    • +
  • + Added enterkeyhint attribute to <sl-input> and + <sl-textarea> +
    • +
  • + Fixed a bug that prevented setCustomValidity() from working with + <sl-radio-button> +
    • +
  • + Fixed a bug where the right border of a checked <sl-radio-button> was the wrong color +
    • +
  • + Fixed a bug that prevented a number of properties, methods, etc. from being documented in + <sl-radio> and <sl-radio-button> +
    • +
  • + Fixed a bug in <sl-avatar> that prevented valid images from showing after an invalid or + missing image was provided + #717 +
    • +
  • + Fixed a bug that resulted in a console error being thrown on keydown in <sl-dropdown> + #719 +
    • +
  • + Fixed a bug that prevented <sl-dropdown> from being closed when opened initially + #720 +
    • +
  • + Fixed a bug that caused the test runner to fail when using a locale other than en-US + #726 +
    • +
  • + Improved form submit logic so most user-added event listeners will run after form data is attached and + validation occurs + #718 +
    • +
  • + Improved accessibility of <sl-tooltip> so screen readers announce the content on + hover/focus + #219 +
    • +
  • + Improved accessibility of form controls by exposing clear buttons and password visibility buttons to + screen readers while keeping them out of the tab order + #727 +
    • +
  • + Updated <sl-tab-group> and <sl-menu> to cycle through tabs and menu + items instead of stopping at the first/last when using the keyboard +
    • +
  • Removed path aliasing (again) because it doesn’t work with Web Test Runner’s esbuild plugin
    • +
+

+ 2.0.0-beta.72 +

+
    +
  • + 🚨 BREAKING: refactored parts in <sl-input>, <sl-range>, + <sl-select>, and <sl-textarea> to allow you to customize the label + and help text position +
      +
    • Added form-control-input part
      • +
    • Renamed label to form-control-label
      • +
    • Renamed help-text to form-control-help-text
      • +
    +
    • +
  • + 🚨 BREAKING: removed status from the sl-error event payload in <sl-icon> +
    • +
  • Added the experimental <sl-radio-button> component
    • +
  • + Added button-group and button-group__base parts to + <sl-radio-group> +
    • +
  • + Added the label attribute and slot to <sl-color-picker> to improve + accessibility with screen readers +
    • +
  • Fixed a bug that prevented form submission from working as expected in some cases
    • +
  • + Fixed a bug that prevented <sl-split-panel> from toggling + vertical properly + #703 +
    • +
  • + Fixed a bug that prevented <sl-color-picker> from rendering a color initially + #704 +
    • +
  • + Fixed a bug that caused focus trapping to fail when used inside a shadow root + #709 +
    • +
  • Improved accessibility throughout the docs
    • +
  • + Improved accessibility of <sl-dropdown> so the trigger’s expanded state is announced + correctly +
    • +
  • + Improved accessibility of <sl-format-date> but rendering a + <time> element instead of plain text +
    • +
  • Improved accessibility of <sl-select> so disabled controls announce correct
    • +
  • Improved accessibility in <sl-tag> so remove buttons have labels
    • +
  • + Refactored <sl-radio> to move selection logic into <sl-radio-group> +
    • +
  • Updated slot detection logic so it ignores visually hidden elements
    • +
  • Upgraded the status of <sl-visually-hidden> from experimental to stable
    • +
+

+ 2.0.0-beta.71 +

+
    +
  • + 🚨 BREAKING: refactored exported parts to ensure composed components and their parts can be targeted via + CSS +
      +
    • + Refactored the eye-dropper-button part and added eye-dropper-button__base, + eye-dropper-button__prefix, eye-dropper-button__label, + eye-dropper-button__suffix, and eye-dropper-button__caret parts to + <sl-color-picker> +
      • +
    • + Refactored the format-button part and added format-button__base, + format-button__prefix, format-button__label, + format-button__suffix, and format-button__caret parts to + <sl-color-picker> +
      • +
    • + Moved the close-button part in <sl-alert> to the internal + <sl-icon-button> and removed the <span> that wrapped it +
      • +
    • + Moved the close-button part in <sl-dialog> and + <sl-drawer> to point to the host element and added the + close-button__base part +
      • +
    • + Renamed parts in <sl-select> from tag-base to tag__base, + tag-content to tag__content, and tag-remove-button to + tag__remove-button +
      • +
    • + Moved the close-button part in <sl-tab> to the internal + <sl-icon-button> and added the close-button__base part +
      • +
    • + Moved the scroll-button part in <sl-tab-group> to the internal + <sl-icon-button> and added the scroll-button__base, + scroll-button--start, and scroll-button--end parts +
      • +
    • + Moved the remove-button part in <sl-tag> to the internal + <sl-icon-button> and added the remove-button__base part +
      • +
    +
    • +
  • + 🚨 BREAKING: removed checked-icon part from <sl-menu-item> in preparation + for parts refactor +
    • +
  • + 🚨 BREAKING: changed the typeToSelect() method’s argument from String to + KeyboardEvent in <sl-menu> to support more advanced key combinations +
    • +
  • + Added form, formaction, formmethod, formnovalidate, + and formtarget attributes to <sl-button> + #699 +
    • +
  • Added Prettier and ESLint to markdown files
    • +
  • Added background color and border to <sl-menu>
    • +
  • + Added more tests for <sl-input>, <sl-select>, and + <sl-textarea> +
    • +
  • + Fixed a bug that prevented forms from submitting when pressing Enter inside of an + <sl-input> + #700 +
    • +
  • + Fixed a bug in <sl-input> that prevented the valueAsDate and + valueAsNumber properties from working when set before the component was initialized +
    • +
  • + Fixed a bug in <sl-dropdown> where pressing Home or End wouldn’t + select the first or last menu items, respectively +
    • +
  • + Improved autofocus behavior in Safari for <sl-dialog> and + <sl-drawer> + #693 +
    • +
  • + Improved type to select logic in <sl-menu> so it supports Backspace and + gives users more time before resetting +
    • +
  • Improved checkmark size and positioning in <sl-menu-item>
    • +
  • + Improved accessibility in form controls that have help text so they’re announced correctly in various + screen readers +
    • +
  • + Removed feature detection for focus({ preventScroll }) since it no longer works in Safari +
    • +
  • Removed the --sl-tooltip-arrow-start-end-offset design token
    • +
  • + Removed the pattern attribute from <sl-textarea> as it was documented + incorrectly and never supported +
    • +
  • + Replaced Popper positioning dependency with Floating UI in <sl-dropdown> and + <sl-tooltip> +
    • +
+

+ 2.0.0-beta.70 +

+
    +
  • + Added tag-base, tag-content, and tag-remove-button parts to + <sl-select> + #682 +
    • +
  • + Added support for focusing elements with autofocus when <sl-dialog> and + <sl-drawer> open + #688 +
    • +
  • + Added the placement attribute to <sl-select> + #687 +
    • +
  • + Added Danish translation + #690 +
    • +
  • + Fixed a bug that allowed <sl-dropdown> to go into an incorrect state when activating + the trigger while disabled + #684 +
    • +
  • + Fixed a bug where Safari would sometimes not focus after preventing sl-initial-focus + #688 +
    • +
  • + Fixed a bug where the active tab indicator in <sl-tab-group> would be misaligned when + using disabled tabs + #695 +
    • +
  • Improved the size of the remove button in <sl-tag>
    • +
  • Removed Google Analytics from the docs
    • +
+

+ 2.0.0-beta.69 +

+
    +
  • + Added web-types.json to improve the dev experience for WebStorm/PHPStorm users + #328 +
    • +
  • Fixed a bug that caused an error when pressing up/down in <sl-select>
    • +
  • + Fixed a bug that caused <sl-details> to not show when double clicking the summary while + open + #662 +
    • +
  • + Fixed a bug that prevented the first/last menu item from receiving focus when pressing up/down in + <sl-dropdown> +
    • +
  • + Fixed a bug that caused the active tab indicator in <sl-tab-group> to render + incorrectly when used inside an element that animates + #671 +
    • +
  • + Fixed a bug that allowed values in <sl-range> to be invalid according to its + min|max|step + #674 +
    • +
  • Updated Lit to 2.1.4
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.68 +

+
    +
  • + Fixed path aliases in generated files so they’re relative again + #669 +
    • +
+

+ 2.0.0-beta.67 +

+
    +
  • + Fixed a TypeScript config regression introduced in + #647 +
    • +
+

+ 2.0.0-beta.66 +

+
    +
  • Attempted to fix a bug that prevented types from being generated in the build
    • +
+

+ 2.0.0-beta.65 +

+
    +
  • + 🚨 BREAKING: the unit property of <sl-format-bytes> has changed to + byte | bit instead of bytes | bits +
    • +
  • + Added display-label part to <sl-select> + #650 +
    • +
  • + Added --spacing custom property to <sl-divider> + #664 +
    • +
  • + Added event.detail.source to the sl-request-close event in + <sl-dialog> and <sl-drawer> +
    • +
  • + Fixed a bug that caused <sl-progress-ring> to render the wrong size when + --track-width was increased + #656 +
    • +
  • + Fixed a bug that allowed <sl-details> to open and close when disabled using a screen + reader + #658 +
    • +
  • + Fixed a bug in the FormData event polyfill that threw an error in some environments + #666 +
    • +
  • + Implemented stricter linting to improve consistency and reduce errors, which resulted in many small + refactors throughout the codebase + #647 +
    • +
  • + Improved accessibility of <sl-dialog> and <sl-drawer> by making the + title an <h2> and adding a label to the close button +
    • +
  • Improved search results in the documentation
    • +
  • + Refactored <sl-format-byte> to use Intl.NumberFormat so it supports + localization +
    • +
  • + Refactored themes so utility styles are no longer injected as <style> elements to + support stricter CSP rules + #571 +
    • +
  • Restored the nicer animation on <sl-spinner> and verified it works in Safari
    • +
  • + Updated Feather icon example to use Lucide + #657 +
    • +
  • Updated minimum Node version to 14.17
    • +
  • Updated Lit to 2.1.2
    • +
  • Updated to Bootstrap Icons to 1.8.1
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.64 +

+
    +
  • + 🚨 BREAKING: removed <sl-form> because all form components submit with + <form> now (learn more) +
    • +
  • + 🚨 BREAKING: changed submit attribute to type="submit" on + <sl-button> +
    • +
  • + 🚨 BREAKING: changed the alt attribute to label in + <sl-avatar> for consistency with other components +
    • +
  • Added role="status" to <sl-spinner>
    • +
  • + Added valueAsDate and valueAsNumber properties to <sl-input> + #570 +
    • +
  • + Added start, end, and panel parts to + <sl-split-panel> + #639 +
    • +
  • + Fixed broken spinner animation in Safari + #633 +
    • +
  • + Fixed an a11y bug in <sl-tooltip> where aria-describedby referenced an id + in the shadow root +
    • +
  • + Fixed a bug in <sl-radio> where tabbing didn’t work properly in Firefox + #596 +
    • +
  • + Fixed a bug in <sl-input> where clicking the left/right edge of the control wouldn’t + focus it +
    • +
  • + Fixed a bug in <sl-input> where autofill had strange styles + #644 +
    • +
  • Improved <sl-spinner> track color when used on various backgrounds
    • +
  • + Improved a11y in <sl-radio> so VoiceOver announces radios properly in a radio group +
    • +
  • + Improved the API for the experimental <sl-split-panel> component by making + position accept a percentage and adding the position-in-pixels attribute +
    • +
  • + Refactored <sl-breadcrumb-item>, <sl-button>, + <sl-card>, <sl-dialog>, <sl-drawer>, + <sl-input>, <sl-range>, <sl-select>, and + <sl-textarea> to use a Reactive Controller for slot detection +
    • +
  • + Refactored internal id usage in <sl-details>, <sl-dialog>, + <sl-drawer>, and <sl-dropdown> +
    • +
  • Removed position: relative from the common component stylesheet
    • +
  • Updated Lit to 2.1.0
    • +
  • Updated all other dependencies to latest versions
    • +
+

+ 2.0.0-beta.63 +

+
    +
  • + 🚨 BREAKING: changed the type attribute to variant in + <sl-alert>, <sl-badge>, <sl-button>, and + <sl-tag> since it’s more appropriate and to disambiguate from other + type attributes +
    • +
  • + 🚨 BREAKING: removed base part from <sl-divider> to simplify the styling + API +
    • +
  • Added the experimental <sl-split-panel> component
    • +
  • + Added focus() and blur() methods to <sl-select> + #625 +
    • +
  • + Fixed a bug where setting tooltipFormatter on <sl-range> in JSX causes + React@experimental to error out +
    • +
  • + Fixed a bug where clicking on a slotted icon in <sl-button> wouldn’t submit forms + #626 +
    • +
  • + Added the sl- prefix to generated ids for <sl-tab> and + <sl-tab-panel> +
    • +
  • Refactored <sl-button> to use Lit’s static expressions to reduce code
    • +
  • Simplified <sl-spinner> animation
    • +
+

+ 2.0.0-beta.62 +

+
    +
  • + 🚨 BREAKING: changed the locale attribute to lang in + <sl-format-bytes>, <sl-format-date>, + <sl-format-number>, and <sl-relative-time> to be consistent with how + localization is handled +
    • +
  • + Added localization support including translations for English, German, German (Switzerland), Spanish, + French, Hebrew, Japanese, Dutch, Polish, Portuguese, and Russian translations + #419 +
    • +
  • CodePen examples will now open in light or dark depending on your current preference
    • +
  • + Fixed a bug where tag names weren’t being generated in vscode.html-custom-data.json + #593 +
    • +
  • + Fixed a bug in <sl-tooltip> where the tooltip wouldn’t reposition when content changed +
    • +
  • + Fixed a bug in <sl-select> where focusing on a filled control showed the wrong focus + ring +
    • +
  • + Fixed a bug where setting value initially on <sl-color-picker> didn’t work + in React + #602 +
    • +
  • Updated filled inputs to have the same appearance when focused
    • +
  • Updated color dependency from 3.1.3 to 4.0.2
    • +
  • + Updated <sl-format-bytes>, <sl-format-date>, + <sl-format-number>, and <sl-relative-time> to work like other + localized components +
    • +
  • Upgraded the status of <sl-qr-code> from experimental to stable
    • +
  • Updated to Bootstrap Icons to 1.7.2
    • +
  • Upgraded color to 4.1.0
    • +
+

+ 2.0.0-beta.61 +

+

+ This release improves the dark theme by shifting luminance in both directions, slightly condensing the + spectrum. This results in richer colors in dark mode. It also reduces theme stylesheet sizes by eliminating + superfluous gray palette variations. +

+

+ In beta.48, I introduced a change to color tokens that allowed you to access + alpha values at the expense of a verbose, non-standard syntax. After considering feedback from the + community, I’ve decided to revert this change so the rgb() function is no longer required. Many + users reported never using it for alpha, and even more reported having trouble remembering to use + rgb() and that it was causing more harm than good. +

+

+ Furthermore, both Safari and Firefox have implemented + color-mix() + behind a flag, so access to alpha channels and other capabilities are coming to the browser soon. +

+

+ If you’re using color tokens in your own stylesheet, simply remove the rgb() to update to this + version. +

+ 
.your-styles {
+  /* change this */
+  color: rgb(var(--sl-color-primary-500));
+
+  /* to this */
+  color: var(--sl-color-primary-500);
+}
+
+

+ Thank you for your help and patience with testing Nebula. I promise, we’re not far from a stable release! +

+
    +
  • 🚨 BREAKING: removed blue gray, cool gray, true gray, and warm gray color palettes
    • +
  • + 🚨 BREAKING: removed --sl-focus-ring-color, and --sl-focus-ring-alpha (use + --sl-focus-ring instead) +
    • +
  • + 🚨 BREAKING: removed --sl-surface-base and --sl-surface-base-alt tokens (use the + neutral palette instead) +
    • +
  • Added experimental <sl-visually-hidden> component
    • +
  • + Added clear-icon slot to <sl-select> + #591 +
    • +
  • Fixed a bug in <sl-progress-bar> where the label would show in the default slot
    • +
  • Improved the dark theme palette so colors are bolder and don’t appear washed out
    • +
  • + Improved a11y of <sl-avatar> by representing it as an image with an alt + #579 +
    • +
  • Improved a11y of the scroll buttons in <sl-tab-group>
    • +
  • Improved a11y of the close button in <sl-tab>
    • +
  • + Improved a11y of <sl-tab-panel> by removing an invalid + aria-selected attribute + #579 +
    • +
  • + Improved a11y of <sl-icon> by not using a variation of the name attribute + for labels (use the label attribute instead) +
    • +
  • Moved role from the shadow root to the host element in <sl-menu>
    • +
  • Removed redundant role="menu" in <sl-dropdown>
    • +
  • Slightly faster animations for showing and hiding <sl-dropdown>
    • +
  • Updated to Bootstrap Icons to 1.7.1
    • +
  • Upgraded the status of <sl-mutation-observer> from experimental to stable
    • +
+

+ 2.0.0-beta.60 +

+
    +
  • Added React examples and CodePen links to all components
    • +
  • + Changed the attr in experimental <sl-mutation-observer> to require + "*" instead of "" to target all attributes +
    • +
  • + Fixed a bug in <sl-progress-bar> where the label attribute didn’t set the + label +
    • +
  • + Fixed a bug in <sl-rating> that caused disabled and readonly controls to transition on + hover +
    • +
  • The panel property of <sl-tab> is now reflected
    • +
  • The name property of <sl-tab-panel> is now reflected
    • +
+

+ 2.0.0-beta.59 +

+
    +
  • Added React wrappers as first-class citizens
    • +
  • + Added eye dropper to <sl-color-picker> when the browser supports the + EyeDropper API +
    • +
  • + Fixed a bug in <sl-button-group> where buttons groups with only one button would have + an incorrect border radius +
    • +
  • Improved the <sl-color-picker> trigger’s border in dark mode
    • +
  • + Switched clearable icon from x-circle to x-circle-fill to make it easier to + recognize +
    • +
  • Updated to Bootstrap Icons to 1.7.0
    • +
  • Updated to Lit 2.0.2
    • +
+

+ 2.0.0-beta.58 +

+

+ This version once again restores the bundled distribution because the unbundled + CDN approach is currently + confusing and + not working properly. Unbundling the few dependencies Nebula has is still a goal of the project, but + this jsDelivr bug + needs to be resolved before we can achieve it. +

+

I sincerely apologize for the instability of the last few beta releases as a result of this effort.

+
    +
  • Added experimental <sl-animated-image> component
    • +
  • + Added label attribute to <sl-progress-bar> and + <sl-progress-ring> to improve a11y +
    • +
  • + Fixed a bug where the tooltip would show briefly when clicking a disabled <sl-range> +
    • +
  • Fixed a bug that caused a console error when <sl-range> was used
    • +
  • + Fixed a bug where the nav part in <sl-tab-group> was on the incorrect + element + #563 +
    • +
  • + Fixed a bug where non-integer aspect ratios were calculated incorrectly in + <sl-responsive-media> +
    • +
  • + Fixed a bug in <sl-range> where setting value wouldn’t update the active + and inactive portion of the track + #572 +
    • +
  • Reverted to publishing the bundled dist and removed /+esm links from the docs
    • +
  • Updated to Bootstrap Icons to 1.6.1
    • +
+

+ 2.0.0-beta.57 +

+
    +
  • Fix CodePen links and CDN links
    • +
+

+ 2.0.0-beta.56 +

+

+ This release is the second attempt at unbundling dependencies. This will be a breaking change only if your + configuration does not support bare module specifiers. CDN users and bundler users will be + unaffected, but note the URLs for modules on the CDN must have the /+esm now. +

+
    +
  • + Added the hoist attribute to <sl-tooltip> + #564 +
    • +
  • Unbundled dependencies and configured external imports to be packaged with bare module specifiers
    • +
+

+ 2.0.0-beta.55 +

+
    +
  • Revert unbundling due to issues with the CDN not handling bare module specifiers as expected
    • +
+

+ 2.0.0-beta.54 +

+

+ Nebula doesn’t have a lot of dependencies, but this release unbundles most of them so you can potentially + save some extra kilobytes. This will be a breaking change only if your configuration + does not support bare module specifiers. CDN users and bundler users will be unaffected. +

+
    +
  • + 🚨 BREAKING: renamed the sl-clear event to sl-remove, the + clear-button part to remove-button, and the clearable property to + removable in <sl-tag> +
    • +
  • Added the disabled attribute to <sl-resize-observer>
    • +
  • + Fixed a bug in <sl-mutation-observer> where setting disabled initially + didn’t work +
    • +
  • Unbundled dependencies and configured external imports to be packaged with bare module specifiers
    • +
+

+ 2.0.0-beta.53 +

+
    +
  • + 🚨 BREAKING: removed <sl-menu-divider> (use <sl-divider> instead) +
    • +
  • + 🚨 BREAKING: removed percentage attribute from <sl-progress-bar> and + <sl-progress-ring> (use value instead) +
    • +
  • + 🚨 BREAKING: switched the default type of <sl-tag> from + primary to neutral +
    • +
  • Added the experimental <sl-mutation-observer> component
    • +
  • Added the <sl-divider> component
    • +
  • + Added --sl-color-neutral-0 and --sl-color-neutral-50 as early surface tokens to + improve the appearance of alert, card, and panels in dark mode +
    • +
  • Added the --sl-panel-border-width design token
    • +
  • Added missing background color to <sl-details>
    • +
  • Added the --padding custom property to <sl-tab-panel>
    • +
  • + Added the outline variation to <sl-button> + #522 +
    • +
  • + Added the filled variation to <sl-input>, + <sl-textarea>, and <sl-select> and supporting design tokens +
    • +
  • + Added the control part to <sl-select> so you can target the main control + with CSS + #538 +
    • +
  • + Added a border to <sl-badge> to improve contrast when drawn on various background + colors +
    • +
  • + Added --track-color-active and --track-color-inactive custom properties to + <sl-range> + #550 +
    • +
  • + Added the undocumented custom properties --thumb-size, --tooltip-offset, + --track-height on <sl-range> +
    • +
  • + Changed the default distance in <sl-dropdown> from 2 to + 0 + #538 +
    • +
  • + Fixed a bug where <sl-select> would be larger than the viewport when it had lots of + options + #544 +
    • +
  • Fixed a bug where <sl-progress-ring> wouldn’t animate in Safari
    • +
  • + Updated the default height of <sl-progress-bar> from 16px to + 1rem and added a subtle shadow to indicate depth +
    • +
  • + Removed the lit-html dependency and moved corresponding imports to lit + #546 +
    • +
+

+ 2.0.0-beta.52 +

+
    +
  • + 🚨 BREAKING: changed the --stroke-width custom property of <sl-spinner> to + --track-width for consistency +
    • +
  • + 🚨 BREAKING: removed the size and stroke-width attributes from + <sl-progress-ring> so it’s fully customizable with CSS (use the --size and + --track-width custom properties instead) +
    • +
  • Added the --speed custom property to <sl-spinner>
    • +
  • + Added the --size and --track-width custom properties to + <sl-progress-ring> +
    • +
  • + Added tests for <sl-badge> + #530 +
    • +
  • + Fixed a bug where <sl-tab> wasn’t using a border radius token + #523 +
    • +
  • + Fixed a bug in the Remix Icons example where some icons would 404 + #528 +
    • +
  • Updated <sl-progress-ring> to use only CSS for styling
    • +
  • Updated <sl-spinner> to use an SVG and improved the indicator animation
    • +
  • Updated to Lit 2.0 and lit-html 2.0 🔥
    • +
+

+ 2.0.0-beta.51 +

+

+ A number of users had trouble counting characters that repeat, so this release improves design token + patterns so that “t-shirt sizes” are more accessible. For example, --sl-font-size-xxx-large has + become --sl-font-size-3x-large. This change applies to all design tokens that use this scale. +

+
    +
  • + 🚨 BREAKING: all t-shirt size design tokens now use 2x, 3x, + 4x instead of xx, xxx, xxxx +
    • +
  • Added missing --sl-focus-ring-* tokens to dark theme
    • +
  • Added an “Importing” section to all components with copy/paste code to make cherry picking easier
    • +
  • + Improved the documentation search with a custom plugin powered by + Lunr +
    • +
  • Improved the --sl-shadow-x-small elevation
    • +
  • Improved visibility of elevations and overlays in dark theme
    • +
  • + Reduced the size of <sl-color-picker> slightly to better accommodate mobile devices +
    • +
  • + Removed <sl-icon> dependency from <sl-color-picker> and improved the + copy animation +
    • +
+

+ 2.0.0-beta.50 +

+
    +
  • Added <sl-breadcrumb> and <sl-breadcrumb-item> components
    • +
  • + Added --sl-letter-spacing-denser, --sl-letter-spacing-looser, + --sl-line-height-denser, and --sl-line-height-looser design tokens +
    • +
  • + Fixed a bug where form controls would error out when the value was set to undefined + #513 +
    • +
+

+ 2.0.0-beta.49 +

+

+ This release changes the way focus states are applied to elements. In browsers that support + :focus-visible, it will be used. In unsupportive browsers (currently only Safari), :focus will be used instead. This means the browser will determine whether a focus ring + should be shown based on how the user interacts with the page. +

+

+ This release also fixes a critical bug in the color scale where --sl-color-neutral-0 and + --sl-color-neutral-1000 were reversed. +

+
    +
  • + 🚨 BREAKING: fixed a bug where --sl-color-neutral-0 and + --sl-color-neutral-1000 were inverted (swap them to update) +
    • +
  • + 🚨 BREAKING: removed the no-fieldset property from + <sl-radio-group> (fieldsets are now hidden by default; use fieldset to + show them) +
    • +
  • + 🚨 BREAKING: removed --focus-ring custom property from <sl-input>, + <sl-select>, <sl-tab> for consistency with other form controls +
    • +
  • Added --swatch-size custom property to <sl-color-picker>
    • +
  • Added date to <sl-input> as a supported type
    • +
  • + Added the --sl-focus-ring design token for a more convenient way to apply focus ring styles +
    • +
  • Adjusted elevation tokens to use neutral in light mode and black in dark mode
    • +
  • Adjusted --sl-overlay-background-color in dark theme to be black instead of gray
    • +
  • + Fixed a bug in <sl-color-picker> where the opacity slider wasn’t showing the current + color +
    • +
  • + Fixed a bug where Edge in Windows would show the native password toggle next to the custom password toggle + #508 +
    • +
  • + Fixed a bug where pressing up/down in <sl-tab-group> didn’t select the next/previous + tab in vertical placements +
    • +
  • Improved size of <sl-color-picker>
    • +
  • Improved icon contrast in <sl-input>
    • +
  • Improved contrast of <sl-switch>
    • +
  • Improved :focus-visible behavior in many components
    • +
  • Removed elevation from <sl-color-picker> when rendered inline
    • +
  • + Removed custom :focus-visible logic in favor of a directive that outputs + :focus-visible or :focus depending on browser support +
    • +
  • Updated to Lit 2.0.0-rc.3
    • +
  • Updated to lit-html 2.0.0-rc.4
    • +
+

+ 2.0.0-beta.48 +

+

+ This release improves theming by offering both light and dark themes that can be used autonomously. It also + improves contrast in most components, adds a variety of new color primitives, and changes the way color + tokens are consumed. +

+

+ Previously, color tokens were in hexadecimal format. Now, Nebula now uses an R G B format that + requires you to use the rgb() function in your CSS. +

+ 
.example {
+  /* rgb() is required now */
+  color: var(--sl-color-neutral-500);
+}
+
+

+ This is more verbose than previous versions, but it has the advantage of letting you set the alpha channel + of any color token. +

+ 
.example-with-alpha {
+  /* easily adjust opacity for any color token */
+  color: rgb(var(--sl-color-neutral-500) / 50%);
+}
+
+

+ This change applies to all design tokens that implement a color. Refer to the + color tokens page for more details. +

+
    +
  • + 🚨 BREAKING: all design tokens that implement colors have been converted to R G B and must be + used with the rgb() function +
    • +
  • + 🚨 BREAKING: removed --sl-color-black|white color tokens (use + --sl-color-neutral-0|1000 instead) +
    • +
  • + 🚨 BREAKING: removed --sl-color-primary|success|warning|info|danger-text design tokens (use + theme or primitive colors instead) +
    • +
  • + 🚨 BREAKING: removed info variant from <sl-alert>, + <sl-badge>, <sl-button>, and <sl-tag> (use + neutral instead) +
    • +
  • + 🚨 BREAKING: removed --sl-color-info-* design token (use + --sl-color-neutral-* instead) +
    • +
  • 🚨 BREAKING: renamed dist/themes/base.css to dist/themes/light.css
    • +
  • + 🚨 BREAKING: removed --sl-focus-ring-color-primary tokens (use color tokens and + --sl-focus-ring-width|alpha instead) +
    • +
  • + 🚨 BREAKING: removed --tabs-border-color from <sl-tab-group> (use + --track-color instead) +
    • +
  • + 🚨 BREAKING: changed the default value for effect to none in + <sl-skeleton> (use sheen to restore the original behavior) +
    • +
  • Added new color primitives to the base set of design tokens
    • +
  • Added --sl-color-*-950 swatches to all color palettes
    • +
  • + Added a console error that appears when menu items have duplicate values in <sl-select> +
    • +
  • Added CodePen link to code examples
    • +
  • + Added prefix and suffix slots to <sl-select> + #501 +
    • +
  • Added --indicator-color custom property to <sl-tab-group>
    • +
  • + Exposed base and dark stylesheets so they can be imported via JavaScript + #438 +
    • +
  • + Fixed a bug in <sl-menu> where pressing Enter after using type to select + would result in the wrong value +
    • +
  • + Fixed a bug in <sl-radio-group> where clicking a radio button would cause the wrong + control to be focused +
    • +
  • + Fixed a bug in <sl-button> and <sl-icon-button> where an unintended + ref attribute was present +
    • +
  • Fixed a bug in the focus-visible utility that failed to respond to mouseup events
    • +
  • Fixed a bug where clicking on a menu item would persist its hover/focus state
    • +
  • + Fixed a bug in <sl-select> where it would erroneously intercept important keyboard + shortcuts + #504 +
    • +
  • + Improved contrast throughout all components + #128 +
    • +
  • + Refactored thumb position logic in <sl-switch> + #490 +
    • +
  • + Reworked the dark theme to use an inverted + shifted design token approach instead of component-specific + selectors +
    • +
+

+ 2.0.0-beta.47 +

+

+ This release improves how component dependencies are imported. If you’ve been cherry picking, you no longer + need to import component dependencies manually. This significantly improves developer experience, making + Nebula even easier to use. For transparency, component dependencies will continue to be listed in the docs. +

+
    +
  • Added “Reflects” column to the properties table
    • +
  • Dependencies are now automatically imported for all components
    • +
  • + Fixed a bug where tabbing into <sl-radio-group> would not always focus the checked + radio +
    • +
  • Fixed a bug in component styles that prevented the box sizing reset from being applied
    • +
  • + Fixed a regression in <sl-color-picker> where dragging the grid handle wasn’t smooth +
    • +
  • + Fixed a bug where slot detection could incorrectly match against slots of child elements + #481 +
    • +
  • + Fixed a bug in <sl-input> where focus would move to the end of the input when typing in + Safari + #480 +
    • +
  • Improved base path utility logic
    • +
+

+ 2.0.0-beta.46 +

+

+ This release improves the developer experience of <sl-animation>. Previously, an + animation was assumed to be playing unless the pause attribute was set. This behavior has been + reversed and pause has been removed. Now, animations will not play until the new + play attribute is applied. +

+

+ This is a lot more intuitive and makes it easier to activate animations imperatively. In addition, the + play attribute is automatically removed automatically when the animation finishes or cancels, + making it easier to restart finite animations. Lastly, the animation’s timing is now accessible through the + new currentTime property instead of getCurrentTime() and + setCurrentTime(). +

+

+ In addition, Nebula no longer uses Sass. Component styles now use Lit’s template literal styles and theme + files use pure CSS. +

+
    +
  • + 🚨 BREAKING: removed the pause attribute from <sl-animation> (use + play to start and stop the animation instead) +
    • +
  • + 🚨 BREAKING: removed getCurrentTime() and setCurrentTime() from + <sl-animation> (use the currentTime property instead) +
    • +
  • + 🚨 BREAKING: removed the close-on-select attribute from <sl-dropdown> (use + stay-open-on-select instead) +
    • +
  • + Added the currentTime property to <sl-animation> to control the current + time without methods +
    • +
  • + Fixed a bug in <sl-range> where the tooltip wasn’t showing in Safari + #477 +
    • +
  • + Fixed a bug in <sl-menu> where pressing Enter in a menu didn’t work with + click handlers +
    • +
  • + Reworked <sl-menu> and <sl-menu-item> to use a roving tab index and + improve keyboard accessibility +
    • +
  • + Reworked tabbable logic to be more performant + #466 +
    • +
  • Switched component stylesheets from Sass to Lit’s template literal styles
    • +
  • Switched theme stylesheets from Sass to CSS
    • +
+

+ 2.0.0-beta.45 +

+

+ This release changes the way component metadata is generated. Previously, the project used TypeDoc to + analyze components and generate a very large file with type data. The data was then parsed and converted to + an easier-to-consume file called metadata.json. Alas, TypeDoc is expensive to run and the + metadata format wasn’t standard. +

+

+ Thanks to an amazing effort by + Pascal Schilp, the world has a simpler, faster way to gather metadata using the + Custom Elements Manifest Analyzer. Not only is this tool faster, but the data follows the evolving custom-elements.json format. + This is exciting because a standard format for custom elements opens the door for many potential uses, + including documentation generation, framework adapters, IDE integrations, third-party uses, and more. + Check out Pascal’s great article + for more info about custom-elements.json and the new analyzer. +

+

+ The docs have been updated to use the new custom-elements.json file. If you’re relying on the + old metadata.json file for any purpose, this will be a breaking change for you. +

+
    +
  • + 🚨 BREAKING: removed the sl-overlay-click event from <sl-dialog> and + <sl-drawer> (use sl-request-close instead) + #471 +
    • +
  • 🚨 BREAKING: removed metadata.json (use custom-elements.json instead)
    • +
  • Added custom-elements.json for component metadata
    • +
  • + Added sl-request-close event to <sl-dialog> and + <sl-drawer> +
    • +
  • Added dialog.denyClose and drawer.denyClose animations
    • +
  • + Fixed a bug in <sl-color-picker> where setting value immediately wouldn’t + trigger an update +
    • +
  • + Fixed a bug in <sl-dialog> and <sl-drawer> where setting + open initially didn’t set a focus trap +
    • +
  • + Fixed a bug that resulted in form controls having incorrect validity when disabled was + initially set + #473 +
    • +
  • Fixed a bug in the docs that caused the metadata file to be requested twice
    • +
  • + Fixed a bug where tabbing out of a modal would cause the browser to lag + #466 +
    • +
  • Updated the docs to use the new custom-elements.json for component metadata
    • +
+

+ 2.0.0-beta.44 +

+
    +
  • + 🚨 BREAKING: all invalid props on form controls now reflect validity before interaction + #455 +
    • +
  • + Allow null to be passed to disable animations in setDefaultAnimation() and + setAnimation() +
    • +
  • Converted build scripts to ESM
    • +
  • Fixed a bug in <sl-checkbox> where invalid did not update properly
    • +
  • + Fixed a bug in <sl-dropdown> where a keydown listener wasn’t cleaned up + properly +
    • +
  • + Fixed a bug in <sl-select> where sl-blur was emitted prematurely + #456 +
    • +
  • + Fixed a bug in <sl-select> where no selection with multiple resulted in an + incorrect value + #457 +
    • +
  • + Fixed a bug in <sl-select> where sl-change was emitted immediately after + connecting to the DOM + #458 +
    • +
  • Fixed a bug in <sl-select> where non-printable keys would cause the menu to open
    • +
  • + Fixed a bug in <sl-select> where invalid was not always updated properly +
    • +
  • + Reworked the @watch decorator to use update instead of + updated resulting in better performance and flexibility +
    • +
+

+ 2.0.0-beta.43 +

+
    +
  • Added ? to optional arguments in methods tables in the docs
    • +
  • + Added the scrollPosition() method to <sl-textarea> to get/set scroll + position +
    • +
  • + Added initial tests for <sl-dialog>, <sl-drawer>, + <sl-dropdown>, and <sl-tooltip> +
    • +
  • + Fixed a bug in <sl-tab-group> where scrollable tab icons were not displaying correctly +
    • +
  • + Fixed a bug in <sl-dialog> and <sl-drawer> where preventing clicks + on the overlay no longer worked as described + #452 +
    • +
  • + Fixed a bug in <sl-dialog> and <sl-drawer> where setting initial + focus no longer worked as described + #453 +
    • +
  • + Fixed a bug in <sl-card> where the slotchange listener wasn’t attached + correctly + #454 +
    • +
  • + Fixed lifecycle bugs in a number of components + #451 +
    • +
  • + Removed fill: both from internal animate utility so styles won’t “stick” by default + #450 +
    • +
+

+ 2.0.0-beta.42 +

+

+ This release addresses an issue with the open attribute no longer working in a number of + components, as a result of the changes in beta.41. It also removes a small but controversial feature that + complicated show/hide logic and led to a poor experience for developers and end users. +

+

+ There are two ways to show/hide affected components: by calling show() | hide() and by toggling + the open prop. Previously, it was possible to call event.preventDefault() in an + sl-show | sl-hide handler to stop the component from showing/hiding. The problem becomes + obvious when you set el.open = false, the event gets canceled, and in the next cycle + el.open has reverted to true. Not only is this unexpected, but it also doesn’t + play nicely with frameworks. Additionally, this made it impossible to await + show() | hide() since there was a chance they’d never resolve. +

+

+ Technical reasons aside, canceling these events seldom led to a good user experience, so the decision was + made to no longer allow sl-show | sl-hide to be cancelable. +

+
    +
  • 🚨 BREAKING: sl-show and sl-hide events are no longer cancelable
    • +
  • Added Iconoir example to the icon docs
    • +
  • Added Web Test Runner
    • +
  • Added initial tests for <sl-alert> and <sl-details>
    • +
  • + Changed the cancelable default to false for the internal + @event decorator +
    • +
  • + Fixed a bug where toggling open stopped working in <sl-alert>, + <sl-dialog>, <sl-drawer>, <sl-dropdown>, and + <sl-tooltip> +
    • +
  • + Fixed a bug in <sl-range> where setting a value outside the default min or + max would clamp the value + #448 +
    • +
  • + Fixed a bug in <sl-dropdown> where placement wouldn’t adjust properly when shown + #447 +
    • +
  • + Fixed a bug in the internal shimKeyframesHeightAuto utility that caused + <sl-details> to measure heights incorrectly + #445 +
    • +
  • Fixed a number of imports that should have been type imports
    • +
  • Updated Lit to 2.0.0-rc.2
    • +
  • Updated esbuild to 0.12.4
    • +
+

+ 2.0.0-beta.41 +

+

+ This release changes how components animate. In previous versions, CSS transitions were used for most + show/hide animations. Transitions are problematic due to the way transitionend works. This + event fires once per transition, and it’s impossible to know which transition to look for when + users can customize any possible CSS property. Because of this, components previously required the + opacity property to transition. If a user were to prevent opacity from + transitioning, the component wouldn’t hide properly and the sl-after-show|hide events would + never emit. +

+

+ CSS animations, on the other hand, have a more reliable animationend event. Alas, + @keyframes don’t cascade and can’t be injected into a shadow DOM via CSS, so there would be no + good way to customize them. +

+

+ The most elegant solution I found was to use the + Web Animations API, which offers more control over animations at the expense of customizations being done in JavaScript. + Fortunately, through the Animation Registry, you can + customize animations globally and/or per component with a minimal amount of code. +

+
    +
  • + 🚨 BREAKING: changed left and right placements to start and + end in <sl-drawer> +
    • +
  • + 🚨 BREAKING: changed left and right placements to start and + end in <sl-tab-group> +
    • +
  • + 🚨 BREAKING: removed --hide-duration, --hide-timing-function, + --show-duration, and --show-timing-function custom properties from + <sl-tooltip> (use the Animation Registry instead) +
    • +
  • Added the Animation Registry
    • +
  • + Fixed a bug where removing <sl-dropdown> from the DOM and adding it back destroyed the + popover reference + #443 +
    • +
  • + Updated animations for <sl-alert>, <sl-dialog>, + <sl-drawer>, <sl-dropdown>, and <sl-tooltip> to + use the Animation Registry instead of CSS transitions +
    • +
  • Improved a11y by respecting prefers-reduced-motion for all show/hide animations
    • +
  • + Improved --show-delay and --hide-delay behavior in + <sl-tooltip> so they only apply on hover +
    • +
  • Removed the internal popover utility
    • +
+

+ 2.0.0-beta.40 +

+
    +
  • + 🚨 BREAKING: renamed <sl-responsive-embed> to + <sl-responsive-media> and added support for images and videos + #436 +
    • +
  • + Fixed a bug where setting properties before an element was defined would render incorrectly + #425 +
    • +
  • + Fixed a bug that caused all modules to be imported when cherry picking certain components + #439 +
    • +
  • + Fixed a bug where the scrollbar would reposition <sl-dialog> on hide causing it to jump + #424 +
    • +
  • Fixed a bug that prevented the project from being built in a Windows environment
    • +
  • Improved a11y in <sl-progress-ring>
    • +
  • + Removed src/utilities/index.ts to prevent tree-shaking confusion (please import utilities + directly from their respective modules) +
    • +
  • Removed global [hidden] styles so they don’t affect anything outside of components
    • +
  • Updated to Bootstrap Icons 1.5.0
    • +
  • + Updated React docs to use + @shoelace-style/react +
    • +
  • + Updated NextJS docs + #434 +
    • +
  • Updated TypeScript to 4.2.4
    • +
+

+ 2.0.0-beta.39 +

+
    +
  • Added experimental <sl-qr-code> component
    • +
  • + Added system icon library and updated all components to use this instead of the default icon + library + #420 +
    • +
  • Updated to esbuild 0.8.57
    • +
  • Updated to Lit 2.0.0-rc.1 and lit-html 2.0.0-rc.2
    • +
+

+ 2.0.0-beta.38 +

+
    +
  • + 🚨 BREAKING: <sl-radio> components must be located inside an + <sl-radio-group> for proper accessibility + #218 +
    • +
  • + Added <sl-radio-group> component + #218 +
    • +
  • + Added --header-spacing, --body-spacing, and --footer-spacing custom + properties to <sl-drawer> and <sl-dialog> + #409 +
    • +
  • + Fixed a bug where <sl-menu-item> prefix and suffix slots wouldn’t always receive the + correct spacing +
    • +
  • + Fixed a bug where <sl-badge> used --sl-color-white instead of the correct + design tokens + #407 +
    • +
  • + Fixed a bug in <sl-dialog> and <sl-drawer> where the escape key + would cause parent components to close +
    • +
  • + Fixed a race condition bug in <sl-icon> + #410 +
    • +
  • Improved focus trap behavior in <sl-dialog> and <sl-drawer>
    • +
  • + Improved a11y in <sl-dialog> and <sl-drawer> by restoring focus to + trigger on close +
    • +
  • + Improved a11y in <sl-radio> with Windows high contrast mode + #215 +
    • +
  • Improved a11y in <sl-select> by preventing the chevron icon from being announced
    • +
  • + Internal: removed the options argument from the modal utility as focus trapping is now + handled internally +
    • +
+

+ 2.0.0-beta.37 +

+
    +
  • + Added click() method to <sl-checkbox>, <sl-radio>, and + <sl-switch> +
    • +
  • + Added the activation attribute to <sl-tab-group> to allow for automatic + and manual tab activation +
    • +
  • Added npm run create <tag> script to scaffold new components faster
    • +
  • + Fixed a bug in <sl-tooltip> where events weren’t properly cleaned up on disconnect +
    • +
  • + Fixed a bug in <sl-tooltip> where they wouldn’t display after toggling + disabled off and on again + #391 +
    • +
  • + Fixed a bug in <sl-details> where show() and hide() would + toggle the control when disabled +
    • +
  • + Fixed a bug in <sl-color-picker> where setting value wouldn’t update the + control +
    • +
  • + Fixed a bug in <sl-tab-group> where tabs that are initially disabled wouldn’t receive + the indicator on activation + #403 +
    • +
  • + Fixed incorrect event names for sl-after-show and sl-after-hide in + <sl-details> +
    • +
  • Improved a11y for disabled buttons that are rendered as links
    • +
  • + Improved a11y for <sl-button-group> by adding the correct role attribute +
    • +
  • + Improved a11y for <sl-input>, <sl-range>, + <sl-select>, and <sl-textarea> so labels and helper text are read + properly by screen readers +
    • +
  • + Removed sl-show, sl-hide, sl-after-show, + sl-after-hide events from <sl-color-picker> (the color picker’s visibility + cannot be controlled programmatically so these shouldn’t have been exposed; the dropdown events now bubble + up so you can listen for those instead) +
    • +
  • Reworked <sl-button-group> so it doesn’t require light DOM styles
    • +
+

+ 2.0.0-beta.36 +

+
    +
  • + 🚨 BREAKING: renamed setFocus() to focus() in button, checkbox, input, menu + item, radio, range, rating, select, switch, and tab +
    • +
  • + 🚨 BREAKING: renamed removeFocus() to blur() in button, checkbox, input, menu + item, radio, range, rating, select, switch, and tab +
    • +
  • Added click() method to <sl-button>
    • +
  • + Fixed a bug where toggling open on <sl-drawer> would skip the transition +
    • +
  • Fixed a bug where <sl-color-picker> could be opened when disabled
    • +
  • + Fixed a bug in <sl-color-picker> that caused erratic slider behaviors + #388 +
    • +
  • + Fixed a bug where <sl-details> wouldn’t always render the correct height when open + initially + #357 +
    • +
  • Renamed components.json to metadata.json
    • +
  • Updated to the prerelease versions of LitElement and lit-html
    • +
  • Updated to Bootstrap Icons 1.4.1
    • +
+

+ 2.0.0-beta.35 +

+
    +
  • + Fixed a bug in <sl-animation> where sl-cancel and + sl-finish events would never fire +
    • +
  • Fixed a bug where <sl-alert> wouldn’t always transition properly
    • +
  • + Fixed a bug where using <sl-menu> inside a shadow root would break keyboard selections + #382 +
    • +
  • + Fixed a bug where toggling multiple in <sl-select> would lead to a stale + display label +
    • +
  • + Fixed a bug in <sl-tab-group> where changing placement could result in the + active tab indicator being drawn a few pixels off +
    • +
  • + Fixed a bug in <sl-button> where link buttons threw an error on focus, blur, and click +
    • +
  • Improved @watch decorator to run after update instead of during
    • +
  • + Updated <sl-menu-item> checked icon to check instead of + check2 +
    • +
  • Upgraded the status of <sl-resize-observer> from experimental to stable
    • +
+

+ 2.0.0-beta.34 +

+

+ This release changes the way components are registered if you’re + cherry picking or + using a bundler. This recommendation came from the + LitElement team and simplifies Nebula’s dependency graph. It also eliminates the need to call a + register() function before using each component. +

+

+ From now on, importing a component will register it automatically. The caveat is that bundlers may not tree + shake the library properly if you import from @onsonr/nebula, so the recommendation is to + import components and utilities from their corresponding files instead. +

+
    +
  • 🚨 BREAKING: removed all.shoelace.js (use shoelace.js instead)
    • +
  • + 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when + importing from @onsonr/nebula (see the + installation page for more details and how to update) +
    • +
  • Added sl-clear event to <sl-select>
    • +
  • + Fixed a bug where dynamically changing menu items in <sl-select> would cause the + display label to be blank + #374 +
    • +
  • + Fixed a bug where setting the value attribute or property on + <sl-input> and <sl-textarea> would trigger validation too soon +
    • +
  • Fixed the margin in <sl-menu-label> to align with menu items
    • +
  • + Fixed autofocus attributes in <sl-input> and + <sl-textarea> +
    • +
  • + Improved types for autocapitalize in <sl-input> and + <sl-textarea> +
    • +
  • + Reverted the custom @tag decorator in favor of @customElement to enable + auto-registration +
    • +
+

+ 2.0.0-beta.33 +

+
    +
  • + Fixed a bug where link buttons could have incorrect target, download, and + rel props +
    • +
  • + Fixed aria-label and aria-labelledby props in <sl-dialog> and + <sl-drawer> +
    • +
  • Fixed tabindex attribute in <sl-menu>
    • +
  • Fixed a bug in <sl-select> where tags would always render as pills
    • +
  • + Fixed a bug in <sl-button> where calling setFocus() would throw an error +
    • +
+

+ 2.0.0-beta.32 +

+
    +
  • + Added tag name maps so TypeScript can identify Nebula elements + #371 +
    • +
  • + Fixed a bug where the active tab indicator wouldn’t render properly on tabs styled with + flex-end + #355 +
    • +
  • + Fixed a bug where sl-change wasn’t emitted by <sl-checkbox> or + <sl-switch> + #370 +
    • +
  • + Fixed a bug where some props weren’t being watched correctly in <sl-alert> and + <sl-color-picker> +
    • +
  • Improved @watch decorator so watch handlers don’t run before the first render
    • +
  • Removed guards that were added due to previous watch handler behavior
    • +
+

+ 2.0.0-beta.31 +

+
    +
  • + Add touch support to <sl-rating> + #362 +
    • +
  • + Fixed a bug where the open attribute on <sl-details> would prevent it from + opening + #357 +
    • +
  • Fixed event detail type parsing so component class names are shown instead of default
    • +
+

+ 2.0.0-beta.30 +

+
    +
  • + Fix default exports for all components so cherry picking works again + #365 +
    • +
  • Revert FOUC base style because it interferes with some framework and custom element use cases
    • +
+

+ 2.0.0-beta.29 +

+

+ This release migrates component implementations from Shoemaker to LitElement. Due to + feedback from the community, Nebula will rely on a more heavily tested library for component + implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all + your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus + the following. +

+
    +
  • + 🚨 BREAKING: removed the symbol property from <sl-rating> and reverted to + getSymbol for optimal flexibility +
    • +
  • + Added vscode.html-custom-data.json to the build to support IntelliSense (see + the usage section for details) +
    • +
  • Added a base style to prevent FOUC before components are defined
    • +
  • + Fixed bug where TypeScript types weren’t being generated + #364 +
    • +
  • Improved vertical padding in <sl-tooltip>
    • +
  • Moved chunk files into a separate folder
    • +
  • Reverted menu item active styles
    • +
  • Updated esbuild to 0.8.54
    • +
+

+ 2.0.0-beta.28 +

+

+ This release includes a major under the hood overhaul of the library and how it’s distributed. + Until now, Nebula was developed with Stencil. This release moves to a lightweight tool called Shoemaker, a + homegrown utility that provides declarative templating and data binding while reducing the boilerplate + required for said features. +

+

+ This change in tooling addresses a number of longstanding bugs and limitations. It also gives us more + control over the library and build process while streamlining development and maintenance. Instead of two + different distributions, Nebula now offers a single, standards-compliant collection of ES modules. This may + affect how you install and use the library, so please refer to the + installation page for details. +

+ +

+ The component API remains the same except for the changes noted below. Thanks for your patience as I work + diligently to make Nebula more stable and future-proof. 🙌 +

+
    +
  • 🚨 BREAKING: removed the custom elements bundle (you can import ES modules directly)
    • +
  • + 🚨 BREAKING: removed getAnimationNames() and getEasingNames() methods from + <sl-animation> (you can import them from utilities/animation.js instead) +
    • +
  • + 🚨 BREAKING: removed the <sl-icon-library> component since it required imperative + initialization (you can import the registerIconLibrary() function from + utilities/icon-library.js instead) +
    • +
  • + 🚨 BREAKING: removed the experimental <sl-theme> component due to technical limitations + (you should set the sl-theme-{name} class on the <body> instead) +
    • +
  • + 🚨 BREAKING: moved the base stylesheet from dist/shoelace.css to + dist/themes/base.css +
    • +
  • + 🚨 BREAKING: moved icons into assets/icons to make future assets easier to + colocate +
    • +
  • + 🚨 BREAKING: changed getSymbol property in <sl-rating> to + symbol (it now accepts a string or a function that returns an icon name) +
    • +
  • + 🚨 BREAKING: renamed setAssetPath() to setBasePath() and added the ability to + set the library’s base path with a data-shoelace attribute (setBasePath() is + exported from utilities/base-path.js) +
    • +
  • + Fixed min and max types in <sl-input> to allow numbers and + strings + #330 +
    • +
  • + Fixed a bug where <sl-checkbox>, <sl-radio>, and + <sl-switch> controls would shrink with long labels + #325 +
    • +
  • + Fixed a bug in <sl-select> where the dropdown menu wouldn’t reposition when the box + resized + #340 +
    • +
  • + Fixed a bug where ignoring clicks and clicking the overlay would prevent the escape key from closing the + dialog/drawer + #344 +
    • +
  • + Removed the lazy loading dist (importing shoelace.js will load and register all components + now) +
    • +
  • Switched from Stencil to Shoemaker
    • +
  • + Switched to a custom build powered by + esbuild +
    • +
  • Updated to Bootstrap Icons 1.4.0
    • +
+

+ 2.0.0-beta.27 +

+
    +
  • + Added handle-icon slot to <sl-image-comparer> + #311 +
    • +
  • + Added label and helpText props and slots to <sl-range> + #318 +
    • +
  • + Added “Integrating with NextJS” tutorial to the docs, courtesy of + crutchcorn +
    • +
  • + Added content slot to <sl-tooltip> + #322 +
    • +
  • Fixed a bug in <sl-select> where removing a tag would toggle the dropdown
    • +
  • + Fixed a bug in <sl-input> and <sl-textarea> where the input might + not exist when the value watcher is called + #313 +
    • +
  • + Fixed a bug in <sl-details> where hidden elements would receive focus when tabbing + #323 +
    • +
  • + Fixed a bug in <sl-icon> where sl-error would only be emitted for network + failures + #326 +
    • +
  • Reduced the default line-height for <sl-tooltip>
    • +
  • Updated <sl-menu-item> focus styles
    • +
  • Updated <sl-select> so tags will wrap when multiple is true
    • +
  • Updated to Stencil 2.4.0
    • +
+

+ 2.0.0-beta.26 +

+
    +
  • + 🚨 BREAKING: Fixed animations bloat +
      +
    • + Removed ~400 baked-in Animista animations because they were causing ~200KB of bloat (they can still be + used with custom keyframes) +
      • +
    • + Reworked animations into a separate module (@shoelace-style/animations) so it’s more maintainable and animations are sync with the latest version of animate.css +
      • +
    • + Animation and easing names are now camelCase (e.g. easeInOut instead of + ease-in-out) +
      • +
    +
    • +
  • + Added initial E2E tests + #169 +
    • +
  • + Added the FocusOptions argument to all components that have a setFocus() method +
    • +
  • + Added sl-initial-focus event to <sl-dialog> and + <sl-drawer> so focus can be customized to a specific element +
    • +
  • + Added close-button part to <sl-tab> so the close button can be customized +
    • +
  • + Added scroll-button part to <sl-tab-group> so the scroll buttons can be + customized +
    • +
  • + Fixed a bug where sl-hide would be emitted twice when closing an alert with + hide() +
    • +
  • + Fixed a bug in <sl-color-picker> where the toggle button was smaller than the preview + button in Safari +
    • +
  • + Fixed a bug in <sl-tab-group> where activating a nested tab group didn’t work properly + #299 +
    • +
  • Fixed a bug in <sl-tab-group> where removing tabs would throw an error
    • +
  • + Fixed a bug in <sl-alert>, <sl-dialog>, + <sl-drawer>, <sl-select>, and <sl-tag> where the + close button’s base wasn’t exported so it couldn’t be styled +
    • +
  • + Removed text type from <sl-badge> as it was erroneously copied and never + had styles +
    • +
  • + Updated <sl-tab-group> so the active property is reflected to its + attribute +
    • +
  • + Updated the docs to show dependencies instead of dependents which is much more useful when working with + the custom elements bundle +
    • +
  • Updated to Bootstrap Icons 1.3.0
    • +
+

+ 2.0.0-beta.25 +

+
    +
  • + 🚨 BREAKING: Reworked color tokens +
      +
    • Theme colors are now inspired by Tailwind’s professionally-designed color palette
      • +
    • Color token variations now range from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
      • +
    • Color token variations were inverted, e.g. 50 is lightest and 950 is darkest
      • +
    • All component styles were adapted to use the new color tokens, but visual changes are subtle
      • +
    • The dark theme was adapted use the new color tokens
      • +
    • + HSL is no longer used because it is not perceptually uniform (this may be revisited when all browsers + support + LCH colors) +
      • +
    +
    • +
  • + 🚨 BREAKING: Refactored <sl-select> to improve accessibility + #216 +
      +
    • + Removed the internal <sl-input> because it was causing problems with a11y and + virtual keyboards +
      • +
    • Removed input, prefix and suffix parts
      • +
    +
    • +
  • + 🚨 BREAKING: Removed copy-button part from <sl-color-picker> since copying + is now done by clicking the preview +
    • +
  • + Added getFormattedValue() method to <sl-color-picker> so you can retrieve + the current value in any format +
    • +
  • Added visual separators between solid buttons in <sl-button-group>
    • +
  • + Added help-text attribute to <sl-input>, <sl-textarea>, + and <sl-select> +
    • +
  • + Fixed a bug where moving the mouse while <sl-dropdown> is closing would remove focus + from the trigger +
    • +
  • Fixed a bug where <sl-menu-item> didn’t set a default color in the dark theme
    • +
  • Fixed a bug where <sl-color-picker> preview wouldn’t update in Safari
    • +
  • + Fixed a bug where removing an icon’s name or src wouldn’t remove the previously + rendered SVG + #285 +
    • +
  • Fixed a bug where disabled link buttons didn’t appear disabled
    • +
  • Improved button spacings and added split button example
    • +
  • Improved elevation tokens in dark theme
    • +
  • + Improved accessibility in <sl-tooltip> by allowing escape to dismiss it + #219 +
    • +
  • + Improved slot detection in <sl-card>, <sl-dialog>, and + <sl-drawer> +
    • +
  • + Made @types/resize-observer-browser a dependency so users don’t have to install it manually +
    • +
  • + Refactored internal label + help text logic into a functional component used by + <sl-input>, <sl-textarea>, and <sl-select> +
    • +
  • + Removed sl-blur and sl-focus events from <sl-menu> since + menus can’t have focus as of 2.0.0-beta.22 +
    • +
  • Updated <sl-spinner> so the indicator is more obvious
    • +
  • Updated to Bootstrap Icons 1.2.2
    • +
+

+ 2.0.0-beta.24 +

+
    +
  • Added <sl-format-date> component
    • +
  • + Added indeterminate state to <sl-progress-bar> + #274 +
    • +
  • + Added --track-color, --indicator-color, and --label-color to + <sl-progress-bar> + #276 +
    • +
  • + Added allow-scripts attribute to <sl-include> + #280 +
    • +
  • + Fixed a bug where <sl-menu-item> color variable was incorrect + #272 +
    • +
  • + Fixed a bug where <sl-dialog> and <sl-drawer> would emit the + sl-hide event twice + #275 +
    • +
  • + Fixed a bug where calling event.preventDefault() on certain form elements wouldn’t prevent + <sl-form> from submitting + #277 +
    • +
  • Fixed drag handle orientation in <sl-image-comparer>
    • +
  • Restyled <sl-spinner> so the track is visible and the indicator is smaller.
    • +
  • + Removed resize-observer-polyfill in favor of + @types/resize-observer-browser since all target browsers support ResizeObserver +
    • +
  • + Upgraded the status of <sl-form>, <sl-image-comparer>, and + <sl-include> from experimental to stable +
    • +
+

+ 2.0.0-beta.23 +

+
    +
  • Added <sl-format-number> component
    • +
  • Added <sl-relative-time> component
    • +
  • Added closable attribute to <sl-tab>
    • +
  • Added experimental <sl-resize-observer> utility
    • +
  • Added experimental <sl-theme> utility and updated theming documentation
    • +
  • Fixed a bug where <sl-menu-item> wouldn’t render properly in the dark theme
    • +
  • Fixed a bug where <sl-select> would show an autocomplete menu
    • +
  • Improved placeholder contrast in dark theme
    • +
  • Updated to Bootstrap Icons 1.1.0
    • +
  • Updated to Stencil 2.3.0
    • +
+

+ 2.0.0-beta.22 +

+
    +
  • + 🚨 BREAKING: Refactored <sl-menu> and <sl-menu-item> to improve + accessibility by using proper focus states + #217 +
      +
    • + Moved tabindex from <sl-menu> to <sl-menu-item> +
      • +
    • + Removed the active attribute from <sl-menu-item> because synthetic + focus states are bad for accessibility +
      • +
    • + Removed the sl-activate and sl-deactivate events from + <sl-menu-item> (listen for focus and blur instead) +
      • +
    • Updated <sl-select> so keyboard navigation still works
      • +
    +
    • +
  • + Added no-scroll-controls attribute to <sl-tab-group> + #253 +
    • +
  • + Fixed a bug where setting open initially wouldn’t show <sl-dialog> or + <sl-drawer> + #255 +
    • +
  • Fixed a bug where disabled could be set when buttons are rendered as links
    • +
  • + Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside + <sl-dialog> + #252 +
    • +
  • + Fixed a bug where boolean aria attributes didn’t explicitly set true|false string values in + the DOM +
    • +
  • + Fixed a bug where aria-describedby was never set on tooltip targets in + <sl-tooltip> +
    • +
  • + Fixed a bug where setting position on <sl-image-comparer> wouldn’t update + the divider’s position +
    • +
  • + Fixed a bug where the check icon was announced to screen readers in <sl-menu-item> +
    • +
  • + Improved <sl-icon-button> accessibility by encouraging proper use of + label and hiding the internal icon from screen readers + #220 +
    • +
  • + Improved <sl-dropdown> accessibility by attaching aria-haspopup and + aria-expanded to the slotted trigger +
    • +
  • + Refactored position logic to remove an unnecessary state variable in + <sl-image-comparer> +
    • +
  • + Refactored design tokens to use rem instead of px for input height and spacing + #221 +
    • +
  • Removed console.log from modal utility
    • +
  • Updated to Stencil 2.2.0
    • +
+

+ 2.0.0-beta.21 +

+
    +
  • + Added label slot to <sl-input>, <sl-select>, and + <sl-textarea> + #248 +
    • +
  • Added label slot to <sl-dialog> and <sl-drawer>
    • +
  • Added experimental <sl-include> component
    • +
  • Added status code to the sl-error event in <sl-icon>
    • +
  • + Fixed a bug where initial transitions didn’t show in <sl-dialog> and + <sl-drawer> + #247 +
    • +
  • Fixed a bug where indeterminate checkboxes would maintain the indeterminate state when toggled
    • +
  • + Fixed a bug where concurrent active modals (i.e. dialog, drawer) would try to steal focus from each other +
    • +
  • + Improved <sl-color-picker> grid and slider handles + #246 +
    • +
  • Refactored <sl-icon> request logic and removed unused cache map
    • +
  • + Reworked show/hide logic in <sl-alert>, <sl-dialog>, and + <sl-drawer> to not use reflow hacks and the hidden attribute +
    • +
  • + Reworked slot logic in <sl-card>, <sl-dialog>, and + <sl-drawer> +
    • +
  • Updated to Popper 2.5.3 to address a fixed position bug in Firefox
    • +
+

+ 2.0.0-beta.20 +

+
    +
  • + 🚨 BREAKING: Transformed all Nebula events to lowercase (details) +
    • +
  • Added support for dropdowns and non-icon elements to <sl-input>
    • +
  • Added spellcheck attribute to <sl-input>
    • +
  • Added <sl-icon-library> to allow custom icon library registration
    • +
  • + Added library attribute to <sl-icon> and + <sl-icon-button> +
    • +
  • + Added “Integrating with Rails” tutorial to the docs, courtesy of + ParamagicDev +
    • +
  • + Fixed a bug where <sl-progress-ring> rendered incorrectly when zoomed in Safari + #227 +
    • +
  • + Fixed a bug where tabbing into slotted elements closes <sl-dropdown> when used in a + shadow root + #223 +
    • +
  • + Fixed a bug where scroll anchoring caused undesirable scrolling when <sl-details> are + grouped +
    • +
+

+ Nebula events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as + slChange and slAfterShow, you’ll need to use sl-change and + sl-after-show now. +

+

+ This change was necessary to address a critical issue in frameworks that use DOM templates with declarative + event bindings such as <sl-button @slChange="handler">. Due to HTML’s case-insensitivity, + browsers translate attribute names to lowercase, turning @slChange into @slchange, + making it impossible to listen to slChange. +

+

+ While declarative event binding is a non-standard feature, not supporting it would make Nebula much harder + to use in popular frameworks. To accommodate those users and provide a better developer experience, we + decided to change the naming convention while Nebula is still in beta. +

+

The following pages demonstrate why this change was necessary.

+ +

+ 2.0.0-beta.19 +

+
    +
  • + Added input, label, prefix, clear-button, + suffix, help-text exported parts to <sl-select> to make the + input customizable +
    • +
  • Added toast notifications through the toast() method on <sl-alert>
    • +
  • + Fixed a bug where mouse events would bubble up when <sl-button> was disabled, causing + tooltips to erroneously appear +
    • +
  • + Fixed a bug where pressing space would open and immediately close <sl-dropdown> panels + in Firefox +
    • +
  • Fixed a bug where <sl-tooltip> would throw an error on init
    • +
  • Fixed a bug in custom keyframes animation example
    • +
  • Refactored clear logic in <sl-input>
    • +
+

+ 2.0.0-beta.18 +

+
    +
  • Added name and invalid attribute to <sl-color-picker>
    • +
  • Added support for form submission and validation to <sl-color-picker>
    • +
  • Added touch support to demo resizers in the docs
    • +
  • Added <sl-responsive-embed> component
    • +
  • + Fixed a bug where swapping an animated element wouldn’t restart the animation in + <sl-animation> +
    • +
  • Fixed a bug where the cursor was incorrect when <sl-select> was disabled
    • +
  • + Fixed a bug where slblur and slfocus were emitted twice in + <sl-select> +
    • +
  • Fixed a bug where clicking on <sl-menu> wouldn’t focus it
    • +
  • Fixed a bug in the popover utility where onAfterShow would fire too soon
    • +
  • + Fixed a bug where bottom and right placements didn’t render properly in + <sl-tab-group> +
    • +
  • + Improved keyboard logic in <sl-dropdown>, <sl-menu>, and + <sl-select> +
    • +
  • Updated <sl-animation> to stable
    • +
  • + Updated to Stencil 2.0 (you may need to purge node_modules and run + npm install after pulling) +
    • +
  • Updated entry points in package.json to reflect new filenames generated by Stencil 2
    • +
+

+ 2.0.0-beta.17 +

+
    +
  • + Added minlength and spellcheck attributes to <sl-textarea> +
    • +
  • Fixed a bug where clicking a tag in <sl-select> wouldn’t toggle the menu
    • +
  • + Fixed a bug where options where <sl-select> options weren’t always visible or + scrollable +
    • +
  • + Fixed a bug where setting null on <sl-input>, + <sl-textarea>, or <sl-select> would throw an error +
    • +
  • + Fixed a bug where role was on the wrong element and aria attribute weren’t explicit in + <sl-checkbox>, <sl-switch>, and <sl-radio> +
    • +
  • + Fixed a bug where dynamically adding/removing a slot wouldn’t work as expected in + <sl-card>, <sl-dialog>, and <sl-drawer> +
    • +
  • + Fixed a bug where the value wasn’t updated and events weren’t emitted when using + setRangeText in <sl-input> and <sl-textarea> +
    • +
  • Optimized hasSlot utility by using a simpler selector
    • +
  • Updated Bootstrap Icons to 1.0.0 with many icons redrawn and improved
    • +
  • Updated contribution guidelines
    • +
+

Form validation has been reworked and is much more powerful now!

+
    +
  • + The invalid attribute now reflects the control’s validity as determined by the browser’s + constraint validation API +
    • +
  • + Added required to <sl-checkbox>, <sl-select>, and + <sl-switch> +
    • +
  • + Added reportValidity() and setCustomValidity() methods to all form controls +
    • +
  • Added validation checking for custom and native form controls to <sl-form>
    • +
  • Added novalidate attribute to <sl-form> to disable validation
    • +
  • Removed the valid attribute from all form controls
    • +
  • + Removed valid and invalid design tokens and related styles (you can use your own custom styles to achieve + this) +
    • +
+

+ 2.0.0-beta.16 +

+
    +
  • + Added hoist attribute to <sl-color-picker>, + <sl-dropdown>, and <sl-select> to work around panel clipping +
    • +
  • Added <sl-format-bytes> utility component
    • +
  • Added clearable and required props to <sl-select>
    • +
  • Added slclear event to <sl-input>
    • +
  • Added keyboard support to the preview resizer in the docs
    • +
  • + Fixed a bug where the aria-selected state was incorrect in <sl-menu-item> +
    • +
  • + Fixed a bug where custom properties applied to <sl-tooltip> didn’t affect show/hide + transitions +
    • +
  • + Fixed a bug where --sl-input-color-* custom properties had no effect on + <sl-input> and <sl-textarea> +
    • +
  • + Refactored <sl-dropdown> and <sl-tooltip> to use positioner elements + so panels/tooltips can be customized easier +
    • +
+

+ 2.0.0-beta.15 +

+
    +
  • Added image-comparer component
    • +
  • + Added --width, --height, and --thumb-size custom props to + <sl-switch> +
    • +
  • Fixed an aria-labelledby attribute typo in a number of components
    • +
  • + Fixed a bug where the change event wasn’t updating the value in <sl-input> +
    • +
  • Fixed a bug where <sl-color-picker> had the wrong border color in the dark theme
    • +
  • Fixed a bug where <sl-menu-item> had the wrong color in dark mode when disabled
    • +
  • Fixed a bug where WebKit’s autocomplete styles made inputs looks broken
    • +
  • Fixed a bug where aria labels were wrong in <sl-select>
    • +
  • Fixed a bug where clicking the label wouldn’t focus the control in <sl-select>
    • +
+

+ 2.0.0-beta.14 +

+
    +
  • Added dark theme
    • +
  • Added --sl-panel-background-color and --sl-panel-border-color tokens
    • +
  • Added --tabs-border-color custom property to <sl-tab-group>
    • +
  • Added --track-color custom property to <sl-range>
    • +
  • Added tag part to <sl-select>
    • +
  • Updated package.json so custom elements imports can be consumed from the root
    • +
  • Fixed a bug where scrolling dialogs didn’t resize properly in Safari
    • +
  • + Fixed a bug where slshow and slhide would be emitted twice in some components +
    • +
  • + Fixed a bug where custom-elements/index.d.ts was broken due to an unclosed comment (fixed in + Stencil 1.17.3) +
    • +
  • Fixed bug where inputs were not using border radius tokens
    • +
  • Fixed a bug where the text color was being erroneously set in <sl-progress-ring>
    • +
  • + Fixed a bug where <sl-progress-bar> used the wrong part name internally for + indicator +
    • +
  • Removed background color from <sl-menu>
    • +
  • Updated to Stencil 1.17.3
    • +
+

+ 2.0.0-beta.13 +

+
    +
  • + Added slactivate and sldeactivate events to <sl-menu-item> +
    • +
  • Added experimental <sl-animation> component
    • +
  • Added shields to documentation
    • +
  • Fixed a bug where link buttons would have type="button"
    • +
  • Fixed a bug where button groups with tooltips experienced an odd spacing issue in Safari
    • +
  • + Fixed a bug where scrolling in dropdowns/selects didn’t work properly on Windows (special thanks to + Trendy + for helping troubleshoot!) +
    • +
  • Fixed a bug where selecting a menu item in a dropdown would cause Safari to scroll
    • +
  • Fixed a bug where type to select wouldn’t accept symbols
    • +
  • Moved scrolling logic from <sl-menu> to <sl-dropdown>
    • +
+

+ 2.0.0-beta.12 +

+
    +
  • Added support for href, target, and download to buttons
    • +
  • Fixed a bug where buttons would have horizontal spacing in Safari
    • +
  • Fixed a bug that caused an import resolution error when using Nebula in a Stencil app
    • +
+

+ 2.0.0-beta.11 +

+
    +
  • Added button group component
    • +
  • Fixed icon button alignment
    • +
  • Fixed a bug where focus visible observer wasn’t removed from <sl-details>
    • +
  • + Replaced the deprecated componentDidUnload lifecycle method with + disconnectedCallback to prevent issues with frameworks +
    • +
+

+ 2.0.0-beta.10 +

+
    +
  • Added community page to the docs
    • +
  • + Fixed a bug where many components would erroneously receive an id when using the custom + elements bundle +
    • +
  • Fixed a bug where tab groups weren’t scrollable with the mouse
    • +
+

+ 2.0.0-beta.9 +

+
    +
  • Added the icon button component
    • +
  • Added the skeleton component
    • +
  • + Added the typeToSelect method to menu so type-to-select behavior can be controlled externally +
    • +
  • Added the pulse attribute to badge
    • +
  • Fixed a bug where hovering over select showed the wrong cursor
    • +
  • Fixed a bug where tabbing into a select control would highlight the label
    • +
  • Fixed a bug where tabbing out of a select control wouldn’t close it
    • +
  • Fixed a bug where closing dropdowns wouldn’t give focus back to the trigger
    • +
  • Fixed a bug where type-to-select wasn’t working after the first letter
    • +
  • Fixed a bug where clicking on menu items and dividers would steal focus from the menu
    • +
  • Fixed a bug where the color picker wouldn’t parse uppercase values
    • +
  • + Removed the no-footer attribute from dialog and drawer (slot detection is automatic, so the + attribute is not required) +
    • +
  • Removed close-icon slot from alert
    • +
  • + Replaced make-shift icon buttons with <sl-icon-button> in alert, dialog, drawer, and + tag +
    • +
  • Updated Stencil to 1.17.1
    • +
  • Switched to jsDelivr for better CDN performance
    • +
+

+ 2.0.0-beta.8 +

+
    +
  • Added the card component
    • +
  • Added --focus-ring custom property to tab
    • +
  • Fixed a bug where range tooltips didn’t appear on iOS
    • +
  • Fixed constructor bindings so they don’t break the custom elements bundle
    • +
  • Fixed tag color contrast to be AA compliant
    • +
  • Fixed a bug that made it difficult to vertically align rating
    • +
  • Fixed a bug where dropdowns would always close on mousedown when inside a shadow root
    • +
  • Made tag text colors AA compliant
    • +
  • Promoted badge to stable
    • +
  • Refactored :host variables and moved non-display props to base elements
    • +
  • + Refactored event handler bindings to occur in connectedCallback instead of the constructor +
    • +
  • Refactored scroll locking logic to use Set instead of an array
    • +
  • Updated the custom elements bundle documentation and added bundler examples
    • +
  • Upgraded Stencil to 1.17.0–0 (next) to fix custom elements bundle
    • +
+

+ 2.0.0-beta.7 +

+
    +
  • Added links to version 1 resources to the docs
    • +
  • Added rating component
    • +
  • Fixed a bug where some build files were missing
    • +
  • Fixed clearable tags demo
    • +
  • Fixed touch icon size in docs
    • +
+

+ 2.0.0-beta.6 +

+
    +
  • Enabled the dist-custom-elements-bundle output target
    • +
  • Fixed a bug where nested form controls were ignored in <sl-form>
    • +
+

+ 2.0.0-beta.5 +

+
    +
  • Fixed bug where npm install would fail due to postinstall script
    • +
  • Removed unused dependency
    • +
+

+ 2.0.0-beta.4 +

+
    +
  • Added pill variation to badges
    • +
  • Fixed a bug where all badges had pointer-events: none
    • +
  • Fixed @since props to show 2.0 instead of 1.0
    • +
  • Fixed giant cursors in inputs in Safari
    • +
  • Fixed color picker input width in Safari
    • +
  • Fixed initial transitions for drawer, dialog, and popover consumers
    • +
  • Fixed a bug where dialog, dropdown, and drawer would sometimes not transition in on the first open
    • +
  • Fixed various documentation typos
    • +
+

+ 2.0.0-beta.3 +

+
    +
  • Fix version in docs
    • +
  • Remove custom elements bundle
    • +
+

+ 2.0.0-beta.2 +

+
    +
  • Fix quick start and installation URLs
    • +
  • Switch Docsify theme
    • +
  • Update line heights tokens
    • +
+

+ 2.0.0-beta.1 +

+
    +
  • Initial release
    • +
+
+
+
+ + diff --git a/resources/community/index.html b/resources/community/index.html new file mode 100644 index 00000000..06d06fa7 --- /dev/null +++ b/resources/community/index.html @@ -0,0 +1,565 @@ + + + + + + + Community + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Community

+

+ Nebula has a growing community of designers and developers that are building amazing things with web + components. We’d love for you to become a part of it! +

+

+ Please be respectful of other users and remember that Nebula is an open source project. We’ll try to help + when we can, but there’s no guarantee we’ll be able solve your problem. Please manage your expectations and + don’t forget to contribute back to the conversation when you can! +

+

+ Discussion Forum +

+

+ The + discussion forum + is open to anyone with a GitHub account. This is the best place to: +

+
    +
  • Ask for help
    • +
  • Share ideas and get feedback
    • +
  • Show the community what you’re working on
    • +
  • Learn more about the project, its values, and its roadmap
    • +
+ + + Join the Discussion + +

+ Community Chat +

+

+ The + community chat + is open to the public and powered by + Discord. + This is a good place to: +

+
    +
  • Ask for help
    • +
  • Share ideas and get feedback
    • +
  • Show the community what you’re working on
    • +
  • Chat live with other designers, developers, and Nebula fans
    • +
+ + + Join the Chat + +

+ Stack Overflow +

+

+ You can post questions on Stack Overflow using + the “shoelace” tag. This is a public forum where talented developers answer questions. It’s a great way to get help, but it + is not maintained by the Nebula author. +

+ + + Ask for Help + +

+ Twitter +

+

+ Follow + @shoelace_style + on Twitter for general updates and announcements about Nebula. This is a great place to say “hi” or to share + something you’re working on. You’re also welcome to follow + @claviska, the creator, for tweets about web components, web development, and life. +

+

+ Please avoid using Twitter for support questions. The + discussion forum + is a much better place to share code snippets, screenshots, and other troubleshooting info. You’ll have much + better luck there, as more users will have a chance to help you. +

+ + + Follow on Twitter + +
+
+
+ + diff --git a/resources/contributing/index.html b/resources/contributing/index.html new file mode 100644 index 00000000..f36486b1 --- /dev/null +++ b/resources/contributing/index.html @@ -0,0 +1,1414 @@ + + + + + + + Contributing + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Contributing

+

+ Nebula is an open source project, meaning everyone can use it and contribute to its development. When you + join our community, you’ll find a friendly group of enthusiasts at all experience levels who are willing to + chat about anything and everything related to Nebula. +

+

+ The easiest way to get started contributing is to join the + community chat. This is where we hang out, discuss new ideas, ask for feedback, and more! +

+

+ A common misconception about contributing to an open source project is that you need to know how to code. + This simply isn’t true. In fact, there are many ways to contribute, and some of the most important + contributions come from those who never write a single line of code. Here’s a list of ways you can make a + meaningful contribution to the project: +

+
    +
  • Submitting well-written bug reports
    • +
  • Submitting feature requests that are within the scope of the project
    • +
  • Improving the documentation
    • +
  • Responding to users that need help in the community chat or discussion forum
    • +
  • Triaging issues on GitHub
    • +
  • Being a developer advocate for the project
    • +
  • Sponsoring the project financially
    • +
  • Writing tests
    • +
  • Sharing ideas
    • +
  • And, of course, contributing code!
    • +
+

+ Please take a moment to review these guidelines to make the contribution process as easy as possible for + both yourself and the project’s maintainers. +

+

+ AI-generated Code +

+

+ As an open source maintainer, I respectfully ask that you refrain from using AI-generated code when + contributing to this project. This includes code generated by tools such as GitHub Copilot, even if you make + alterations to it afterwards. While some of Copilot’s features are indeed convenient, the ethics surrounding + which codebases the AI has been trained on and their corresponding software licenses remain very + questionable and have yet to be tested in a legal context. +

+

+ I realize that one cannot reasonably enforce this any more than one can enforce not copying licensed code + from other codebases, nor do I wish to expend energy policing contributors. I would, however, like to avoid + all ethical and legal challenges that result from using AI-generated code. As such, I respectfully ask that + you refrain from using such tools when contributing to this project. At this time, I will not knowingly + accept any code that has been generated in such a manner. +

+

+ Using the Issue Tracker +

+

+ The + issue tracker + is for bug reports, feature requests, and pull requests. +

+
    +
  • + Please do not use the issue tracker for personal support requests. Use + the discussion forum + instead. +
    • +
  • + Please do not use the issue tracker for feature requests. Use + the discussion forum + instead. +
    • +
  • + Please do not derail, hijack, or troll issues. Keep the discussion on topic and be + respectful of others. +
    • +
  • + Please do not post comments with ”+1″ or ”👍”. Use + reactions + instead. +
    • +
  • + Please do use the issue tracker for feature requests, bug reports, and pull requests. +
    • +
+

+ Issues that do not follow these guidelines are subject to closure. There simply aren’t enough resources for + the author and contributors to troubleshoot personal support requests. +

+

+ Feature Requests +

+

+ Feature requests can be added using + the discussion forum. +

+
    +
  • Please do search for an existing request before suggesting a new feature.
    • +
  • Please do use the voting buttons to vote for a feature.
    • +
  • + Please do share substantial use cases and perspective that support new features if they + haven’t already been mentioned. +
    • +
  • Please do not bump, spam, or ping contributors to prioritize your own feature.
    • +
+

+ Bug Reports +

+

+ A bug is a demonstrable problem caused by code in the library. Bug reports are an important + contribution to the quality of the project. When submitting a bug report, there are a few steps you can take + to make sure your issues gets attention quickly. +

+
    +
  • Please do not paste in large blocks of irrelevant code
    • +
  • Please do search for an existing issue before creating a new one
    • +
  • Please do explain the bug clearly
    • +
  • + Please do provide a minimal test case that demonstrates the bug (e.g. + jsfiddle.net + or + CodePen) +
    • +
  • Please do provide additional information, when necessary, to replicate the bug
    • +
+

+ A minimal test case is critical to a successful bug report. It demonstrates that the bug + exists in the library and not in surrounding code. Contributors should be able to understand the bug without + studying your code, otherwise they’ll probably move on to another bug. +

+

+ Pull Requests +

+

To keep the project on track, please consider the following guidelines before submitting a PR.

+
    +
  • + Please do not submit a PR without opening an issue first, unless the changes are trivial + (e.g. fixing typos or outdated docs). This may prevent you from doing work that won’t be accepted for + various reasons (e.g. someone is already working on it, it’s not a good fit for the project’s roadmap, it + needs additional planning, etc.) +
    • +
  • + Please do make sure your PR clearly defines what you’re changing. Even if you feel your + changes are obvious, please explain them so other contributors can more easily review your works. PRs + without detailed descriptions are subject to closure pending more details. +
    • +
  • Please do open your PR against the next branch.
    • +
  • + Please do not edit anything in dist/. These files are generated + automatically, so you need to edit the source files instead. +
    • +
+

+ The author reserves the right to reject any PR that’s outside the scope of the project or doesn’t meet code + quality standards. +

+

+ Branches +

+

+ current - This branch reflects the latest release and powers + shoelace.style. +

+

+ next - This is the branch you should submit pull requests against. It reflects what’s coming in + the next release, which can be previewed at + next.shoelace.style. +

+

+ Developing +

+

+ To set up a local dev environment, + fork the repo + on GitHub, clone it locally, and install its dependencies. +

+ 
git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
+cd shoelace
+npm install
+
+

Once you’ve cloned the repo, run the following command to spin up the dev server.

+ 
npm start
+
+

+ After the initial build, a browser will open automatically to a local version of the docs. The documentation + is powered by Eleventy and a number of custom plugins. +

+

+ Cloud-based Development +

+

+ Alternatively, you can use + Gitpod + to setup a dev environment in the cloud using only your browser. +

+

+ Open in Gitpod +

+

+ Creating New Components +

+

+ To scaffold a new component, run the following command, replacing sl-tag-name with the desired + tag name. +

+ 
npm run create sl-tag-name
+
+

+ This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, + you’ll find the new component in the “Components” section of the sidebar. +

+

+ Dev Sandbox +

+

+ Component development occurs within the local docs site. I’ve found that offering common variations + in the docs is more beneficial for users than segmenting demos and code examples into separate + tools such as Storybook. This encourages more thorough documentation, streamlines development for + maintainers, and simplifies how the project is built. It also reduces installation and startup times + significantly. +

+

+ There is currently no hot module reloading (HMR), as browsers don’t provide a way to unregister custom + elements. However, most changes to the source will reload the browser automatically. +

+

+ For more information about running and building the project locally, refer to README.md in the + project’s root. +

+

+ Testing +

+

+ Nebula uses + Web Test Runner + for testing. To launch the test runner during development, open a terminal and launch the dev server. +

+ 
npm start
+
+

In a second terminal window, launch the test runner.

+ 
npm run test:watch
+
+

+ Follow the on-screen instructions to work with the test runner. Tests will automatically re-run as you make + changes. +

+

To run all tests only once:

+ 
npm run test
+
+

To test a single component, use the component’s basename as shown in the following example.

+ 
npm run test:component breadcrumb-item
+
+

+ Documentation +

+

+ Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and + makes the project less appealing to users. Fortunately, writing documentation for Nebula is fast and easy! +

+

+ Most of Nebula’s technical documentation is generated with JSDoc comments and TypeScript metadata from the + source code. Every property, method, event, etc. is documented this way. In-code comments encourage + contributors to keep the documentation up to date as changes occur so the docs are less likely to become + stale. Refer to an existing component to see how JSDoc comments are used in Nebula. +

+

+ Instructions, code examples, and interactive demos are hand-curated to give users the best possible + experience. Typically, the most relevant information is shown first and less common examples are shown + towards the bottom. Edge cases and gotchas should be called out in context with tips or warnings. +

+

+ The docs are powered by + Eleventy. Check out docs/components/*.md to get an idea of how pages are structured and formatted. If + you’re creating a new component, it may help to use an existing component’s markdown file as a template. +

+

+ If you need help with documentation, feel free to reach out on the + community chat. +

+

+ Nebula-flavoured Markdown +

+

+ The Nebula documentation uses an extended version of + markdown-it. Generally speaking, it follows the + Commonmark spec + while sprinkling in some additional features. +

+

+ Code Previews +

+

+ To render a code preview, use the standard code field syntax and append :preview to the + language. +

+ 
```html:preview
+[code goes here]
+```
+
+

+ You can also append :expanded to expand the code by default, and :no-codepen to + disable the CodePen button. The order of these modifiers doesn’t matter, but no spaces should exist between + the language and the modifiers. +

+ 
```html:preview:expanded:no-codepen
+[code goes here]
+```
+
+

This particular syntax was chosen for a few reasons:

+
    +
  1. It’s easy to remember
    2. +
  2. It works out of the box with markdown-it
    3. +
  3. + It appears to have the best support across editors and previewers (the language is usually highlighted + correctly) +
    4. +
+

+ Callouts +

+

Special callouts can be added using the following syntax.

+ 
:::tip
+This is a tip/informational callout
+:::
+
+:::warning
+This is a warning callout
+:::
+
+:::danger
+This is a danger callout
+:::
+
+

Asides

+

To place content that’s indirectly related, use the following syntax.

+ 
:::aside
+This content is indirectly related and will appear in an `<aside>` element.
+:::
+
+

+ Details +

+

To provide additional details that can be expanded/collapses, use the following syntax.

+ 
:::details Title Here
+The details here are expandable.
+:::
+
+

+ GitHub Issues +

+

To link to a GitHub issue, PR, or discussion, use the following syntax.

+ 
[#1234]
+
+

+ Best Practices +

+

+ The following is a non-exhaustive list of conventions, patterns, and best practices we try to follow. As a + contributor, we ask that you make a good faith effort to follow them as well. This ensures consistency and + maintainability throughout the project. +

+

+ If in doubt, use your best judgment and the maintainers will be happy to guide you during the code review + process. If you’d like clarification on something before submitting a PR, feel free to reach out on the + community chat. +

+ +

+ Accessibility +

+

+ Nebula is built with accessibility in mind. Creating generic components that are fully accessible to users + with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the + solution to an a11y problem is not written in black and white and, therefore, we may not get it right the + first time around. There are, however, guidelines we can follow in our effort to make Nebula an accessible + foundation from which applications and websites can be built. +

+

+ We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need + help with anything a11y-related, please reach out to the community for + assistance. If you discover an accessibility concern within the library, please file a bug on the + issue tracker. +

+

+ It’s important to remember that, although accessibility starts with foundational components, it doesn’t end + with them. It everyone’s responsibility to encourage best practices and ensure we’re providing an optimal + experience for all of our users. +

+

+ Code Formatting +

+

+ Most code formatting is handled automatically by + Prettier + via commit hooks. However, for the best experience, you should + install it in your editor + and enable format on save. +

+

Please do not make any changes to prettier.config.cjs without consulting the maintainers.

+

+ Composability +

+

+ Components should be composable, meaning you can easily reuse them with and within other components. This + reduces the overall size of the library, expedites feature development, and maintains a consistent user + experience. +

+

+ Component Structure +

+

+ All components have a host element, which is a reference to the <sl-*> element itself. + Make sure to always set the host element’s display property to the appropriate value depending + on your needs, as the default is inline per the custom element spec. +

+ 
:host {
+  display: block;
+}
+
+

+ Aside from display, avoid setting styles on the host element when possible. The reason for this + is that styles applied to the host element are not encapsulated. Instead, create a base element that wraps + the component’s internals and style that instead. This convention also makes it easier to use BEM in + components, as the base element can serve as the “block” entity. +

+

+ When authoring components, please try to follow the same structure and conventions found in other + components. Classes, for example, generally follow this structure: +

+
    +
  • Static properties/methods
    • +
  • Private/public properties (that are not reactive)
    • +
  • @query decorators
    • +
  • @state decorators
    • +
  • @property decorators
    • +
  • + Lifecycle methods (connectedCallback(), disconnectedCallback(), + firstUpdated(), etc.) +
    • +
  • Private methods
    • +
  • @watch decorators
    • +
  • Public methods
    • +
  • The render() method
    • +
+

+ Please avoid using the public keyword for class fields. It’s simply too verbose when combined + with decorators, property names, and arguments. However, please do add private in + front of any property or method that is intended to be private. +

+ +

+ Class Names +

+

+ All components use a + shadow DOM, so styles are completely encapsulated from the rest of the document. As a result, class names used + inside a component won’t conflict with class names outside the component, so we’re free to + name them anything we want. +

+

+ Internally, each component uses the + BEM methodology + for class names. There is no technical requirement to do this — it’s purely the preference of the author to + enforce consistency and clarity throughout components. As such, all contributions are expected to follow + this pattern. +

+

+ Boolean Props +

+

+ Boolean props should always default to false, otherwise there’s no way for the user to + unset them using only attributes. To keep the API as friendly and consistent as possible, use a property + such as noHeader and a corresponding kebab-case attribute such as no-header. +

+

+ When naming boolean props that hide or disable things, prefix them with no-, e.g. + no-spin-buttons and avoid using other verbs such as hide- and + disable- for consistency. +

+

+ Conditional Slots +

+

+ When a component relies on the presence of slotted content to do something, don’t assume its initial state + is permanent. Slotted content can be added or removed any time and components must be aware of this. A good + practice to manage this is: +

+
    +
  • Add @slotchange={this.handleSlotChange} to the slots you want to watch
    • +
  • + Add a handleSlotChange method and use the hasSlot utility to update state + variables for the the respective slot(s) +
    • +
  • + Never conditionally render <slot> elements in a component — always use + hidden so the slot remains in the DOM and the slotchange event can be captured +
    • +
+

See the source of card, dialog, or drawer for examples.

+

+ Dynamic Slot Names and Expand/Collapse Icons +

+

+ A pattern has been established in <sl-details> and <sl-tree-item> for + expand/collapse icons that animate on open/close. In short, create two slots called + expand-icon and collapse-icon and render them both in the DOM, using CSS to + show/hide only one based on the current open state. Avoid conditionally rendering them. Also avoid using + dynamic slot names, such as <slot name=${open ? 'open' : 'closed'}>, because Firefox will + not animate them. +

+

+ There should be a container element immediately surrounding both slots. The container should be animated + with CSS by default and it should have a part so the user can override the animation or disable it. Please + refer to the source and documentation for <sl-details> and/or + <sl-tree-item> for details. +

+

+ Fallback Content in Slots +

+

When providing fallback content inside of <slot> elements, avoid adding parts, e.g.:

+ 
<slot name="icon">
+  <sl-icon part="close-icon"></sl-icon>
+</slot>
+
+

+ This creates confusion because the part will be documented, but it won’t work when the user slots in their + own content. The recommended way to customize this example is for the user to slot in their own content and + target its styles with CSS as needed. +

+

+ Custom Events +

+

+ Components must only emit custom events, and all custom events must start with sl- as a + namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, + kebab-style names. For example, use sl-change instead of slChange. +

+

+ This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable + to listen to them. This problem isn’t specific to one framework, but + Vue’s documentation + provides a good explanation of the problem. +

+

+ Change Events +

+

+ When change events are emitted by Nebula components, they should be named sl-change and they + should only be emitted as a result of user input. Programmatic changes, such as setting + el.value = '…' should not result in a change event being emitted. This is consistent + with how native form controls work. +

+

+ CSS Custom Properties +

+

To expose custom properties as part of a component’s API, scope them to the :host block.

+ 
:host {
+  --color: var(--sl-color-primary-500);
+  --background-color: var(--sl-color-neutral-100);
+}
+
+

+ Then use the following syntax for comments so they appear in the generated docs. Do not use the + --sl- prefix, as that is reserved for design tokens that live in the global scope. +

+ 
/**
+ * @cssproperty --color: The component's text color.
+ * @cssproperty --background-color: The component's background color.
+ */
+export default class SlExample {
+  // ...
+}
+
+

+ Focusing on Disabled Items +

+

+ When an item within a keyboard navigable set is disabled (e.g. tabs, trees, menu items, etc.), the disabled + item should not receive focus via keyboard, click, or tap. It should be skipped just like in + operating system menus and in native HTML form controls. There is no exception to this. If a particular item + requires focus for assistive devices to provide a good user experience, the item should not be disabled and, + upon activation, it should inform the user why the respective action cannot be completed. +

+

+ When to use a property vs. a CSS custom property +

+

+ When designing a component’s API, standard properties are generally used to change the behavior of + a component, whereas CSS custom properties (“CSS variables”) are used to change the appearance of a + component. Remember that properties can’t respond to media queries, but CSS variables can. +

+

+ There are some exceptions to this (e.g. when it significantly improves developer experience), but a good + rule of thumbs is “will this need to change based on screen size?” If so, you probably want to use a CSS + variable. +

+

+ When to use a CSS custom property vs. a CSS part +

+

+ There are two ways to enable customizations for components. One way is with CSS custom properties (“CSS + variables”), the other is with CSS parts (“parts”). +

+

+ CSS variables are scoped to the host element and can be reused throughout the component. A good example of a + CSS variable would be --border-width, which might get reused throughout a component to ensure + borders share the same width for all internal elements. +

+

+ Parts let you target a specific element inside the component’s shadow DOM but, by design, you can’t target a + part’s children or siblings. You can only customize the part itself. Use a part when you need to + allow a single element inside the component to accept styles. +

+

+ This convention can be relaxed when the developer experience is greatly improved by not following these + suggestions. +

+

+ Naming CSS Parts +

+

+ While CSS parts can be named + virtually anything, within Nebula they must use the kebab-case convention and lowercase letters. Additionally, + a BEM-inspired naming convention + is used to distinguish parts, subparts, and states. +

+

+ When composing elements, use part to export the host element and exportparts to + export its parts. +

+ 
render() {
+  return html`
+    <div part="base">
+      <sl-icon part="icon" exportparts="base:icon__base" ...></sl-icon>
+    </div>
+  `;
+}
+
+

+ This results in a consistent, easy to understand structure for parts. In this example, the + icon part will target the host element and the icon__base part will target the + icon’s base part. +

+

+ Dependencies +

+

+ TL;DR – a component is a dependency if and only if it’s rendered inside another component’s shadow root. +

+

+ Many Nebula components use other Nebula components internally. For example, + <sl-button> uses both <sl-icon> and + <sl-spinner> for its caret icon and loading state, respectively. Since these components + appear in the button’s shadow root, they are considered dependencies of Button. Since dependencies are + automatically loaded, users only need to import the button and everything will work as expected. +

+

+ Contrast this to <sl-select> and <sl-option>. At first, one might + assume that Option is a dependency of Select. After all, you can’t really use Select without slotting in at + least one Option. However, Option is not a dependency of Select! The reason is because no Option is + rendered in the Select’s shadow root. Since the options are provided by the user, it’s up to them to import + both components independently. +

+

+ People often suggest that Nebula should auto-load Select + Option, Menu + Menu Item, Breadcrumb + Breadcrumb + Item, etc. Although some components are designed to work together, they’re technically not dependencies so + eagerly loading them may not be desirable. What if someone wants to roll their own component with a superset + of features? They wouldn’t be able to if Nebula automatically imported it! +

+

+ Similarly, in the case of <sl-radio-group> there was originally only + <sl-radio>, but now you can use either <sl-radio> or + <sl-radio-button> as child elements. Which component(s) should be auto-loaded + dependencies in this case? Had Radio been a dependency of Radio Group, users that only wanted Radio Buttons + would be forced to register both with no way to opt out and no way to provide their own customized version. +

+

+ For non-dependencies, the user should decide what gets registered, even if it comes with a minor + inconvenience. +

+

+ Form Controls +

+

Form controls should support submission and validation through the following conventions:

+
    +
  • + All form controls must use name, value, and disabled properties in + the same manner as HTMLInputElement +
    • +
  • + All form controls must have a setCustomValidity() method so the user can set a custom + validation message +
    • +
  • + All form controls must have a reportValidity() method that report their validity during form + submission +
    • +
  • All form controls must have an invalid property that reflects their validity
    • +
  • + All form controls should mirror their native validation attributes such as required, + pattern, minlength, maxlength, etc. when possible +
    • +
  • All form controls must be tested to work with the standard <form> element
    • +
+

+ System Icons +

+

+ Avoid inlining SVG icons inside of templates. If a component requires an icon, make sure + <sl-icon> is a dependency of the component and use the + system library: +

+ 
<sl-icon library="system" name="..."></sl-icon>
+
+

+ This will render the icons instantly whereas the default library will fetch them from a remote source. If an + icon isn’t available in the system library, you will need to add it to library.system.ts. Using + the system library ensures that all icons load instantly and are customizable by users who wish to provide a + custom resolver for the system library. +

+

+ Writing tests +

+

What to test for a given component:

+
    +
  • Start with a simple test that checks that the default version of the component still renders.
    • +
  • + Add at least one accessibility test (The accessibility check only covers the parts of the DOM which are + currently visible and rendered. Depending on the component, more than one accessibility test is required + to cover all scenarios.): +
    • +
+ 
const myComponent = await fixture<SlAlert>(html`<sl-my-component>SomeContent</sl-my-component>`);
+
+await expect(myComponent).to.be.accessible();
+
+
    +
  • Try to cover all features advertised in the component’s description
    • +
+

Guidelines for writing tests:

+
    +
  • + Each test should declare its own, hand crafted hml fixture for the component. Do not try to write one big + component to match all tests. This helps keeping each test understandable in isolation. +
    • +
  • + Tests should not produce log lines. Note that sometimes this cannot be prevented as the test runner might + log errors (e.g. 404s). +
    • +
  • + Try keeping the main test readable: Extract more complicated sets of selectors/commands/assertions into + separate functions. +
    • +
  • + Try to aim testing the user facing features of the component instead of the internal workings of the + component. +
    • +
  • Group multiple tests for one feature into describe blocks.
    • +
+
+
+
+ + diff --git a/tokens/border-radius/index.html b/tokens/border-radius/index.html new file mode 100644 index 00000000..a9929972 --- /dev/null +++ b/tokens/border-radius/index.html @@ -0,0 +1,510 @@ + + + + + + + Border Radius + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Border Radius Tokens

+

+ Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they + scale with the base font size. The pixel values displayed are based on a 16px font size. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-border-radius-small0.1875rem (3px)
--sl-border-radius-medium0.25rem (4px)
--sl-border-radius-large0.5rem (8px)
--sl-border-radius-x-large1rem (16px)
--sl-border-radius-circle50%
--sl-border-radius-pill9999px +
+
+
+
+
+
+ + diff --git a/tokens/color/index.html b/tokens/color/index.html new file mode 100644 index 00000000..8b78e9ee --- /dev/null +++ b/tokens/color/index.html @@ -0,0 +1,1664 @@ + + + + + + + Color Tokens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Color Tokens

+

+ Color tokens help maintain consistent use of color throughout your app. Nebula provides palettes for theme + colors and primitives that you can use as a foundation for your design system. +

+

+ Color tokens are referenced using the --sl-color-{name}-{n} CSS custom property, where + {name} is the name of the palette and {n} is the numeric value of the desired + swatch. +

+

+ Theme Tokens +

+

+ Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based + on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that + correspond to their respective meanings. +

+
+
+ Primary
+ --sl-color-primary-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Success
+ --sl-color-success-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Warning
+ --sl-color-warning-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Danger
+ --sl-color-danger-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Neutral
+ --sl-color-neutral-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Black & White
+ --sl-color-neutral-{n} +
+
+
+ 0 +
+
+
+ 1000 +
+
+ +

+ Primitives +

+

+ Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors + that don’t have semantic meaning. Color primitives are derived from the fantastic + Tailwind color palette. +

+
+
+ Gray
+ --sl-color-gray-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Red
+ --sl-color-red-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Orange
+ --sl-color-orange-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Amber
+ --sl-color-amber-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Yellow
+ --sl-color-yellow-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Lime
+ --sl-color-lime-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Green
+ --sl-color-green-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Emerald
+ --sl-color-emerald-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Teal
+ --sl-color-teal-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Cyan
+ --sl-color-cyan-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Sky
+ --sl-color-sky-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Blue
+ --sl-color-blue-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Indigo
+ --sl-color-indigo-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Violet
+ --sl-color-violet-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Purple
+ --sl-color-purple-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Fuchsia
+ --sl-color-fuchsia-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Pink
+ --sl-color-pink-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+ Rose
+ --sl-color-rose-{n} +
+
+
+ 50 +
+
+
+ 100 +
+
+
+ 200 +
+
+
+ 300 +
+
+
+ 400 +
+
+
+ 500 +
+
+
+ 600 +
+
+
+ 700 +
+
+
+ 800 +
+
+
+ 900 +
+
+
+ 950 +
+
+
+
+
+ + diff --git a/tokens/elevation/index.html b/tokens/elevation/index.html new file mode 100644 index 00000000..25989194 --- /dev/null +++ b/tokens/elevation/index.html @@ -0,0 +1,494 @@ + + + + + + + Elevation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Elevation Tokens

+

+ Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the + box-shadow property. These are especially useful for menus, popovers, and dialogs. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenExample
--sl-shadow-x-small
--sl-shadow-small
--sl-shadow-medium
--sl-shadow-large
--sl-shadow-x-large
+
+
+
+
+ + diff --git a/tokens/more/index.html b/tokens/more/index.html new file mode 100644 index 00000000..82c02c42 --- /dev/null +++ b/tokens/more/index.html @@ -0,0 +1,987 @@ + + + + + + + More Design Tokens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

More Design Tokens

+

+ All of the design tokens described herein are considered relatively stable. However, some changes might + occur in future versions to address mission critical bugs or improvements. If such changes occur, they + will not be considered breaking changes and will be clearly documented in the + changelog. +

+

+ Most design tokens are consistent across the light and dark theme. Those that vary will show both values. +

+ +

+ Focus Rings +

+

+ Focus ring tokens control the appearance of focus rings. Note that form inputs use + --sl-input-focus-ring-* tokens instead. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-focus-ring-color + var(--sl-color-primary-600) (light theme)
var(--sl-color-primary-700) + (dark theme) +
--sl-focus-ring-stylesolid
--sl-focus-ring-width3px
--sl-focus-ringvar(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color)
--sl-focus-ring-offset1px
+
+

+ Buttons +

+

+ Button tokens control the appearance of buttons. In addition, buttons also currently use some form input + tokens such as --sl-input-height-* and --sl-input-border-*. More button tokens may + be added in the future to make it easier to style them more independently. +

+
+ + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-button-font-size-smallvar(--sl-font-size-x-small)
--sl-button-font-size-mediumvar(--sl-font-size-small)
--sl-button-font-size-largevar(--sl-font-size-medium)
+
+

+ Form Inputs +

+

+ Form input tokens control the appearance of form controls such as input, + select, textarea, etc. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-input-height-small1.875rem (30px @ 16px base)
--sl-input-height-medium2.5rem (40px @ 16px base)
--sl-input-height-large3.125rem (50px @ 16px base)
--sl-input-background-colorvar(--sl-color-neutral-0)
--sl-input-background-color-hovervar(--sl-input-background-color)
--sl-input-background-color-focusvar(--sl-input-background-color)
--sl-input-background-color-disabledvar(--sl-color-neutral-100)
--sl-input-border-colorvar(--sl-color-neutral-300)
--sl-input-border-color-hovervar(--sl-color-neutral-400)
--sl-input-border-color-focusvar(--sl-color-primary-500)
--sl-input-border-color-disabledvar(--sl-color-neutral-300)
--sl-input-border-width1px
--sl-input-required-content*
--sl-input-required-content-offset-2px
--sl-input-required-content-colorvar(--sl-input-label-color)
--sl-input-border-radius-smallvar(--sl-border-radius-medium)
--sl-input-border-radius-mediumvar(--sl-border-radius-medium)
--sl-input-border-radius-largevar(--sl-border-radius-medium)
--sl-input-font-familyvar(--sl-font-sans)
--sl-input-font-weightvar(--sl-font-weight-normal)
--sl-input-font-size-smallvar(--sl-font-size-small)
--sl-input-font-size-mediumvar(--sl-font-size-medium)
--sl-input-font-size-largevar(--sl-font-size-large)
--sl-input-letter-spacingvar(--sl-letter-spacing-normal)
--sl-input-colorvar(--sl-color-neutral-700)
--sl-input-color-hovervar(--sl-color-neutral-700)
--sl-input-color-focusvar(--sl-color-neutral-700)
--sl-input-color-disabledvar(--sl-color-neutral-900)
--sl-input-icon-colorvar(--sl-color-neutral-500)
--sl-input-icon-color-hovervar(--sl-color-neutral-600)
--sl-input-icon-color-focusvar(--sl-color-neutral-600)
--sl-input-placeholder-colorvar(--sl-color-neutral-500)
--sl-input-placeholder-color-disabledvar(--sl-color-neutral-600)
--sl-input-spacing-smallvar(--sl-spacing-small)
--sl-input-spacing-mediumvar(--sl-spacing-medium)
--sl-input-spacing-largevar(--sl-spacing-large)
--sl-input-focus-ring-colorhsl(198.6 88.7% 48.4% / 40%)
--sl-input-focus-ring-offset0
+
+

+ Filled Form Inputs +

+

Filled form input tokens control the appearance of form controls using the filled variant.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-input-filled-background-colorvar(--sl-color-neutral-100)
--sl-input-filled-background-color-hovervar(--sl-color-neutral-100)
--sl-input-filled-background-color-focusvar(--sl-color-neutral-100)
--sl-input-filled-background-color-disabledvar(--sl-color-neutral-100)
--sl-input-filled-colorvar(--sl-color-neutral-800)
--sl-input-filled-color-hovervar(--sl-color-neutral-800)
--sl-input-filled-color-focusvar(--sl-color-neutral-700)
--sl-input-filled-color-disabledvar(--sl-color-neutral-800)
+
+

+ Form Labels +

+

Form label tokens control the appearance of labels in form controls.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-input-label-font-size-smallvar(--sl-font-size-small)
--sl-input-label-font-size-mediumvar(--sl-font-size-medium)
--sl-input-label-font-size-largevar(--sl-font-size-large)
--sl-input-label-colorinherit
+
+

+ Help Text +

+

Help text tokens control the appearance of help text in form controls.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-input-help-text-font-size-smallvar(--sl-font-size-x-small)
--sl-input-help-text-font-size-mediumvar(--sl-font-size-small)
--sl-input-help-text-font-size-largevar(--sl-font-size-medium)
--sl-input-help-text-colorvar(--sl-color-neutral-500)
+
+

+ Toggles +

+

+ Toggle tokens control the appearance of toggles such as checkbox, + radio, switch, etc. +

+
+ + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-toggle-size-small0.875rem (14px @ 16px base)
--sl-toggle-size-medium1.125rem (18px @ 16px base)
--sl-toggle-size-large1.375rem (22px @ 16px base)
+
+

+ Overlays +

+

+ Overlay tokens control the appearance of overlays as used in dialog, + drawer, etc. +

+
+ + + + + + + + + + + + + +
TokenValue
--sl-overlay-background-colorhsl(240 3.8% 46.1% / 33%)
+
+

Panels

+

+ Panel tokens control the appearance of panels such as those used in dialog, + drawer, menu, etc. +

+
+ + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-panel-background-colorvar(--sl-color-neutral-0)
--sl-panel-border-colorvar(--sl-color-neutral-200)
--sl-panel-border-width1px
+
+

+ Tooltips +

+

+ Tooltip tokens control the appearance of tooltips. This includes the + tooltip component as well as other implementations, such + range tooltips. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-tooltip-border-radiusvar(--sl-border-radius-medium)
--sl-tooltip-background-colorvar(--sl-color-neutral-800)
--sl-tooltip-colorvar(--sl-color-neutral-0)
--sl-tooltip-font-familyvar(--sl-font-sans)
--sl-tooltip-font-weightvar(--sl-font-weight-normal)
--sl-tooltip-font-sizevar(--sl-font-size-small)
--sl-tooltip-line-heightvar(--sl-line-height-dense)
--sl-tooltip-paddingvar(--sl-spacing-2x-small) var(--sl-spacing-x-small)
--sl-tooltip-arrow-size6px
+
+
+
+
+ + diff --git a/tokens/spacing/index.html b/tokens/spacing/index.html new file mode 100644 index 00000000..379138e6 --- /dev/null +++ b/tokens/spacing/index.html @@ -0,0 +1,572 @@ + + + + + + + Spacing Tokens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Spacing Tokens

+

Spacing tokens are used to provide consistent spacing between content in your app.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-spacing-3x-small0.125rem (2px) +
+
--sl-spacing-2x-small0.25rem (4px) +
+
--sl-spacing-x-small0.5rem (8px) +
+
--sl-spacing-small0.75rem (12px) +
+
--sl-spacing-medium1rem (16px) +
+
--sl-spacing-large1.25rem (20px) +
+
--sl-spacing-x-large1.75rem (28px) +
+
--sl-spacing-2x-large2.25rem (36px) +
+
--sl-spacing-3x-large3rem (48px) +
+
--sl-spacing-4x-large4.5rem (72px) +
+
+
+
+
+
+ + diff --git a/tokens/transition/index.html b/tokens/transition/index.html new file mode 100644 index 00000000..4030470c --- /dev/null +++ b/tokens/transition/index.html @@ -0,0 +1,497 @@ + + + + + + + Transition Tokens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Transition Tokens

+

Transition tokens are used to provide consistent transitions throughout your app.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-transition-x-slow1000ms
--sl-transition-slow500ms
--sl-transition-medium250ms
--sl-transition-fast150ms
--sl-transition-x-fast50ms
+
+
+
+
+ + diff --git a/tokens/typography/index.html b/tokens/typography/index.html new file mode 100644 index 00000000..9f414fc4 --- /dev/null +++ b/tokens/typography/index.html @@ -0,0 +1,749 @@ + + + + + + + Typography + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Typography Tokens

+

Typography tokens are used to maintain a consistent set of font styles throughout your app.

+

+ Font Family +

+

The default font stack is designed to be simple and highly available on as many devices as possible.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-font-sans + -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color + Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’ + + The quick brown fox jumped over the lazy dog. +
--sl-font-serifGeorgia, ‘Times New Roman’, serif + The quick brown fox jumped over the lazy dog. +
--sl-font-monoSFMono-Regular, Consolas, ‘Liberation Mono’, Menlo, monospace; + The quick brown fox jumped over the lazy dog. +
+
+

+ Font Size +

+

+ Font sizes use rem units so they scale with the base font size. The pixel values displayed are + based on a 16px font size. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-font-size-2x-small0.625rem (10px)Aa
--sl-font-size-x-small0.75rem (12px)Aa
--sl-font-size-small0.875rem (14px)Aa
--sl-font-size-medium1rem (16px)Aa
--sl-font-size-large1.25rem (20px)Aa
--sl-font-size-x-large1.5rem (24px)Aa
--sl-font-size-2x-large2.25rem (36px)Aa
--sl-font-size-3x-large3rem (48px)Aa
--sl-font-size-4x-large4.5rem (72px)Aa
+
+

+ Font Weight +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-font-weight-light300 + The quick brown fox jumped over the lazy dog. +
--sl-font-weight-normal400 + The quick brown fox jumped over the lazy dog. +
--sl-font-weight-semibold500 + The quick brown fox jumped over the lazy dog. +
--sl-font-weight-bold700 + The quick brown fox jumped over the lazy dog. +
+
+

+ Letter Spacing +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-letter-spacing-denser-0.03em + The quick brown fox jumped over the lazy dog. +
--sl-letter-spacing-dense-0.015em + The quick brown fox jumped over the lazy dog. +
--sl-letter-spacing-normalnormal + The quick brown fox jumped over the lazy dog. +
--sl-letter-spacing-loose0.075em + The quick brown fox jumped over the lazy dog. +
--sl-letter-spacing-looser0.15em + The quick brown fox jumped over the lazy dog. +
+
+

+ Line Height +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueExample
--sl-line-height-denser1 +
+ The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy + dog.
The quick brown fox jumped over the lazy dog. +
+
--sl-line-height-dense1.4 +
+ The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy + dog.
The quick brown fox jumped over the lazy dog. +
+
--sl-line-height-normal1.8 +
+ The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy + dog.
The quick brown fox jumped over the lazy dog. +
+
--sl-line-height-loose2.2 +
+ The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy + dog.
The quick brown fox jumped over the lazy dog. +
+
--sl-line-height-looser2.6 +
+ The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy + dog.
The quick brown fox jumped over the lazy dog. +
+
+
+
+
+
+ + diff --git a/tokens/z-index/index.html b/tokens/z-index/index.html new file mode 100644 index 00000000..d7d19933 --- /dev/null +++ b/tokens/z-index/index.html @@ -0,0 +1,485 @@ + + + + + + + Z-Index Tokens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Z-Index Tokens

+

Z-indexes are used to stack components in a logical manner.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue
--sl-z-index-drawer700
--sl-z-index-dialog800
--sl-z-index-dropdown900
--sl-z-index-alert-group950
--sl-z-index-tooltip1000
+
+
+
+
+ + diff --git a/tutorials/integrating-with-astro/index.html b/tutorials/integrating-with-astro/index.html new file mode 100644 index 00000000..c9a3c05e --- /dev/null +++ b/tutorials/integrating-with-astro/index.html @@ -0,0 +1,614 @@ + + + + + + + Integrating with Astro + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Integrating with Astro

+

This page explains how to integrate Nebula with an Astro app.

+ +

+ SSR and client scripts +

+

+ In the following tutorial you will notice that Nebula cannot be imported in the frontmatter of Astro files. + This is because Nebula relies on globals from the DOM to be present. +

+

+ There is a + Lit + Astro integration for SSR + , however it will not work with Nebula in its current state due to some reliance on DOM APIs that aren’t + shimmed. We are working to resolve this. +

+

+ Instructions - Astro 4.11.3 +

+
    +
  • Node: v18.17.1 or v20.3.0 or higher. ( v19 is not supported.)
    • +
  • Astro: 4.11.3
    • +
  • Nebula: 2.15.1
    • +
+

To get started using Nebula with Astro, the following packages must be installed.

+ 
npm install @onsonr/nebula rollup-plugin-copy
+
+

+ Importing components +

+

In /src/pages/index.astro, set the base path and import Nebula.

+ 
---
+// import default stylesheet
+import "@onsonr/nebula/dist/themes/light.css";
+---
+
+<html>
+  <body>
+    <sl-button>Button</sl-button>
+  </body>
+</html>
+
+<script>
+  // setBasePath to tell Nebula where to load icons from.
+  import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+  setBasePath('/shoelace-assets/');
+
+  // Load all components.
+  import '@onsonr/nebula';
+</script>
+
+ +

+ You only have to import in the main index.astro file. The components can be used anywhere + throughout the project. +

+

+ Customizing animations +

+

In /src/pages/index.astro, set custom animations after the Nebula import.

+ 
---
+import { setBasePath } from "@onsonr/nebula/dist/utilities/base-path.js";
+setBasePath("dist/assets");
+---
+
+<html>
+  <body>
+    <sl-tooltip content="This is a tooltip">
+      <sl-button>Hover Me</sl-button>
+    </sl-tooltip>
+  </body>
+</html>
+
+<script>
+  // setBasePath to tell Nebula where to load icons from.
+  import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+  setBasePath('/shoelace-assets/');
+
+  // Load all components.
+  import '@onsonr/nebula';
+
+  const duration = 3000;
+  import { setDefaultAnimation } from '@onsonr/nebula/dist/utilities/animation-registry.js';
+
+  setDefaultAnimation('tooltip.show', {
+    keyframes: [
+      { opacity: 0, scale: 0.8 },
+      { opacity: 1, scale: 1 }
+    ],
+    options: { duration: duration, easing: 'ease' }
+  });
+</script>
+
+

+ Modifying Astro Config +

+

+ You’ll notice the above steps never added our icons into our /public directory. To solve this, + we can install rollup-plugin-copy to copy Nebula’s assets into your public directory. +

+

Here’s what your Astro config should look like:

+ 
// astro.config.mjs
+
+import { defineConfig } from 'astro/config';
+import copy from 'rollup-plugin-copy';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [
+      copy({
+        // Copy only on first build. We dont want to trigger additional server reloads.
+        copyOnce: true,
+        hook: 'buildStart',
+        targets: [
+          { src: 'node_modules/@onsonr/nebula/dist/assets/*', dest: 'public/shoelace-assets/assets/' }
+        ]
+      })
+    ]
+  }
+});
+
+
+
+
+ + diff --git a/tutorials/integrating-with-laravel/index.html b/tutorials/integrating-with-laravel/index.html new file mode 100644 index 00000000..e87133ac --- /dev/null +++ b/tutorials/integrating-with-laravel/index.html @@ -0,0 +1,632 @@ + + + + + + + Integrating with Laravel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Integrating with Laravel

+

+ This page explains how to integrate Nebula with a + Laravel 9 + app using Vite. For additional details refer to the + Bundling Assets (Vite) + section in the official Laravel docs. +

+ +

+ Requirements +

+

This integration has been tested with the following:

+
    +
  • Laravel 9.1
    • +
  • Vite 3.0
    • +
+

+ Instructions +

+

+ These instructions assume a default + Laravel 9 install + that uses + Vite to + bundle assets. Be sure to run npm install to install the default Laravel front-end dependencies + before installing Nebula. +

+

+ Install the Nebula package +

+ 
npm install @onsonr/nebula
+
+

+ Import the Default Theme +

+

Import the Nebula default theme (stylesheet) in /resources/css/app.css:

+ 
@import '/node_modules/@onsonr/nebula/dist/themes/light.css';
+
+

+ Import Your Nebula Components +

+

+ Import each Nebula component you plan to use in /resources/js/bootstrap.js. Use the full path + to each component (as outlined in the + Cherry Picking instructions). You can find the full import statement for a component in the Importing section of the + component’s documentation (use the Bundler import). Your imports should look similar to: +

+ 
import '@onsonr/nebula/dist/components/button/button.js';
+import '@onsonr/nebula/dist/components/icon/icon.js';
+import '@onsonr/nebula/dist/components/dialog/dialog.js';
+
+

+ Copy the Nebula Static Assets (icons, images, etc.) to a Public Folder +

+

+ Since Vite has no way to copy arbitrary assets into your build (like webpack), you need to manually copy the + Nebula static assets to your project’s public folder. Run this command from your project’s root directory to + copy the Nebula static assets to the ./public/assets folder: +

+ 
cp -aR node_modules/@onsonr/nebula/dist/assets/ ./public/assets
+
+

+ Set the Base Path +

+

+ Add the base path to your Nebula assets (icons, images, etc.) in /resources/js/bootstrap.js. + The path must point to the same folder where you copy assets to in the next step. +

+ 
import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+setBasePath('/');
+
+

Example /resources/js/bootstrap.js file:

+ 
import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
+setBasePath('/');
+
+import '@onsonr/nebula/dist/components/button/button.js';
+import '@onsonr/nebula/dist/components/icon/icon.js';
+import '@onsonr/nebula/dist/components/dialog/dialog.js';
+
+

+ Verify Vite Entry Points +

+

+ Laravel pre-configures the Vite entry points in vite.config.js as + resources/css/app.css and resources/js/app.js. If you use a different location for + your CSS and/or Javascript entry point, update this configuration to accordingly. +

+ 
plugins: [
+        laravel({
+            input: ["resources/css/app.css", "resources/js/app.js"],
+            refresh: true,
+        }),
+    ],
+
+

+ Compile Front-End Assets +

+

Run the Vite development server or production build.

+ 
## run the Vite development bundle
+npm run dev
+
+## build a production bundle (with versioning)
+npm run build
+
+

+ Include Front-End Assets in Your Layout File +

+

+ Add the @vite() Blade directive to the <head> of your application’s root + template. +

+ 
<head>
+  ... @vite(['resources/css/app.css', 'resources/js/app.js'])
+</head>
+
+

Have fun using Nebula components in your Laravel app!

+
+
+
+ + diff --git a/tutorials/integrating-with-nextjs/index.html b/tutorials/integrating-with-nextjs/index.html new file mode 100644 index 00000000..5548be7f --- /dev/null +++ b/tutorials/integrating-with-nextjs/index.html @@ -0,0 +1,871 @@ + + + + + + + Integrating with NextJS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Integrating with NextJS

+

This page explains how to integrate Nebula with a NextJS app.

+ +

There are 2 guides available:

+ +

+ Usage with App Router (NextJS 14) +

+
    +
  • Node: v20.11.1
    • +
  • NextJS: 14.2.4
    • +
  • Nebula: 2.15.1
    • +
+

+ Working with ESM +

+

+ If you haven’t already, create your NextJS app. You can find the documentation for that here: + https://nextjs.org/docs/getting-started/installation +

+

+ After you’ve created your app, the first step to using Nebula is modifying your package.json to + have "type": "module" in it since Nebula ships ES Modules. +

+ 
// package.json
+{
+  "type": "module"
+}
+
+

+ Installing packages +

+

To get started using Nebula with NextJS, the following packages must be installed.

+ 
npm install @onsonr/nebula copy-webpack-plugin
+
+

+ Nebula for obvious reasons, and the copy-webpack-plugin will be used later for adding our icons + to our public/ folder. +

+

+ Modifying your Next Config +

+

+ We’ll start with modifying our next.config.js to copy Nebula’s assets and to properly work with + ESM. +

+

Here’s what your next.config.js should look like:

+

+ NextJS 14 Webpack Config +

+

+ In order to add Nebula’s assets to the final build output, we need to modify next.config.js to + look like this. +

+ 
// next.config.js
+
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import CopyPlugin from 'copy-webpack-plugin';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: { esmExternals: 'loose' },
+  webpack: (config, options) => {
+    config.plugins.push(
+      new CopyPlugin({
+        patterns: [
+          {
+            from: resolve(__dirname, 'node_modules/@onsonr/nebula/dist/assets/'),
+            to: resolve(__dirname, 'public/shoelace-assets/assets/')
+          }
+        ]
+      })
+    );
+    return config;
+  }
+};
+
+export default nextConfig;
+
+ +

+ Importing the Nebula’s CSS (default theme) +

+

+ Once we’ve got our webpack config / next config setup, lets modify our app/layout.tsx to + include Nebula’s default theme. +

+ 
// app/layout.tsx
+import './globals.css';
+import '@onsonr/nebula/dist/themes/light.css';
+// We can also import the dark theme here as well.
+// import "@onsonr/nebula/dist/themes/dark.css";
+
+

+ Writing a “setup” component +

+

+ Now, we need to create a NebulaSetup component that will be a client component in charge of + setting the basePath for our assets / icons. +

+

To do so, create a file called app/shoelace-setup.tsx

+ 
'use client';
+// ^ Make sure to have 'use client'; because `setBasePath()` requires access to `document`.
+
+import { setBasePath } from "@onsonr/nebula/dist/utilities/base-path.js"
+
+export default function NebulaSetup({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  setBasePath(`/shoelace-assets/`);
+  return <>{children}</>
+}
+
+ +

Then we’ll add this setup component into app/layout.tsx

+

Our layout.tsx Should now look something like this:

+ 
import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
++ import "@onsonr/nebula/dist/themes/light.css";
+
++ import NebulaSetup from "./shoelace-setup";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
++         <NebulaSetup>
+            {children}
++         </NebulaSetup>
+      </body>
+    </html>
+  );
+}
+
+

+ Writing components that use Nebula +

+

+ Now that we have the setup in place, we can write an app/page.tsx to use Nebula components in + combination with the dynamic() component loader from NextJS. +

+

+ Here’s what that would look like, do note the "use client"; at the top of the component is + required. +

+ 
// app/page.tsx
+'use client';
+
+import React from "react";
+import dynamic from "next/dynamic";
+
+const SlButton = dynamic(
+  // Notice how we use the full path to the component. If you only do `import("@onsonr/nebula/dist/react")` you will load the entire component library and not get tree shaking.
+  () => import("@onsonr/nebula/dist/react/button/index.js"),
+  {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  },
+);
+
+const SlIcon = dynamic(
+  () => import("@onsonr/nebula/dist/react/icon/index.js"),
+  {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  },
+);
+
+export default function Home() {
+  return (
+    <main>
+      <SlButton>Test</SlButton>
+      <SlIcon name="gear" />
+    </main>
+  );
+}
+
+

Now you should be up and running with NextJS + Nebula!

+

+ If you’re stuck, there’s an + example repo here + you can checkout. +

+

+ Usage with Pages Router (NextJS 12) +

+
    +
  • Node: 16.13.1
    • +
  • NextJS: 12.1.6
    • +
  • Nebula: 2.0.0-beta.74
    • +
+

To get started using Nebula with NextJS, the following packages must be installed.

+ 
yarn add @onsonr/nebula copy-webpack-plugin next-compose-plugins next-transpile-modules
+
+

+ Enabling ESM +

+

+ Because Nebula utilizes ESM, we need to modify our package.json to support ESM packages. Simply + add the following to your root of package.json: +

+ 
"type": "module"
+
+

+ There’s one more step to enable ESM in NextJS, but we’ll tackle that in our Next configuration modification. +

+

+ Importing the Default Theme +

+

The next step is to import Nebula’s default theme (stylesheet) in your _app.js file:

+ 
import '@onsonr/nebula/dist/themes/light.css';
+
+

+ Defining Custom Elements +

+

+ After importing the theme, you’ll need to import the JavaScript files for Nebula. However, this is a bit + tricky to do in NextJS thanks to the SSR environment not having any of the required browser APIs to define + endpoints. +

+

+ We’ll want to create a component that uses + React’s useLayoutEffect + to add in the custom components before the first render: +

+ 
function CustomEls({ URL }) {
+  // useRef to avoid re-renders
+  const customEls = useRef(false);
+
+  useLayoutEffect(() => {
+    if (customEls.current) {
+      return;
+    }
+
+    import('@onsonr/nebula/dist/utilities/base-path').then(({ setBasePath }) => {
+      setBasePath(`${URL}/static/static`);
+
+      // This imports all components
+      import('@onsonr/nebula/dist/react');
+      // If you're wanting to selectively import components, replace this line with your own definitions
+
+      // import("@onsonr/nebula/dist/components/button/button");
+      customEls.current = true;
+    });
+  }, [URL, customEls]);
+
+  return null;
+}
+
+ + +

+ You may be wondering where the URL property is coming from. We’ll address that in the next few + sections. +

+

+ Using Our New Component In Code +

+

+ While we need to use useLayoutEffect for the initial render, NextJS will throw a warning at us + for trying to use useLayoutEffect in SSR, which is disallowed. To fix this problem, we’ll + conditionally render the CustomEls component to only render in the browser +

+ 
function MyApp({ Component, pageProps, URL }) {
+  const isBrowser = typeof window !== 'undefined';
+  return (
+    <>
+      {isBrowser && <CustomEls URL={URL} />}
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+

+ Additional Resources +

+
    +
  • + There is a third-party + example repo, courtesy of + crutchcorn, available to help you get started using Pages Router. +
    • +
  • + There is an + example repo + here using the App Router. +
    • +
+
+
+
+ + diff --git a/tutorials/integrating-with-rails/index.html b/tutorials/integrating-with-rails/index.html new file mode 100644 index 00000000..1756d89d --- /dev/null +++ b/tutorials/integrating-with-rails/index.html @@ -0,0 +1,606 @@ + + + + + + + Integrating with Rails + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Light + Dark + + System + + +
+ + + +
+ +
+
+ +
+ +
+

Integrating with Rails

+

This page explains how to integrate Nebula with a Rails app.

+ +

+ Requirements +

+

This integration has been tested with the following:

+
    +
  • Rails >= 6
    • +
  • Node >= 12.10
    • +
  • Webpacker >= 5
    • +
+

+ Instructions +

+

To get started using Nebula with Rails, the following packages must be installed.

+ 
yarn add @onsonr/nebula copy-webpack-plugin
+
+

+ Importing the Default Theme +

+

+ The next step is to import Nebula’s default theme (stylesheet) in + app/javascript/stylesheets/application.scss. +

+ 
@import '@onsonr/nebula/dist/themes/light';
+@import '@onsonr/nebula/dist/themes/dark'; // Optional dark theme
+
+

+ Fore more details about themes, please refer to + Theme Basics. +

+

+ Importing Required Scripts +

+

+ After importing the theme, you’ll need to import the JavaScript files for Nebula. Add the following code to + app/javascript/packs/application.js. +

+ 
import '../stylesheets/application.scss'
+import { setBasePath, SlAlert, SlAnimation, SlButton, ... } from '@onsonr/nebula'
+
+// ...
+
+const rootUrl = document.currentScript.src.replace(/\/packs.*$/, '')
+
+// Path to the assets folder (should be independent from the current script source path
+// to work correctly in different environments)
+setBasePath(rootUrl + '/packs/js/')
+
+

+ webpack Config +

+

+ Next we need to add Nebula’s assets to the final build output. To do this, modify + config/webpack/environment.js to look like this. +

+ 
const { environment } = require('@rails/webpacker');
+
+// Nebula config
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+
+// Add shoelace assets to webpack's build process
+environment.plugins.append(
+  'CopyPlugin',
+  new CopyPlugin({
+    patterns: [
+      {
+        from: path.resolve(__dirname, '../../node_modules/@onsonr/nebula/dist/assets'),
+        to: path.resolve(__dirname, '../../public/packs/js/assets')
+      }
+    ]
+  })
+);
+
+module.exports = environment;
+
+

+ Adding Pack Tags +

+

+ The final step is to add the corresponding pack_tags to the page. You should have the following + tags in the <head> section of + app/views/layouts/application.html.erb. +

+ 
<!doctype html>
+<html>
+  <head>
+    <!-- ... -->
+
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag
+    'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+  <body>
+    <%= yield %>
+  </body>
+</html>
+
+

Now you can start using Nebula components with Rails!

+

+ Additional Resources +

+ +
+
+
+ +