@esri/calcite-components 5.2.0-next.70 → 5.2.0-next.72
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/cdn/2LI2WSK2.js +2 -0
- package/dist/cdn/{DZNQR26P.js → 2UTHVUT7.js} +1 -1
- package/dist/cdn/{RESHNLJ6.js → 2WBLQI6U.js} +1 -1
- package/dist/cdn/3CJWAO5P.js +2 -0
- package/dist/cdn/3Q3NLSCQ.js +2 -0
- package/dist/cdn/3TNLC6PV.js +2 -0
- package/dist/cdn/3VZ4SWDK.js +2 -0
- package/dist/cdn/{6KXM5OYZ.js → 3WN4IEPQ.js} +1 -1
- package/dist/cdn/43WZZYF7.js +2 -0
- package/dist/cdn/4GCQDZWN.js +2 -0
- package/dist/cdn/{5QN2KNKV.js → 4IEGHLUB.js} +1 -1
- package/dist/cdn/{VOCKM3G2.js → 4QWJ3PQW.js} +1 -1
- package/dist/cdn/4ZA6ZVL6.js +2 -0
- package/dist/cdn/{DDV4NKQS.js → 5G22OBD5.js} +1 -1
- package/dist/cdn/{EJKJVQ73.js → 5ITOJWPH.js} +1 -1
- package/dist/cdn/5OBU6MKV.js +2 -0
- package/dist/cdn/5URBXOI6.js +2 -0
- package/dist/cdn/63IUCUAK.js +2 -0
- package/dist/cdn/6IFDVGXE.js +2 -0
- package/dist/cdn/6NHOF5C6.js +2 -0
- package/dist/cdn/6O5C3TC6.js +2 -0
- package/dist/cdn/76VEF2N3.js +2 -0
- package/dist/cdn/7VTO7SRW.js +2 -0
- package/dist/cdn/{QEDVJK2B.js → ABXX3YLO.js} +1 -1
- package/dist/cdn/AFYJTXE4.js +2 -0
- package/dist/cdn/{LZYVRSSC.js → AGT3CYIC.js} +1 -1
- package/dist/cdn/AH7E725Y.js +2 -0
- package/dist/cdn/AN5WJGEU.js +2 -0
- package/dist/cdn/AY7IBHGD.js +2 -0
- package/dist/cdn/B44MDPWE.js +2 -0
- package/dist/cdn/B5ZVXTPR.js +2 -0
- package/dist/cdn/BKTVJALY.js +4 -0
- package/dist/cdn/{TT5M5MYP.js → BXOKCLLN.js} +1 -1
- package/dist/cdn/C6K4YWG2.js +2 -0
- package/dist/cdn/CE7TCXV4.js +2 -0
- package/dist/cdn/CIOPRNUQ.js +2 -0
- package/dist/cdn/CR3S2P6V.js +2 -0
- package/dist/cdn/DAB4MV6S.js +2 -0
- package/dist/cdn/{EC72OBDA.js → DANMXS3Z.js} +1 -1
- package/dist/cdn/DBGQA6BS.js +2 -0
- package/dist/cdn/DBYQ6LE6.js +2 -0
- package/dist/cdn/DGILOBDM.js +2 -0
- package/dist/cdn/{Q4VBFB6I.js → DQO6DVWZ.js} +1 -1
- package/dist/cdn/{S65BOXP4.js → EEHDM3XH.js} +1 -1
- package/dist/cdn/EN5AJPE4.js +2 -0
- package/dist/cdn/ENEJFDPY.js +2 -0
- package/dist/cdn/F7UJ5OMM.js +2 -0
- package/dist/cdn/FEYKSGSJ.js +2 -0
- package/dist/cdn/FI2B7DFP.js +2 -0
- package/dist/cdn/FLWEI5GH.js +2 -0
- package/dist/cdn/FZJ5OYBK.js +2 -0
- package/dist/cdn/G2HFGHIC.js +2 -0
- package/dist/cdn/G5I6LLDZ.js +2 -0
- package/dist/cdn/GEXT4YRZ.js +2 -0
- package/dist/cdn/GIYPCJ4F.js +2 -0
- package/dist/cdn/GMESQXPP.js +2 -0
- package/dist/cdn/GMGXPKVZ.js +2 -0
- package/dist/cdn/GPQBNXZR.js +2 -0
- package/dist/cdn/GSGALXNG.js +2 -0
- package/dist/cdn/{AWGDXOB3.js → GSVOPUJG.js} +1 -1
- package/dist/cdn/{HRRQ35FT.js → H3KRI5A4.js} +1 -1
- package/dist/cdn/H5DNKLYR.js +2 -0
- package/dist/cdn/{ZJ3XEIZR.js → H6NR2LDG.js} +1 -1
- package/dist/cdn/HCNME75A.js +2 -0
- package/dist/cdn/HKTG3UPX.js +2 -0
- package/dist/cdn/HQOEHOTW.js +2 -0
- package/dist/cdn/{ORWRLRPO.js → HRQSQ4A6.js} +1 -1
- package/dist/cdn/{46RKFFGQ.js → HSGAQRYJ.js} +1 -1
- package/dist/cdn/HU2HPOQ7.js +2 -0
- package/dist/cdn/{M3AX6WGK.js → HVW246PN.js} +1 -1
- package/dist/cdn/I2VDKTAK.js +2 -0
- package/dist/cdn/{EGB22AEH.js → IE5KDMJE.js} +1 -1
- package/dist/cdn/IPYI4ZFP.js +2 -0
- package/dist/cdn/ITO7ZNSM.js +2 -0
- package/dist/cdn/{M6Q3EIP6.js → IXE72L6L.js} +1 -1
- package/dist/cdn/{IXNQ44YK.js → J3VFES7S.js} +1 -1
- package/dist/cdn/{J5D56KAD.js → JJWXUTPP.js} +1 -1
- package/dist/cdn/KDBMNDVH.js +2 -0
- package/dist/cdn/KVLA6SMF.js +2 -0
- package/dist/cdn/L6QKJ7E4.js +2 -0
- package/dist/cdn/{LV4KM6PC.js → LKTLHI7X.js} +1 -1
- package/dist/cdn/{LP6IKK7J.js → LWGDCZEG.js} +1 -1
- package/dist/cdn/M6YDGTSM.js +2 -0
- package/dist/cdn/MBM7UIXE.js +2 -0
- package/dist/cdn/{X2RWKE4D.js → MMJUSHGT.js} +1 -1
- package/dist/cdn/{D2M2O7D4.js → N4LV2C6D.js} +1 -1
- package/dist/cdn/N6SQTS7X.js +2 -0
- package/dist/cdn/{CLCNGAIT.js → N7GI37UA.js} +1 -1
- package/dist/cdn/NDDSZKIJ.js +2 -0
- package/dist/cdn/{JQGAEFTP.js → NELSF4F6.js} +1 -1
- package/dist/cdn/NF2DEJFS.js +2 -0
- package/dist/cdn/{UVW4ZA5Z.js → NWK2N3DW.js} +1 -1
- package/dist/cdn/NYMXUPSJ.js +2 -0
- package/dist/cdn/O66KCB5Y.js +2 -0
- package/dist/cdn/{STQ4T6ZL.js → OCOXLCKQ.js} +1 -1
- package/dist/cdn/OJQ3AXNW.js +2 -0
- package/dist/cdn/OMW5LQG4.js +2 -0
- package/dist/cdn/ONPRPX2R.js +2 -0
- package/dist/cdn/P5S4F3WT.js +2 -0
- package/dist/cdn/PA5Z7B74.js +2 -0
- package/dist/cdn/{LB2J5RLA.js → PGKUQ5QW.js} +1 -1
- package/dist/cdn/PGU73CNX.js +2 -0
- package/dist/cdn/PRO23RP2.js +2 -0
- package/dist/cdn/Q25ML244.js +2 -0
- package/dist/cdn/{2DKBRL6T.js → Q4GFUNOY.js} +1 -1
- package/dist/cdn/QGR3M7C6.js +2 -0
- package/dist/cdn/QORR4LYI.js +2 -0
- package/dist/cdn/QV5XDDHW.js +2 -0
- package/dist/cdn/{O6WABKEC.js → R4OTPPUP.js} +1 -1
- package/dist/cdn/R6URHBB4.js +2 -0
- package/dist/cdn/{BWX66GU4.js → REWZWI55.js} +1 -1
- package/dist/cdn/{HCK7PO6R.js → RR6RVWTZ.js} +1 -1
- package/dist/cdn/{CNWFFIWK.js → RRK2A4MY.js} +1 -1
- package/dist/cdn/RRNHUX2D.js +2 -0
- package/dist/cdn/RS2KW3Q2.js +2 -0
- package/dist/cdn/{37XKEBCL.js → RYA2FB6F.js} +1 -1
- package/dist/cdn/S73GCCFJ.js +2 -0
- package/dist/cdn/SBVY3FV5.js +2 -0
- package/dist/cdn/SF4U6LCR.js +2 -0
- package/dist/cdn/{3BY6Q466.js → SOTBM3DK.js} +1 -1
- package/dist/cdn/SP7X6II4.js +2 -0
- package/dist/cdn/SPBKPWAL.js +2 -0
- package/dist/cdn/SZZX3H5D.js +2 -0
- package/dist/cdn/U3ALLQOK.js +2 -0
- package/dist/cdn/U5EJA3RQ.js +2 -0
- package/dist/cdn/URBAY2ZY.js +2 -0
- package/dist/cdn/V2RSLNSI.js +2 -0
- package/dist/cdn/{ZBS7TLZA.js → VRKXQANL.js} +1 -1
- package/dist/cdn/VX26CS43.js +2 -0
- package/dist/cdn/VXDPJESZ.js +2 -0
- package/dist/cdn/{VGB4JQR6.js → VYPNKZGD.js} +1 -1
- package/dist/cdn/WDGNMQIH.js +2 -0
- package/dist/cdn/{3FTLZWQG.js → WSW7UPQR.js} +1 -1
- package/dist/cdn/{F3UYZQJA.js → X3ZTU626.js} +1 -1
- package/dist/cdn/X7VSUKID.js +2 -0
- package/dist/cdn/XFBBVEEE.js +2 -0
- package/dist/cdn/XIAQHYXK.js +2 -0
- package/dist/cdn/XLWUWQWC.js +2 -0
- package/dist/cdn/XOSDCSQB.js +2 -0
- package/dist/cdn/XPTORKGR.js +2 -0
- package/dist/cdn/{4HLHOCHN.js → XS2676QJ.js} +1 -1
- package/dist/cdn/{HP6NC7YO.js → XTVCYRBN.js} +1 -1
- package/dist/cdn/{2C6EYXK7.js → XZRKDUXQ.js} +1 -1
- package/dist/cdn/{LOUNVBIX.js → YVB5CIDB.js} +1 -1
- package/dist/cdn/ZCQGWUMF.js +2 -0
- package/dist/cdn/{5GK33MMO.js → ZCREBRIK.js} +1 -1
- package/dist/cdn/ZNCAUAYU.js +2 -0
- package/dist/cdn/ZPTWAELA.js +2 -0
- package/dist/cdn/assets/icon/alignBottom16.json +1 -0
- package/dist/cdn/assets/icon/alignBottom24.json +1 -0
- package/dist/cdn/assets/icon/alignBottom32.json +1 -0
- package/dist/cdn/assets/icon/alignCenterHorizontal16.json +1 -0
- package/dist/cdn/assets/icon/alignCenterHorizontal24.json +1 -0
- package/dist/cdn/assets/icon/alignCenterHorizontal32.json +1 -0
- package/dist/cdn/assets/icon/alignCenterVertical16.json +1 -0
- package/dist/cdn/assets/icon/alignCenterVertical24.json +1 -0
- package/dist/cdn/assets/icon/alignCenterVertical32.json +1 -0
- package/dist/cdn/assets/icon/alignLeft16.json +1 -0
- package/dist/cdn/assets/icon/alignLeft24.json +1 -0
- package/dist/cdn/assets/icon/alignLeft32.json +1 -0
- package/dist/cdn/assets/icon/alignRight16.json +1 -0
- package/dist/cdn/assets/icon/alignRight24.json +1 -0
- package/dist/cdn/assets/icon/alignRight32.json +1 -0
- package/dist/cdn/assets/icon/alignTop16.json +1 -0
- package/dist/cdn/assets/icon/alignTop24.json +1 -0
- package/dist/cdn/assets/icon/alignTop32.json +1 -0
- package/dist/cdn/assets/icon/spaceAroundHorizontal16.json +1 -0
- package/dist/cdn/assets/icon/spaceAroundHorizontal24.json +1 -0
- package/dist/cdn/assets/icon/spaceAroundHorizontal32.json +1 -0
- package/dist/cdn/assets/icon/spaceAroundVertical16.json +1 -0
- package/dist/cdn/assets/icon/spaceAroundVertical24.json +1 -0
- package/dist/cdn/assets/icon/spaceAroundVertical32.json +1 -0
- package/dist/cdn/assets/icon/spaceBetweenHorizontal16.json +1 -0
- package/dist/cdn/assets/icon/spaceBetweenHorizontal24.json +1 -0
- package/dist/cdn/assets/icon/spaceBetweenHorizontal32.json +1 -0
- package/dist/cdn/assets/icon/spaceBetweenVertical16.json +1 -0
- package/dist/cdn/assets/icon/spaceBetweenVertical24.json +1 -0
- package/dist/cdn/assets/icon/spaceBetweenVertical32.json +1 -0
- package/dist/cdn/assets/icon/spacedEvenlyHorizontal16.json +1 -0
- package/dist/cdn/assets/icon/spacedEvenlyHorizontal24.json +1 -0
- package/dist/cdn/assets/icon/spacedEvenlyHorizontal32.json +1 -0
- package/dist/cdn/assets/icon/spacedEvenlyVertical16.json +1 -0
- package/dist/cdn/assets/icon/spacedEvenlyVertical24.json +1 -0
- package/dist/cdn/assets/icon/spacedEvenlyVertical32.json +1 -0
- package/dist/cdn/assets/icon/stretchHorizontal16.json +1 -0
- package/dist/cdn/assets/icon/stretchHorizontal24.json +1 -0
- package/dist/cdn/assets/icon/stretchHorizontal32.json +1 -0
- package/dist/cdn/assets/icon/stretchVertical16.json +1 -0
- package/dist/cdn/assets/icon/stretchVertical24.json +1 -0
- package/dist/cdn/assets/icon/stretchVertical32.json +1 -0
- package/dist/cdn/index.js +1 -1
- package/dist/chunks/aria.js +3 -2
- package/dist/chunks/dom.js +10 -10
- package/dist/chunks/manager.js +50 -25
- package/dist/chunks/runtime.js +4 -4
- package/dist/chunks/useInlineEdit.js +65 -0
- package/dist/components/calcite-accordion/customElement.d.ts +0 -5
- package/dist/components/calcite-accordion-item/customElement.d.ts +0 -18
- package/dist/components/calcite-action/customElement.d.ts +1 -17
- package/dist/components/calcite-action/customElement.js +3 -2
- package/dist/components/calcite-action-bar/customElement.d.ts +0 -5
- package/dist/components/calcite-action-bar/customElement.js +1 -1
- package/dist/components/calcite-action-group/customElement.d.ts +0 -4
- package/dist/components/calcite-action-menu/customElement.d.ts +0 -1
- package/dist/components/calcite-action-pad/customElement.d.ts +0 -3
- package/dist/components/calcite-action-pad/customElement.js +1 -1
- package/dist/components/calcite-alert/customElement.d.ts +0 -5
- package/dist/components/calcite-autocomplete/customElement.d.ts +0 -23
- package/dist/components/calcite-autocomplete-item/customElement.d.ts +0 -4
- package/dist/components/calcite-autocomplete-item-group/customElement.d.ts +1 -6
- package/dist/components/calcite-avatar/customElement.d.ts +0 -5
- package/dist/components/calcite-block/customElement.d.ts +0 -17
- package/dist/components/calcite-block/customElement.js +5 -4
- package/dist/components/calcite-block-group/customElement.js +2 -1
- package/dist/components/calcite-block-section/customElement.d.ts +0 -6
- package/dist/components/calcite-button/customElement.d.ts +0 -7
- package/dist/components/calcite-button/customElement.js +3 -2
- package/dist/components/calcite-card/customElement.d.ts +0 -12
- package/dist/components/calcite-card/customElement.js +2 -1
- package/dist/components/calcite-card-group/customElement.d.ts +1 -5
- package/dist/components/calcite-card-group/customElement.js +1 -1
- package/dist/components/calcite-carousel/customElement.d.ts +1 -14
- package/dist/components/calcite-carousel/customElement.js +1 -1
- package/dist/components/calcite-checkbox/customElement.d.ts +0 -7
- package/dist/components/calcite-chip/customElement.d.ts +0 -9
- package/dist/components/calcite-chip-group/customElement.js +1 -1
- package/dist/components/calcite-color-picker/customElement.d.ts +0 -19
- package/dist/components/calcite-color-picker/customElement.js +1 -1
- package/dist/components/calcite-combobox/customElement.d.ts +0 -9
- package/dist/components/calcite-combobox/customElement.js +1 -1
- package/dist/components/calcite-combobox-item/customElement.d.ts +0 -10
- package/dist/components/calcite-combobox-item/customElement.js +1 -1
- package/dist/components/calcite-combobox-item-group/customElement.d.ts +1 -5
- package/dist/components/calcite-date-picker/customElement.d.ts +0 -27
- package/dist/components/calcite-date-picker-month-header/customElement.js +1 -1
- package/dist/components/calcite-dialog/customElement.d.ts +0 -31
- package/dist/components/calcite-dialog/customElement.js +1 -1
- package/dist/components/calcite-dropdown/customElement.d.ts +0 -3
- package/dist/components/calcite-dropdown-group/customElement.d.ts +1 -5
- package/dist/components/calcite-dropdown-item/customElement.d.ts +1 -9
- package/dist/components/calcite-fab/customElement.d.ts +0 -8
- package/dist/components/calcite-filter/customElement.d.ts +0 -16
- package/dist/components/calcite-flow/customElement.d.ts +1 -4
- package/dist/components/calcite-flow-item/customElement.d.ts +0 -28
- package/dist/components/calcite-graph/customElement.d.ts +0 -1
- package/dist/components/calcite-handle/customElement.d.ts +1 -9
- package/dist/components/calcite-icon/customElement.d.ts +0 -4
- package/dist/components/calcite-inline-editable/customElement.d.ts +1 -10
- package/dist/components/calcite-inline-editable/customElement.js +2 -2
- package/dist/components/calcite-input/customElement.d.ts +15 -42
- package/dist/components/calcite-input/customElement.js +149 -62
- package/dist/components/calcite-input-date-picker/customElement.d.ts +1 -44
- package/dist/components/calcite-input-message/customElement.d.ts +0 -3
- package/dist/components/calcite-input-number/customElement.d.ts +15 -43
- package/dist/components/calcite-input-number/customElement.js +130 -59
- package/dist/components/calcite-input-text/customElement.d.ts +15 -42
- package/dist/components/calcite-input-text/customElement.js +127 -56
- package/dist/components/calcite-input-time-picker/customElement.d.ts +1 -26
- package/dist/components/calcite-input-time-picker/customElement.js +2 -1
- package/dist/components/calcite-input-time-zone/customElement.d.ts +1 -4
- package/dist/components/calcite-label/customElement.d.ts +1 -5
- package/dist/components/calcite-link/customElement.d.ts +0 -1
- package/dist/components/calcite-list/customElement.d.ts +0 -1
- package/dist/components/calcite-list/customElement.js +3 -2
- package/dist/components/calcite-list-item/customElement.d.ts +0 -9
- package/dist/components/calcite-list-item/customElement.js +1 -1
- package/dist/components/calcite-list-item-group/customElement.d.ts +1 -5
- package/dist/components/calcite-loader/customElement.d.ts +0 -12
- package/dist/components/calcite-menu/customElement.js +1 -1
- package/dist/components/calcite-menu-item/customElement.d.ts +1 -8
- package/dist/components/calcite-meter/customElement.d.ts +0 -9
- package/dist/components/calcite-navigation/customElement.d.ts +0 -4
- package/dist/components/calcite-navigation-logo/customElement.d.ts +0 -6
- package/dist/components/calcite-navigation-user/customElement.d.ts +0 -8
- package/dist/components/calcite-notice/customElement.d.ts +0 -13
- package/dist/components/calcite-pagination/customElement.d.ts +0 -8
- package/dist/components/calcite-panel/customElement.d.ts +0 -23
- package/dist/components/calcite-panel/customElement.js +3 -2
- package/dist/components/calcite-popover/customElement.d.ts +1 -8
- package/dist/components/calcite-progress/customElement.d.ts +0 -5
- package/dist/components/calcite-radio-button/customElement.d.ts +0 -6
- package/dist/components/calcite-radio-button-group/customElement.d.ts +0 -2
- package/dist/components/calcite-rating/customElement.d.ts +1 -10
- package/dist/components/calcite-scrim/customElement.d.ts +1 -4
- package/dist/components/calcite-scrim/customElement.js +1 -1
- package/dist/components/calcite-segmented-control/customElement.d.ts +0 -2
- package/dist/components/calcite-segmented-control-item/customElement.d.ts +0 -6
- package/dist/components/calcite-segmented-control-item/customElement.js +1 -1
- package/dist/components/calcite-select/customElement.d.ts +0 -8
- package/dist/components/calcite-sheet/customElement.d.ts +1 -16
- package/dist/components/calcite-sheet/customElement.js +1 -1
- package/dist/components/calcite-shell/customElement.d.ts +0 -3
- package/dist/components/calcite-shell/customElement.js +1 -1
- package/dist/components/calcite-shell-panel/customElement.d.ts +0 -12
- package/dist/components/calcite-shell-panel/customElement.js +1 -1
- package/dist/components/calcite-slider/customElement.d.ts +1 -13
- package/dist/components/calcite-slider/customElement.js +1 -1
- package/dist/components/calcite-split-button/customElement.d.ts +1 -19
- package/dist/components/calcite-stack/customElement.d.ts +0 -2
- package/dist/components/calcite-stepper/customElement.d.ts +1 -8
- package/dist/components/calcite-stepper/customElement.js +1 -1
- package/dist/components/calcite-stepper-item/customElement.d.ts +1 -21
- package/dist/components/calcite-stepper-item/customElement.js +1 -1
- package/dist/components/calcite-swatch/customElement.d.ts +1 -4
- package/dist/components/calcite-swatch-group/customElement.d.ts +1 -4
- package/dist/components/calcite-swatch-group/customElement.js +1 -1
- package/dist/components/calcite-switch/customElement.d.ts +0 -9
- package/dist/components/calcite-tab/customElement.d.ts +1 -5
- package/dist/components/calcite-tab-nav/customElement.d.ts +1 -6
- package/dist/components/calcite-tab-nav/customElement.js +6 -2
- package/dist/components/calcite-tab-title/customElement.d.ts +0 -15
- package/dist/components/calcite-table/customElement.d.ts +0 -40
- package/dist/components/calcite-table-cell/customElement.d.ts +1 -7
- package/dist/components/calcite-table-header/customElement.d.ts +0 -7
- package/dist/components/calcite-table-row/customElement.d.ts +1 -9
- package/dist/components/calcite-table-row/customElement.js +1 -1
- package/dist/components/calcite-tabs/customElement.d.ts +0 -2
- package/dist/components/calcite-text-area/customElement.d.ts +0 -14
- package/dist/components/calcite-tile/customElement.d.ts +0 -9
- package/dist/components/calcite-tile/customElement.js +1 -1
- package/dist/components/calcite-tile-group/customElement.js +1 -1
- package/dist/components/calcite-time-picker/customElement.d.ts +0 -11
- package/dist/components/calcite-tooltip/customElement.d.ts +1 -8
- package/dist/components/calcite-tree-item/customElement.d.ts +0 -3
- package/dist/docs/api.json +1 -1
- package/dist/docs/docs.json +1 -1
- package/dist/docs/vscode.css-custom-data.json +1 -1
- package/dist/docs/vscode.html-custom-data.json +1 -1
- package/dist/docs/web-types.json +1 -1
- package/dist/loader.js +3 -3
- package/dist/types/lumina.d.ts +12 -12
- package/dist/types/preact.d.ts +12 -12
- package/dist/types/react.d.ts +12 -12
- package/dist/types/stencil.d.ts +12 -12
- package/package.json +14 -14
- package/dist/cdn/2DRYAXZA.js +0 -2
- package/dist/cdn/2QDPBMR5.js +0 -2
- package/dist/cdn/36ZI4OE2.js +0 -2
- package/dist/cdn/3EOXNRWH.js +0 -2
- package/dist/cdn/3PBE34WL.js +0 -2
- package/dist/cdn/3PHJ4VKR.js +0 -2
- package/dist/cdn/4OTRU7PP.js +0 -2
- package/dist/cdn/4V54EQG7.js +0 -2
- package/dist/cdn/4XYNB6JA.js +0 -2
- package/dist/cdn/5EBGPCB7.js +0 -2
- package/dist/cdn/5JGGEI4T.js +0 -2
- package/dist/cdn/5NUKMHTR.js +0 -2
- package/dist/cdn/6IIOOLNW.js +0 -2
- package/dist/cdn/6OAHARTN.js +0 -2
- package/dist/cdn/6SIMRTTJ.js +0 -2
- package/dist/cdn/6XZUNSYJ.js +0 -2
- package/dist/cdn/74LD6VQE.js +0 -2
- package/dist/cdn/7AX3VWZ2.js +0 -2
- package/dist/cdn/7LCQLCGJ.js +0 -2
- package/dist/cdn/7PDQJVYI.js +0 -2
- package/dist/cdn/A2PZZ6XZ.js +0 -2
- package/dist/cdn/AI34WFC4.js +0 -2
- package/dist/cdn/AR46CHOI.js +0 -2
- package/dist/cdn/BK6IFOPJ.js +0 -2
- package/dist/cdn/BLOHG5AH.js +0 -2
- package/dist/cdn/BQYRK6UJ.js +0 -2
- package/dist/cdn/C5SVC6AT.js +0 -2
- package/dist/cdn/CIYJDFL7.js +0 -2
- package/dist/cdn/CJLLJ7EG.js +0 -2
- package/dist/cdn/CLMLN73K.js +0 -2
- package/dist/cdn/CLQONTJ4.js +0 -2
- package/dist/cdn/D32AN634.js +0 -2
- package/dist/cdn/DBIXUUDH.js +0 -2
- package/dist/cdn/DJZ3PU4G.js +0 -2
- package/dist/cdn/DMH6GECA.js +0 -2
- package/dist/cdn/EWRXYHQ6.js +0 -2
- package/dist/cdn/FFIEWYUD.js +0 -2
- package/dist/cdn/FVYTBWWQ.js +0 -2
- package/dist/cdn/GGXZDUOD.js +0 -2
- package/dist/cdn/GJHAOR7O.js +0 -2
- package/dist/cdn/GVHT4OW3.js +0 -4
- package/dist/cdn/GZZYSINJ.js +0 -2
- package/dist/cdn/H4DWCZQH.js +0 -2
- package/dist/cdn/HK2ZPYSD.js +0 -2
- package/dist/cdn/HT7GHA35.js +0 -2
- package/dist/cdn/KADLGWSD.js +0 -2
- package/dist/cdn/KKZPWWJD.js +0 -2
- package/dist/cdn/L2GTZQR3.js +0 -2
- package/dist/cdn/LDJTNSDV.js +0 -2
- package/dist/cdn/LGEWD2WR.js +0 -2
- package/dist/cdn/LJ3OYEQH.js +0 -2
- package/dist/cdn/MA5ALGCB.js +0 -2
- package/dist/cdn/MJKFS4XN.js +0 -2
- package/dist/cdn/MKWABJD3.js +0 -2
- package/dist/cdn/MORH2SWC.js +0 -2
- package/dist/cdn/MTK3KBNV.js +0 -2
- package/dist/cdn/N4RZJQ3K.js +0 -2
- package/dist/cdn/NBWSLO2X.js +0 -2
- package/dist/cdn/NFZOHLUU.js +0 -2
- package/dist/cdn/NIPZWXTK.js +0 -2
- package/dist/cdn/NRDDB52R.js +0 -2
- package/dist/cdn/OATJDDUN.js +0 -2
- package/dist/cdn/OCAIF5AO.js +0 -2
- package/dist/cdn/ONPVEYDF.js +0 -2
- package/dist/cdn/OURWUBEA.js +0 -2
- package/dist/cdn/OV4LG7YB.js +0 -2
- package/dist/cdn/P6E54S7I.js +0 -2
- package/dist/cdn/PFBFXLY5.js +0 -2
- package/dist/cdn/PGJ33WXW.js +0 -2
- package/dist/cdn/PJ7JGCOT.js +0 -2
- package/dist/cdn/PM5LDKID.js +0 -2
- package/dist/cdn/PPCTIFU7.js +0 -2
- package/dist/cdn/Q2L6GYNG.js +0 -2
- package/dist/cdn/Q2NLDLBD.js +0 -2
- package/dist/cdn/Q44CAISJ.js +0 -2
- package/dist/cdn/QCTIQQGR.js +0 -2
- package/dist/cdn/QEGNJX47.js +0 -2
- package/dist/cdn/QIOX3N62.js +0 -2
- package/dist/cdn/QM2EZYTR.js +0 -2
- package/dist/cdn/QWGRJXMJ.js +0 -2
- package/dist/cdn/RHUYTUBN.js +0 -2
- package/dist/cdn/RKRK4RZK.js +0 -2
- package/dist/cdn/RXVSZC7X.js +0 -2
- package/dist/cdn/SO222KR7.js +0 -2
- package/dist/cdn/SY7A27CA.js +0 -2
- package/dist/cdn/T2VHRNVK.js +0 -2
- package/dist/cdn/T4CQISFL.js +0 -2
- package/dist/cdn/TFY4AZ4H.js +0 -2
- package/dist/cdn/TODF5AAG.js +0 -2
- package/dist/cdn/UFTNE4L5.js +0 -2
- package/dist/cdn/UQWE2VAF.js +0 -2
- package/dist/cdn/URPDRW7E.js +0 -2
- package/dist/cdn/VDJS5HED.js +0 -2
- package/dist/cdn/VZ2WOVER.js +0 -2
- package/dist/cdn/WSJB5HRN.js +0 -2
- package/dist/cdn/XK5X6LPF.js +0 -2
- package/dist/cdn/XWM3FFCD.js +0 -2
- package/dist/cdn/YCKXSWRC.js +0 -2
- package/dist/cdn/YKGEHWMP.js +0 -2
- package/dist/cdn/ZM42WAYM.js +0 -2
- package/dist/cdn/ZTRZLDAL.js +0 -2
- package/dist/chunks/useInlineEditable.js +0 -53
|
@@ -9,13 +9,6 @@ import type { ButtonAlignment } from "./types.js";
|
|
|
9
9
|
*
|
|
10
10
|
* It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission
|
|
11
11
|
*
|
|
12
|
-
* @cssproperty [--calcite-button-background-color] - Specifies the component's background color.
|
|
13
|
-
* @cssproperty [--calcite-button-border-color] - Specifies the component's border color.
|
|
14
|
-
* @cssproperty [--calcite-button-corner-radius] - Specifies the component's corner radius.
|
|
15
|
-
* @cssproperty [--calcite-button-icon-color] - Specifies the component's `iconStart` and `iconEnd` color.
|
|
16
|
-
* @cssproperty [--calcite-button-loader-color] - Specifies the component's loader color.
|
|
17
|
-
* @cssproperty [--calcite-button-text-color] - Specifies the component's text color.
|
|
18
|
-
* @cssproperty [--calcite-button-shadow] - Specifies the component's shadow.
|
|
19
12
|
* @slot - A slot for adding text.
|
|
20
13
|
*/
|
|
21
14
|
export abstract class Button extends LitElement {
|
|
@@ -14,6 +14,7 @@ import { u as hasVisibleContent } from "../../chunks/dom.js";
|
|
|
14
14
|
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
|
|
15
15
|
import { u as useInteractive } from "../../chunks/useInteractive.js";
|
|
16
16
|
import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
|
|
17
|
+
import { t as toAriaBoolean } from "../../chunks/aria.js";
|
|
17
18
|
const CSS = {
|
|
18
19
|
buttonLoader: "calcite-button--loader",
|
|
19
20
|
content: "content",
|
|
@@ -28,7 +29,7 @@ const CSS = {
|
|
|
28
29
|
buttonPadding: "button-padding",
|
|
29
30
|
buttonPaddingShrunk: "button-padding--shrunk"
|
|
30
31
|
};
|
|
31
|
-
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;inline-size:auto;vertical-align:middle;border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))}:host a,:host button{--calcite-internal-button-content-margin: .5rem;--calcite-internal-button-padding-x: 7px;--calcite-internal-button-padding-y: 3px;position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;align-items:center;justify-content:center;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;outline-color:transparent;box-shadow:var(--calcite-button-shadow, var(--calcite-shadow-none));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color, var(--calcite-color-transparent)));border-block-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-block-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-style:solid;border-width:var(--calcite-border-width-sm);border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)));color:var(--calcite-button-text-color, var(--calcite-internal-button-text-color, currentColor));padding-block:var(--calcite-internal-button-padding-y);padding-inline:var(--calcite-internal-button-padding-x);transition:color var(--calcite-animation-timing) ease-in-out,background-color var(--calcite-animation-timing) ease-in-out,box-shadow var(--calcite-animation-timing) ease-in-out,outline-color var(--calcite-internal-animation-timing-fast) ease-in-out}:host a:hover,:host button:hover{text-decoration-line:none;background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-hover, var(--calcite-color-transparent)))}:host a:focus,:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color))}:host a:active,:host button:active{background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-press, var(--calcite-color-transparent)))}:host a span,:host button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host a calcite-loader,:host button calcite-loader{color:var(--calcite-button-loader-color, var(--calcite-internal-button-loader-color, var(--calcite-button-text-color, var(--calcite-internal-button-text-color))))}:host([round]){--calcite-internal-button-corner-radius: 50px}.content{margin-inline:var(--calcite-internal-button-content-margin)}.icon-start-empty .content{margin-inline-start:unset}.icon-end-empty .content{margin-inline-end:unset}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-content-margin: .75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-internal-button-content-margin: 1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host([alignment=center]:not([width=auto])) a,:host([alignment=center]:not([width=auto])) button{justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{margin-inline-end:auto}:host([alignment=icon-start-space-between]:not([width=auto])) a,:host([alignment=icon-start-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end{margin-inline-start:auto}:host([alignment=icon-end-space-between]:not([width=auto])) a,:host([alignment=icon-end-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{margin-inline-start:var(--calcite-internal-button-content-margin)}.icon--start,.icon--end{color:var(--calcite-button-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(.5)}to{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}to{inline-size:0;opacity:0;transform:scale(.5)}}.calcite-button--loader{display:flex}.calcite-button--loader calcite-loader{margin:0}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{margin-inline-end:var(--calcite-internal-button-content-margin)}:host([loading]) button:not(.content--slotted) .icon--start,:host([loading]) button:not(.content--slotted) .icon--end,:host([loading]) a:not(.content--slotted) .icon--start,:host([loading]) a:not(.content--slotted) .icon--end{display:none}:host([appearance]) button,:host([appearance]) a{--calcite-internal-button-border-color: var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([kind=brand]){--calcite-internal-button-background-color: var(--calcite-color-brand);--calcite-internal-button-background-color-hover: var(--calcite-color-brand-hover);--calcite-internal-button-background-color-press: var(--calcite-color-brand-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=danger]){--calcite-internal-button-background-color: var(--calcite-color-status-danger);--calcite-internal-button-background-color-hover: var(--calcite-color-status-danger-hover);--calcite-internal-button-background-color-press: var(--calcite-color-status-danger-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=neutral]){--calcite-internal-button-background-color: var(--calcite-color-foreground-3);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1);--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-button-background-color: var(--calcite-color-inverse);--calcite-internal-button-background-color-hover: var(--calcite-color-inverse-hover);--calcite-internal-button-background-color-press: var(--calcite-color-inverse-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([appearance=outline-fill]){--calcite-internal-button-background-color: var(--calcite-color-foreground-1);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-3)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline-fill][kind=brand]) button,:host([appearance=outline-fill][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:hover,:host([appearance=outline-fill][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline-fill][kind=brand]) button:focus,:host([appearance=outline-fill][kind=brand]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:active,:host([appearance=outline-fill][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill][kind=brand]) button calcite-loader,:host([appearance=outline-fill][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=danger]) button,:host([appearance=outline-fill][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:hover,:host([appearance=outline-fill][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline-fill][kind=danger]) button:focus,:host([appearance=outline-fill][kind=danger]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:active,:host([appearance=outline-fill][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline-fill][kind=danger]) button calcite-loader,:host([appearance=outline-fill][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=neutral]) button,:host([appearance=outline-fill][kind=neutral]) a{--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=neutral]) button:hover,:host([appearance=outline-fill][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline-fill][kind=neutral]) button:focus,:host([appearance=outline-fill][kind=neutral]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:active,:host([appearance=outline-fill][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=solid][kind=neutral]){--calcite-internal-button-background-color-hover: var(--calcite-color-border-2);--calcite-internal-button-background-color-press: var(--calcite-color-border-1)}:host([appearance=outline-fill][kind=inverse]) button,:host([appearance=outline-fill][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=inverse]) button:hover,:host([appearance=outline-fill][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline-fill][kind=inverse]) button:focus,:host([appearance=outline-fill][kind=inverse]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:active,:host([appearance=outline-fill][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=outline]) button,:host([appearance=outline]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline][kind=brand]) button,:host([appearance=outline][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:hover,:host([appearance=outline][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline][kind=brand]) button:focus,:host([appearance=outline][kind=brand]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:active,:host([appearance=outline][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline][kind=brand]) button calcite-loader,:host([appearance=outline][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=danger]) button,:host([appearance=outline][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:hover,:host([appearance=outline][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline][kind=danger]) button:focus,:host([appearance=outline][kind=danger]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:active,:host([appearance=outline][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline][kind=danger]) button calcite-loader,:host([appearance=outline][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=neutral]) button,:host([appearance=outline][kind=neutral]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=neutral]) button:hover,:host([appearance=outline][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline][kind=neutral]) button:focus,:host([appearance=outline][kind=neutral]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:active,:host([appearance=outline][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=outline][kind=inverse]) button,:host([appearance=outline][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=inverse]) button:hover,:host([appearance=outline][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline][kind=inverse]) button:focus,:host([appearance=outline][kind=inverse]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:active,:host([appearance=outline][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline-fill][split-child=primary]) button,:host([appearance=outline][split-child=primary]) button,:host([appearance=outline-fill][split-child=primary]) a,:host([appearance=outline][split-child=primary]) a{border-inline-end-width:0;border-inline-start-width:1px}:host([appearance=outline-fill][split-child=secondary]) button,:host([appearance=outline][split-child=secondary]) button,:host([appearance=outline-fill][split-child=secondary]) a,:host([appearance=outline][split-child=secondary]) a{border-inline-start-width:0;border-inline-end-width:1px}:host([appearance=transparent]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent]:not(.enable-editing-button)){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=brand]) button,:host([appearance=transparent][kind=brand]) a{--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:hover,:host([appearance=transparent][kind=brand]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=transparent][kind=brand]) button:focus,:host([appearance=transparent][kind=brand]) a:focus{--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:active,:host([appearance=transparent][kind=brand]) a:active{--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=transparent][kind=brand]) button calcite-loader,:host([appearance=transparent][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=danger]) button,:host([appearance=transparent][kind=danger]) a{--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:hover,:host([appearance=transparent][kind=danger]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=transparent][kind=danger]) button:focus,:host([appearance=transparent][kind=danger]) a:focus{--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:active,:host([appearance=transparent][kind=danger]) a:active{--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=transparent][kind=danger]) button calcite-loader,:host([appearance=transparent][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button{--calcite-internal-button-text-color: var(--calcite-color-text-3)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-padding-y: 0}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][kind=inverse]){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=inverse]) button calcite-loader,:host([appearance=transparent][kind=inverse]) a calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .5rem}:host([scale=s]) button,:host([scale=s]) a{--calcite-internal-button-padding-y: 3px}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-internal-button-padding-x: 11px;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-padding-y: 7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .75rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-internal-button-padding-x: 15px;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .button-padding{--calcite-internal-button-padding-x: 1rem;--calcite-internal-button-padding-y: 11px}:host([scale=l]) .button-padding--shrunk{--calcite-internal-button-padding-y: 9px}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 3px;inline-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:1.5rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 7px;inline-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 9px;inline-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2.75rem}:host(:is([scale=s],[scale=m],[scale=l])[width=full]) a:not(.content--slotted),:host(:is([scale=s],[scale=m],[scale=l])[width=full]) button:not(.content--slotted){inline-size:var(--calcite-container-size-content-fluid)}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-y: var(--calcite-space-sm-plus)}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 23px;block-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-x: 1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 2rem;block-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-x: 33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 43px;block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-x: 2.75rem}:host([hidden]){display:none}[hidden]{display:none}`;
|
|
32
|
+
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;inline-size:auto;vertical-align:middle;border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))}:host a,:host button{--calcite-internal-button-content-margin: .5rem;--calcite-internal-button-padding-x: 7px;--calcite-internal-button-padding-y: 3px;position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;align-items:center;justify-content:center;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;outline-color:transparent;box-shadow:var(--calcite-button-shadow, var(--calcite-shadow-none));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color, var(--calcite-color-transparent)));border-block-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-block-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-style:solid;border-width:var(--calcite-border-width-sm);border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)));color:var(--calcite-button-text-color, var(--calcite-internal-button-text-color, currentColor));padding-block:var(--calcite-internal-button-padding-y);padding-inline:var(--calcite-internal-button-padding-x);transition:color var(--calcite-animation-timing) ease-in-out,background-color var(--calcite-animation-timing) ease-in-out,box-shadow var(--calcite-animation-timing) ease-in-out,outline-color var(--calcite-internal-animation-timing-fast) ease-in-out}:host a:hover,:host button:hover{text-decoration-line:none;background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-hover, var(--calcite-color-transparent)))}:host a:focus,:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host a:active,:host button:active{background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-press, var(--calcite-color-transparent)))}:host a span,:host button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host a calcite-loader,:host button calcite-loader{color:var(--calcite-button-loader-color, var(--calcite-internal-button-loader-color, var(--calcite-button-text-color, var(--calcite-internal-button-text-color))))}:host([round]){--calcite-internal-button-corner-radius: 50px}.content{margin-inline:var(--calcite-internal-button-content-margin)}.icon-start-empty .content{margin-inline-start:unset}.icon-end-empty .content{margin-inline-end:unset}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-content-margin: .75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-internal-button-content-margin: 1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host([alignment=center]:not([width=auto])) a,:host([alignment=center]:not([width=auto])) button{justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{margin-inline-end:auto}:host([alignment=icon-start-space-between]:not([width=auto])) a,:host([alignment=icon-start-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end{margin-inline-start:auto}:host([alignment=icon-end-space-between]:not([width=auto])) a,:host([alignment=icon-end-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{margin-inline-start:var(--calcite-internal-button-content-margin)}.icon--start,.icon--end{color:var(--calcite-button-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(.5)}to{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}to{inline-size:0;opacity:0;transform:scale(.5)}}.calcite-button--loader{display:flex}.calcite-button--loader calcite-loader{margin:0}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{margin-inline-end:var(--calcite-internal-button-content-margin)}:host([loading]) button:not(.content--slotted) .icon--start,:host([loading]) button:not(.content--slotted) .icon--end,:host([loading]) a:not(.content--slotted) .icon--start,:host([loading]) a:not(.content--slotted) .icon--end{display:none}:host([appearance]) button,:host([appearance]) a{--calcite-internal-button-border-color: var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([kind=brand]){--calcite-internal-button-background-color: var(--calcite-color-brand);--calcite-internal-button-background-color-hover: var(--calcite-color-brand-hover);--calcite-internal-button-background-color-press: var(--calcite-color-brand-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=danger]){--calcite-internal-button-background-color: var(--calcite-color-status-danger);--calcite-internal-button-background-color-hover: var(--calcite-color-status-danger-hover);--calcite-internal-button-background-color-press: var(--calcite-color-status-danger-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=neutral]){--calcite-internal-button-background-color: var(--calcite-color-foreground-3);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1);--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-button-background-color: var(--calcite-color-inverse);--calcite-internal-button-background-color-hover: var(--calcite-color-inverse-hover);--calcite-internal-button-background-color-press: var(--calcite-color-inverse-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([appearance=outline-fill]){--calcite-internal-button-background-color: var(--calcite-color-foreground-1);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-3)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline-fill][kind=brand]) button,:host([appearance=outline-fill][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:hover,:host([appearance=outline-fill][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline-fill][kind=brand]) button:active,:host([appearance=outline-fill][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill][kind=brand]) button calcite-loader,:host([appearance=outline-fill][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=danger]) button,:host([appearance=outline-fill][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:hover,:host([appearance=outline-fill][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline-fill][kind=danger]) button:active,:host([appearance=outline-fill][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline-fill][kind=danger]) button calcite-loader,:host([appearance=outline-fill][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=neutral]) button,:host([appearance=outline-fill][kind=neutral]) a{--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=neutral]) button:hover,:host([appearance=outline-fill][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline-fill][kind=neutral]) button:active,:host([appearance=outline-fill][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=solid][kind=neutral]){--calcite-internal-button-background-color-hover: var(--calcite-color-border-2);--calcite-internal-button-background-color-press: var(--calcite-color-border-1)}:host([appearance=outline-fill][kind=inverse]) button,:host([appearance=outline-fill][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=inverse]) button:hover,:host([appearance=outline-fill][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline-fill][kind=inverse]) button:active,:host([appearance=outline-fill][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=outline]) button,:host([appearance=outline]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline][kind=brand]) button,:host([appearance=outline][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:hover,:host([appearance=outline][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline][kind=brand]) button:active,:host([appearance=outline][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline][kind=brand]) button calcite-loader,:host([appearance=outline][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=danger]) button,:host([appearance=outline][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:hover,:host([appearance=outline][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline][kind=danger]) button:active,:host([appearance=outline][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline][kind=danger]) button calcite-loader,:host([appearance=outline][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=neutral]) button,:host([appearance=outline][kind=neutral]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=neutral]) button:hover,:host([appearance=outline][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline][kind=neutral]) button:active,:host([appearance=outline][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=outline][kind=inverse]) button,:host([appearance=outline][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=inverse]) button:hover,:host([appearance=outline][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline][kind=inverse]) button:active,:host([appearance=outline][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline-fill][split-child=primary]) button,:host([appearance=outline][split-child=primary]) button,:host([appearance=outline-fill][split-child=primary]) a,:host([appearance=outline][split-child=primary]) a{border-inline-end-width:0;border-inline-start-width:1px}:host([appearance=outline-fill][split-child=secondary]) button,:host([appearance=outline][split-child=secondary]) button,:host([appearance=outline-fill][split-child=secondary]) a,:host([appearance=outline][split-child=secondary]) a{border-inline-start-width:0;border-inline-end-width:1px}:host([appearance=transparent]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent]:not(.enable-editing-button)){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=brand]) button,:host([appearance=transparent][kind=brand]) a{--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:hover,:host([appearance=transparent][kind=brand]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=transparent][kind=brand]) button:active,:host([appearance=transparent][kind=brand]) a:active{--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=transparent][kind=brand]) button calcite-loader,:host([appearance=transparent][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=danger]) button,:host([appearance=transparent][kind=danger]) a{--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:hover,:host([appearance=transparent][kind=danger]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=transparent][kind=danger]) button:active,:host([appearance=transparent][kind=danger]) a:active{--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=transparent][kind=danger]) button calcite-loader,:host([appearance=transparent][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button{--calcite-internal-button-text-color: var(--calcite-color-text-3)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-padding-y: 0}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][kind=inverse]){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=inverse]) button calcite-loader,:host([appearance=transparent][kind=inverse]) a calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .5rem}:host([scale=s]) button,:host([scale=s]) a{--calcite-internal-button-padding-y: 3px}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-internal-button-padding-x: 11px;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-padding-y: 7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .75rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-internal-button-padding-x: 15px;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .button-padding{--calcite-internal-button-padding-x: 1rem;--calcite-internal-button-padding-y: 11px}:host([scale=l]) .button-padding--shrunk{--calcite-internal-button-padding-y: 9px}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 3px;inline-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:1.5rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 7px;inline-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 9px;inline-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2.75rem}:host(:is([scale=s],[scale=m],[scale=l])[width=full]) a:not(.content--slotted),:host(:is([scale=s],[scale=m],[scale=l])[width=full]) button:not(.content--slotted){inline-size:var(--calcite-container-size-content-fluid)}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-y: var(--calcite-space-sm-plus)}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 23px;block-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-x: 1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 2rem;block-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-x: 33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 43px;block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-x: 2.75rem}:host([hidden]){display:none}[hidden]{display:none}`;
|
|
32
33
|
class Button extends LitElement {
|
|
33
34
|
constructor() {
|
|
34
35
|
super();
|
|
@@ -111,7 +112,7 @@ class Button extends LitElement {
|
|
|
111
112
|
const iconStartEl = html`<calcite-icon class=${safeClassMap({ [CSS.icon]: true, [CSS.iconStart]: true })} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
|
|
112
113
|
const iconEndEl = html`<calcite-icon class=${safeClassMap({ [CSS.icon]: true, [CSS.iconEnd]: true })} .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} .scale=${getIconScale(this.scale)}></calcite-icon>`;
|
|
113
114
|
const contentEl = html`<span class=${safeClassMap(CSS.content)} ${ref(this.contentRef)}><slot></slot></span>`;
|
|
114
|
-
return this.interactiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} .ariaBusy=${this.loading} .ariaExpanded=${this.el.ariaExpanded ? this.el.ariaExpanded : void 0} .ariaLabel=${!this.loading ? getLabelText(this) : this.messages.loading} aria-live=polite class=${safeClassMap({
|
|
115
|
+
return this.interactiveContainer({ disabled: this.disabled, children: html$1`<${DynamicHtmlTag} .ariaBusy=${toAriaBoolean(this.loading, void 0)} .ariaExpanded=${this.el.ariaExpanded ? this.el.ariaExpanded : void 0} .ariaLabel=${!this.loading ? getLabelText(this) : this.messages.loading} aria-live=polite class=${safeClassMap({
|
|
115
116
|
[CSS.buttonPadding]: noStartEndIcons,
|
|
116
117
|
[CSS.buttonPaddingShrunk]: !noStartEndIcons,
|
|
117
118
|
[CSS.contentSlotted]: this.hasContent,
|
|
@@ -3,18 +3,6 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
|
3
3
|
import type { LogicalFlowPosition, Scale } from "../types.js";
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* @cssproperty [--calcite-card-accent-color-selected] - Specifies the component's accent color when `selected`.
|
|
7
|
-
* @cssproperty [--calcite-card-background-color] - Specifies the component's background color.
|
|
8
|
-
* @cssproperty [--calcite-card-border-color] - Specifies the component's border color.
|
|
9
|
-
* @cssproperty [--calcite-card-corner-radius] - Specifies the component's corner radius.
|
|
10
|
-
* @cssproperty [--calcite-card-selection-background-color-hover] - Specifies the component's selection element background color when hovered.
|
|
11
|
-
* @cssproperty [--calcite-card-selection-background-color-press] - Specifies the component's selection element background color when active.
|
|
12
|
-
* @cssproperty [--calcite-card-selection-background-color] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-background-color` instead. Specifies the component's selection element background color.
|
|
13
|
-
* @cssproperty [--calcite-card-selection-color-hover] - Specifies the component's selection element color when hovered or focused.
|
|
14
|
-
* @cssproperty [--calcite-card-selection-color] - Specifies the component's selection element color.
|
|
15
|
-
* @cssproperty [--calcite-card-selection-icon-color-hover] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-selection-color-hover` instead. Specifies the component's selection element icon color when hovered.
|
|
16
|
-
* @cssproperty [--calcite-card-selection-icon-color-selected] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-accent-color-selected` instead. Specifies the component's selection element icon color when `selected`.
|
|
17
|
-
* @cssproperty [--calcite-card-shadow] - Specifies the component's shadow.
|
|
18
6
|
* @slot - A slot for adding content.
|
|
19
7
|
* @slot [thumbnail] - A slot for adding a thumbnail.
|
|
20
8
|
* @slot [heading] - A slot for adding a heading.
|
|
@@ -10,6 +10,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
|
|
|
10
10
|
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
|
|
11
11
|
import { u as useInteractive } from "../../chunks/useInteractive.js";
|
|
12
12
|
import { C as CSS, S as SLOTS, I as ICONS } from "../../chunks/resources8.js";
|
|
13
|
+
import { t as toAriaBoolean } from "../../chunks/aria.js";
|
|
13
14
|
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}:host([scale=s]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-xs);--calcite-internal-card-header-text-container-padding-right: 0;--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-xs);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-xs);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-xs);--calcite-internal-card-slotted-content-padding: var(--calcite-space-sm);--calcite-internal-card-footer-padding-inline: var(--calcite-space-sm);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-base)}:host([scale=m]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-base);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-sm);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-sm);--calcite-internal-card-slotted-content-padding: var(--calcite-space-md);--calcite-internal-card-footer-padding-inline: var(--calcite-space-md);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-2xs)}:host([scale=l]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-lg);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-xs);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-md);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-md);--calcite-internal-card-slotted-content-padding: var(--calcite-space-lg);--calcite-internal-card-footer-padding-inline: var(--calcite-space-lg);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-sm)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.header-text-container{display:flex;flex-direction:column;inline-size:100%;justify-content:center;padding-inline:var(--calcite-internal-card-header-text-container-padding-inline);padding-block:var(--calcite-internal-card-header-text-container-padding-block)}.header-text-container:not(:only-child){padding-inline-end:var(--calcite-internal-card-header-text-container-padding-right)}.footer{display:flex;margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-internal-card-footer-padding-inline);padding-block-start:var(--calcite-space-2xs);padding-block-end:var(--calcite-space-md)}.card-content{block-size:auto;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.has-slotted-content{padding:var(--calcite-internal-card-slotted-content-padding)}:host([selected]) .content-wrapper{border:1px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){color:var(--calcite-color-text-1);margin:0;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-heading-font-size)}slot[name=description]::slotted(*),*::slotted([slot=description]){color:var(--calcite-color-text-2);margin:0;font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-description-font-size)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{outline-color:transparent;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3));padding:var(--calcite-internal-card-checkbox-wrapper-padding);margin:var(--calcite-internal-card-checkbox-wrapper-margin)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:var(--calcite-internal-card-footer-start-end-gap)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
|
|
14
15
|
class Card extends LitElement {
|
|
15
16
|
constructor() {
|
|
@@ -107,7 +108,7 @@ class Card extends LitElement {
|
|
|
107
108
|
const thumbnailInline = this.thumbnailPosition.startsWith("inline");
|
|
108
109
|
const thumbnailStart = this.thumbnailPosition.endsWith("start");
|
|
109
110
|
const role = this.selectionMode === "multiple" ? "checkbox" : this.selectionMode !== "none" ? "radio" : void 0;
|
|
110
|
-
return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" ? this.selected : void 0} .ariaLabel=${this.label} class=${safeClassMap({ [CSS.contentWrapper]: true, inline: thumbnailInline })} @click=${this.cardBodyClickHandler} @keydown=${this.keyDownHandler} .role=${role} .tabIndex=${!this.selectable || this.disabled ? 0 : -1} ${ref(this.containerRef)}>${this.loading ? html`<div aria-live=polite class="calcite-card-loader-container"><calcite-loader .label=${this.messages.loading}></calcite-loader></div>` : null}${thumbnailStart && this.renderThumbnail() || ""}<section .ariaBusy=${this.loading} class=${safeClassMap({ [CSS.container]: true })}>${this.renderHeader()}<div class=${safeClassMap({
|
|
111
|
+
return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" ? this.selected : void 0} .ariaLabel=${this.label} class=${safeClassMap({ [CSS.contentWrapper]: true, inline: thumbnailInline })} @click=${this.cardBodyClickHandler} @keydown=${this.keyDownHandler} .role=${role} .tabIndex=${!this.selectable || this.disabled ? 0 : -1} ${ref(this.containerRef)}>${this.loading ? html`<div aria-live=polite class="calcite-card-loader-container"><calcite-loader .label=${this.messages.loading}></calcite-loader></div>` : null}${thumbnailStart && this.renderThumbnail() || ""}<section .ariaBusy=${toAriaBoolean(this.loading, void 0)} class=${safeClassMap({ [CSS.container]: true })}>${this.renderHeader()}<div class=${safeClassMap({
|
|
111
112
|
[CSS.cardContent]: true,
|
|
112
113
|
[CSS.hasSlottedContent]: this.hasContent
|
|
113
114
|
})}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div>${this.renderFooter()}</section>${!thumbnailStart && this.renderThumbnail() || ""}</div>` });
|
|
@@ -3,11 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
|
3
3
|
import type { Scale, SelectionMode } from "../types.js";
|
|
4
4
|
import type { Card } from "../calcite-card/customElement.js";
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* @cssproperty [--calcite-card-group-gap] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-group-space` instead. Specifies the gap between slotted elements.
|
|
8
|
-
* @cssproperty [--calcite-card-group-space] - Specifies the space between slotted elements.
|
|
9
|
-
* @slot - A slot for adding one or more `calcite-card`s.
|
|
10
|
-
*/
|
|
6
|
+
/** @slot - A slot for adding one or more `calcite-card`s. */
|
|
11
7
|
export abstract class CardGroup extends LitElement {
|
|
12
8
|
/**
|
|
13
9
|
* When `true`, interaction is prevented and the component is displayed with lower opacity.
|
|
@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
|
|
|
3
3
|
import { css, html } from "lit";
|
|
4
4
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
5
5
|
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
|
|
6
|
-
import {
|
|
6
|
+
import { e as focusElementInGroup } from "../../chunks/dom.js";
|
|
7
7
|
import { i as isCard } from "../../chunks/resources8.js";
|
|
8
8
|
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
|
|
9
9
|
import { u as useInteractive } from "../../chunks/useInteractive.js";
|
|
@@ -3,20 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
|
3
3
|
import type { CarouselItem } from "../calcite-carousel-item/customElement.js";
|
|
4
4
|
import type { ArrowType, AutoplayType, PaginationPosition } from "./types.js";
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* @cssproperty [--calcite-carousel-pagination-background-color] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls.
|
|
8
|
-
* @cssproperty [--calcite-carousel-pagination-background-color-hover] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when hovered.
|
|
9
|
-
* @cssproperty [--calcite-carousel-pagination-background-color-press] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when pressed.
|
|
10
|
-
* @cssproperty [--calcite-carousel-pagination-background-color-selected] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when selected.
|
|
11
|
-
* @cssproperty [--calcite-carousel-pagination-icon-color] - Specifies the icon color of the component's pagination items and autoplay controls.
|
|
12
|
-
* @cssproperty [--calcite-carousel-pagination-icon-color-hover] - Specifies the icon color of the component's pagination items when hovered or pressed.
|
|
13
|
-
* @cssproperty [--calcite-carousel-pagination-icon-color-selected] - Specifies the icon color of the component's pagination items when selected.
|
|
14
|
-
* @cssproperty [--calcite-carousel-control-icon-color] - Specifies the icon color of the component's navigation arrow controls.
|
|
15
|
-
* @cssproperty [--calcite-carousel-control-icon-color-hover] - Specifies the icon color of the component's navigation arrow controls when hovered or pressed.
|
|
16
|
-
* @cssproperty [--calcite-carousel-autoplay-progress-background-color] - Specifies the background color of the component's autoplay progress when `autoplay` is specified.
|
|
17
|
-
* @cssproperty [--calcite-carousel-autoplay-progress-fill-color] - Specifies the fill color of the component's autoplay progress when `autoplay` is specified.
|
|
18
|
-
* @slot - A slot for adding `calcite-carousel-item`s.
|
|
19
|
-
*/
|
|
6
|
+
/** @slot - A slot for adding `calcite-carousel-item`s. */
|
|
20
7
|
export abstract class Carousel extends LitElement {
|
|
21
8
|
/**
|
|
22
9
|
* Specifies how and if the "previous" and "next" arrows are displayed.
|
|
@@ -5,7 +5,7 @@ import { css, nothing, html } from "lit";
|
|
|
5
5
|
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
|
|
6
6
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
7
7
|
import { useDirection } from "@arcgis/lumina/controllers";
|
|
8
|
-
import { x as whenAnimationDone, b as slotChangeGetAssignedElements,
|
|
8
|
+
import { x as whenAnimationDone, b as slotChangeGetAssignedElements, e as focusElementInGroup } from "../../chunks/dom.js";
|
|
9
9
|
import { g as guid } from "../../chunks/guid.js";
|
|
10
10
|
import { c as createObserver } from "../../chunks/observers.js";
|
|
11
11
|
import { b as breakpoints } from "../../chunks/responsive.js";
|
|
@@ -2,13 +2,6 @@
|
|
|
2
2
|
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
3
3
|
import type { Scale, Status } from "../types.js";
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* @cssproperty [--calcite-checkbox-size] - Specifies the component's height and width.
|
|
7
|
-
* @cssproperty [--calcite-checkbox-border-color] - Specifies the component's color.
|
|
8
|
-
* @cssproperty [--calcite-checkbox-border-color-hover] - Specifies the component's color when hovered.
|
|
9
|
-
* @cssproperty [--calcite-checkbox-border-color-press] - Specifies the component's color when pressed.
|
|
10
|
-
* @cssproperty [--calcite-checkbox-icon-color] - Specifies the component's icon color.
|
|
11
|
-
*/
|
|
12
5
|
export abstract class Checkbox extends LitElement {
|
|
13
6
|
/**
|
|
14
7
|
* When `true`, the component is checked.
|
|
@@ -4,15 +4,6 @@ import type { Appearance, Kind, Scale } from "../types.js";
|
|
|
4
4
|
import type { IconName } from "../calcite-icon/types.js";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* @cssproperty [--calcite-chip-background-color] - Specifies the component's background color.
|
|
8
|
-
* @cssproperty [--calcite-chip-border-color] - Specifies the component's border color.
|
|
9
|
-
* @cssproperty [--calcite-chip-close-icon-color] - Specifies the component's close element icon color.
|
|
10
|
-
* @cssproperty [--calcite-chip-corner-radius] - Specifies the component's corner radius.
|
|
11
|
-
* @cssproperty [--calcite-chip-icon-color] - Specifies the component's icon color.
|
|
12
|
-
* @cssproperty [--calcite-chip-select-icon-color-press] - Specifies the component's selection element icon color when active.
|
|
13
|
-
* @cssproperty [--calcite-chip-select-icon-color-pressed] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-chip-select-icon-color-press` instead. Specifies the component's selection element icon color when active.
|
|
14
|
-
* @cssproperty [--calcite-chip-select-icon-color] - Specifies the component's selection element icon color.
|
|
15
|
-
* @cssproperty [--calcite-chip-text-color] - Specifies the component's text color.
|
|
16
7
|
* @slot - A slot for adding text.
|
|
17
8
|
* @slot [image] - A slot for adding an image.
|
|
18
9
|
*/
|
|
@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
|
|
|
3
3
|
import { css, html } from "lit";
|
|
4
4
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
5
5
|
import { LitElement, createEvent } from "@arcgis/lumina";
|
|
6
|
-
import {
|
|
6
|
+
import { e as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
|
|
7
7
|
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
|
|
8
8
|
import { u as useInteractive } from "../../chunks/useInteractive.js";
|
|
9
9
|
import { i as isChip } from "../../chunks/resources9.js";
|
|
@@ -5,25 +5,6 @@ import type { NumberingSystem } from "../../utils/locale.js";
|
|
|
5
5
|
import type { Format } from "./utils.js";
|
|
6
6
|
import type { ColorValue } from "./types.js";
|
|
7
7
|
|
|
8
|
-
/**
|
|
9
|
-
* @cssproperty [--calcite-color-picker-background-color] - Specifies the component's background color.
|
|
10
|
-
* @cssproperty [--calcite-color-picker-border-color] - Specifies the component's border color.
|
|
11
|
-
* @cssproperty [--calcite-color-picker-corner-radius] - Specifies the component's corner radius.
|
|
12
|
-
* @cssproperty [--calcite-color-picker-shadow] - Specifies the component's shadow.
|
|
13
|
-
* @cssproperty [--calcite-color-picker-text-color] - Specifies the component's text color.
|
|
14
|
-
* @cssproperty [--calcite-color-picker-input-background-color] - Specifies the component's input background color.
|
|
15
|
-
* @cssproperty [--calcite-color-picker-input-border-color] - Specifies the component's input border color.
|
|
16
|
-
* @cssproperty [--calcite-color-picker-input-text-color] - Specifies the component's input text color.
|
|
17
|
-
* @cssproperty [--calcite-color-picker-input-prefix-text-color] - When `hexDisabled` is not `true`, specifies the component's input prefix text color.
|
|
18
|
-
* @cssproperty [--calcite-color-picker-input-suffix-text-color] - When `alphaChannel` is `true`, specifies the component's input suffix text color.
|
|
19
|
-
* @cssproperty [--calcite-color-picker-tab-border-color] - Specifies the component's tab border color.
|
|
20
|
-
* @cssproperty [--calcite-color-picker-tab-text-color] - Specifies the component's tab text color.
|
|
21
|
-
* @cssproperty [--calcite-color-picker-tab-accent-color-press] - Specifies the component's tab accent color when selected or active.
|
|
22
|
-
* @cssproperty [--calcite-color-picker-swatch-corner-radius] - Specifies the component's swatch corner radius.
|
|
23
|
-
* @cssproperty [--calcite-color-picker-action-text-color-press] - Specifies the component's `savedColors` action text color when pressed.
|
|
24
|
-
* @cssproperty [--calcite-color-picker-action-text-color-hover] - Specifies the component's `savedColors` action text color when hovered.
|
|
25
|
-
* @cssproperty [--calcite-color-picker-action-text-color] - Specifies the component's `savedColors` action text color.
|
|
26
|
-
*/
|
|
27
8
|
export abstract class ColorPicker extends LitElement {
|
|
28
9
|
/**
|
|
29
10
|
* When `true`, the component will allow updates to the color's alpha value.
|
|
@@ -8,7 +8,7 @@ import { css, html, nothing } from "lit";
|
|
|
8
8
|
import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
|
|
9
9
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
10
10
|
import { useDirection } from "@arcgis/lumina/controllers";
|
|
11
|
-
import {
|
|
11
|
+
import { h as isPrimaryPointerButton } from "../../chunks/dom.js";
|
|
12
12
|
import { i as isActivationKey } from "../../chunks/key.js";
|
|
13
13
|
import { r as remap, c as clamp, a as closeToRangeEdge } from "../../chunks/math.js";
|
|
14
14
|
import { u as useT9n } from "../../chunks/useT9n.js";
|
|
@@ -7,15 +7,6 @@ import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../calcite-
|
|
|
7
7
|
import type { SelectionDisplay } from "./types.js";
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
|
-
* @cssproperty [--calcite-combobox-divider-color] - Specifies the component's divider color.
|
|
11
|
-
* @cssproperty [--calcite-combobox-icon-color] - Specifies the component's icon color.
|
|
12
|
-
* @cssproperty [--calcite-combobox-icon-color-hover] - Specifies the component's icon color when hovered.
|
|
13
|
-
* @cssproperty [--calcite-combobox-corner-radius] - Specifies the component's corner radius.
|
|
14
|
-
* @cssproperty [--calcite-combobox-background-color] - Specifies the background color of the component's listbox.
|
|
15
|
-
* @cssproperty [--calcite-combobox-input-border-color] - Specifies the border color of the component's input.
|
|
16
|
-
* @cssproperty [--calcite-combobox-input-background-color] - Specifies the background color of the component's input.
|
|
17
|
-
* @cssproperty [--calcite-combobox-input-height] - Specifies the height of the component's input.
|
|
18
|
-
* @cssproperty [--calcite-combobox-input-text-color] - When `selectionDisplay` is `"single"`, specifies the text color of the component's input.
|
|
19
10
|
* @slot - A slot for adding `calcite-combobox-item`s.
|
|
20
11
|
* @slot [label-content] - A slot for rendering content next to the component's `labelText`.
|
|
21
12
|
*/
|
|
@@ -10,7 +10,7 @@ import { createRef, ref } from "lit/directives/ref.js";
|
|
|
10
10
|
import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
|
|
11
11
|
import { useDirection } from "@arcgis/lumina/controllers";
|
|
12
12
|
import { f as filter } from "../../chunks/filter.js";
|
|
13
|
-
import {
|
|
13
|
+
import { j as getElementWidth, k as getTextWidth, f as focusElement } from "../../chunks/dom.js";
|
|
14
14
|
import { a as defaultMenuPlacement, r as reposition, c as connectFloatingUI, b as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
|
|
15
15
|
import { g as guid } from "../../chunks/guid.js";
|
|
16
16
|
import { g as getLabelText } from "../../chunks/label.js";
|
|
@@ -4,16 +4,6 @@ import type { ComboboxChildElement } from "../calcite-combobox/types.js";
|
|
|
4
4
|
import type { IconName } from "../calcite-icon/types.js";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* @cssproperty [--calcite-combobox-item-border-color] - [Deprecated] in v3.3.0, removal target v6.0.0 - Specifies the component's border color.
|
|
8
|
-
* @cssproperty [--calcite-combobox-text-color] - Specifies the component's text and `icon` color.
|
|
9
|
-
* @cssproperty [--calcite-combobox-text-color-hover] - Specifies the component's text and `icon` color when hovered.
|
|
10
|
-
* @cssproperty [--calcite-combobox-item-background-color-active] - When `active`, specifies the component's background color.
|
|
11
|
-
* @cssproperty [--calcite-combobox-item-background-color-hover] - Specifies the component's background color when hovered.
|
|
12
|
-
* @cssproperty [--calcite-combobox-item-shadow] - Specifies the component's shadow.
|
|
13
|
-
* @cssproperty [--calcite-combobox-selected-icon-color] - Specifies the component's `selected` indicator icon color.
|
|
14
|
-
* @cssproperty [--calcite-combobox-description-text-color] - Specifies the component's `description` and `shortHeading` text color.
|
|
15
|
-
* @cssproperty [--calcite-combobox-description-text-color-press] - Specifies the component's `description` and `shortHeading` text color when hovered.
|
|
16
|
-
* @cssproperty [--calcite-combobox-heading-text-color] - Specifies the component's `heading` text color.
|
|
17
7
|
* @slot - A slot for adding nested `calcite-combobox-item`s.
|
|
18
8
|
* @slot [content-end] - A slot for adding non-actionable elements after the component's content.
|
|
19
9
|
* @slot [content-start] - A slot for adding non-actionable elements before the component's content.
|
|
@@ -6,7 +6,7 @@ import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lum
|
|
|
6
6
|
import { g as guid } from "../../chunks/guid.js";
|
|
7
7
|
import { d as getAncestors, i as isSingleLike, e as getDepth } from "../../chunks/utils.js";
|
|
8
8
|
import { g as getIconScale } from "../../chunks/component.js";
|
|
9
|
-
import {
|
|
9
|
+
import { p as slotChangeHasContent } from "../../chunks/dom.js";
|
|
10
10
|
import { h as highlightText } from "../../chunks/text.js";
|
|
11
11
|
import { u as useInteractive } from "../../chunks/useInteractive.js";
|
|
12
12
|
const CSS = {
|
|
@@ -2,11 +2,7 @@
|
|
|
2
2
|
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
3
3
|
import type { ComboboxChildElement } from "../calcite-combobox/types.js";
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* @cssproperty [--calcite-combobox-item-group-text-color] - Specifies the component's text color.
|
|
7
|
-
* @cssproperty [--calcite-combobox-item-group-border-color] - Specifies the component's border color.
|
|
8
|
-
* @slot - A slot for adding `calcite-combobox-item`s.
|
|
9
|
-
*/
|
|
5
|
+
/** @slot - A slot for adding `calcite-combobox-item`s. */
|
|
10
6
|
export abstract class ComboboxItemGroup extends LitElement {
|
|
11
7
|
/** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
|
|
12
8
|
accessor ancestors: ComboboxChildElement[] | undefined;
|
|
@@ -3,33 +3,6 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
|
3
3
|
import type { NumberingSystem } from "../../utils/locale.js";
|
|
4
4
|
import type { HeadingLevel } from "../functional/Heading.js";
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* @cssproperty [--calcite-date-picker-border-color] - Specifies the component's border color.
|
|
8
|
-
* @cssproperty [--calcite-date-picker-corner-radius] - Specifies the component's border radius.
|
|
9
|
-
* @cssproperty [--calcite-date-picker-range-calendar-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
|
|
10
|
-
* @cssproperty [--calcite-date-picker-week-header-text-color] - Specifies the text color of the component's week header.
|
|
11
|
-
* @cssproperty [--calcite-date-picker-header-action-background-color] - Specifies the background color of component`s header actions.
|
|
12
|
-
* @cssproperty [--calcite-date-picker-header-action-background-color-hover] - Specifies the background color of component`s header actions when hovered.
|
|
13
|
-
* @cssproperty [--calcite-date-picker-header-action-background-color-press] - Specifies the background color of component`s header actions when pressed.
|
|
14
|
-
* @cssproperty [--calcite-date-picker-header-action-text-color] - Specifies the text color of the component's header actions.
|
|
15
|
-
* @cssproperty [--calcite-date-picker-header-action-text-color-press] - Specifies the text color of the component's header actions when pressed.
|
|
16
|
-
* @cssproperty [--calcite-date-picker-year-text-color] - Specifies the text color of the component's year and suffix.
|
|
17
|
-
* @cssproperty [--calcite-date-picker-month-select-font-size] - Specifies the font size of the component's month selector.
|
|
18
|
-
* @cssproperty [--calcite-date-picker-month-select-text-color] - Specifies the text color of the component's month selector.
|
|
19
|
-
* @cssproperty [--calcite-date-picker-month-select-icon-color] - Specifies the icon color of the component's month selector.
|
|
20
|
-
* @cssproperty [--calcite-date-picker-month-select-icon-color-hover] - Specifies the icon color of the component's month selector when hovered.
|
|
21
|
-
* @cssproperty [--calcite-date-picker-day-background-color] - Specifies the background color of the component's day elements.
|
|
22
|
-
* @cssproperty [--calcite-date-picker-day-background-color-hover] - Specifies the background color of the component's day elements when hovered.
|
|
23
|
-
* @cssproperty [--calcite-date-picker-day-text-color] - Specifies the text color of the component's day elements.
|
|
24
|
-
* @cssproperty [--calcite-date-picker-day-text-color-hover] - Specifies the text color of the component's day elements when hovered.
|
|
25
|
-
* @cssproperty [--calcite-date-picker-current-day-text-color] - Specifies the text color of the component's current day.
|
|
26
|
-
* @cssproperty [--calcite-date-picker-day-background-color-selected] - Specifies the background color of the component's selected day.
|
|
27
|
-
* @cssproperty [--calcite-date-picker-day-text-color-selected] - Specifies the text color of the component's selected day elements.
|
|
28
|
-
* @cssproperty [--calcite-date-picker-day-range-text-color] - Specifies the text color of component's selected day range.
|
|
29
|
-
* @cssproperty [--calcite-date-picker-day-range-background-color] - Specifies the background color the component's selected day range.
|
|
30
|
-
* @cssproperty [--calcite-date-picker-day-outside-range-background-color-hover] - Specifies the background color of the component's day elements outside the current range when hovered.
|
|
31
|
-
* @cssproperty [--calcite-date-picker-day-outside-range-text-color-hover] - Specifies the text color of the component's day elements outside the current range when hovered.
|
|
32
|
-
*/
|
|
33
6
|
export abstract class DatePicker extends LitElement {
|
|
34
7
|
/** Specifies the component's active date. */
|
|
35
8
|
accessor activeDate: Date | undefined;
|
|
@@ -6,7 +6,7 @@ import { css, html, nothing } from "lit";
|
|
|
6
6
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
7
7
|
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
|
|
8
8
|
import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
|
|
9
|
-
import { c as closestElementCrossShadowBoundary,
|
|
9
|
+
import { c as closestElementCrossShadowBoundary, k as getTextWidth } from "../../chunks/dom.js";
|
|
10
10
|
import { i as isActivationKey } from "../../chunks/key.js";
|
|
11
11
|
import { n as numberStringFormatter } from "../../chunks/locale.js";
|
|
12
12
|
const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
|
|
@@ -8,37 +8,6 @@ import type { IconName } from "../calcite-icon/types.js";
|
|
|
8
8
|
import type { DialogPlacement } from "./types.js";
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
* @cssproperty [--calcite-dialog-scrim-background-color] - Specifies the background color of the component's scrim.
|
|
12
|
-
* @cssproperty [--calcite-dialog-size-x] - When `placement` is `"cover"`, specifies the component's width, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width.
|
|
13
|
-
* @cssproperty [--calcite-dialog-min-size-x] - Specifies the component's minimum width, using `px`, `em`, `rem`, `vw`, or `%`.
|
|
14
|
-
* @cssproperty [--calcite-dialog-max-size-x] - Specifies the component's maximum width, using `px`, `em`, `rem`, `vw`, or `%`.
|
|
15
|
-
* @cssproperty [--calcite-dialog-size-y] - When `placement` is `"cover"`, specifies the component's height, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height.
|
|
16
|
-
* @cssproperty [--calcite-dialog-min-size-y] - Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`.
|
|
17
|
-
* @cssproperty [--calcite-dialog-max-size-y] - Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`.
|
|
18
|
-
* @cssproperty [--calcite-dialog-content-space] - Specifies the padding of the component's content.
|
|
19
|
-
* @cssproperty [--calcite-dialog-content-top-space] - Specifies the padding of the component's `content-top` slot.
|
|
20
|
-
* @cssproperty [--calcite-dialog-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
|
|
21
|
-
* @cssproperty [--calcite-dialog-header-top-space] - Specifies the padding of the component's `header-top` slot.
|
|
22
|
-
* @cssproperty [--calcite-dialog-footer-space] - Specifies the padding of the component's footer.
|
|
23
|
-
* @cssproperty [--calcite-dialog-border-color] - Specifies the component's border color.
|
|
24
|
-
* @cssproperty [--calcite-dialog-offset-x] - Specifies the component's horizontal offset.
|
|
25
|
-
* @cssproperty [--calcite-dialog-offset-y] - Specifies the component's vertical offset.
|
|
26
|
-
* @cssproperty [--calcite-dialog-background-color] - Specifies the component's background color.
|
|
27
|
-
* @cssproperty [--calcite-dialog-icon-color] - Specifies the color of the component's icon.
|
|
28
|
-
* @cssproperty [--calcite-dialog-accent-color] - When `kind` is specified, specifies the component's accent color.
|
|
29
|
-
* @cssproperty [--calcite-dialog-corner-radius] - Specifies the component's corner radius.
|
|
30
|
-
* @cssproperty [--calcite-dialog-heading-text-color] - Specifies the text color of the component's `heading`.
|
|
31
|
-
* @cssproperty [--calcite-dialog-description-text-color] - Specifies the text color of the component's `description`.
|
|
32
|
-
* @cssproperty [--calcite-dialog-header-background-color] - Specifies the background color of the component's header.
|
|
33
|
-
* @cssproperty [--calcite-dialog-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s.
|
|
34
|
-
* @cssproperty [--calcite-dialog-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when hovered.
|
|
35
|
-
* @cssproperty [--calcite-dialog-header-action-background-color-press] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed.
|
|
36
|
-
* @cssproperty [--calcite-dialog-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s.
|
|
37
|
-
* @cssproperty [--calcite-dialog-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed or hovered.
|
|
38
|
-
* @cssproperty [--calcite-dialog-footer-background-color] - Specifies the background color of the component's footer.
|
|
39
|
-
* @cssproperty [--calcite-dialog-space] - Specifies the padding of the component's `unnamed (default)` slot.
|
|
40
|
-
* @cssproperty [--calcite-dialog-header-content-space] - Specifies the padding of the component's `header-content` slot.
|
|
41
|
-
* @cssproperty [--calcite-dialog-action-menu-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
|
|
42
11
|
* @slot - A slot for adding content.
|
|
43
12
|
* @slot [custom-content] - A slot for displaying custom content. Will prevent the rendering of any default component UI, except for `box-shadow` and `corner-radius`.
|
|
44
13
|
* @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
|
|
@@ -5,7 +5,7 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
|
|
|
5
5
|
import { css, html } from "lit";
|
|
6
6
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
7
7
|
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
|
|
8
|
-
import {
|
|
8
|
+
import { l as getStylePixelValue } from "../../chunks/dom.js";
|
|
9
9
|
import { c as createObserver } from "../../chunks/observers.js";
|
|
10
10
|
import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
|
|
11
11
|
import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
|
|
@@ -5,9 +5,6 @@ import type { Scale, Width } from "../types.js";
|
|
|
5
5
|
import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
* @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
|
|
9
|
-
* @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
|
|
10
|
-
* @cssproperty [--calcite-dropdown-max-height] - Specifies the maximum height of the component's wrapper.
|
|
11
8
|
* @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
|
|
12
9
|
* @slot [trigger] - [deprecated] in v5.1.0, removal target v7.0.0 - Use the `referenceElement` property instead. A slot for the element that triggers the component.
|
|
13
10
|
*/
|
|
@@ -2,11 +2,7 @@
|
|
|
2
2
|
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
3
3
|
import type { SelectionMode } from "../types.js";
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* @cssproperty [--calcite-dropdown-group-border-color] - Specifies the component's border color.
|
|
7
|
-
* @cssproperty [--calcite-dropdown-group-title-text-color] - Specifies the component's `groupTitle` color.
|
|
8
|
-
* @slot - A slot for adding `calcite-dropdown-item`s.
|
|
9
|
-
*/
|
|
5
|
+
/** @slot - A slot for adding `calcite-dropdown-item`s. */
|
|
10
6
|
export abstract class DropdownGroup extends LitElement {
|
|
11
7
|
/** When specified, displays a group title. */
|
|
12
8
|
accessor groupTitle: string | undefined;
|
|
@@ -3,15 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
|
|
|
3
3
|
import type { FlipContext } from "../types.js";
|
|
4
4
|
import type { IconName } from "../calcite-icon/types.js";
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* @cssproperty [--calcite-dropdown-item-background-color-hover] - Specifies the component's background color when hovered.
|
|
8
|
-
* @cssproperty [--calcite-dropdown-item-background-color-press] - Specifies the component's background color when `selected` or active.
|
|
9
|
-
* @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] in v5.0.0, removal target v6.0.0 - Specifies the color of the component's selection icon when hovered.
|
|
10
|
-
* @cssproperty [--calcite-dropdown-item-icon-color-press] - Specifies the color of the component's selection icon when `selected` or active.
|
|
11
|
-
* @cssproperty [--calcite-dropdown-item-text-color-press] - Specifies the component's text color when `selected` or active.
|
|
12
|
-
* @cssproperty [--calcite-dropdown-item-text-color] - Specifies the component's text color.
|
|
13
|
-
* @slot - A slot for adding text.
|
|
14
|
-
*/
|
|
6
|
+
/** @slot - A slot for adding text. */
|
|
15
7
|
export abstract class DropdownItem extends LitElement {
|
|
16
8
|
/**
|
|
17
9
|
* When `true`, prevents interaction and decreases the component's opacity.
|