igniteui-webcomponents 4.3.1 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (369) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/animations/presets/fade/index.d.ts +2 -2
  3. package/animations/presets/fade/index.js +4 -6
  4. package/animations/presets/fade/index.js.map +1 -1
  5. package/animations/presets/grow/index.d.ts +2 -2
  6. package/animations/presets/grow/index.js +8 -10
  7. package/animations/presets/grow/index.js.map +1 -1
  8. package/animations/presets/index.d.ts +1 -0
  9. package/animations/presets/index.js +1 -0
  10. package/animations/presets/index.js.map +1 -1
  11. package/animations/presets/slide/index.d.ts +3 -0
  12. package/animations/presets/slide/index.js +16 -0
  13. package/animations/presets/slide/index.js.map +1 -0
  14. package/components/avatar/avatar.js +5 -2
  15. package/components/avatar/avatar.js.map +1 -1
  16. package/components/avatar/themes/{light/avatar.base.css.js → avatar.base.css.js} +2 -20
  17. package/components/avatar/themes/avatar.base.css.js.map +1 -0
  18. package/components/avatar/themes/dark/{avatar.base.bootstrap.css.js → avatar.bootstrap.css.js} +1 -1
  19. package/components/avatar/themes/dark/avatar.bootstrap.css.js.map +1 -0
  20. package/components/avatar/themes/dark/avatar.fluent.css.d.ts +1 -0
  21. package/components/avatar/themes/dark/avatar.fluent.css.js +3 -0
  22. package/components/avatar/themes/dark/avatar.fluent.css.js.map +1 -0
  23. package/components/avatar/themes/dark/avatar.indigo.css.d.ts +1 -0
  24. package/components/avatar/themes/dark/avatar.indigo.css.js +3 -0
  25. package/components/avatar/themes/dark/avatar.indigo.css.js.map +1 -0
  26. package/components/avatar/themes/dark/avatar.material.css.d.ts +1 -0
  27. package/components/avatar/themes/dark/avatar.material.css.js +3 -0
  28. package/components/avatar/themes/dark/avatar.material.css.js.map +1 -0
  29. package/components/avatar/themes/light/avatar.bootstrap.css.js +17 -3
  30. package/components/avatar/themes/light/avatar.bootstrap.css.js.map +1 -1
  31. package/components/avatar/themes/light/avatar.fluent.css.d.ts +1 -0
  32. package/components/avatar/themes/light/avatar.fluent.css.js +27 -0
  33. package/components/avatar/themes/light/avatar.fluent.css.js.map +1 -0
  34. package/components/avatar/themes/light/avatar.indigo.css.d.ts +1 -0
  35. package/components/avatar/themes/light/avatar.indigo.css.js +27 -0
  36. package/components/avatar/themes/light/avatar.indigo.css.js.map +1 -0
  37. package/components/avatar/themes/light/avatar.material.css.d.ts +1 -0
  38. package/components/avatar/themes/light/avatar.material.css.js +27 -0
  39. package/components/avatar/themes/light/avatar.material.css.js.map +1 -0
  40. package/components/button/button-base.d.ts +14 -6
  41. package/components/button/button-base.js +51 -18
  42. package/components/button/button-base.js.map +1 -1
  43. package/components/button/themes/button/light/button.base.css.js +4 -4
  44. package/components/button/themes/button/light/button.base.css.js.map +1 -1
  45. package/components/button/themes/button/light/button.bootstrap.css.js +64 -32
  46. package/components/button/themes/button/light/button.bootstrap.css.js.map +1 -1
  47. package/components/button/themes/button/light/button.fluent.css.js +75 -40
  48. package/components/button/themes/button/light/button.fluent.css.js.map +1 -1
  49. package/components/button/themes/button/light/button.indigo.css.js +86 -42
  50. package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
  51. package/components/button/themes/button/light/button.material.css.js +88 -38
  52. package/components/button/themes/button/light/button.material.css.js.map +1 -1
  53. package/components/button/themes/icon-button/light/icon-button.base.css.js +2 -1
  54. package/components/button/themes/icon-button/light/icon-button.base.css.js.map +1 -1
  55. package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js +12 -7
  56. package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js.map +1 -1
  57. package/components/button/themes/icon-button/light/icon-button.fluent.css.js +4 -3
  58. package/components/button/themes/icon-button/light/icon-button.fluent.css.js.map +1 -1
  59. package/components/button/themes/icon-button/light/icon-button.indigo.css.js +6 -4
  60. package/components/button/themes/icon-button/light/icon-button.indigo.css.js.map +1 -1
  61. package/components/button/themes/icon-button/light/icon-button.material.css.js +7 -4
  62. package/components/button/themes/icon-button/light/icon-button.material.css.js.map +1 -1
  63. package/components/calendar/themes/bootstrap/days-view.bootstrap.css.js +2 -2
  64. package/components/calendar/themes/bootstrap/days-view.bootstrap.css.js.map +1 -1
  65. package/components/calendar/themes/bootstrap/year-month-view.bootstrap.css.js +2 -2
  66. package/components/calendar/themes/bootstrap/year-month-view.bootstrap.css.js.map +1 -1
  67. package/components/calendar/themes/calendar.base.css.js +1 -0
  68. package/components/calendar/themes/calendar.base.css.js.map +1 -1
  69. package/components/calendar/themes/fluent/calendar.fluent.css.js +2 -1
  70. package/components/calendar/themes/fluent/calendar.fluent.css.js.map +1 -1
  71. package/components/checkbox/checkbox-base.d.ts +8 -35
  72. package/components/checkbox/checkbox-base.js +28 -41
  73. package/components/checkbox/checkbox-base.js.map +1 -1
  74. package/components/checkbox/checkbox.d.ts +0 -1
  75. package/components/checkbox/checkbox.js +5 -16
  76. package/components/checkbox/checkbox.js.map +1 -1
  77. package/components/checkbox/switch.d.ts +0 -2
  78. package/components/checkbox/switch.js +4 -16
  79. package/components/checkbox/switch.js.map +1 -1
  80. package/components/checkbox/themes/light/checkbox.base.css.js +2 -1
  81. package/components/checkbox/themes/light/checkbox.base.css.js.map +1 -1
  82. package/components/checkbox/themes/light/checkbox.bootstrap.css.js +26 -9
  83. package/components/checkbox/themes/light/checkbox.bootstrap.css.js.map +1 -1
  84. package/components/checkbox/themes/light/checkbox.fluent.css.js +31 -15
  85. package/components/checkbox/themes/light/checkbox.fluent.css.js.map +1 -1
  86. package/components/checkbox/themes/light/checkbox.indigo.css.js +31 -13
  87. package/components/checkbox/themes/light/checkbox.indigo.css.js.map +1 -1
  88. package/components/checkbox/themes/light/checkbox.material.css.js +24 -12
  89. package/components/checkbox/themes/light/checkbox.material.css.js.map +1 -1
  90. package/components/checkbox/themes/light/switch.base.css.js +2 -1
  91. package/components/checkbox/themes/light/switch.base.css.js.map +1 -1
  92. package/components/checkbox/themes/light/switch.bootstrap.css.js +12 -4
  93. package/components/checkbox/themes/light/switch.bootstrap.css.js.map +1 -1
  94. package/components/checkbox/themes/light/switch.fluent.css.js +33 -15
  95. package/components/checkbox/themes/light/switch.fluent.css.js.map +1 -1
  96. package/components/checkbox/themes/light/switch.indigo.css.js +26 -11
  97. package/components/checkbox/themes/light/switch.indigo.css.js.map +1 -1
  98. package/components/checkbox/themes/light/switch.material.css.js +14 -7
  99. package/components/checkbox/themes/light/switch.material.css.js.map +1 -1
  100. package/components/chip/themes/chip.base.css.js +0 -2
  101. package/components/chip/themes/chip.base.css.js.map +1 -1
  102. package/components/chip/themes/chip.bootstrap.css.js +2 -2
  103. package/components/chip/themes/chip.bootstrap.css.js.map +1 -1
  104. package/components/chip/themes/chip.fluent.css.js +2 -2
  105. package/components/chip/themes/chip.fluent.css.js.map +1 -1
  106. package/components/chip/themes/chip.indigo.css.js +2 -2
  107. package/components/chip/themes/chip.indigo.css.js.map +1 -1
  108. package/components/chip/themes/chip.material.css.js +2 -2
  109. package/components/chip/themes/chip.material.css.js.map +1 -1
  110. package/components/combo/combo.d.ts +7 -32
  111. package/components/combo/combo.js +57 -49
  112. package/components/combo/combo.js.map +1 -1
  113. package/components/combo/controllers/selection.js +1 -3
  114. package/components/combo/controllers/selection.js.map +1 -1
  115. package/components/combo/themes/light/combo.bootstrap.css.js +27 -24
  116. package/components/combo/themes/light/combo.bootstrap.css.js.map +1 -1
  117. package/components/combo/themes/light/combo.fluent.css.js +27 -24
  118. package/components/combo/themes/light/combo.fluent.css.js.map +1 -1
  119. package/components/combo/themes/light/combo.indigo.css.js +26 -23
  120. package/components/combo/themes/light/combo.indigo.css.js.map +1 -1
  121. package/components/combo/themes/light/combo.material.css.js +32 -23
  122. package/components/combo/themes/light/combo.material.css.js.map +1 -1
  123. package/components/combo/themes/light/item/combo-item.base.css.js +0 -1
  124. package/components/combo/themes/light/item/combo-item.base.css.js.map +1 -1
  125. package/components/common/localization/validation-en.d.ts +10 -0
  126. package/components/common/localization/validation-en.js +10 -0
  127. package/components/common/localization/validation-en.js.map +1 -0
  128. package/components/common/mixins/form-associated-required.d.ts +16 -0
  129. package/components/common/mixins/form-associated-required.js +29 -0
  130. package/components/common/mixins/form-associated-required.js.map +1 -0
  131. package/components/common/mixins/form-associated.d.ts +92 -0
  132. package/components/common/mixins/form-associated.js +151 -0
  133. package/components/common/mixins/form-associated.js.map +1 -0
  134. package/components/common/util.d.ts +38 -0
  135. package/components/common/util.js +34 -0
  136. package/components/common/util.js.map +1 -1
  137. package/components/common/validators.d.ts +45 -0
  138. package/components/common/validators.js +54 -0
  139. package/components/common/validators.js.map +1 -0
  140. package/components/date-time-input/date-time-input.d.ts +30 -11
  141. package/components/date-time-input/date-time-input.js +147 -135
  142. package/components/date-time-input/date-time-input.js.map +1 -1
  143. package/components/date-time-input/date-util.d.ts +1 -0
  144. package/components/date-time-input/date-util.js +6 -3
  145. package/components/date-time-input/date-util.js.map +1 -1
  146. package/components/dialog/dialog.js +1 -1
  147. package/components/dialog/dialog.js.map +1 -1
  148. package/components/dialog/themes/light/dialog.base.css.js +1 -1
  149. package/components/dialog/themes/light/dialog.base.css.js.map +1 -1
  150. package/components/dropdown/dropdown-item.js +2 -6
  151. package/components/dropdown/dropdown-item.js.map +1 -1
  152. package/components/dropdown/themes/light/dropdown.bootstrap.css.js +1 -1
  153. package/components/dropdown/themes/light/dropdown.bootstrap.css.js.map +1 -1
  154. package/components/dropdown/themes/light/dropdown.fluent.css.js +1 -1
  155. package/components/dropdown/themes/light/dropdown.fluent.css.js.map +1 -1
  156. package/components/dropdown/themes/light/dropdown.indigo.css.js +1 -1
  157. package/components/dropdown/themes/light/dropdown.indigo.css.js.map +1 -1
  158. package/components/dropdown/themes/light/dropdown.material.css.js +1 -1
  159. package/components/dropdown/themes/light/dropdown.material.css.js.map +1 -1
  160. package/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.js +1 -1
  161. package/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.js.map +1 -1
  162. package/components/dropdown/themes/light/group/dropdown-group.fluent.css.js +1 -1
  163. package/components/dropdown/themes/light/group/dropdown-group.fluent.css.js.map +1 -1
  164. package/components/dropdown/themes/light/group/dropdown-group.indigo.css.js +1 -1
  165. package/components/dropdown/themes/light/group/dropdown-group.indigo.css.js.map +1 -1
  166. package/components/dropdown/themes/light/group/dropdown-group.material.css.js +1 -1
  167. package/components/dropdown/themes/light/group/dropdown-group.material.css.js.map +1 -1
  168. package/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.js +1 -1
  169. package/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.js.map +1 -1
  170. package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js +1 -1
  171. package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js.map +1 -1
  172. package/components/dropdown/themes/light/header/dropdown-header.indigo.css.js +1 -1
  173. package/components/dropdown/themes/light/header/dropdown-header.indigo.css.js.map +1 -1
  174. package/components/dropdown/themes/light/header/dropdown-header.material.css.js +1 -1
  175. package/components/dropdown/themes/light/header/dropdown-header.material.css.js.map +1 -1
  176. package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.js +1 -1
  177. package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.js.map +1 -1
  178. package/components/dropdown/themes/light/item/dropdown-item.fluent.css.js +1 -1
  179. package/components/dropdown/themes/light/item/dropdown-item.fluent.css.js.map +1 -1
  180. package/components/dropdown/themes/light/item/dropdown-item.indigo.css.js +1 -1
  181. package/components/dropdown/themes/light/item/dropdown-item.indigo.css.js.map +1 -1
  182. package/components/dropdown/themes/light/item/dropdown-item.material.css.js +1 -1
  183. package/components/dropdown/themes/light/item/dropdown-item.material.css.js.map +1 -1
  184. package/components/expansion-panel/expansion-panel.js +1 -1
  185. package/components/expansion-panel/expansion-panel.js.map +1 -1
  186. package/components/form/form.d.ts +3 -0
  187. package/components/form/form.js.map +1 -1
  188. package/components/icon/icon.base.css.js +0 -8
  189. package/components/icon/icon.base.css.js.map +1 -1
  190. package/components/icon/light/icon.bootstrap.css.js +7 -1
  191. package/components/icon/light/icon.bootstrap.css.js.map +1 -1
  192. package/components/icon/light/icon.fluent.css.js +7 -1
  193. package/components/icon/light/icon.fluent.css.js.map +1 -1
  194. package/components/icon/light/icon.indigo.css.js +7 -1
  195. package/components/icon/light/icon.indigo.css.js.map +1 -1
  196. package/components/icon/light/icon.material.css.js +7 -1
  197. package/components/icon/light/icon.material.css.js.map +1 -1
  198. package/components/input/input-base.d.ts +10 -20
  199. package/components/input/input-base.js +19 -20
  200. package/components/input/input-base.js.map +1 -1
  201. package/components/input/input.d.ts +24 -15
  202. package/components/input/input.js +106 -48
  203. package/components/input/input.js.map +1 -1
  204. package/components/input/themes/light/input.base.css.js +0 -3
  205. package/components/input/themes/light/input.base.css.js.map +1 -1
  206. package/components/input/themes/light/input.bootstrap.css.js +7 -17
  207. package/components/input/themes/light/input.bootstrap.css.js.map +1 -1
  208. package/components/input/themes/light/input.fluent.css.js +6 -19
  209. package/components/input/themes/light/input.fluent.css.js.map +1 -1
  210. package/components/input/themes/light/input.indigo.css.js +16 -1
  211. package/components/input/themes/light/input.indigo.css.js.map +1 -1
  212. package/components/input/themes/light/input.material.css.js +30 -11
  213. package/components/input/themes/light/input.material.css.js.map +1 -1
  214. package/components/list/themes/light/list-header.base.css.js +0 -32
  215. package/components/list/themes/light/list-header.base.css.js.map +1 -1
  216. package/components/list/themes/light/list-item.base.css.js +1 -33
  217. package/components/list/themes/light/list-item.base.css.js.map +1 -1
  218. package/components/list/themes/light/list-item.bootstrap.css.js +1 -1
  219. package/components/list/themes/light/list-item.bootstrap.css.js.map +1 -1
  220. package/components/list/themes/light/list-item.fluent.css.js +1 -1
  221. package/components/list/themes/light/list-item.fluent.css.js.map +1 -1
  222. package/components/list/themes/light/list-item.indigo.css.js +1 -1
  223. package/components/list/themes/light/list-item.indigo.css.js.map +1 -1
  224. package/components/list/themes/light/list.base.css.js +1 -1
  225. package/components/list/themes/light/list.base.css.js.map +1 -1
  226. package/components/list/themes/light/list.bootstrap.css.js +1 -1
  227. package/components/list/themes/light/list.bootstrap.css.js.map +1 -1
  228. package/components/mask-input/mask-input-base.d.ts +2 -9
  229. package/components/mask-input/mask-input-base.js +7 -12
  230. package/components/mask-input/mask-input-base.js.map +1 -1
  231. package/components/mask-input/mask-input.d.ts +5 -6
  232. package/components/mask-input/mask-input.js +42 -51
  233. package/components/mask-input/mask-input.js.map +1 -1
  234. package/components/mask-input/mask-parser.js +1 -0
  235. package/components/mask-input/mask-parser.js.map +1 -1
  236. package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js +2 -2
  237. package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js.map +1 -1
  238. package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js +2 -2
  239. package/components/nav-drawer/themes/light/indigo/nav-drawer.indigo.css.js.map +1 -1
  240. package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js +0 -32
  241. package/components/nav-drawer/themes/light/nav-drawer-header-item.base.css.js.map +1 -1
  242. package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js +1 -34
  243. package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js.map +1 -1
  244. package/components/nav-drawer/themes/light/nav-drawer.base.css.js +1 -1
  245. package/components/nav-drawer/themes/light/nav-drawer.base.css.js.map +1 -1
  246. package/components/navbar/themes/light/navbar.bootstrap.css.js +0 -32
  247. package/components/navbar/themes/light/navbar.bootstrap.css.js.map +1 -1
  248. package/components/navbar/themes/light/navbar.fluent.css.js +0 -32
  249. package/components/navbar/themes/light/navbar.fluent.css.js.map +1 -1
  250. package/components/navbar/themes/light/navbar.indigo.css.js +0 -32
  251. package/components/navbar/themes/light/navbar.indigo.css.js.map +1 -1
  252. package/components/navbar/themes/light/navbar.material.css.js +0 -32
  253. package/components/navbar/themes/light/navbar.material.css.js.map +1 -1
  254. package/components/progress/themes/linear/linear.progress.base.css.js +1 -0
  255. package/components/progress/themes/linear/linear.progress.base.css.js.map +1 -1
  256. package/components/progress/themes/linear/linear.progress.indigo.css.js +0 -32
  257. package/components/progress/themes/linear/linear.progress.indigo.css.js.map +1 -1
  258. package/components/radio/radio.d.ts +13 -37
  259. package/components/radio/radio.js +135 -97
  260. package/components/radio/radio.js.map +1 -1
  261. package/components/radio/themes/light/radio.bootstrap.css.js +8 -36
  262. package/components/radio/themes/light/radio.bootstrap.css.js.map +1 -1
  263. package/components/radio/themes/light/radio.fluent.css.js +0 -32
  264. package/components/radio/themes/light/radio.fluent.css.js.map +1 -1
  265. package/components/radio/themes/light/radio.indigo.css.js +11 -37
  266. package/components/radio/themes/light/radio.indigo.css.js.map +1 -1
  267. package/components/radio/themes/light/radio.material.css.js +1 -33
  268. package/components/radio/themes/light/radio.material.css.js.map +1 -1
  269. package/components/radio-group/radio-group.d.ts +0 -4
  270. package/components/radio-group/radio-group.js +3 -54
  271. package/components/radio-group/radio-group.js.map +1 -1
  272. package/components/rating/dark/rating.fluent.css.d.ts +1 -0
  273. package/components/rating/dark/rating.fluent.css.js +3 -0
  274. package/components/rating/dark/rating.fluent.css.js.map +1 -0
  275. package/components/rating/rating-symbol.base.css.js +1 -1
  276. package/components/rating/rating-symbol.base.css.js.map +1 -1
  277. package/components/rating/rating.base.css.js +8 -4
  278. package/components/rating/rating.base.css.js.map +1 -1
  279. package/components/rating/rating.d.ts +10 -11
  280. package/components/rating/rating.fluent.css.js +13 -7
  281. package/components/rating/rating.fluent.css.js.map +1 -1
  282. package/components/rating/rating.js +19 -15
  283. package/components/rating/rating.js.map +1 -1
  284. package/components/select/select-item.d.ts +0 -2
  285. package/components/select/select-item.js +0 -3
  286. package/components/select/select-item.js.map +1 -1
  287. package/components/select/select.d.ts +7 -34
  288. package/components/select/select.js +27 -37
  289. package/components/select/select.js.map +1 -1
  290. package/components/select/themes/light/select.base.css.js +1 -0
  291. package/components/select/themes/light/select.base.css.js.map +1 -1
  292. package/components/select/themes/light/select.bootstrap.css.js +5 -37
  293. package/components/select/themes/light/select.bootstrap.css.js.map +1 -1
  294. package/components/select/themes/light/select.fluent.css.js +5 -37
  295. package/components/select/themes/light/select.fluent.css.js.map +1 -1
  296. package/components/select/themes/light/select.indigo.css.js +4 -36
  297. package/components/select/themes/light/select.indigo.css.js.map +1 -1
  298. package/components/select/themes/light/select.material.css.js +14 -46
  299. package/components/select/themes/light/select.material.css.js.map +1 -1
  300. package/components/slider/slider.d.ts +4 -12
  301. package/components/slider/slider.js +16 -25
  302. package/components/slider/slider.js.map +1 -1
  303. package/components/slider/themes/light/slider.base.css.js +17 -8
  304. package/components/slider/themes/light/slider.base.css.js.map +1 -1
  305. package/components/slider/themes/light/slider.fluent.css.js +6 -3
  306. package/components/slider/themes/light/slider.fluent.css.js.map +1 -1
  307. package/components/slider/themes/light/slider.indigo.css.js +4 -1
  308. package/components/slider/themes/light/slider.indigo.css.js.map +1 -1
  309. package/components/snackbar/snackbar.js +1 -1
  310. package/components/snackbar/snackbar.js.map +1 -1
  311. package/components/stepper/animations.d.ts +2 -0
  312. package/components/stepper/animations.js +22 -0
  313. package/components/stepper/animations.js.map +1 -0
  314. package/components/stepper/step.d.ts +17 -8
  315. package/components/stepper/step.js +29 -0
  316. package/components/stepper/step.js.map +1 -1
  317. package/components/stepper/stepper.d.ts +19 -3
  318. package/components/stepper/stepper.js +58 -7
  319. package/components/stepper/stepper.js.map +1 -1
  320. package/components/stepper/themes/step/light/step.base.css.js +44 -165
  321. package/components/stepper/themes/step/light/step.base.css.js.map +1 -1
  322. package/components/stepper/themes/step/light/step.bootstrap.css.js +116 -19
  323. package/components/stepper/themes/step/light/step.bootstrap.css.js.map +1 -1
  324. package/components/stepper/themes/step/light/step.fluent.css.js +112 -12
  325. package/components/stepper/themes/step/light/step.fluent.css.js.map +1 -1
  326. package/components/stepper/themes/step/light/step.indigo.css.js +112 -25
  327. package/components/stepper/themes/step/light/step.indigo.css.js.map +1 -1
  328. package/components/stepper/themes/step/light/step.material.css.js +112 -4
  329. package/components/stepper/themes/step/light/step.material.css.js.map +1 -1
  330. package/components/stepper/themes/stepper/stepper.base.css.js +2 -0
  331. package/components/stepper/themes/stepper/stepper.base.css.js.map +1 -1
  332. package/components/toast/toast.js +1 -1
  333. package/components/toast/toast.js.map +1 -1
  334. package/components/tree/themes/light/tree-item.base.css.js +0 -3
  335. package/components/tree/themes/light/tree-item.base.css.js.map +1 -1
  336. package/components/tree/themes/light/tree-item.bootstrap.css.js +60 -3
  337. package/components/tree/themes/light/tree-item.bootstrap.css.js.map +1 -1
  338. package/components/tree/themes/light/tree-item.fluent.css.js +58 -1
  339. package/components/tree/themes/light/tree-item.fluent.css.js.map +1 -1
  340. package/components/tree/themes/light/tree-item.indigo.css.js +58 -1
  341. package/components/tree/themes/light/tree-item.indigo.css.js.map +1 -1
  342. package/components/tree/themes/light/tree-item.material.css.d.ts +1 -0
  343. package/components/tree/themes/light/tree-item.material.css.js +58 -0
  344. package/components/tree/themes/light/tree-item.material.css.js.map +1 -0
  345. package/components/tree/tree-item.js +8 -6
  346. package/components/tree/tree-item.js.map +1 -1
  347. package/components/tree/tree.d.ts +0 -6
  348. package/components/tree/tree.js +0 -4
  349. package/components/tree/tree.js.map +1 -1
  350. package/components/tree/tree.navigation.js +3 -2
  351. package/components/tree/tree.navigation.js.map +1 -1
  352. package/custom-elements.json +798 -525
  353. package/package.json +3 -3
  354. package/themes/dark/bootstrap.css +274 -61
  355. package/themes/dark/fluent.css +291 -60
  356. package/themes/dark/indigo.css +508 -3
  357. package/themes/dark/material.css +244 -54
  358. package/themes/light/bootstrap.css +5 -2
  359. package/themes/light/fluent.css +5 -2
  360. package/themes/light/indigo.css +229 -2
  361. package/themes/light/material.css +5 -2
  362. package/vscode-html-custom-data.json +239 -286
  363. package/components/avatar/themes/dark/avatar.base.bootstrap.css.js.map +0 -1
  364. package/components/avatar/themes/light/avatar.base.css.js.map +0 -1
  365. package/components/common/types.d.ts +0 -1
  366. package/components/common/types.js +0 -2
  367. package/components/common/types.js.map +0 -1
  368. /package/components/avatar/themes/{light/avatar.base.css.d.ts → avatar.base.css.d.ts} +0 -0
  369. /package/components/avatar/themes/dark/{avatar.base.bootstrap.css.d.ts → avatar.bootstrap.css.d.ts} +0 -0
