@synergy-design-system/components 3.4.1 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{chunk.NMWM3BP7.js → chunk.2BATB6NO.js} +4 -4
- package/dist/chunks/{chunk.CDOWFAH2.js → chunk.2ECWEEUO.js} +21 -4
- package/dist/chunks/{chunk.CDOWFAH2.js.map → chunk.2ECWEEUO.js.map} +2 -2
- package/dist/chunks/{chunk.FXJLG622.js → chunk.2NT3B5WJ.js} +1 -2
- package/dist/chunks/chunk.2NT3B5WJ.js.map +7 -0
- package/dist/chunks/{chunk.KRFWZXI7.js → chunk.2YBC7C2K.js} +6 -6
- package/dist/chunks/chunk.32WNHWXJ.js +256 -0
- package/dist/chunks/chunk.32WNHWXJ.js.map +7 -0
- package/dist/chunks/{chunk.PTRCO527.js → chunk.34WYIU4C.js} +11 -36
- package/dist/chunks/chunk.34WYIU4C.js.map +7 -0
- package/dist/chunks/{chunk.SJKOVTL7.js → chunk.3AZ6O5UW.js} +21 -11
- package/dist/chunks/chunk.3AZ6O5UW.js.map +7 -0
- package/dist/chunks/{chunk.NK4LRKZH.js → chunk.3DCW4HDA.js} +2 -2
- package/dist/chunks/{chunk.NQ4QB2MM.js → chunk.3XQ5VLXY.js} +2 -2
- package/dist/chunks/chunk.432DTUIX.js +184 -0
- package/dist/chunks/chunk.432DTUIX.js.map +7 -0
- package/dist/chunks/{chunk.6USNG4EL.js → chunk.45MATNO2.js} +39 -6
- package/dist/chunks/chunk.45MATNO2.js.map +7 -0
- package/dist/chunks/chunk.4P4UJDDZ.js +401 -0
- package/dist/chunks/chunk.4P4UJDDZ.js.map +7 -0
- package/dist/chunks/{chunk.YDGDQPP5.js → chunk.5RI2MXEU.js} +7 -7
- package/dist/chunks/{chunk.GDUWM3IU.js → chunk.5T4HS4EI.js} +2 -2
- package/dist/chunks/{chunk.A2WIAKI6.js → chunk.6A2AHHWZ.js} +3 -3
- package/dist/chunks/{chunk.LAS6ZMG3.js → chunk.6L4RCUNM.js} +13 -13
- package/dist/chunks/chunk.7DRFKCFD.js +388 -0
- package/dist/chunks/chunk.7DRFKCFD.js.map +7 -0
- package/dist/chunks/{chunk.6AGTA23Z.js → chunk.7J4TXMXH.js} +2 -2
- package/dist/chunks/{chunk.Q7TVQOF4.js → chunk.7RZ27FQL.js} +4 -4
- package/dist/chunks/{chunk.Q52OTVVQ.js → chunk.7TPOI264.js} +10 -11
- package/dist/chunks/chunk.7TPOI264.js.map +7 -0
- package/dist/chunks/{chunk.K6ZF6MXW.js → chunk.AVH3ZNCM.js} +2 -2
- package/dist/chunks/{chunk.BLXDFVSN.js → chunk.BBPFCDZW.js} +2 -2
- package/dist/chunks/{chunk.3XGSZICI.js → chunk.BJUQE5YL.js} +2 -2
- package/dist/chunks/{chunk.REYQATVI.js → chunk.BQ7JABKS.js} +9 -13
- package/dist/chunks/chunk.BQ7JABKS.js.map +7 -0
- package/dist/chunks/{chunk.5SCUGJ6B.js → chunk.BVFTZ3AB.js} +2 -2
- package/dist/chunks/{chunk.F3ISPVCF.js → chunk.BZMKXI2L.js} +2 -2
- package/dist/chunks/{chunk.XCIMZW5A.js → chunk.CJLZ3QMG.js} +10 -10
- package/dist/chunks/{chunk.2BNFOMES.js → chunk.CKADV3OI.js} +24 -18
- package/dist/chunks/chunk.CKADV3OI.js.map +7 -0
- package/dist/chunks/{chunk.RFZFX5DB.js → chunk.CMCJB5AA.js} +44 -36
- package/dist/chunks/chunk.CMCJB5AA.js.map +7 -0
- package/dist/chunks/{chunk.VRADHZYJ.js → chunk.CPC3JTDA.js} +8 -8
- package/dist/chunks/{chunk.ZWIJDTHA.js → chunk.CV7OGSN7.js} +8 -8
- package/dist/chunks/{chunk.OLGJ7TFN.js → chunk.DFS7LPJO.js} +2 -2
- package/dist/chunks/{chunk.SQ5WOO45.js → chunk.DYE6F2Y6.js} +2 -2
- package/dist/chunks/{chunk.MCD4BAD3.js → chunk.EAEQ3AGO.js} +6 -6
- package/dist/chunks/{chunk.ZB5HHICG.js → chunk.EUQYBYAZ.js} +2 -2
- package/dist/chunks/{chunk.V4C7IECK.js → chunk.EX4R7WUE.js} +23 -14
- package/dist/chunks/chunk.EX4R7WUE.js.map +7 -0
- package/dist/chunks/{chunk.FESJPZKL.js → chunk.FFAHZBAJ.js} +2 -2
- package/dist/chunks/{chunk.DEBFHR7L.js → chunk.FKDUVEOP.js} +7 -7
- package/dist/chunks/{chunk.YAKMH4QL.js → chunk.FKVCNOHV.js} +5 -5
- package/dist/chunks/{chunk.O2SN266T.js → chunk.FOH4KP4A.js} +7 -7
- package/dist/chunks/{chunk.ENOYY3IT.js → chunk.G7UFPFQ2.js} +4 -4
- package/dist/chunks/{chunk.HKAVJBBB.js → chunk.GCISSJZP.js} +2 -2
- package/dist/chunks/{chunk.NG6MPQXW.js → chunk.GIEAMHSU.js} +3 -3
- package/dist/chunks/{chunk.S4VV4PW6.js → chunk.GT6WAUZ7.js} +2 -2
- package/dist/chunks/{chunk.TJGW3F7V.js → chunk.GZVYO3UJ.js} +3 -3
- package/dist/chunks/{chunk.OVW5OJ5D.js → chunk.H63OT7RB.js} +6 -6
- package/dist/chunks/{chunk.T5IJK23O.js → chunk.IFEFFC3Q.js} +50 -32
- package/dist/chunks/chunk.IFEFFC3Q.js.map +7 -0
- package/dist/chunks/{chunk.CKCAQK4L.js → chunk.IPWLCVHW.js} +2 -2
- package/dist/chunks/{chunk.E7XVQIGU.js → chunk.J3GDNLNN.js} +2 -2
- package/dist/chunks/{chunk.X64WPXGV.js → chunk.JCWTUOY2.js} +10 -10
- package/dist/chunks/{chunk.HMHNDXAC.js → chunk.JHJFFBNL.js} +6 -6
- package/dist/chunks/{chunk.CU6PP445.js → chunk.JJ2K4ORZ.js} +12 -12
- package/dist/chunks/{chunk.TCIRIOFE.js → chunk.K5OSYXNU.js} +2 -2
- package/dist/chunks/{chunk.IM54DI3K.js → chunk.KEO5PHF2.js} +28 -4
- package/dist/chunks/{chunk.IM54DI3K.js.map → chunk.KEO5PHF2.js.map} +2 -2
- package/dist/chunks/{chunk.WB7AZHAU.js → chunk.KGECDG22.js} +2 -2
- package/dist/chunks/{chunk.FIRUUZ72.js → chunk.KT6MHQM6.js} +7 -7
- package/dist/chunks/{chunk.JRG45QJG.js → chunk.KUTXV7RO.js} +3 -3
- package/dist/chunks/{chunk.KY4TLUU7.js → chunk.LALGMGC2.js} +2 -2
- package/dist/chunks/{chunk.RE6C7TN4.js → chunk.LKMV5MVK.js} +10 -10
- package/dist/chunks/{chunk.HYDHTZQK.js → chunk.MCAB6KY5.js} +3 -3
- package/dist/chunks/{chunk.ZZPMWJEV.js → chunk.MCKS4JLW.js} +3 -3
- package/dist/chunks/{chunk.CRK3CDIA.js → chunk.MJA5HEFN.js} +3 -3
- package/dist/chunks/{chunk.VTL7TKW3.js → chunk.MZJLG4BF.js} +3 -3
- package/dist/chunks/{chunk.FXBKSVUT.js → chunk.N4Y2OUEA.js} +2 -2
- package/dist/chunks/{chunk.KPHDBL43.js → chunk.NDJJVGQL.js} +56 -27
- package/dist/chunks/chunk.NDJJVGQL.js.map +7 -0
- package/dist/chunks/{chunk.XJTZAA2Z.js → chunk.NTBDBGG7.js} +2 -2
- package/dist/chunks/{chunk.UDN55TWV.js → chunk.O7OELAMY.js} +36 -26
- package/dist/chunks/chunk.O7OELAMY.js.map +7 -0
- package/dist/chunks/{chunk.LYR5DVRN.js → chunk.OY6ZX6TH.js} +11 -11
- package/dist/chunks/{chunk.UJJS5NUR.js → chunk.OZ3LPRZE.js} +2 -2
- package/dist/chunks/{chunk.GIRTTUXE.js → chunk.PODVUIE6.js} +3 -3
- package/dist/chunks/{chunk.PJSYITAJ.js → chunk.Q7G25NQW.js} +2 -2
- package/dist/chunks/{chunk.Z624JZ3J.js → chunk.QGLCODBD.js} +3 -3
- package/dist/chunks/{chunk.PMUJUBRK.js → chunk.RHL3SPJO.js} +10 -10
- package/dist/chunks/{chunk.CZ37RPEW.js → chunk.RSTYXHB5.js} +2 -2
- package/dist/chunks/{chunk.SFAXS422.js → chunk.RZ3REQWL.js} +2 -2
- package/dist/chunks/{chunk.SK3OOBSU.js → chunk.SBLP34SQ.js} +2 -2
- package/dist/chunks/{chunk.WBOHZGDF.js → chunk.SFBSB7EM.js} +5 -5
- package/dist/chunks/{chunk.6BKPVIJB.js → chunk.SKQK3F66.js} +2 -2
- package/dist/chunks/{chunk.JUL2CRYY.js → chunk.SN2VEGTZ.js} +2 -2
- package/dist/chunks/{chunk.5KP4LNRA.js → chunk.STHUTCU7.js} +9 -9
- package/dist/chunks/{chunk.TBWTMCIZ.js → chunk.SWMV7T2O.js} +7 -7
- package/dist/chunks/{chunk.3BNYHBTW.js → chunk.TBZAI6T6.js} +8 -8
- package/dist/chunks/{chunk.YWLPEZQC.js → chunk.TDWLNFH4.js} +2 -2
- package/dist/chunks/{chunk.FBCN4FKK.js → chunk.THNHZ3LC.js} +2 -2
- package/dist/chunks/{chunk.WBNYPYL7.js → chunk.UCRA4FZW.js} +2 -2
- package/dist/chunks/{chunk.TMIMLIC2.js → chunk.UE2OCWAE.js} +2 -2
- package/dist/chunks/{chunk.IPCLZSAG.js → chunk.UNTUMNPO.js} +10 -10
- package/dist/chunks/{chunk.ZJIPUBF4.js → chunk.UOEHTGNM.js} +2 -2
- package/dist/chunks/{chunk.D74ABFPR.js → chunk.UQ65IBBL.js} +2 -2
- package/dist/chunks/{chunk.LCFMN5P6.js → chunk.UUECFETB.js} +2 -2
- package/dist/chunks/{chunk.BYE5W5XF.js → chunk.V4GFOKBI.js} +2 -2
- package/dist/chunks/{chunk.BYE5W5XF.js.map → chunk.V4GFOKBI.js.map} +1 -1
- package/dist/chunks/{chunk.UHLDAGGC.js → chunk.V6TCG5BQ.js} +25 -15
- package/dist/chunks/chunk.V6TCG5BQ.js.map +7 -0
- package/dist/chunks/{chunk.WYNTVNZN.js → chunk.VH6SKOPX.js} +3 -3
- package/dist/chunks/{chunk.4KKHRDXV.js → chunk.VHCBBPBS.js} +7 -7
- package/dist/chunks/chunk.VOUZJK5T.js +187 -0
- package/dist/chunks/chunk.VOUZJK5T.js.map +7 -0
- package/dist/chunks/{chunk.XEWNW7X7.js → chunk.WEOHOC3C.js} +2 -2
- package/dist/chunks/{chunk.7J4L4QJD.js → chunk.WUKKH3NE.js} +2 -2
- package/dist/chunks/{chunk.I4H7DRDG.js → chunk.X4NXSNI6.js} +2 -2
- package/dist/chunks/{chunk.RQW6TIU3.js → chunk.XCFOLSPD.js} +2 -2
- package/dist/chunks/{chunk.FAHK4E5U.js → chunk.XLYCEJU4.js} +2 -2
- package/dist/chunks/{chunk.QZ3BISVP.js → chunk.XQZR2X4X.js} +2 -2
- package/dist/chunks/{chunk.LWPDGLHA.js → chunk.XUAUB2UI.js} +3 -3
- package/dist/chunks/{chunk.XRABXAPU.js → chunk.XWUVIVOV.js} +2 -2
- package/dist/chunks/{chunk.XSGOTME6.js → chunk.XZ7DDRXL.js} +22 -23
- package/dist/chunks/chunk.XZ7DDRXL.js.map +7 -0
- package/dist/chunks/{chunk.Y5CDCBLE.js → chunk.Y5XMLHNP.js} +2 -2
- package/dist/chunks/{chunk.5OM5JMIS.js → chunk.YGMDIJUQ.js} +2 -2
- package/dist/chunks/{chunk.M56PSVI2.js → chunk.YUUXCVT2.js} +2 -2
- package/dist/chunks/{chunk.FYMB6WRK.js → chunk.ZJ6JMFVP.js} +2 -2
- package/dist/components/accordion/accordion.component.js +4 -4
- package/dist/components/accordion/accordion.js +5 -5
- package/dist/components/alert/alert.component.js +14 -14
- package/dist/components/alert/alert.js +15 -15
- package/dist/components/badge/badge.component.js +5 -5
- package/dist/components/badge/badge.js +6 -6
- package/dist/components/breadcrumb/breadcrumb.component.js +12 -12
- package/dist/components/breadcrumb/breadcrumb.js +13 -13
- package/dist/components/breadcrumb-item/breadcrumb-item.component.js +3 -3
- package/dist/components/breadcrumb-item/breadcrumb-item.js +4 -4
- package/dist/components/button/button.component.js +11 -11
- package/dist/components/button/button.js +12 -12
- package/dist/components/button-group/button-group.component.js +3 -3
- package/dist/components/button-group/button-group.js +4 -4
- package/dist/components/card/card.component.js +3 -3
- package/dist/components/card/card.js +4 -4
- package/dist/components/checkbox/checkbox.component.d.ts +2 -1
- package/dist/components/checkbox/checkbox.component.js +11 -12
- package/dist/components/checkbox/checkbox.js +12 -13
- package/dist/components/checkbox/checkbox.styles.js +1 -1
- package/dist/components/combobox/combobox.component.d.ts +3 -0
- package/dist/components/combobox/combobox.component.js +19 -20
- package/dist/components/combobox/combobox.js +20 -21
- package/dist/components/combobox/combobox.styles.js +2 -1
- package/dist/components/details/details.component.js +10 -10
- package/dist/components/details/details.js +11 -11
- package/dist/components/dialog/dialog.component.js +13 -13
- package/dist/components/dialog/dialog.js +14 -14
- package/dist/components/divider/divider.component.js +3 -3
- package/dist/components/divider/divider.js +4 -4
- package/dist/components/drawer/drawer.component.js +13 -13
- package/dist/components/drawer/drawer.js +14 -14
- package/dist/components/dropdown/dropdown.component.js +5 -5
- package/dist/components/dropdown/dropdown.js +6 -6
- package/dist/components/file/file.component.d.ts +2 -0
- package/dist/components/file/file.component.js +14 -14
- package/dist/components/file/file.js +15 -15
- package/dist/components/file/file.styles.js +1 -1
- package/dist/components/header/header.component.js +11 -11
- package/dist/components/header/header.js +12 -12
- package/dist/components/icon/icon.component.js +7 -7
- package/dist/components/icon/icon.js +8 -8
- package/dist/components/icon/library.js +2 -2
- package/dist/components/icon/library.migration.js +3 -3
- package/dist/components/icon-button/icon-button.component.js +10 -10
- package/dist/components/icon-button/icon-button.js +11 -11
- package/dist/components/input/input.component.js +12 -12
- package/dist/components/input/input.js +13 -13
- package/dist/components/menu/menu.component.js +4 -4
- package/dist/components/menu/menu.js +5 -5
- package/dist/components/menu-item/menu-item.component.js +13 -13
- package/dist/components/menu-item/menu-item.js +14 -14
- package/dist/components/menu-label/menu-label.component.js +4 -4
- package/dist/components/menu-label/menu-label.js +5 -5
- package/dist/components/nav-item/nav-item.component.js +9 -9
- package/dist/components/nav-item/nav-item.js +10 -10
- package/dist/components/optgroup/optgroup.component.js +4 -4
- package/dist/components/optgroup/optgroup.js +5 -5
- package/dist/components/option/option.component.js +11 -11
- package/dist/components/option/option.js +12 -12
- package/dist/components/popup/popup.component.js +3 -3
- package/dist/components/popup/popup.js +4 -4
- package/dist/components/prio-nav/prio-nav.component.js +17 -17
- package/dist/components/prio-nav/prio-nav.js +18 -18
- package/dist/components/progress-bar/progress-bar.component.js +3 -3
- package/dist/components/progress-bar/progress-bar.js +4 -4
- package/dist/components/progress-ring/progress-ring.component.js +3 -3
- package/dist/components/progress-ring/progress-ring.js +4 -4
- package/dist/components/radio/radio.component.d.ts +3 -1
- package/dist/components/radio/radio.component.js +10 -11
- package/dist/components/radio/radio.js +11 -12
- package/dist/components/radio/radio.styles.js +1 -1
- package/dist/components/radio-button/radio-button.component.js +4 -4
- package/dist/components/radio-button/radio-button.js +5 -5
- package/dist/components/radio-group/radio-group.component.d.ts +1 -1
- package/dist/components/radio-group/radio-group.component.js +7 -8
- package/dist/components/radio-group/radio-group.js +8 -9
- package/dist/components/radio-group/radio-group.styles.js +1 -1
- package/dist/components/range/range.component.d.ts +2 -0
- package/dist/components/range/range.component.js +8 -8
- package/dist/components/range/range.js +9 -9
- package/dist/components/range/range.styles.js +1 -1
- package/dist/components/range-tick/range-tick.component.js +3 -3
- package/dist/components/range-tick/range-tick.js +4 -4
- package/dist/components/resize-observer/resize-observer.component.js +3 -3
- package/dist/components/select/select.component.d.ts +3 -0
- package/dist/components/select/select.component.js +16 -17
- package/dist/components/select/select.js +17 -18
- package/dist/components/select/select.styles.js +2 -1
- package/dist/components/side-nav/side-nav.component.js +16 -16
- package/dist/components/side-nav/side-nav.js +17 -17
- package/dist/components/spinner/spinner.component.js +3 -3
- package/dist/components/spinner/spinner.js +4 -4
- package/dist/components/switch/switch.component.d.ts +2 -0
- package/dist/components/switch/switch.component.js +6 -7
- package/dist/components/switch/switch.js +7 -8
- package/dist/components/switch/switch.styles.js +1 -1
- package/dist/components/tab/tab.component.js +12 -12
- package/dist/components/tab/tab.js +13 -13
- package/dist/components/tab-group/tab-group.component.js +13 -13
- package/dist/components/tab-group/tab-group.js +14 -14
- package/dist/components/tab-panel/tab-panel.component.js +3 -3
- package/dist/components/tab-panel/tab-panel.js +4 -4
- package/dist/components/tag/tag.component.js +12 -12
- package/dist/components/tag/tag.js +13 -13
- package/dist/components/textarea/textarea.component.js +6 -7
- package/dist/components/textarea/textarea.js +7 -8
- package/dist/components/textarea/textarea.styles.js +1 -1
- package/dist/components/tooltip/tooltip.component.js +5 -5
- package/dist/components/tooltip/tooltip.js +6 -6
- package/dist/components/validate/utility.js +2 -2
- package/dist/components/validate/validate.component.js +16 -16
- package/dist/components/validate/validate.js +17 -17
- package/dist/custom-elements.json +169 -12
- package/dist/styles/index.css +8 -10
- package/dist/styles/utility.css +6 -11
- package/dist/synergy.js +161 -168
- package/dist/utilities/icon-library.js +2 -2
- package/dist/vscode.html-custom-data.json +35 -0
- package/package.json +5 -5
- package/dist/chunks/chunk.2BNFOMES.js.map +0 -7
- package/dist/chunks/chunk.2IL4PA6Q.js +0 -130
- package/dist/chunks/chunk.2IL4PA6Q.js.map +0 -7
- package/dist/chunks/chunk.6AT5JL7A.js +0 -374
- package/dist/chunks/chunk.6AT5JL7A.js.map +0 -7
- package/dist/chunks/chunk.6USNG4EL.js.map +0 -7
- package/dist/chunks/chunk.F7LCJU4M.js +0 -183
- package/dist/chunks/chunk.F7LCJU4M.js.map +0 -7
- package/dist/chunks/chunk.FXJLG622.js.map +0 -7
- package/dist/chunks/chunk.GPP4D4HH.js +0 -313
- package/dist/chunks/chunk.GPP4D4HH.js.map +0 -7
- package/dist/chunks/chunk.IZRTF5EM.js +0 -91
- package/dist/chunks/chunk.IZRTF5EM.js.map +0 -7
- package/dist/chunks/chunk.KPHDBL43.js.map +0 -7
- package/dist/chunks/chunk.PTRCO527.js.map +0 -7
- package/dist/chunks/chunk.Q52OTVVQ.js.map +0 -7
- package/dist/chunks/chunk.REYQATVI.js.map +0 -7
- package/dist/chunks/chunk.RFZFX5DB.js.map +0 -7
- package/dist/chunks/chunk.SHIPVO7H.js +0 -53
- package/dist/chunks/chunk.SHIPVO7H.js.map +0 -7
- package/dist/chunks/chunk.SJKOVTL7.js.map +0 -7
- package/dist/chunks/chunk.SLDFB2O3.js +0 -146
- package/dist/chunks/chunk.SLDFB2O3.js.map +0 -7
- package/dist/chunks/chunk.T5IJK23O.js.map +0 -7
- package/dist/chunks/chunk.UDN55TWV.js.map +0 -7
- package/dist/chunks/chunk.UHLDAGGC.js.map +0 -7
- package/dist/chunks/chunk.V4C7IECK.js.map +0 -7
- package/dist/chunks/chunk.X323W6VB.js +0 -174
- package/dist/chunks/chunk.X323W6VB.js.map +0 -7
- package/dist/chunks/chunk.XSGOTME6.js.map +0 -7
- package/dist/chunks/chunk.YITQ6NLI.js +0 -121
- package/dist/chunks/chunk.YITQ6NLI.js.map +0 -7
- package/dist/chunks/chunk.YOJL35VB.js +0 -91
- package/dist/chunks/chunk.YOJL35VB.js.map +0 -7
- package/dist/chunks/chunk.YPYFEST2.js +0 -41
- package/dist/chunks/chunk.YPYFEST2.js.map +0 -7
- package/dist/chunks/chunk.ZC3GXTWV.js +0 -127
- package/dist/chunks/chunk.ZC3GXTWV.js.map +0 -7
- package/dist/components/checkbox/checkbox.custom.styles.d.ts +0 -2
- package/dist/components/checkbox/checkbox.custom.styles.js +0 -8
- package/dist/components/checkbox/checkbox.custom.styles.js.map +0 -7
- package/dist/components/combobox/combobox.custom.styles.d.ts +0 -2
- package/dist/components/combobox/combobox.custom.styles.js +0 -9
- package/dist/components/combobox/combobox.custom.styles.js.map +0 -7
- package/dist/components/radio/radio.custom.styles.d.ts +0 -2
- package/dist/components/radio/radio.custom.styles.js +0 -8
- package/dist/components/radio/radio.custom.styles.js.map +0 -7
- package/dist/components/radio-group/radio-group.custom.styles.d.ts +0 -2
- package/dist/components/radio-group/radio-group.custom.styles.js +0 -8
- package/dist/components/radio-group/radio-group.custom.styles.js.map +0 -7
- package/dist/components/select/select.custom.styles.d.ts +0 -2
- package/dist/components/select/select.custom.styles.js +0 -9
- package/dist/components/select/select.custom.styles.js.map +0 -7
- package/dist/components/switch/switch.custom.styles.d.ts +0 -2
- package/dist/components/switch/switch.custom.styles.js +0 -8
- package/dist/components/switch/switch.custom.styles.js.map +0 -7
- package/dist/components/textarea/textarea.custom.styles.d.ts +0 -2
- package/dist/components/textarea/textarea.custom.styles.js +0 -8
- package/dist/components/textarea/textarea.custom.styles.js.map +0 -7
- package/dist/styles/form-control.custom.styles.d.ts +0 -2
- /package/dist/chunks/{chunk.NMWM3BP7.js.map → chunk.2BATB6NO.js.map} +0 -0
- /package/dist/chunks/{chunk.KRFWZXI7.js.map → chunk.2YBC7C2K.js.map} +0 -0
- /package/dist/chunks/{chunk.NK4LRKZH.js.map → chunk.3DCW4HDA.js.map} +0 -0
- /package/dist/chunks/{chunk.NQ4QB2MM.js.map → chunk.3XQ5VLXY.js.map} +0 -0
- /package/dist/chunks/{chunk.YDGDQPP5.js.map → chunk.5RI2MXEU.js.map} +0 -0
- /package/dist/chunks/{chunk.GDUWM3IU.js.map → chunk.5T4HS4EI.js.map} +0 -0
- /package/dist/chunks/{chunk.A2WIAKI6.js.map → chunk.6A2AHHWZ.js.map} +0 -0
- /package/dist/chunks/{chunk.LAS6ZMG3.js.map → chunk.6L4RCUNM.js.map} +0 -0
- /package/dist/chunks/{chunk.6AGTA23Z.js.map → chunk.7J4TXMXH.js.map} +0 -0
- /package/dist/chunks/{chunk.Q7TVQOF4.js.map → chunk.7RZ27FQL.js.map} +0 -0
- /package/dist/chunks/{chunk.K6ZF6MXW.js.map → chunk.AVH3ZNCM.js.map} +0 -0
- /package/dist/chunks/{chunk.BLXDFVSN.js.map → chunk.BBPFCDZW.js.map} +0 -0
- /package/dist/chunks/{chunk.3XGSZICI.js.map → chunk.BJUQE5YL.js.map} +0 -0
- /package/dist/chunks/{chunk.5SCUGJ6B.js.map → chunk.BVFTZ3AB.js.map} +0 -0
- /package/dist/chunks/{chunk.F3ISPVCF.js.map → chunk.BZMKXI2L.js.map} +0 -0
- /package/dist/chunks/{chunk.XCIMZW5A.js.map → chunk.CJLZ3QMG.js.map} +0 -0
- /package/dist/chunks/{chunk.VRADHZYJ.js.map → chunk.CPC3JTDA.js.map} +0 -0
- /package/dist/chunks/{chunk.ZWIJDTHA.js.map → chunk.CV7OGSN7.js.map} +0 -0
- /package/dist/chunks/{chunk.OLGJ7TFN.js.map → chunk.DFS7LPJO.js.map} +0 -0
- /package/dist/chunks/{chunk.SQ5WOO45.js.map → chunk.DYE6F2Y6.js.map} +0 -0
- /package/dist/chunks/{chunk.MCD4BAD3.js.map → chunk.EAEQ3AGO.js.map} +0 -0
- /package/dist/chunks/{chunk.ZB5HHICG.js.map → chunk.EUQYBYAZ.js.map} +0 -0
- /package/dist/chunks/{chunk.FESJPZKL.js.map → chunk.FFAHZBAJ.js.map} +0 -0
- /package/dist/chunks/{chunk.DEBFHR7L.js.map → chunk.FKDUVEOP.js.map} +0 -0
- /package/dist/chunks/{chunk.YAKMH4QL.js.map → chunk.FKVCNOHV.js.map} +0 -0
- /package/dist/chunks/{chunk.O2SN266T.js.map → chunk.FOH4KP4A.js.map} +0 -0
- /package/dist/chunks/{chunk.ENOYY3IT.js.map → chunk.G7UFPFQ2.js.map} +0 -0
- /package/dist/chunks/{chunk.HKAVJBBB.js.map → chunk.GCISSJZP.js.map} +0 -0
- /package/dist/chunks/{chunk.NG6MPQXW.js.map → chunk.GIEAMHSU.js.map} +0 -0
- /package/dist/chunks/{chunk.S4VV4PW6.js.map → chunk.GT6WAUZ7.js.map} +0 -0
- /package/dist/chunks/{chunk.TJGW3F7V.js.map → chunk.GZVYO3UJ.js.map} +0 -0
- /package/dist/chunks/{chunk.OVW5OJ5D.js.map → chunk.H63OT7RB.js.map} +0 -0
- /package/dist/chunks/{chunk.CKCAQK4L.js.map → chunk.IPWLCVHW.js.map} +0 -0
- /package/dist/chunks/{chunk.E7XVQIGU.js.map → chunk.J3GDNLNN.js.map} +0 -0
- /package/dist/chunks/{chunk.X64WPXGV.js.map → chunk.JCWTUOY2.js.map} +0 -0
- /package/dist/chunks/{chunk.HMHNDXAC.js.map → chunk.JHJFFBNL.js.map} +0 -0
- /package/dist/chunks/{chunk.CU6PP445.js.map → chunk.JJ2K4ORZ.js.map} +0 -0
- /package/dist/chunks/{chunk.TCIRIOFE.js.map → chunk.K5OSYXNU.js.map} +0 -0
- /package/dist/chunks/{chunk.WB7AZHAU.js.map → chunk.KGECDG22.js.map} +0 -0
- /package/dist/chunks/{chunk.FIRUUZ72.js.map → chunk.KT6MHQM6.js.map} +0 -0
- /package/dist/chunks/{chunk.JRG45QJG.js.map → chunk.KUTXV7RO.js.map} +0 -0
- /package/dist/chunks/{chunk.KY4TLUU7.js.map → chunk.LALGMGC2.js.map} +0 -0
- /package/dist/chunks/{chunk.RE6C7TN4.js.map → chunk.LKMV5MVK.js.map} +0 -0
- /package/dist/chunks/{chunk.HYDHTZQK.js.map → chunk.MCAB6KY5.js.map} +0 -0
- /package/dist/chunks/{chunk.ZZPMWJEV.js.map → chunk.MCKS4JLW.js.map} +0 -0
- /package/dist/chunks/{chunk.CRK3CDIA.js.map → chunk.MJA5HEFN.js.map} +0 -0
- /package/dist/chunks/{chunk.VTL7TKW3.js.map → chunk.MZJLG4BF.js.map} +0 -0
- /package/dist/chunks/{chunk.FXBKSVUT.js.map → chunk.N4Y2OUEA.js.map} +0 -0
- /package/dist/chunks/{chunk.XJTZAA2Z.js.map → chunk.NTBDBGG7.js.map} +0 -0
- /package/dist/chunks/{chunk.LYR5DVRN.js.map → chunk.OY6ZX6TH.js.map} +0 -0
- /package/dist/chunks/{chunk.UJJS5NUR.js.map → chunk.OZ3LPRZE.js.map} +0 -0
- /package/dist/chunks/{chunk.GIRTTUXE.js.map → chunk.PODVUIE6.js.map} +0 -0
- /package/dist/chunks/{chunk.PJSYITAJ.js.map → chunk.Q7G25NQW.js.map} +0 -0
- /package/dist/chunks/{chunk.Z624JZ3J.js.map → chunk.QGLCODBD.js.map} +0 -0
- /package/dist/chunks/{chunk.PMUJUBRK.js.map → chunk.RHL3SPJO.js.map} +0 -0
- /package/dist/chunks/{chunk.CZ37RPEW.js.map → chunk.RSTYXHB5.js.map} +0 -0
- /package/dist/chunks/{chunk.SFAXS422.js.map → chunk.RZ3REQWL.js.map} +0 -0
- /package/dist/chunks/{chunk.SK3OOBSU.js.map → chunk.SBLP34SQ.js.map} +0 -0
- /package/dist/chunks/{chunk.WBOHZGDF.js.map → chunk.SFBSB7EM.js.map} +0 -0
- /package/dist/chunks/{chunk.6BKPVIJB.js.map → chunk.SKQK3F66.js.map} +0 -0
- /package/dist/chunks/{chunk.JUL2CRYY.js.map → chunk.SN2VEGTZ.js.map} +0 -0
- /package/dist/chunks/{chunk.5KP4LNRA.js.map → chunk.STHUTCU7.js.map} +0 -0
- /package/dist/chunks/{chunk.TBWTMCIZ.js.map → chunk.SWMV7T2O.js.map} +0 -0
- /package/dist/chunks/{chunk.3BNYHBTW.js.map → chunk.TBZAI6T6.js.map} +0 -0
- /package/dist/chunks/{chunk.YWLPEZQC.js.map → chunk.TDWLNFH4.js.map} +0 -0
- /package/dist/chunks/{chunk.FBCN4FKK.js.map → chunk.THNHZ3LC.js.map} +0 -0
- /package/dist/chunks/{chunk.WBNYPYL7.js.map → chunk.UCRA4FZW.js.map} +0 -0
- /package/dist/chunks/{chunk.TMIMLIC2.js.map → chunk.UE2OCWAE.js.map} +0 -0
- /package/dist/chunks/{chunk.IPCLZSAG.js.map → chunk.UNTUMNPO.js.map} +0 -0
- /package/dist/chunks/{chunk.ZJIPUBF4.js.map → chunk.UOEHTGNM.js.map} +0 -0
- /package/dist/chunks/{chunk.D74ABFPR.js.map → chunk.UQ65IBBL.js.map} +0 -0
- /package/dist/chunks/{chunk.LCFMN5P6.js.map → chunk.UUECFETB.js.map} +0 -0
- /package/dist/chunks/{chunk.WYNTVNZN.js.map → chunk.VH6SKOPX.js.map} +0 -0
- /package/dist/chunks/{chunk.4KKHRDXV.js.map → chunk.VHCBBPBS.js.map} +0 -0
- /package/dist/chunks/{chunk.XEWNW7X7.js.map → chunk.WEOHOC3C.js.map} +0 -0
- /package/dist/chunks/{chunk.7J4L4QJD.js.map → chunk.WUKKH3NE.js.map} +0 -0
- /package/dist/chunks/{chunk.I4H7DRDG.js.map → chunk.X4NXSNI6.js.map} +0 -0
- /package/dist/chunks/{chunk.RQW6TIU3.js.map → chunk.XCFOLSPD.js.map} +0 -0
- /package/dist/chunks/{chunk.FAHK4E5U.js.map → chunk.XLYCEJU4.js.map} +0 -0
- /package/dist/chunks/{chunk.QZ3BISVP.js.map → chunk.XQZR2X4X.js.map} +0 -0
- /package/dist/chunks/{chunk.LWPDGLHA.js.map → chunk.XUAUB2UI.js.map} +0 -0
- /package/dist/chunks/{chunk.XRABXAPU.js.map → chunk.XWUVIVOV.js.map} +0 -0
- /package/dist/chunks/{chunk.Y5CDCBLE.js.map → chunk.Y5XMLHNP.js.map} +0 -0
- /package/dist/chunks/{chunk.5OM5JMIS.js.map → chunk.YGMDIJUQ.js.map} +0 -0
- /package/dist/chunks/{chunk.M56PSVI2.js.map → chunk.YUUXCVT2.js.map} +0 -0
- /package/dist/chunks/{chunk.FYMB6WRK.js.map → chunk.ZJ6JMFVP.js.map} +0 -0
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
// src/components/switch/switch.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var switch_styles_default = css`
|
|
4
|
-
/* stylelint-disable */
|
|
5
|
-
:host {
|
|
6
|
-
display: inline-block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
:host([size='small']) {
|
|
10
|
-
--height: var(--syn-toggle-size-small);
|
|
11
|
-
--thumb-size: calc(var(--syn-toggle-size-small) + 4px);
|
|
12
|
-
--width: calc(var(--height) * 2);
|
|
13
|
-
|
|
14
|
-
font-size: var(--syn-input-font-size-small);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([size='medium']) {
|
|
18
|
-
--height: var(--syn-toggle-size-medium);
|
|
19
|
-
--thumb-size: calc(var(--syn-toggle-size-medium) + 4px);
|
|
20
|
-
--width: calc(var(--height) * 2);
|
|
21
|
-
|
|
22
|
-
font-size: var(--syn-input-font-size-medium);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host([size='large']) {
|
|
26
|
-
--height: var(--syn-toggle-size-large);
|
|
27
|
-
--thumb-size: calc(var(--syn-toggle-size-large) + 4px);
|
|
28
|
-
--width: calc(var(--height) * 2);
|
|
29
|
-
|
|
30
|
-
font-size: var(--syn-input-font-size-large);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.switch {
|
|
34
|
-
position: relative;
|
|
35
|
-
display: inline-flex;
|
|
36
|
-
align-items: center;
|
|
37
|
-
font-family: var(--syn-input-font-family);
|
|
38
|
-
font-size: inherit;
|
|
39
|
-
font-weight: var(--syn-input-font-weight);
|
|
40
|
-
color: var(--syn-input-label-color);
|
|
41
|
-
vertical-align: middle;
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.switch__control {
|
|
46
|
-
flex: 0 0 auto;
|
|
47
|
-
position: relative;
|
|
48
|
-
display: inline-flex;
|
|
49
|
-
align-items: center;
|
|
50
|
-
justify-content: center;
|
|
51
|
-
width: var(--width);
|
|
52
|
-
height: var(--height);
|
|
53
|
-
background-color: var(--syn-color-neutral-400);
|
|
54
|
-
border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
|
|
55
|
-
border-radius: var(--height);
|
|
56
|
-
transition:
|
|
57
|
-
var(--syn-transition-fast) border-color,
|
|
58
|
-
var(--syn-transition-fast) background-color;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.switch__control .switch__thumb {
|
|
62
|
-
width: var(--thumb-size);
|
|
63
|
-
height: var(--thumb-size);
|
|
64
|
-
background-color: var(--syn-color-neutral-0);
|
|
65
|
-
border-radius: 50%;
|
|
66
|
-
border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
|
|
67
|
-
translate: calc((var(--width) - var(--height)) / -2);
|
|
68
|
-
transition:
|
|
69
|
-
var(--syn-transition-fast) translate ease,
|
|
70
|
-
var(--syn-transition-fast) background-color,
|
|
71
|
-
var(--syn-transition-fast) border-color,
|
|
72
|
-
var(--syn-transition-fast) box-shadow;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.switch__input {
|
|
76
|
-
position: absolute;
|
|
77
|
-
opacity: 0;
|
|
78
|
-
padding: 0;
|
|
79
|
-
margin: 0;
|
|
80
|
-
pointer-events: none;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Hover */
|
|
84
|
-
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
|
|
85
|
-
background-color: var(--syn-color-neutral-400);
|
|
86
|
-
border-color: var(--syn-color-neutral-400);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
|
|
90
|
-
background-color: var(--syn-color-neutral-0);
|
|
91
|
-
border-color: var(--syn-color-neutral-400);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* Focus */
|
|
95
|
-
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
|
|
96
|
-
background-color: var(--syn-color-neutral-400);
|
|
97
|
-
border-color: var(--syn-color-neutral-400);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
|
|
101
|
-
background-color: var(--syn-color-neutral-0);
|
|
102
|
-
border-color: var(--syn-color-primary-600);
|
|
103
|
-
outline: var(--syn-focus-ring);
|
|
104
|
-
outline-offset: var(--syn-focus-ring-offset);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/* Checked */
|
|
108
|
-
.switch--checked .switch__control {
|
|
109
|
-
background-color: var(--syn-color-primary-600);
|
|
110
|
-
border-color: var(--syn-color-primary-600);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.switch--checked .switch__control .switch__thumb {
|
|
114
|
-
background-color: var(--syn-color-neutral-0);
|
|
115
|
-
border-color: var(--syn-color-primary-600);
|
|
116
|
-
translate: calc((var(--width) - var(--height)) / 2);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* Checked + hover */
|
|
120
|
-
.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
|
|
121
|
-
background-color: var(--syn-color-primary-600);
|
|
122
|
-
border-color: var(--syn-color-primary-600);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
|
|
126
|
-
background-color: var(--syn-color-neutral-0);
|
|
127
|
-
border-color: var(--syn-color-primary-600);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/* Checked + focus */
|
|
131
|
-
.switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
|
|
132
|
-
background-color: var(--syn-color-primary-600);
|
|
133
|
-
border-color: var(--syn-color-primary-600);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
|
|
137
|
-
background-color: var(--syn-color-neutral-0);
|
|
138
|
-
border-color: var(--syn-color-primary-600);
|
|
139
|
-
outline: var(--syn-focus-ring);
|
|
140
|
-
outline-offset: var(--syn-focus-ring-offset);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* Disabled */
|
|
144
|
-
.switch--disabled {
|
|
145
|
-
opacity: 0.5;
|
|
146
|
-
cursor: not-allowed;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.switch__label {
|
|
150
|
-
display: inline-block;
|
|
151
|
-
line-height: var(--height);
|
|
152
|
-
margin-inline-start: 0.5em;
|
|
153
|
-
user-select: none;
|
|
154
|
-
-webkit-user-select: none;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
:host([required]) .switch__label::after {
|
|
158
|
-
content: var(--syn-input-required-content);
|
|
159
|
-
color: var(--syn-input-required-content-color);
|
|
160
|
-
margin-inline-start: var(--syn-input-required-content-offset);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
@media (forced-colors: active) {
|
|
164
|
-
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
|
|
165
|
-
.switch--checked .switch__control .switch__thumb {
|
|
166
|
-
background-color: ButtonText;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
`;
|
|
170
|
-
|
|
171
|
-
export {
|
|
172
|
-
switch_styles_default
|
|
173
|
-
};
|
|
174
|
-
//# sourceMappingURL=chunk.X323W6VB.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/switch/switch.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: inline-block;\n }\n\n :host([size='small']) {\n --height: var(--syn-toggle-size-small);\n --thumb-size: calc(var(--syn-toggle-size-small) + 4px);\n --width: calc(var(--height) * 2);\n\n font-size: var(--syn-input-font-size-small);\n }\n\n :host([size='medium']) {\n --height: var(--syn-toggle-size-medium);\n --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);\n --width: calc(var(--height) * 2);\n\n font-size: var(--syn-input-font-size-medium);\n }\n\n :host([size='large']) {\n --height: var(--syn-toggle-size-large);\n --thumb-size: calc(var(--syn-toggle-size-large) + 4px);\n --width: calc(var(--height) * 2);\n\n font-size: var(--syn-input-font-size-large);\n }\n\n .switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n font-family: var(--syn-input-font-family);\n font-size: inherit;\n font-weight: var(--syn-input-font-weight);\n color: var(--syn-input-label-color);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .switch__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--width);\n height: var(--height);\n background-color: var(--syn-color-neutral-400);\n border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n border-radius: var(--height);\n transition:\n var(--syn-transition-fast) border-color,\n var(--syn-transition-fast) background-color;\n }\n\n .switch__control .switch__thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n background-color: var(--syn-color-neutral-0);\n border-radius: 50%;\n border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n translate: calc((var(--width) - var(--height)) / -2);\n transition:\n var(--syn-transition-fast) translate ease,\n var(--syn-transition-fast) background-color,\n var(--syn-transition-fast) border-color,\n var(--syn-transition-fast) box-shadow;\n }\n\n .switch__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* Hover */\n .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-neutral-400);\n border-color: var(--syn-color-neutral-400);\n }\n\n .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-neutral-400);\n }\n\n /* Focus */\n .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n background-color: var(--syn-color-neutral-400);\n border-color: var(--syn-color-neutral-400);\n }\n\n .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Checked */\n .switch--checked .switch__control {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n }\n\n .switch--checked .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n translate: calc((var(--width) - var(--height)) / 2);\n }\n\n /* Checked + hover */\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n }\n\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n }\n\n /* Checked + focus */\n .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n background-color: var(--syn-color-primary-600);\n border-color: var(--syn-color-primary-600);\n }\n\n .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n background-color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Disabled */\n .switch--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .switch__label {\n display: inline-block;\n line-height: var(--height);\n margin-inline-start: 0.5em;\n user-select: none;\n -webkit-user-select: none;\n }\n\n :host([required]) .switch__label::after {\n content: var(--syn-input-required-content);\n color: var(--syn-input-required-content-color);\n margin-inline-start: var(--syn-input-required-content-offset);\n }\n\n @media (forced-colors: active) {\n .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,\n .switch--checked .switch__control .switch__thumb {\n background-color: ButtonText;\n }\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/checkbox/checkbox.component.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\n@enableDefaultSettings('SynCheckbox')\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n private readonly formControlController = new FormControlController(this, {\n value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: SynCheckbox) => control.defaultChecked,\n setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n\n @property({ reflect: true }) title = ''; // make reactive to pass through\n\n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: string;\n\n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('syn-change');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleInput() {\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n this.formControlController.updateValidity();\n }\n\n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n\n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n return this.input.checkValidity();\n }\n\n /** Gets the associated form, if one exists. */\n getForm(): HTMLFormElement | null {\n return this.formControlController.getForm();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n reportValidity() {\n return this.input.reportValidity();\n }\n\n /**\n * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n * the custom validation message, call this method with an empty string.\n */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n //\n // NOTE: we use a <div> around the label slot because of this Chrome bug.\n //\n // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n //\n return html`\n <div\n class=${classMap({\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--has-help-text': hasHelpText\n })}\n >\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--small': this.size === 'small',\n 'checkbox--medium': this.size === 'medium',\n 'checkbox--large': this.size === 'large'\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n @click=${this.handleClick}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <syn-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n name=\"indeterminate\"\n ></syn-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n <slot></slot>\n </div>\n </label>\n\n <div\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n class=\"form-control__help-text\"\n id=\"help-text\"\n part=\"form-control-help-text\"\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
// src/components/radio/radio.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var radio_styles_default = css`
|
|
4
|
-
/* stylelint-disable */
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
:host(:focus-visible) {
|
|
10
|
-
outline: 0px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.radio {
|
|
14
|
-
display: inline-flex;
|
|
15
|
-
align-items: top;
|
|
16
|
-
font-family: var(--syn-input-font-family);
|
|
17
|
-
font-size: var(--syn-input-font-size-medium);
|
|
18
|
-
font-weight: var(--syn-input-font-weight);
|
|
19
|
-
color: var(--syn-input-label-color);
|
|
20
|
-
vertical-align: middle;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.radio--small {
|
|
25
|
-
--toggle-size: var(--syn-toggle-size-small);
|
|
26
|
-
font-size: var(--syn-input-font-size-small);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.radio--medium {
|
|
30
|
-
--toggle-size: var(--syn-toggle-size-medium);
|
|
31
|
-
font-size: var(--syn-input-font-size-medium);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.radio--large {
|
|
35
|
-
--toggle-size: var(--syn-toggle-size-large);
|
|
36
|
-
font-size: var(--syn-input-font-size-large);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.radio__checked-icon {
|
|
40
|
-
display: inline-flex;
|
|
41
|
-
width: var(--toggle-size);
|
|
42
|
-
height: var(--toggle-size);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.radio__control {
|
|
46
|
-
flex: 0 0 auto;
|
|
47
|
-
position: relative;
|
|
48
|
-
display: inline-flex;
|
|
49
|
-
align-items: center;
|
|
50
|
-
justify-content: center;
|
|
51
|
-
width: var(--toggle-size);
|
|
52
|
-
height: var(--toggle-size);
|
|
53
|
-
border: solid var(--syn-input-border-width) var(--syn-input-border-color);
|
|
54
|
-
border-radius: 50%;
|
|
55
|
-
background-color: var(--syn-input-background-color);
|
|
56
|
-
color: transparent;
|
|
57
|
-
transition:
|
|
58
|
-
var(--syn-transition-fast) border-color,
|
|
59
|
-
var(--syn-transition-fast) background-color,
|
|
60
|
-
var(--syn-transition-fast) color,
|
|
61
|
-
var(--syn-transition-fast) box-shadow;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.radio__input {
|
|
65
|
-
position: absolute;
|
|
66
|
-
opacity: 0;
|
|
67
|
-
padding: 0;
|
|
68
|
-
margin: 0;
|
|
69
|
-
pointer-events: none;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Hover */
|
|
73
|
-
.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
|
|
74
|
-
border-color: var(--syn-input-border-color-hover);
|
|
75
|
-
background-color: var(--syn-input-background-color-hover);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* Checked */
|
|
79
|
-
.radio--checked .radio__control {
|
|
80
|
-
color: var(--syn-color-neutral-0);
|
|
81
|
-
border-color: var(--syn-color-primary-600);
|
|
82
|
-
background-color: var(--syn-color-primary-600);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* Checked + hover */
|
|
86
|
-
.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
|
|
87
|
-
border-color: var(--syn-color-primary-500);
|
|
88
|
-
background-color: var(--syn-color-primary-500);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/* Checked + focus */
|
|
92
|
-
:host(:focus-visible) .radio__control {
|
|
93
|
-
outline: var(--syn-focus-ring);
|
|
94
|
-
outline-offset: var(--syn-focus-ring-offset);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/* Disabled */
|
|
98
|
-
.radio--disabled {
|
|
99
|
-
opacity: 0.5;
|
|
100
|
-
cursor: not-allowed;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
|
|
104
|
-
.radio:not(.radio--checked) svg circle {
|
|
105
|
-
opacity: 0;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.radio__label {
|
|
109
|
-
display: inline-block;
|
|
110
|
-
color: var(--syn-input-label-color);
|
|
111
|
-
line-height: var(--toggle-size);
|
|
112
|
-
margin-inline-start: 0.5em;
|
|
113
|
-
user-select: none;
|
|
114
|
-
-webkit-user-select: none;
|
|
115
|
-
}
|
|
116
|
-
`;
|
|
117
|
-
|
|
118
|
-
export {
|
|
119
|
-
radio_styles_default
|
|
120
|
-
};
|
|
121
|
-
//# sourceMappingURL=chunk.YITQ6NLI.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio/radio.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: block;\n }\n\n :host(:focus-visible) {\n outline: 0px;\n }\n\n .radio {\n display: inline-flex;\n align-items: top;\n font-family: var(--syn-input-font-family);\n font-size: var(--syn-input-font-size-medium);\n font-weight: var(--syn-input-font-weight);\n color: var(--syn-input-label-color);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .radio--small {\n --toggle-size: var(--syn-toggle-size-small);\n font-size: var(--syn-input-font-size-small);\n }\n\n .radio--medium {\n --toggle-size: var(--syn-toggle-size-medium);\n font-size: var(--syn-input-font-size-medium);\n }\n\n .radio--large {\n --toggle-size: var(--syn-toggle-size-large);\n font-size: var(--syn-input-font-size-large);\n }\n\n .radio__checked-icon {\n display: inline-flex;\n width: var(--toggle-size);\n height: var(--toggle-size);\n }\n\n .radio__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--toggle-size);\n height: var(--toggle-size);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n border-radius: 50%;\n background-color: var(--syn-input-background-color);\n color: transparent;\n transition:\n var(--syn-transition-fast) border-color,\n var(--syn-transition-fast) background-color,\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) box-shadow;\n }\n\n .radio__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* Hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border-color: var(--syn-input-border-color-hover);\n background-color: var(--syn-input-background-color-hover);\n }\n\n /* Checked */\n .radio--checked .radio__control {\n color: var(--syn-color-neutral-0);\n border-color: var(--syn-color-primary-600);\n background-color: var(--syn-color-primary-600);\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n border-color: var(--syn-color-primary-500);\n background-color: var(--syn-color-primary-500);\n }\n\n /* Checked + focus */\n :host(:focus-visible) .radio__control {\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Disabled */\n .radio--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n .radio:not(.radio--checked) svg circle {\n opacity: 0;\n }\n\n .radio__label {\n display: inline-block;\n color: var(--syn-input-label-color);\n line-height: var(--toggle-size);\n margin-inline-start: 0.5em;\n user-select: none;\n -webkit-user-select: none;\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
// src/components/radio/radio.custom.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var radio_custom_styles_default = css`
|
|
4
|
-
:host(:focus-visible) .radio__control {
|
|
5
|
-
outline: var(--syn-focus-ring);
|
|
6
|
-
outline-offset: var(--syn-focus-ring-width);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.radio {
|
|
10
|
-
align-items: flex-start;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/** #429: Use token for opacity */
|
|
14
|
-
.radio--disabled {
|
|
15
|
-
opacity: var(--syn-input-disabled-opacity);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* Checked */
|
|
19
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
|
20
|
-
.radio--checked .radio__control {
|
|
21
|
-
background-color: var(--syn-interactive-emphasis-color);
|
|
22
|
-
border-color: var(--syn-interactive-emphasis-color);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* Reset original hover */
|
|
26
|
-
.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
|
|
27
|
-
background: inherit;
|
|
28
|
-
border-color: inherit;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* Checked + hover */
|
|
32
|
-
.radio.radio--checked:not(.radio--disabled):hover .radio__control {
|
|
33
|
-
background-color: var(--syn-interactive-emphasis-color-hover);
|
|
34
|
-
border-color: var(--syn-interactive-emphasis-color-hover);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Checked + active */
|
|
38
|
-
.radio.radio--checked:not(.radio--disabled):active .radio__control {
|
|
39
|
-
background-color: var(--syn-interactive-emphasis-color-active);
|
|
40
|
-
border-color: var(--syn-interactive-emphasis-color-active);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/* Not-Checked + Hover */
|
|
44
|
-
.radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
|
|
45
|
-
border-color: var(--syn-input-border-color-hover);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* Not-Checked + active */
|
|
49
|
-
.radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
|
|
50
|
-
border-color: var(--syn-input-border-color-active);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* Fix#456: Multi line radio fixes */
|
|
54
|
-
.radio__label {
|
|
55
|
-
align-self: center;
|
|
56
|
-
margin-inline-start: var(--syn-spacing-x-small);
|
|
57
|
-
margin-top: -1px;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.radio--small .radio__label {
|
|
61
|
-
font: var(--syn-body-small-regular);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.radio--medium .radio__label {
|
|
65
|
-
font: var(--syn-body-medium-regular);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.radio--large .radio__label {
|
|
69
|
-
font: var(--syn-body-large-regular);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* /Fix#456 */
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* #920: The new icons are instances in figma.
|
|
76
|
-
* The width of the system icon is 12px x 12px, so there is no inner padding.
|
|
77
|
-
* To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
|
|
78
|
-
*/
|
|
79
|
-
.radio__checked-icon {
|
|
80
|
-
scale: 0.5;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.radio--small .radio__label, .radio--large .radio__label {
|
|
84
|
-
margin-inline-start: var(--syn-spacing-x-small);
|
|
85
|
-
}
|
|
86
|
-
`;
|
|
87
|
-
|
|
88
|
-
export {
|
|
89
|
-
radio_custom_styles_default
|
|
90
|
-
};
|
|
91
|
-
//# sourceMappingURL=chunk.YOJL35VB.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio/radio.custom.styles.ts"],
|
|
4
|
-
"sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n :host(:focus-visible) .radio__control {\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-width);\n }\n\n .radio {\n align-items: flex-start;\n }\n\n /** #429: Use token for opacity */\n .radio--disabled { \n opacity: var(--syn-input-disabled-opacity);\n }\n\n /* Checked */\n /* stylelint-disable-next-line no-descending-specificity */\n .radio--checked .radio__control {\n background-color: var(--syn-interactive-emphasis-color);\n border-color: var(--syn-interactive-emphasis-color);\n }\n\n /* Reset original hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n background: inherit;\n border-color: inherit;\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled):hover .radio__control {\n background-color: var(--syn-interactive-emphasis-color-hover);\n border-color: var(--syn-interactive-emphasis-color-hover);\n }\n\n /* Checked + active */\n .radio.radio--checked:not(.radio--disabled):active .radio__control {\n background-color: var(--syn-interactive-emphasis-color-active);\n border-color: var(--syn-interactive-emphasis-color-active);\n }\n\n /* Not-Checked + Hover */\n .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {\n border-color: var(--syn-input-border-color-hover);\n }\n\n /* Not-Checked + active */\n .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {\n border-color: var(--syn-input-border-color-active);\n }\n\n /* Fix#456: Multi line radio fixes */\n .radio__label {\n align-self: center;\n margin-inline-start: var(--syn-spacing-x-small);\n margin-top: -1px;\n }\n\n .radio--small .radio__label {\n font: var(--syn-body-small-regular);\n }\n\n .radio--medium .radio__label {\n font: var(--syn-body-medium-regular);\n }\n\n .radio--large .radio__label {\n font: var(--syn-body-large-regular);\n }\n\n /* /Fix#456 */\n\n /**\n * #920: The new icons are instances in figma.\n * The width of the system icon is 12px x 12px, so there is no inner padding.\n * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.\n */\n .radio__checked-icon {\n scale: 0.5;\n }\n\n .radio--small .radio__label, .radio--large .radio__label {\n margin-inline-start: var(--syn-spacing-x-small);\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
// src/components/radio-group/radio-group.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var radio_group_styles_default = css`
|
|
4
|
-
/* stylelint-disable */
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.form-control {
|
|
10
|
-
position: relative;
|
|
11
|
-
border: none;
|
|
12
|
-
padding: 0;
|
|
13
|
-
margin: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.form-control__label {
|
|
17
|
-
padding: 0;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.radio-group--required .radio-group__label::after {
|
|
21
|
-
content: var(--syn-input-required-content);
|
|
22
|
-
margin-inline-start: var(--syn-input-required-content-offset);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.visually-hidden {
|
|
26
|
-
position: absolute;
|
|
27
|
-
width: 1px;
|
|
28
|
-
height: 1px;
|
|
29
|
-
padding: 0;
|
|
30
|
-
margin: -1px;
|
|
31
|
-
overflow: hidden;
|
|
32
|
-
clip: rect(0, 0, 0, 0);
|
|
33
|
-
white-space: nowrap;
|
|
34
|
-
border: 0;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
|
|
38
|
-
export {
|
|
39
|
-
radio_group_styles_default
|
|
40
|
-
};
|
|
41
|
-
//# sourceMappingURL=chunk.YPYFEST2.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio-group/radio-group.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: block;\n }\n\n .form-control {\n position: relative;\n border: none;\n padding: 0;\n margin: 0;\n }\n\n .form-control__label {\n padding: 0;\n }\n\n .radio-group--required .radio-group__label::after {\n content: var(--syn-input-required-content);\n margin-inline-start: var(--syn-input-required-content-offset);\n }\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,6BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
// src/components/checkbox/checkbox.styles.ts
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
var checkbox_styles_default = css`
|
|
4
|
-
/* stylelint-disable */
|
|
5
|
-
:host {
|
|
6
|
-
display: inline-block;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.checkbox {
|
|
10
|
-
position: relative;
|
|
11
|
-
display: inline-flex;
|
|
12
|
-
align-items: flex-start;
|
|
13
|
-
font-family: var(--syn-input-font-family);
|
|
14
|
-
font-weight: var(--syn-input-font-weight);
|
|
15
|
-
color: var(--syn-input-label-color);
|
|
16
|
-
vertical-align: middle;
|
|
17
|
-
cursor: pointer;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.checkbox--small {
|
|
21
|
-
--toggle-size: var(--syn-toggle-size-small);
|
|
22
|
-
font-size: var(--syn-input-font-size-small);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.checkbox--medium {
|
|
26
|
-
--toggle-size: var(--syn-toggle-size-medium);
|
|
27
|
-
font-size: var(--syn-input-font-size-medium);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.checkbox--large {
|
|
31
|
-
--toggle-size: var(--syn-toggle-size-large);
|
|
32
|
-
font-size: var(--syn-input-font-size-large);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.checkbox__control {
|
|
36
|
-
flex: 0 0 auto;
|
|
37
|
-
position: relative;
|
|
38
|
-
display: inline-flex;
|
|
39
|
-
align-items: center;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
width: var(--toggle-size);
|
|
42
|
-
height: var(--toggle-size);
|
|
43
|
-
border: solid var(--syn-input-border-width) var(--syn-input-border-color);
|
|
44
|
-
border-radius: 2px;
|
|
45
|
-
background-color: var(--syn-input-background-color);
|
|
46
|
-
color: var(--syn-color-neutral-0);
|
|
47
|
-
transition:
|
|
48
|
-
var(--syn-transition-fast) border-color,
|
|
49
|
-
var(--syn-transition-fast) background-color,
|
|
50
|
-
var(--syn-transition-fast) color,
|
|
51
|
-
var(--syn-transition-fast) box-shadow;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.checkbox__input {
|
|
55
|
-
position: absolute;
|
|
56
|
-
opacity: 0;
|
|
57
|
-
padding: 0;
|
|
58
|
-
margin: 0;
|
|
59
|
-
pointer-events: none;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.checkbox__checked-icon,
|
|
63
|
-
.checkbox__indeterminate-icon {
|
|
64
|
-
display: inline-flex;
|
|
65
|
-
width: var(--toggle-size);
|
|
66
|
-
height: var(--toggle-size);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Hover */
|
|
70
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
|
|
71
|
-
border-color: var(--syn-input-border-color-hover);
|
|
72
|
-
background-color: var(--syn-input-background-color-hover);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/* Focus */
|
|
76
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
|
|
77
|
-
outline: var(--syn-focus-ring);
|
|
78
|
-
outline-offset: var(--syn-focus-ring-offset);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/* Checked/indeterminate */
|
|
82
|
-
.checkbox--checked .checkbox__control,
|
|
83
|
-
.checkbox--indeterminate .checkbox__control {
|
|
84
|
-
border-color: var(--syn-color-primary-600);
|
|
85
|
-
background-color: var(--syn-color-primary-600);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/* Checked/indeterminate + hover */
|
|
89
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
90
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
|
|
91
|
-
border-color: var(--syn-color-primary-500);
|
|
92
|
-
background-color: var(--syn-color-primary-500);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
/* Checked/indeterminate + focus */
|
|
96
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
|
|
97
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
|
|
98
|
-
outline: var(--syn-focus-ring);
|
|
99
|
-
outline-offset: var(--syn-focus-ring-offset);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* Disabled */
|
|
103
|
-
.checkbox--disabled {
|
|
104
|
-
opacity: 0.5;
|
|
105
|
-
cursor: not-allowed;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.checkbox__label {
|
|
109
|
-
display: inline-block;
|
|
110
|
-
color: var(--syn-input-label-color);
|
|
111
|
-
line-height: var(--toggle-size);
|
|
112
|
-
margin-inline-start: 0.5em;
|
|
113
|
-
user-select: none;
|
|
114
|
-
-webkit-user-select: none;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
:host([required]) .checkbox__label::after {
|
|
118
|
-
content: var(--syn-input-required-content);
|
|
119
|
-
color: var(--syn-input-required-content-color);
|
|
120
|
-
margin-inline-start: var(--syn-input-required-content-offset);
|
|
121
|
-
}
|
|
122
|
-
`;
|
|
123
|
-
|
|
124
|
-
export {
|
|
125
|
-
checkbox_styles_default
|
|
126
|
-
};
|
|
127
|
-
//# sourceMappingURL=chunk.ZC3GXTWV.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/checkbox/checkbox.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n :host {\n display: inline-block;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: flex-start;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n color: var(--syn-input-label-color);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--small {\n --toggle-size: var(--syn-toggle-size-small);\n font-size: var(--syn-input-font-size-small);\n }\n\n .checkbox--medium {\n --toggle-size: var(--syn-toggle-size-medium);\n font-size: var(--syn-input-font-size-medium);\n }\n\n .checkbox--large {\n --toggle-size: var(--syn-toggle-size-large);\n font-size: var(--syn-input-font-size-large);\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--toggle-size);\n height: var(--toggle-size);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n border-radius: 2px;\n background-color: var(--syn-input-background-color);\n color: var(--syn-color-neutral-0);\n transition:\n var(--syn-transition-fast) border-color,\n var(--syn-transition-fast) background-color,\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) box-shadow;\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n .checkbox__checked-icon,\n .checkbox__indeterminate-icon {\n display: inline-flex;\n width: var(--toggle-size);\n height: var(--toggle-size);\n }\n\n /* Hover */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--syn-input-border-color-hover);\n background-color: var(--syn-input-background-color-hover);\n }\n\n /* Focus */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--syn-color-primary-600);\n background-color: var(--syn-color-primary-600);\n }\n\n /* Checked/indeterminate + hover */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--syn-color-primary-500);\n background-color: var(--syn-color-primary-500);\n }\n\n /* Checked/indeterminate + focus */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n /* Disabled */\n .checkbox--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: inline-block;\n color: var(--syn-input-label-color);\n line-height: var(--toggle-size);\n margin-inline-start: 0.5em;\n user-select: none;\n -webkit-user-select: none;\n }\n\n :host([required]) .checkbox__label::after {\n content: var(--syn-input-required-content);\n color: var(--syn-input-required-content-color);\n margin-inline-start: var(--syn-input-required-content-offset);\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|