package/components/dropdown/themes/light/dropdown.bootstrap.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 1px);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
 
package/components/dropdown/themes/light/dropdown.bootstrap.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n padding: 0.5rem 0;\n border: 0.0625rem solid var(--border-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n padding: 0.5rem 0;\n border: 0.0625rem solid var(--border-color);\n}`;\n"]}
package/components/dropdown/themes/light/dropdown.fluent.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
 
package/components/dropdown/themes/light/dropdown.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n -webkit-box-shadow: var(--ig-elevation-4);\n box-shadow: var(--ig-elevation-4);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n -webkit-box-shadow: var(--ig-elevation-4);\n box-shadow: var(--ig-elevation-4);\n}`;\n"]}
package/components/dropdown/themes/light/dropdown.indigo.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0.125rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
 
package/components/dropdown/themes/light/dropdown.indigo.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0.125rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n -webkit-box-shadow: var(--ig-elevation-3);\n box-shadow: var(--ig-elevation-3);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n -webkit-box-shadow: var(--ig-elevation-3);\n box-shadow: var(--ig-elevation-3);\n}`;\n"]}
package/components/dropdown/themes/light/dropdown.material.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
 
package/components/dropdown/themes/light/dropdown.material.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.material.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n -webkit-box-shadow: var(--ig-elevation-8);\n box-shadow: var(--ig-elevation-8);\n padding: 0.5rem 0;\n}`;\n"]}
1
+ {"version":3,"file":"dropdown.material.css.js","sourceRoot":"","sources":["../../../../../src/components/dropdown/themes/light/dropdown.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n background: var(--background-color);\n border-radius: var(--border-radius);\n -webkit-box-shadow: var(--ig-elevation-8);\n box-shadow: var(--ig-elevation-8);\n padding: 0.5rem 0;\n}`;\n"]}
package/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 1px);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
  :host ::slotted([slot=label]) {
package/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-group.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-group.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n}`;\n"]}
package/components/dropdown/themes/light/group/dropdown-group.fluent.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
  :host ::slotted([slot=label]) {
package/components/dropdown/themes/light/group/dropdown-group.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-group.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n padding: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-group.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n padding: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}
package/components/dropdown/themes/light/group/dropdown-group.indigo.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0.125rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
  :host ::slotted([slot=label]) {
package/components/dropdown/themes/light/group/dropdown-group.indigo.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-group.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0.125rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-group.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n}`;\n"]}
package/components/dropdown/themes/light/group/dropdown-group.material.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  }
25
25
  :host ::slotted([slot=label]) {
package/components/dropdown/themes/light/group/dropdown-group.material.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-group.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-group.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/group/dropdown-group.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n:host ::slotted([slot=label]) {\n color: var(--header-text-color);\n}`;\n"]}
package/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 1px);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  color: var(--header-text-color);
25
25
  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
package/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}
package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  color: var(--header-text-color);
25
25
  padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
package/components/dropdown/themes/light/header/dropdown-header.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-header.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-header.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}`;\n"]}
package/components/dropdown/themes/light/header/dropdown-header.indigo.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0.125rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  color: var(--header-text-color);
25
25
  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
package/components/dropdown/themes/light/header/dropdown-header.indigo.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-header.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0.125rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-header.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}
package/components/dropdown/themes/light/header/dropdown-header.material.css.js CHANGED
@@ -19,7 +19,7 @@ export const styles = css `:host {
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
21
  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
- --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);
22
+ --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  color: var(--header-text-color);
25
25
  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
package/components/dropdown/themes/light/header/dropdown-header.material.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-header.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, 0rem, 0rem, 1.25rem);\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-header.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/header/dropdown-header.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n color: var(--header-text-color);\n padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}`;\n"]}
package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.js CHANGED
@@ -18,7 +18,7 @@ export const styles = css `:host {
18
18
  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 1px);
21
- --border-radius: var(--ig-dropdown-border-radius, 0.25rem, 0rem, 1.25rem);
21
+ --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
22
  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  border-radius: var(--item-border-radius);
package/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, 0.25rem, 0rem, 1.25rem);\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 1px);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
package/components/dropdown/themes/light/item/dropdown-item.fluent.css.js CHANGED
@@ -18,7 +18,7 @@ export const styles = css `:host {
18
18
  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
- --border-radius: var(--ig-dropdown-border-radius, 0.125rem, 0rem, 1.25rem);
21
+ --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
22
  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  border-radius: var(--item-border-radius);
package/components/dropdown/themes/light/item/dropdown-item.fluent.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, 0.125rem, 0rem, 1.25rem);\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-4));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-gray-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-gray-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-gray-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n padding: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
package/components/dropdown/themes/light/item/dropdown-item.indigo.css.js CHANGED
@@ -18,7 +18,7 @@ export const styles = css `:host {
18
18
  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
- --border-radius: var(--ig-dropdown-border-radius, 0.125rem, 0rem, 1.25rem);
21
+ --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
22
22
  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  border-radius: var(--item-border-radius);
package/components/dropdown/themes/light/item/dropdown-item.indigo.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, 0.125rem, 0rem, 1.25rem);\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-3));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), 0.15));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-500-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-400-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-400-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
package/components/dropdown/themes/light/item/dropdown-item.material.css.js CHANGED
@@ -18,7 +18,7 @@ export const styles = css `:host {
18
18
  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
19
19
  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
20
20
  --border-width: var(--ig-dropdown-border-width, 0);
21
- --border-radius: var(--ig-dropdown-border-radius, 0.25rem, 0rem, 1.25rem);
21
+ --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
22
22
  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
23
23
  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
24
24
  border-radius: var(--item-border-radius);
package/components/dropdown/themes/light/item/dropdown-item.material.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-item.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, 0.25rem, 0rem, 1.25rem);\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
1
+ {"version":3,"file":"dropdown-item.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/dropdown/themes/light/item/dropdown-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-8));\n --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n --item-text-color: var(--ig-dropdown-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-secondary-100-contrast));\n --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));\n --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n --border-width: var(--ig-dropdown-border-width, 0);\n --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n border-radius: var(--item-border-radius);\n color: var(--item-text-color);\n}\n\n:host([active]),\n:host(:hover) {\n background: var(--hover-item-background);\n color: var(--hover-item-text-color);\n}\n\n:host([active]) {\n background: var(--focused-item-background);\n color: var(--focused-item-text-color);\n}\n\n:host([selected]) {\n background: var(--selected-item-background);\n color: var(--selected-item-text-color);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n background: var(--selected-hover-item-background);\n color: var(--selected-hover-item-text-color);\n}\n\n:host([disabled]) {\n background: var(--disabled-item-background);\n color: var(--disabled-item-text-color);\n}`;\n"]}
package/components/expansion-panel/expansion-panel.js CHANGED
@@ -70,7 +70,7 @@ let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansi
70
70
  const animation = dir === 'open' ? growVerIn : growVerOut;
71
71
  const [_, event] = await Promise.all([
72
72
  this.animationPlayer.stopAll(),
73
- this.animationPlayer.play(animation),
73
+ this.animationPlayer.play(animation()),
74
74
  ]);
75
75
  return event.type === 'finish';
76
76
  }
package/components/expansion-panel/expansion-panel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n AnimationPlayer,\n growVerIn,\n growVerOut,\n} from '../../animations/index.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot - renders the default content of the panel\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title - The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n IgcExpansionPanelComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-expansion-panel';\n public static styles = styles;\n private static readonly increment = createCounter();\n private animationPlayer!: AnimationPlayer;\n\n /**\n * Indicates whether the contents of the control should be visible.\n * @attr\n */\n @property({ reflect: true, type: Boolean })\n public open = false;\n\n /**\n * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n * @attr\n */\n @property({ reflect: true, type: Boolean })\n public disabled = false;\n\n /**\n * The indicator position of the expansion panel.\n * @attr indicator-position\n */\n @property({ reflect: true, attribute: 'indicator-position' })\n public indicatorPosition: 'start' | 'end' | 'none' = 'start';\n\n @query('[part~=\"header\"]', true)\n protected panelHeader!: HTMLElement;\n\n @query('[part~=\"content\"]', true)\n protected panelContent!: HTMLElement;\n\n private panelId!: string;\n\n public override connectedCallback() {\n super.connectedCallback();\n this.panelId =\n this.getAttribute('id') ||\n `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n }\n\n protected override firstUpdated() {\n this.animationPlayer = new AnimationPlayer(this.panelContent);\n }\n\n private handleClicked() {\n this.panelHeader!.focus();\n\n if (this.open) {\n this.closeWithEvent();\n } else {\n this.openWithEvent();\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n switch (event.key.toLowerCase()) {\n case 'arrowdown':\n case 'down':\n if (event.altKey) {\n this.openWithEvent();\n }\n break;\n case 'arrowup':\n case 'up':\n if (event.altKey) {\n this.closeWithEvent();\n }\n break;\n case 'enter':\n case ' ':\n this.open ? this.closeWithEvent() : this.openWithEvent();\n break;\n }\n }\n\n private async toggleAnimation(dir: 'open' | 'close') {\n const animation = dir === 'open' ? growVerIn : growVerOut;\n\n const [_, event] = await Promise.all([\n this.animationPlayer.stopAll(),\n this.animationPlayer.play(animation),\n ]);\n\n return event.type === 'finish';\n }\n\n /**\n * @private\n * Opens the panel.\n */\n private async openWithEvent() {\n if (this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcOpening', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = true;\n\n if (await this.toggleAnimation('open')) {\n this.emitEvent('igcOpened', { detail: this });\n }\n }\n\n /**\n * @private\n * Closes the panel.\n */\n private async closeWithEvent() {\n if (!this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcClosing', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = false;\n\n if (await this.toggleAnimation('close')) {\n this.emitEvent('igcClosed', { detail: this });\n }\n }\n\n /** Toggles panel open state. */\n public toggle(): void {\n this.open ? this.hide() : this.show();\n }\n\n /** Hides the panel content. */\n public hide(): void {\n if (this.open) {\n this.toggleAnimation('close');\n }\n\n this.open = false;\n }\n\n /** Shows the panel content. */\n public show(): void {\n if (!this.open) {\n this.toggleAnimation('open');\n }\n\n this.open = true;\n }\n\n private indicatorTemplate() {\n return html`\n <div part=\"indicator\" aria-hidden=\"true\">\n <slot name=\"indicator\">\n <igc-icon\n name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n collection=\"internal\"\n >\n </igc-icon>\n </slot>\n </div>\n `;\n }\n\n private headerTemplate() {\n return html`\n <div\n part=\"header\"\n id=\"${this.panelId!}-header\"\n role=\"button\"\n aria-expanded=\"${this.open}\"\n aria-disabled=\"${this.disabled}\"\n aria-controls=\"${this.panelId!}-content\"\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClicked}\n @keydown=${this.handleKeydown}\n >\n ${this.indicatorTemplate()}\n <div>\n <slot name=\"title\" part=\"title\"></slot>\n <slot name=\"subtitle\" part=\"subtitle\"></slot>\n </div>\n </div>\n `;\n }\n\n private contentTemplate() {\n return html`\n <div\n part=\"content\"\n role=\"region\"\n id=\"${this.panelId!}-content\"\n aria-labelledby=\"${this.panelId!}-header\"\n aria-hidden=${!this.open}\n >\n <slot></slot>\n </div>\n `;\n }\n\n protected override render() {\n return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-expansion-panel': IgcExpansionPanelComponent;\n }\n}\n"]}
1
+ {"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport {\n AnimationPlayer,\n growVerIn,\n growVerOut,\n} from '../../animations/index.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot - renders the default content of the panel\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title - The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n IgcExpansionPanelComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-expansion-panel';\n public static styles = styles;\n private static readonly increment = createCounter();\n private animationPlayer!: AnimationPlayer;\n\n /**\n * Indicates whether the contents of the control should be visible.\n * @attr\n */\n @property({ reflect: true, type: Boolean })\n public open = false;\n\n /**\n * Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions.\n * @attr\n */\n @property({ reflect: true, type: Boolean })\n public disabled = false;\n\n /**\n * The indicator position of the expansion panel.\n * @attr indicator-position\n */\n @property({ reflect: true, attribute: 'indicator-position' })\n public indicatorPosition: 'start' | 'end' | 'none' = 'start';\n\n @query('[part~=\"header\"]', true)\n protected panelHeader!: HTMLElement;\n\n @query('[part~=\"content\"]', true)\n protected panelContent!: HTMLElement;\n\n private panelId!: string;\n\n public override connectedCallback() {\n super.connectedCallback();\n this.panelId =\n this.getAttribute('id') ||\n `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n }\n\n protected override firstUpdated() {\n this.animationPlayer = new AnimationPlayer(this.panelContent);\n }\n\n private handleClicked() {\n this.panelHeader!.focus();\n\n if (this.open) {\n this.closeWithEvent();\n } else {\n this.openWithEvent();\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n switch (event.key.toLowerCase()) {\n case 'arrowdown':\n case 'down':\n if (event.altKey) {\n this.openWithEvent();\n }\n break;\n case 'arrowup':\n case 'up':\n if (event.altKey) {\n this.closeWithEvent();\n }\n break;\n case 'enter':\n case ' ':\n this.open ? this.closeWithEvent() : this.openWithEvent();\n break;\n }\n }\n\n private async toggleAnimation(dir: 'open' | 'close') {\n const animation = dir === 'open' ? growVerIn : growVerOut;\n\n const [_, event] = await Promise.all([\n this.animationPlayer.stopAll(),\n this.animationPlayer.play(animation()),\n ]);\n\n return event.type === 'finish';\n }\n\n /**\n * @private\n * Opens the panel.\n */\n private async openWithEvent() {\n if (this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcOpening', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = true;\n\n if (await this.toggleAnimation('open')) {\n this.emitEvent('igcOpened', { detail: this });\n }\n }\n\n /**\n * @private\n * Closes the panel.\n */\n private async closeWithEvent() {\n if (!this.open) {\n return;\n }\n\n const args = {\n cancelable: true,\n detail: this,\n };\n\n const allowed = this.emitEvent('igcClosing', args);\n\n if (!allowed) {\n return;\n }\n\n this.open = false;\n\n if (await this.toggleAnimation('close')) {\n this.emitEvent('igcClosed', { detail: this });\n }\n }\n\n /** Toggles panel open state. */\n public toggle(): void {\n this.open ? this.hide() : this.show();\n }\n\n /** Hides the panel content. */\n public hide(): void {\n if (this.open) {\n this.toggleAnimation('close');\n }\n\n this.open = false;\n }\n\n /** Shows the panel content. */\n public show(): void {\n if (!this.open) {\n this.toggleAnimation('open');\n }\n\n this.open = true;\n }\n\n private indicatorTemplate() {\n return html`\n <div part=\"indicator\" aria-hidden=\"true\">\n <slot name=\"indicator\">\n <igc-icon\n name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n collection=\"internal\"\n >\n </igc-icon>\n </slot>\n </div>\n `;\n }\n\n private headerTemplate() {\n return html`\n <div\n part=\"header\"\n id=\"${this.panelId!}-header\"\n role=\"button\"\n aria-expanded=\"${this.open}\"\n aria-disabled=\"${this.disabled}\"\n aria-controls=\"${this.panelId!}-content\"\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClicked}\n @keydown=${this.handleKeydown}\n >\n ${this.indicatorTemplate()}\n <div>\n <slot name=\"title\" part=\"title\"></slot>\n <slot name=\"subtitle\" part=\"subtitle\"></slot>\n </div>\n </div>\n `;\n }\n\n private contentTemplate() {\n return html`\n <div\n part=\"content\"\n role=\"region\"\n id=\"${this.panelId!}-content\"\n aria-labelledby=\"${this.panelId!}-header\"\n aria-hidden=${!this.open}\n >\n <slot></slot>\n </div>\n `;\n }\n\n protected override render() {\n return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-expansion-panel': IgcExpansionPanelComponent;\n }\n}\n"]}
package/components/form/form.d.ts CHANGED
@@ -15,6 +15,9 @@ declare const IgcFormComponent_base: import("../common/mixins/constructor.js").A
15
15
  *
16
16
  * @fires igcSubmit - Emitted when the form is submitted.
17
17
  * @fires igcReset - Emitted when the form is reset.
18
+ *
19
+ * @deprecated - since version 4.4.0
20
+ * Use the native `<form>` element instead.
18
21
  */
19
22
  export default class IgcFormComponent extends IgcFormComponent_base {
20
23
  static readonly tagName = "igc-form";