@uh-design-system/component-library 0.5.2 → 0.6.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 (243) hide show
  1. package/dist/cjs/{utils-3412cbed.js → attributes-BMbXzbwU.js} +2 -28
  2. package/dist/cjs/component-library.cjs.js +7 -7
  3. package/dist/cjs/controlUtils-ofqiQxRF.js +42 -0
  4. package/dist/cjs/ds-accordion.cjs.entry.js +79 -0
  5. package/dist/cjs/ds-button.cjs.entry.js +107 -0
  6. package/dist/cjs/ds-card.cjs.entry.js +58 -0
  7. package/dist/cjs/ds-checkbox-group.cjs.entry.js +109 -49
  8. package/dist/cjs/ds-checkbox.cjs.entry.js +88 -79
  9. package/dist/cjs/ds-icon.cjs.entry.js +943 -0
  10. package/dist/cjs/ds-input-validity.cjs.entry.js +14 -15
  11. package/dist/cjs/ds-link-with-arrow.cjs.entry.js +21 -20
  12. package/dist/cjs/ds-link.cjs.entry.js +34 -31
  13. package/dist/cjs/ds-radio-button-group.cjs.entry.js +153 -0
  14. package/dist/cjs/ds-radio-button.cjs.entry.js +151 -0
  15. package/dist/cjs/ds-spinner.cjs.entry.js +62 -0
  16. package/dist/cjs/ds-text-input.cjs.entry.js +90 -77
  17. package/dist/cjs/ds-visually-hidden.cjs.entry.js +3 -6
  18. package/dist/cjs/index-Bp6Dd2i1.js +94 -0
  19. package/dist/cjs/{store-9bd20f3c.js → index-DwLFyR5p.js} +6 -2
  20. package/dist/cjs/{index-bf84b124.js → index-Mjp9Y-Sw.js} +701 -55
  21. package/dist/cjs/index.cjs.js +3 -5
  22. package/dist/cjs/{linkUtils-695da37c.js → linkUtils-onlbgKdI.js} +4 -2
  23. package/dist/cjs/loader.cjs.js +3 -5
  24. package/dist/cjs/utils-BjZTECpy.js +29 -0
  25. package/dist/collection/accessibility/stories/naming.stories.js +3 -3
  26. package/dist/collection/collection-manifest.json +78 -3
  27. package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css +18 -17
  28. package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +91 -50
  29. package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.js +6 -6
  30. package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.js +14 -14
  31. package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.stories.js +24 -66
  32. package/dist/collection/components/01-base-components/ds-button/ds-button.css +124 -145
  33. package/dist/collection/components/01-base-components/ds-button/ds-button.js +150 -65
  34. package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js +121 -23
  35. package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js +49 -42
  36. package/dist/collection/components/01-base-components/ds-button/stories/ds-button.stories.js +16 -72
  37. package/dist/collection/components/01-base-components/ds-card/ds-card.css +127 -0
  38. package/dist/collection/components/01-base-components/ds-card/ds-card.js +303 -0
  39. package/dist/collection/components/01-base-components/ds-card/stories/ds-card.examples.stories.js +92 -0
  40. package/dist/collection/components/01-base-components/ds-card/stories/ds-card.features.stories.js +66 -0
  41. package/dist/collection/components/01-base-components/ds-card/stories/ds-card.stories.js +71 -0
  42. package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.css +46 -46
  43. package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.js +120 -111
  44. package/dist/collection/components/01-base-components/ds-checkbox/stories/ds-checkbox.features.stories.js +20 -20
  45. package/dist/collection/components/01-base-components/ds-checkbox/stories/ds-checkbox.stories.js +12 -25
  46. package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.css +2 -3
  47. package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.js +214 -63
  48. package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.features.stories.js +215 -50
  49. package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.stories.js +30 -28
  50. package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +36 -31
  51. package/dist/collection/components/01-base-components/ds-icon/stories/ds-icon.stories.js +10 -37
  52. package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css +2 -2
  53. package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js +60 -30
  54. package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.features.stories.js +4 -4
  55. package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.stories.js +4 -9
  56. package/dist/collection/components/01-base-components/ds-link/ds-link.css +24 -14
  57. package/dist/collection/components/01-base-components/ds-link/ds-link.js +74 -75
  58. package/dist/collection/components/01-base-components/ds-link/stories/ds-link.examples.stories.js +27 -27
  59. package/dist/collection/components/01-base-components/ds-link/stories/ds-link.features.stories.js +38 -21
  60. package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js +8 -67
  61. package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +10 -12
  62. package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +30 -52
  63. package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.examples.stories.js +4 -4
  64. package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.features.stories.js +6 -6
  65. package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.stories.js +4 -28
  66. package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.css +115 -0
  67. package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js +449 -0
  68. package/dist/collection/components/01-base-components/ds-radio-button/stories/ds-radio-button.features.stories.js +72 -0
  69. package/dist/collection/components/01-base-components/ds-radio-button/stories/ds-radio-button.stories.js +22 -0
  70. package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.css +30 -0
  71. package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.js +360 -0
  72. package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.examples.stories.js +42 -0
  73. package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.js +71 -0
  74. package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js +60 -0
  75. package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.css +279 -0
  76. package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.js +221 -0
  77. package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.examples.stories.js +120 -0
  78. package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.features.stories.js +107 -0
  79. package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.stories.js +14 -0
  80. package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css +85 -118
  81. package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +230 -155
  82. package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js +26 -21
  83. package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.features.stories.js +40 -40
  84. package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.stories.js +30 -56
  85. package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
  86. package/dist/collection/store.js +7 -1
  87. package/dist/collection/utils/attributes/attributes.js +2 -2
  88. package/dist/collection/utils/button/buttonUtils.js +14 -0
  89. package/dist/collection/utils/colours/colourTypes.js +3 -3
  90. package/dist/collection/utils/colours/colourUtils.js +5 -3
  91. package/dist/collection/utils/controls/controlUtils.js +35 -1
  92. package/dist/collection/utils/link/linkUtils.js +3 -2
  93. package/dist/collection/utils/spinner/spinnerUtils.js +20 -0
  94. package/dist/collection/utils/tests/testUtils.js +1 -0
  95. package/dist/collection/utils/typography/typographyUtils.js +3 -3
  96. package/dist/collection/utils/utils.js +10 -9
  97. package/dist/component-library/{utils-cfc536bc.js → attributes-BD_lNRxn.js} +1 -1
  98. package/dist/component-library/component-library.css +1 -1
  99. package/dist/component-library/component-library.esm.js +1 -1
  100. package/dist/component-library/controlUtils-CNER0MvM.js +1 -0
  101. package/dist/component-library/ds-accordion.entry.js +1 -0
  102. package/dist/component-library/ds-button.entry.js +1 -0
  103. package/dist/component-library/ds-card.entry.js +1 -0
  104. package/dist/component-library/ds-checkbox-group.entry.js +1 -1
  105. package/dist/component-library/ds-checkbox.entry.js +1 -1
  106. package/dist/component-library/ds-icon.entry.js +1 -0
  107. package/dist/component-library/ds-input-validity.entry.js +1 -1
  108. package/dist/component-library/ds-link-with-arrow.entry.js +1 -1
  109. package/dist/component-library/ds-link.entry.js +1 -1
  110. package/dist/component-library/ds-radio-button-group.entry.js +1 -0
  111. package/dist/component-library/ds-radio-button.entry.js +1 -0
  112. package/dist/component-library/ds-spinner.entry.js +1 -0
  113. package/dist/component-library/ds-text-input.entry.js +1 -1
  114. package/dist/component-library/ds-visually-hidden.entry.js +1 -1
  115. package/dist/component-library/index-BfTCfPZ1.js +6 -0
  116. package/dist/component-library/index-Cm7V4EAn.js +2 -0
  117. package/dist/component-library/index-DuYjhvTn.js +1 -0
  118. package/dist/component-library/index.esm.js +1 -1
  119. package/dist/component-library/linkUtils-02nCfO0F.js +1 -0
  120. package/dist/component-library/utils-CqaqnfY4.js +1 -0
  121. package/dist/components/attributes.js +3 -3
  122. package/dist/components/controlUtils.js +35 -2
  123. package/dist/components/ds-accordion.js +58 -42
  124. package/dist/components/ds-button2.js +78 -39
  125. package/dist/components/ds-card.d.ts +11 -0
  126. package/dist/components/ds-card.js +91 -0
  127. package/dist/components/ds-checkbox-group.js +116 -56
  128. package/dist/components/ds-checkbox2.js +93 -80
  129. package/dist/components/ds-icon2.js +292 -292
  130. package/dist/components/ds-input-validity2.js +17 -14
  131. package/dist/components/ds-link-with-arrow.js +22 -22
  132. package/dist/components/ds-link.js +43 -40
  133. package/dist/components/ds-radio-button-group.d.ts +11 -0
  134. package/dist/components/ds-radio-button-group.js +185 -0
  135. package/dist/components/ds-radio-button.d.ts +11 -0
  136. package/dist/components/ds-radio-button.js +198 -0
  137. package/dist/components/ds-spinner.d.ts +11 -0
  138. package/dist/components/ds-spinner.js +6 -0
  139. package/dist/components/ds-spinner2.js +89 -0
  140. package/dist/components/ds-text-input.js +126 -104
  141. package/dist/components/ds-visually-hidden2.js +2 -3
  142. package/dist/components/index.js +208 -2
  143. package/dist/components/index2.js +713 -39
  144. package/dist/components/index3.js +69 -57
  145. package/dist/components/linkUtils.js +4 -2
  146. package/dist/docs.d.ts +443 -0
  147. package/dist/docs.json +4790 -0
  148. package/dist/esm/{utils-cfc536bc.js → attributes-BD_lNRxn.js} +3 -26
  149. package/dist/esm/component-library.js +6 -5
  150. package/dist/esm/controlUtils-CNER0MvM.js +37 -0
  151. package/dist/esm/ds-accordion.entry.js +77 -0
  152. package/dist/esm/ds-button.entry.js +105 -0
  153. package/dist/esm/ds-card.entry.js +56 -0
  154. package/dist/esm/ds-checkbox-group.entry.js +108 -46
  155. package/dist/esm/ds-checkbox.entry.js +78 -67
  156. package/dist/esm/ds-icon.entry.js +941 -0
  157. package/dist/esm/ds-input-validity.entry.js +14 -13
  158. package/dist/esm/ds-link-with-arrow.entry.js +21 -18
  159. package/dist/esm/ds-link.entry.js +34 -29
  160. package/dist/esm/ds-radio-button-group.entry.js +151 -0
  161. package/dist/esm/ds-radio-button.entry.js +149 -0
  162. package/dist/esm/ds-spinner.entry.js +60 -0
  163. package/dist/esm/ds-text-input.entry.js +88 -73
  164. package/dist/esm/ds-visually-hidden.entry.js +3 -4
  165. package/dist/esm/index-BfTCfPZ1.js +92 -0
  166. package/dist/esm/{index-434995e1.js → index-Cm7V4EAn.js} +699 -34
  167. package/dist/{components/store.js → esm/index-DuYjhvTn.js} +6 -3
  168. package/dist/esm/index.js +2 -2
  169. package/dist/esm/{linkUtils-3d1b28cf.js → linkUtils-02nCfO0F.js} +4 -2
  170. package/dist/esm/loader.js +4 -4
  171. package/dist/esm/utils-CqaqnfY4.js +25 -0
  172. package/dist/hydrate/index.d.ts +271 -0
  173. package/dist/hydrate/index.js +22280 -0
  174. package/dist/hydrate/index.mjs +22272 -0
  175. package/dist/hydrate/package.json +12 -0
  176. package/dist/styles/helpers.css +15 -0
  177. package/dist/styles/helpers.css.map +1 -0
  178. package/dist/styles/mixins/_breakpoints.scss +13 -0
  179. package/dist/styles/mixins/_focus.scss +26 -0
  180. package/dist/styles/mixins/_wrapper.scss +5 -0
  181. package/dist/styles/mixins/imports-default/_imports.scss +2 -0
  182. package/dist/styles/mixins/tokens/_breakpoints.scss +13 -0
  183. package/dist/styles/mixins/tokens/_semantic-colours.scss +75 -0
  184. package/dist/styles/mixins.scss +12 -0
  185. package/dist/styles/variables.css +176 -0
  186. package/dist/styles/variables.css.map +1 -0
  187. package/dist/types/components/01-base-components/ds-accordion/ds-accordion.d.ts +11 -8
  188. package/dist/types/components/01-base-components/ds-button/ds-button.d.ts +16 -11
  189. package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts +1 -0
  190. package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts +1 -0
  191. package/dist/types/components/01-base-components/ds-card/ds-card.d.ts +20 -0
  192. package/dist/types/components/01-base-components/ds-card/stories/ds-card.examples.stories.d.ts +8 -0
  193. package/dist/types/components/01-base-components/ds-card/stories/ds-card.features.stories.d.ts +8 -0
  194. package/dist/types/components/01-base-components/ds-card/stories/ds-card.stories.d.ts +7 -0
  195. package/dist/types/components/01-base-components/ds-checkbox/ds-checkbox.d.ts +21 -22
  196. package/dist/types/components/01-base-components/ds-checkbox-group/ds-checkbox-group.d.ts +21 -11
  197. package/dist/types/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.features.stories.d.ts +3 -0
  198. package/dist/types/components/01-base-components/ds-icon/ds-icon.d.ts +7 -5
  199. package/dist/types/components/01-base-components/ds-input-validity/ds-input-validity.d.ts +5 -6
  200. package/dist/types/components/01-base-components/ds-link/ds-link.d.ts +13 -14
  201. package/dist/types/components/01-base-components/ds-link/stories/ds-link.features.stories.d.ts +2 -0
  202. package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts +5 -7
  203. package/dist/types/components/01-base-components/ds-radio-button/ds-radio-button.d.ts +44 -0
  204. package/dist/types/components/01-base-components/ds-radio-button/stories/ds-radio-button.features.stories.d.ts +15 -0
  205. package/dist/types/components/01-base-components/ds-radio-button/stories/ds-radio-button.stories.d.ts +7 -0
  206. package/dist/types/components/01-base-components/ds-radio-button-group/ds-radio-button-group.d.ts +34 -0
  207. package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.examples.stories.d.ts +6 -0
  208. package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.d.ts +11 -0
  209. package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.d.ts +7 -0
  210. package/dist/types/components/01-base-components/ds-spinner/ds-spinner.d.ts +17 -0
  211. package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.examples.stories.d.ts +7 -0
  212. package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.features.stories.d.ts +7 -0
  213. package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.stories.d.ts +7 -0
  214. package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts +37 -32
  215. package/dist/types/components.d.ts +1287 -228
  216. package/dist/types/stencil-public-runtime.d.ts +22 -0
  217. package/dist/types/store.d.ts +6 -1
  218. package/dist/types/utils/attributes/attributes.d.ts +1 -1
  219. package/dist/types/utils/button/buttonUtils.d.ts +1 -0
  220. package/dist/types/utils/colours/colourTypes.d.ts +3 -3
  221. package/dist/types/utils/controls/controlUtils.d.ts +2 -0
  222. package/dist/types/utils/link/linkUtils.d.ts +1 -1
  223. package/dist/types/utils/spinner/spinnerUtils.d.ts +1 -0
  224. package/dist/types/utils/tests/testUtils.d.ts +1 -0
  225. package/dist/types/utils/utils.d.ts +2 -1
  226. package/package.json +40 -36
  227. package/dist/cjs/controlUtils-041de0fd.js +0 -7
  228. package/dist/cjs/ds-accordion_3.cjs.entry.js +0 -1095
  229. package/dist/cjs/index-5b0b9d4c.js +0 -82
  230. package/dist/component-library/controlUtils-9ca4087b.js +0 -1
  231. package/dist/component-library/ds-accordion_3.entry.js +0 -1
  232. package/dist/component-library/index-434995e1.js +0 -2
  233. package/dist/component-library/index-72ac5051.js +0 -6
  234. package/dist/component-library/linkUtils-3d1b28cf.js +0 -1
  235. package/dist/component-library/store-b8d17c10.js +0 -1
  236. package/dist/esm/controlUtils-9ca4087b.js +0 -4
  237. package/dist/esm/ds-accordion_3.entry.js +0 -1089
  238. package/dist/esm/index-72ac5051.js +0 -80
  239. package/dist/esm/store-b8d17c10.js +0 -204
  240. package/dist/loader/package.json +0 -11
  241. /package/dist/cjs/{app-globals-3a1e7e63.js → app-globals-V2Kpy_OQ.js} +0 -0
  242. /package/dist/component-library/{app-globals-0f993ce5.js → app-globals-DQuL1Twl.js} +0 -0
  243. /package/dist/esm/{app-globals-0f993ce5.js → app-globals-DQuL1Twl.js} +0 -0
@@ -0,0 +1,6 @@
1
+ function r(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var n,t,e={exports:{}},u=(n||(n=1,t=e,function(){var r={}.hasOwnProperty;function n(){for(var r="",n=0;n<arguments.length;n++){var t=arguments[n];t&&(r=u(r,e(t)))}return r}function e(t){if("string"==typeof t||"number"==typeof t)return t;if("object"!=typeof t)return"";if(Array.isArray(t))return n.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var e="";for(var f in t)r.call(t,f)&&t[f]&&(e=u(e,f));return e}function u(r,n){return n?r?r+" "+n:r+n:r}t.exports?(n.default=n,t.exports=n):window.classNames=n}()),e.exports),f=r(u);
2
+ /*!
3
+ Copyright (c) 2018 Jed Watson.
4
+ Licensed under the MIT License (MIT), see
5
+ http://jedwatson.github.io/classnames
6
+ */export{f as c}
@@ -0,0 +1,2 @@
1
+ var t=Object.defineProperty,e=(t=>(t.Undefined="undefined",t.Null="null",t.String="string",t.Number="number",t.SpecialNumber="number",t.Boolean="boolean",t.BigInt="bigint",t))(e||{}),n=(t=>(t.Array="array",t.Date="date",t.Map="map",t.Object="object",t.RegularExpression="regexp",t.Set="set",t.Channel="channel",t.Symbol="symbol",t))(n||{}),o="type",l="value",s="serialized:",r=(t,e)=>{var n;Object.entries(null!=(n=e.o.t)?n:{}).map((([n,[o]])=>{if(31&o||32&o){const o=t[n],l=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(t),n);Object.defineProperty(t,n,{get(){return l.get.call(this)},set(t){l.set.call(this,t)},configurable:!0,enumerable:!0}),t[n]=e.l.has(n)?e.l.get(n):o}}))},i=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},c=(t,e)=>{t.__stencil__getHostRef=()=>e,e.i=t,r(t,e)},u=(t,e)=>e in t,f=(t,e)=>(0,console.error)(t,e),a=new Map,d=new Map,p="s-id",h="sty-id",$="c-id",v="slot-fb{display:contents}slot-fb[hidden]{display:none}",m="http://www.w3.org/1999/xlink",y=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"],b="undefined"!=typeof window?window:{},g={u:0,p:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},w=t=>Promise.resolve(t),S=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),j=!1,O=[],k=[],x=(t,e)=>n=>{t.push(n),j||(j=!0,e&&4&g.u?N(E):g.raf(E))},C=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){f(t)}t.length=0},E=()=>{C(O),C(k),(j=O.length>0)&&g.raf(E)},N=t=>w().then(t),I=x(k,!0),M=t=>"object"==(t=typeof t)||"function"===t;function R(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}var L=class t{static fromLocalValue(e){const n=e[o],s=l in e?e[l]:void 0;switch(n){case"string":case"boolean":return s;case"bigint":return BigInt(s);case"undefined":return;case"null":return null;case"number":return"NaN"===s?NaN:"-0"===s?-0:"Infinity"===s?1/0:"-Infinity"===s?-1/0:s;case"array":return s.map((e=>t.fromLocalValue(e)));case"date":return new Date(s);case"map":const e=new Map;for(const[n,o]of s){const l="object"==typeof n&&null!==n?t.fromLocalValue(n):n,s=t.fromLocalValue(o);e.set(l,s)}return e;case"object":const o={};for(const[e,n]of s)o[e]=t.fromLocalValue(n);return o;case"regexp":const{pattern:l,flags:r}=s;return RegExp(l,r);case"set":const i=new Set;for(const e of s)i.add(t.fromLocalValue(e));return i;case"symbol":return Symbol(s);default:throw Error("Unsupported type: "+n)}}static fromLocalValueArray(e){return e.map((e=>t.fromLocalValue(e)))}static isLocalValueObject(t){if("object"!=typeof t||null===t)return!1;if(!t.hasOwnProperty(o))return!1;const s=t[o];return!!Object.values({...e,...n}).includes(s)&&("null"===s||"undefined"===s||t.hasOwnProperty(l))}};((e,n)=>{for(var o in n)t(e,o,{get:n[o],enumerable:!0})})({},{err:()=>P,map:()=>T,ok:()=>A,unwrap:()=>D,unwrapErr:()=>F});var A=t=>({isOk:!0,isErr:!1,value:t}),P=t=>({isOk:!1,isErr:!0,value:t});function T(t,e){if(t.isOk){const n=e(t.value);return n instanceof Promise?n.then((t=>A(t))):A(n)}if(t.isErr)return P(t.value);throw"should never get here"}var D=t=>{if(t.isOk)return t.value;throw t.value},F=t=>{if(t.isErr)return t.value;throw t.value},U=t=>{const e=J(t,"childNodes");t.tagName&&t.tagName.includes("-")&&t["s-cr"]&&"SLOT-FB"!==t.tagName&&W(e,t.tagName).forEach((t=>{1===t.nodeType&&"SLOT-FB"===t.tagName&&(t.hidden=!!V(t,H(t),!1).length)}));let n=0;for(n=0;n<e.length;n++){const t=e[n];1===t.nodeType&&J(t,"childNodes").length&&U(t)}};function W(t,e,n){let o,l=0,s=[];for(;l<t.length;l++)o=t[l],!o["s-sr"]||e&&o["s-hn"]!==e||void 0!==n||s.push(o),s=[...s,...W(o.childNodes,e,n)];return s}var V=(t,e,n=!0)=>{const o=[];(n&&t["s-sr"]||!t["s-sr"])&&o.push(t);let l=t;for(;l=l.nextSibling;)H(l)!==e||!n&&l["s-sr"]||o.push(l);return o},_=(t,e)=>1===t.nodeType?null===t.getAttribute("slot")&&""===e||t.getAttribute("slot")===e:t["s-sn"]===e||""===e,B=(t,e,n,o)=>{if(t["s-ol"]&&t["s-ol"].isConnected)return;const l=document.createTextNode("");if(l["s-nr"]=t,!e["s-cr"]||!e["s-cr"].parentNode)return;const s=e["s-cr"].parentNode,r=J(s,"appendChild");if(void 0!==o){l["s-oo"]=o;const t=J(s,"childNodes"),e=[l];t.forEach((t=>{t["s-nr"]&&e.push(t)})),e.sort(((t,e)=>!t["s-oo"]||t["s-oo"]<(e["s-oo"]||0)?-1:!e["s-oo"]||e["s-oo"]<t["s-oo"]?1:0)),e.forEach((t=>r.call(s,t)))}else r.call(s,l);t["s-ol"]=l,t["s-sh"]=e["s-hn"]},H=t=>"string"==typeof t["s-sn"]?t["s-sn"]:1===t.nodeType&&t.getAttribute("slot")||void 0;function z(t){if(t.assignedElements||t.assignedNodes||!t["s-sr"])return;const e=e=>function(t){const n=[],o=this["s-sn"];(null==t?void 0:t.flatten)&&console.error("\n Flattening is not supported for Stencil non-shadow slots. \n You can use `.childNodes` to nested slot fallback content.\n If you have a particular use case, please open an issue on the Stencil repo.\n ");const l=this["s-cr"].parentElement;return(l.__childNodes?l.childNodes:(t=>{const e=[];for(let n=0;n<t.length;n++){const o=t[n]["s-nr"]||void 0;o&&o.isConnected&&e.push(o)}return e})(l.childNodes)).forEach((t=>{o===H(t)&&n.push(t)})),e?n.filter((t=>1===t.nodeType)):n}.bind(t);t.assignedElements=e(!0),t.assignedNodes=e(!1)}function J(t,e){if("__"+e in t){const n=t["__"+e];return"function"!=typeof n?n:n.bind(t)}return"function"!=typeof t[e]?t[e]:t[e].bind(t)}var Y=(t,e,...n)=>{let o=null,l=null,s=null,r=!1,i=!1;const c=[],u=e=>{for(let n=0;n<e.length;n++)o=e[n],Array.isArray(o)?u(o):null!=o&&"boolean"!=typeof o&&((r="function"!=typeof t&&!M(o))&&(o+=""),r&&i?c[c.length-1].h+=o:c.push(r?q(null,o):o),i=r)};if(u(n),e){e.key&&(l=e.key),e.name&&(s=e.name);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}if("function"==typeof t)return t(null===e?{}:e,c,K);const f=q(t,null);return f.$=e,c.length>0&&(f.v=c),f.m=l,f.S=s,f},q=(t,e)=>({u:0,j:t,h:e,O:null,v:null,$:null,m:null,S:null}),G={},K={forEach:(t,e)=>t.map(Q).forEach(e),map:(t,e)=>t.map(Q).map(e).map(X)},Q=t=>({vattrs:t.$,vchildren:t.v,vkey:t.m,vname:t.S,vtag:t.j,vtext:t.h}),X=t=>{if("function"==typeof t.vtag){const e={...t.vattrs};return t.vkey&&(e.key=t.vkey),t.vname&&(e.name=t.vname),Y(t.vtag,e,...t.vchildren||[])}const e=q(t.vtag,t.vtext);return e.$=t.vattrs,e.v=t.vchildren,e.m=t.vkey,e.S=t.vname,e},Z=(t,e,n,o,l,s,r,i=[])=>{let c,u,f,a;const d=l["s-sc"];if(1===s.nodeType){if(c=s.getAttribute($),c&&(u=c.split("."),u[0]===r||"0"===u[0])){f=et({u:0,k:u[0],C:u[1],N:u[2],I:u[3],j:s.tagName.toLowerCase(),O:s,$:{class:s.className||""}}),e.push(f),s.removeAttribute($),t.v||(t.v=[]),d&&(s["s-si"]=d,f.$.class+=" "+d);const l=f.O.getAttribute("s-sn");"string"==typeof l&&("slot-fb"===f.j&&(nt(l,u[2],f,s,t,e,n,o,i),d&&s.classList.add(d)),f.O["s-sn"]=l,f.O.removeAttribute("s-sn")),void 0!==f.I&&(t.v[f.I]=f),t=f,o&&"0"===f.N&&(o[f.I]=f.O)}if(s.shadowRoot)for(a=s.shadowRoot.childNodes.length-1;a>=0;a--)Z(t,e,n,o,l,s.shadowRoot.childNodes[a],r,i);const p=s.__childNodes||s.childNodes;for(a=p.length-1;a>=0;a--)Z(t,e,n,o,l,p[a],r,i)}else if(8===s.nodeType)u=s.nodeValue.split("."),(u[1]===r||"0"===u[1])&&(c=u[0],f=et({k:u[1],C:u[2],N:u[3],I:u[4]||"0",O:s,$:null,v:null,m:null,S:null,j:null,h:null}),"t"===c?(f.O=lt(s,3),f.O&&3===f.O.nodeType&&(f.h=f.O.textContent,e.push(f),s.remove(),r===f.k&&(t.v||(t.v=[]),t.v[f.I]=f),o&&"0"===f.N&&(o[f.I]=f.O))):"c"===c?(f.O=lt(s,8),f.O&&8===f.O.nodeType&&(e.push(f),s.remove())):f.k===r&&("s"===c?nt(s["s-sn"]=u[5]||"",u[2],f,s,t,e,n,o,i):"r"===c&&(o?s.remove():(l["s-cr"]=s,s["s-cn"]=!0))));else if(t&&"style"===t.j){const e=q(null,s.textContent);e.O=s,e.I="0",t.v=[e]}else 3!==s.nodeType||s.wholeText.trim()||s.remove();return t},tt=(t,e)=>{if(1===t.nodeType){const n=t[p]||t.getAttribute(p);n&&e.set(n,t);let o=0;if(t.shadowRoot)for(;o<t.shadowRoot.childNodes.length;o++)tt(t.shadowRoot.childNodes[o],e);const l=t.__childNodes||t.childNodes;for(o=0;o<l.length;o++)tt(l[o],e)}else if(8===t.nodeType){const n=t.nodeValue.split(".");"o"===n[0]&&(e.set(n[1]+"."+n[2],t),t.nodeValue="",t["s-en"]=n[3])}},et=t=>({u:0,k:null,C:null,N:null,I:"0",O:null,$:null,v:null,m:null,S:null,j:null,h:null,...t});function nt(t,e,n,o,l,s,r,i,c){o["s-sr"]=!0,n.S=t||null,n.j="slot";const u=(null==l?void 0:l.O)?l.O["s-id"]||l.O.getAttribute("s-id"):"";if(i&&b.document){const s=n.O=b.document.createElement(n.j);n.S&&n.O.setAttribute("name",t),u&&u!==n.k?l.O.insertBefore(s,l.O.children[0]):o.parentNode.insertBefore(n.O,o),ot(c,e,t,o,n.k),o.remove(),"0"===n.N&&(i[n.I]=n.O)}else{const r=n.O,i=u&&u!==n.k&&l.O.shadowRoot;ot(c,e,t,o,i?u:n.k),z(o),i&&l.O.insertBefore(r,l.O.children[0]),s.push(n)}r.push(n),l.v||(l.v=[]),l.v[n.I]=n}var ot=(t,e,n,o,l)=>{let s=o.nextSibling;for(t[e]=t[e]||[];s&&((s.getAttribute&&s.getAttribute("slot")||s["s-sn"])===n||""===n&&!s["s-sn"]&&(8===s.nodeType&&1!==s.nodeValue.indexOf(".")||3===s.nodeType));)s["s-sn"]=n,t[e].push({slot:o,node:s,hostId:l}),s=s.nextSibling},lt=(t,e)=>{let n=t;do{n=n.nextSibling}while(n&&(n.nodeType!==e||!n.nodeValue));return n},st=t=>{const e=(t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"))(t);return RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${e}))(${e}\\b)`,"g")};st("::slotted"),st(":host"),st(":host-context");var rt,it,ct,ut=(t,e)=>{if("string"==typeof t&&(t.startsWith("{")&&t.endsWith("}")||t.startsWith("[")&&t.endsWith("]")))try{return JSON.parse(t)}catch(t){}return"string"==typeof t&&t.startsWith(s)?t=function(t){return"string"==typeof t&&t.startsWith(s)?L.fromLocalValue(JSON.parse(atob(t.slice(11)))):t}(t):null==t||M(t)?t:4&e?"false"!==t&&(""===t||!!t):2&e?"string"==typeof t?parseFloat(t):"number"==typeof t?t:NaN:1&e?t+"":t},ft=t=>i(t).$hostElement$,at=(t,e)=>{const n=ft(t);return{emit:t=>dt(n,e,{bubbles:!0,composed:!0,cancelable:!0,detail:t})}},dt=(t,e,n)=>{const o=g.ce(e,n);return t.dispatchEvent(o),o},pt=new WeakMap,ht=(t,e,n)=>{let o=d.get(t);S&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,d.set(t,o)},$t=(t,e)=>{var n;const o=vt(e),l=d.get(o);if(!b.document)return o;if(t=11===t.nodeType?t:b.document,l)if("string"==typeof l){let s,r=pt.get(t=t.head||t);if(r||pt.set(t,r=new Set),!r.has(o)){if(t.host&&(s=t.querySelector(`[${h}="${o}"]`)))s.innerHTML=l;else{s=document.querySelector(`[${h}="${o}"]`)||b.document.createElement("style"),s.innerHTML=l;const r=null!=(n=g.M)?n:R(b.document);if(null!=r&&s.setAttribute("nonce",r),!(1&e.u))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(s,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(S){const e=new CSSStyleSheet;e.replaceSync(l),t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.innerHTML=l+e.innerHTML:t.prepend(s)}else t.append(s);1&e.u&&t.insertBefore(s,null)}4&e.u&&(s.innerHTML+=v),r&&r.add(o)}}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return o},vt=t=>"sc-"+t.R,mt=t=>t.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g,"$1{"),yt=(t,e,n,o,l,s,r)=>{if(n===o)return;let i=u(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,l=gt(n);let s=gt(o);t["s-si"]&&r?(s.push(t["s-si"]),l.forEach((e=>{e.startsWith(t["s-si"])&&s.push(e)})),s=[...new Set(s)],e.add(...s)):(e.remove(...l.filter((t=>t&&!s.includes(t)))),e.add(...s.filter((t=>t&&!l.includes(t)))))}else if("style"===e){for(const e in n)o&&null!=o[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in o)n&&o[e]===n[e]||(e.includes("-")?t.style.setProperty(e,o[e]):t.style[e]=o[e])}else if("key"===e);else if("ref"===e)o&&o(t);else if(i||"o"!==e[0]||"n"!==e[1]){const r=M(o);if((i||r&&null!==o)&&!l)try{if(t.tagName.includes("-"))t[e]!==o&&(t[e]=o);else{const l=null==o?"":o;"list"===e?i=!1:null!=n&&t[e]==l||("function"==typeof t.__lookupSetter__(e)?t[e]=l:t.setAttribute(e,l))}}catch(t){}let u=!1;c!==(c=c.replace(/^xlink\:?/,""))&&(e=c,u=!0),null==o||!1===o?!1===o&&""!==t.getAttribute(e)||(u?t.removeAttributeNS(m,e):t.removeAttribute(e)):(!i||4&s||l)&&!r&&1===t.nodeType&&(o=!0===o?"":o,u?t.setAttributeNS(m,e,o):t.setAttribute(e,o))}else if(e="-"===e[2]?e.slice(3):u(b,c)?c.slice(2):c[2]+e.slice(3),n||o){const l=e.endsWith(wt);e=e.replace(St,""),n&&g.rel(t,e,n,l),o&&g.ael(t,e,o,l)}},bt=/\s/,gt=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(bt):[]),wt="Capture",St=RegExp(wt+"$"),jt=(t,e,n,o)=>{const l=11===e.O.nodeType&&e.O.host?e.O.host:e.O,s=t&&t.$||{},r=e.$||{};for(const t of Ot(Object.keys(s)))t in r||yt(l,t,s[t],void 0,n,e.u,o);for(const t of Ot(Object.keys(r)))yt(l,t,s[t],r[t],n,e.u,o)};function Ot(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var kt=!1,xt=!1,Ct=!1,Et=!1,Nt=(t,e,n)=>{var o;const l=e.v[n];let s,r,i,c=0;if(kt||(Ct=!0,"slot"===l.j&&(l.u|=l.v?2:1)),null!==l.h)s=l.O=b.document.createTextNode(l.h);else if(1&l.u)s=l.O=b.document.createTextNode(""),jt(null,l,Et);else{if(Et||(Et="svg"===l.j),!b.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.");if(s=l.O=b.document.createElementNS(Et?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",!kt&&2&l.u?"slot-fb":l.j),Et&&"foreignObject"===l.j&&(Et=!1),jt(null,l,Et),null!=rt&&void 0!==rt&&s["s-si"]!==rt&&s.classList.add(s["s-si"]=rt),l.v)for(c=0;c<l.v.length;++c)r=Nt(t,l,c),r&&s.appendChild(r);"svg"===l.j?Et=!1:"foreignObject"===s.tagName&&(Et=!0)}return s["s-hn"]=ct,3&l.u&&(s["s-sr"]=!0,s["s-cr"]=it,s["s-sn"]=l.S||"",s["s-rf"]=null==(o=l.$)?void 0:o.ref,z(s),i=t&&t.v&&t.v[n],i&&i.j===l.j&&t.O&&It(t.O,!1),Wt(it,s,e.O,null==t?void 0:t.O)),s},It=(t,e)=>{g.u|=1;const n=Array.from(t.__childNodes||t.childNodes);for(let t=n.length-1;t>=0;t--){const o=n[t];o["s-hn"]!==ct&&o["s-ol"]&&(Ut(At(o).parentNode,o,At(o)),o["s-ol"].remove(),o["s-ol"]=void 0,o["s-sh"]=void 0,Ct=!0),e&&It(o,e)}g.u&=-2},Mt=(t,e,n,o,l,s)=>{let r,i=t["s-cr"]&&t["s-cr"].parentNode||t;for(i.shadowRoot&&i.tagName===ct&&(i=i.shadowRoot);l<=s;++l)o[l]&&(r=Nt(null,n,l),r&&(o[l].O=r,Ut(i,r,At(e))))},Rt=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.O;Ft(e),t&&(xt=!0,t["s-ol"]?t["s-ol"].remove():It(t,!0),t.remove())}}},Lt=(t,e,n=!1)=>t.j===e.j&&("slot"===t.j?t.S===e.S:n?(n&&!t.m&&e.m&&(t.m=e.m),!0):t.m===e.m),At=t=>t&&t["s-ol"]||t,Pt=(t,e,n=!1)=>{const o=e.O=t.O,l=t.v,s=e.v,r=e.j,i=e.h;let c;null===i?(jt(t,e,Et="svg"===r||"foreignObject"!==r&&Et,n),null!==l&&null!==s?((t,e,n,o,l=!1)=>{let s,r,i=0,c=0,u=0,f=0,a=e.length-1,d=e[0],p=e[a],h=o.length-1,$=o[0],v=o[h];for(;i<=a&&c<=h;)if(null==d)d=e[++i];else if(null==p)p=e[--a];else if(null==$)$=o[++c];else if(null==v)v=o[--h];else if(Lt(d,$,l))Pt(d,$,l),d=e[++i],$=o[++c];else if(Lt(p,v,l))Pt(p,v,l),p=e[--a],v=o[--h];else if(Lt(d,v,l))"slot"!==d.j&&"slot"!==v.j||It(d.O.parentNode,!1),Pt(d,v,l),Ut(t,d.O,p.O.nextSibling),d=e[++i],v=o[--h];else if(Lt(p,$,l))"slot"!==d.j&&"slot"!==v.j||It(p.O.parentNode,!1),Pt(p,$,l),Ut(t,p.O,d.O),p=e[--a],$=o[++c];else{for(u=-1,f=i;f<=a;++f)if(e[f]&&null!==e[f].m&&e[f].m===$.m){u=f;break}u>=0?(r=e[u],r.j!==$.j?s=Nt(e&&e[c],n,u):(Pt(r,$,l),e[u]=void 0,s=r.O),$=o[++c]):(s=Nt(e&&e[c],n,c),$=o[++c]),s&&Ut(At(d.O).parentNode,s,At(d.O))}i>a?Mt(t,null==o[h+1]?null:o[h+1].O,n,o,c,h):c>h&&Rt(e,i,a)})(o,l,e,s,n):null!==s?(null!==t.h&&(o.textContent=""),Mt(o,null,e,s,0,s.length-1)):!n&&null!==l&&Rt(l,0,l.length-1),Et&&"svg"===r&&(Et=!1)):(c=o["s-cr"])?c.parentNode.textContent=i:t.h!==i&&(o.data=i)},Tt=[],Dt=t=>{let e,n,o;const l=t.__childNodes||t.childNodes;for(const t of l){if(t["s-sr"]&&(e=t["s-cr"])&&e.parentNode){n=e.parentNode.__childNodes||e.parentNode.childNodes;const l=t["s-sn"];for(o=n.length-1;o>=0;o--)if(e=n[o],!e["s-cn"]&&!e["s-nr"]&&e["s-hn"]!==t["s-hn"])if(_(e,l)){let n=Tt.find((t=>t.L===e));xt=!0,e["s-sn"]=e["s-sn"]||l,n?(n.L["s-sh"]=t["s-hn"],n.A=t):(e["s-sh"]=t["s-hn"],Tt.push({A:t,L:e})),e["s-sr"]&&Tt.map((t=>{_(t.L,e["s-sn"])&&(n=Tt.find((t=>t.L===e)),n&&!t.A&&(t.A=n.A))}))}else Tt.some((t=>t.L===e))||Tt.push({L:e})}1===t.nodeType&&Dt(t)}},Ft=t=>{t.$&&t.$.ref&&t.$.ref(null),t.v&&t.v.map(Ft)},Ut=(t,e,n)=>("string"==typeof e["s-sn"]&&e["s-sr"]&&e["s-cr"]&&Wt(e["s-cr"],e,t,e.parentElement),null==t?void 0:t.insertBefore(e,n));function Wt(t,e,n,o){var l,s;let r;if(t&&"string"==typeof e["s-sn"]&&e["s-sr"]&&t.parentNode&&t.parentNode["s-sc"]&&(r=e["s-si"]||t.parentNode["s-sc"])){const t=e["s-sn"],i=e["s-hn"];if(null==(l=n.classList)||l.add(r+"-s"),o&&(null==(s=o.classList)?void 0:s.contains(r+"-s"))){let e=(o.__childNodes||o.childNodes)[0],n=!1;for(;e;){if(e["s-sn"]!==t&&e["s-hn"]===i&&e["s-sr"]){n=!0;break}e=e.nextSibling}n||o.classList.remove(r+"-s")}}}var Vt=(t,e)=>{if(e&&!t.P&&e["s-p"]){const n=e["s-p"].push(new Promise((o=>t.P=()=>{e["s-p"].splice(n-1,1),o()})))}},_t=(t,e)=>{if(t.u|=16,!(4&t.u))return Vt(t,t.T),I((()=>Bt(t,e)));t.u|=512},Bt=(t,e)=>{const n=t.$hostElement$,o=t.i;if(!o)throw Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return e?(t.u|=256,t.D&&(t.D.map((([t,e])=>Zt(o,t,e,n))),t.D=void 0),l=Zt(o,"componentWillLoad",void 0,n)):l=Zt(o,"componentWillUpdate",void 0,n),l=Ht(l,(()=>Zt(o,"componentWillRender",void 0,n))),Ht(l,(()=>Jt(t,o,e)))},Ht=(t,e)=>zt(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),zt=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,Jt=async(t,e,n)=>{var o;const l=t.$hostElement$,s=l["s-rc"];n&&(t=>{const e=t.o,n=t.$hostElement$,o=e.u,l=$t(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&o&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(t);qt(t,e,l,n),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>Kt(t);0===e.length?n():(Promise.all(e).then(n),t.u|=4,e.length=0)}},Yt=null,qt=(t,e,n,o)=>{try{Yt=e,e=e.render(),t.u&=-17,t.u|=2,((t,e,n=!1)=>{var o,l,s,r;const i=t.$hostElement$,c=t.o,u=t.F||q(null,null),f=(t=>t&&t.j===G)(e)?e:Y(null,null,e);if(ct=i.tagName,n&&f.$)for(const t of Object.keys(f.$))i.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(f.$[t]=i[t]);if(f.j=null,f.u|=4,t.F=f,f.O=u.O=i.shadowRoot||i,rt=i["s-sc"],kt=!(!(1&c.u)||128&c.u),it=i["s-cr"],xt=!1,Pt(u,f,n),g.u|=1,Ct){Dt(f.O);for(const t of Tt){const e=t.L;if(!e["s-ol"]&&b.document){const t=b.document.createTextNode("");t["s-nr"]=e,Ut(e.parentNode,e["s-ol"]=t,e)}}for(const t of Tt){const e=t.L,i=t.A;if(i){const t=i.parentNode;let n=i.nextSibling;{let s=null==(o=e["s-ol"])?void 0:o.previousSibling;for(;s;){let o=null!=(l=s["s-nr"])?l:null;if(o&&o["s-sn"]===e["s-sn"]&&t===(o.__parentNode||o.parentNode)){for(o=o.nextSibling;o===e||(null==o?void 0:o["s-sr"]);)o=null==o?void 0:o.nextSibling;if(!o||!o["s-nr"]){n=o;break}}s=s.previousSibling}}(!n&&t!==(e.__parentNode||e.parentNode)||(e.__nextSibling||e.nextSibling)!==n)&&e!==n&&(!e["s-hn"]&&e["s-ol"]&&(e["s-hn"]=e["s-ol"].parentNode.nodeName),Ut(t,e,n),1===e.nodeType&&"SLOT-FB"!==e.tagName&&(e.hidden=null!=(s=e["s-ih"])&&s)),e&&"function"==typeof i["s-rf"]&&i["s-rf"](i)}else 1===e.nodeType&&(n&&(e["s-ih"]=null!=(r=e.hidden)&&r),e.hidden=!0)}}xt&&U(f.O),g.u&=-2,Tt.length=0,it=void 0})(t,e,o)}catch(e){f(e,t.$hostElement$)}return Yt=null,null},Gt=()=>Yt,Kt=t=>{const e=t.$hostElement$,n=t.i,o=t.T;Zt(n,"componentDidRender",void 0,e),64&t.u?Zt(n,"componentDidUpdate",void 0,e):(t.u|=64,te(e),Zt(n,"componentDidLoad",void 0,e),t.U(e),o||Xt()),t.W(e),t.P&&(t.P(),t.P=void 0),512&t.u&&N((()=>_t(t,!1))),t.u&=-517},Qt=t=>{{const e=i(t),n=e.$hostElement$.isConnected;return n&&2==(18&e.u)&&_t(e,!1),n}},Xt=()=>{N((()=>dt(b,"appload",{detail:{namespace:"component-library"}})))},Zt=(t,e,n,o)=>{if(t&&t[e])try{return t[e](n)}catch(t){f(t,o)}},te=t=>t.classList.add("hydrated"),ee=(t,e,n,o)=>{const l=i(t);if(!l)throw Error(`Couldn't find host element for "${o.R}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);const s=l.$hostElement$,r=l.l.get(e),c=l.u,u=l.i;if(n=ut(n,o.t[e][0]),(!(8&c)||void 0===r)&&n!==r&&(!Number.isNaN(r)||!Number.isNaN(n))&&(l.l.set(e,n),u)){if(o.V&&128&c){const t=o.V[e];t&&t.map((t=>{try{u[t](n,r,e)}catch(t){f(t,s)}}))}if(2==(18&c)){if(u.componentShouldUpdate&&!1===u.componentShouldUpdate(n,r,e))return;_t(l,!1)}}},ne=(t,e,n)=>{var o,l;const s=t.prototype;if(64&e.u&&1&n&&y.forEach((t=>{Object.defineProperty(s,t,{value(...e){const n=i(this),o=n.i;if(o){const n=o[t];"function"==typeof n&&n.call(o,...e)}else n._.then((n=>{const o=n[t];"function"==typeof o&&o.call(n,...e)}))}})})),e.t||e.V||t.watchers){t.watchers&&!e.V&&(e.V=t.watchers);const r=Object.entries(null!=(o=e.t)?o:{});if(r.map((([t,[o]])=>{if(31&o||2&n&&32&o){const{get:l,set:r}=Object.getOwnPropertyDescriptor(s,t)||{};l&&(e.t[t][0]|=2048),r&&(e.t[t][0]|=4096),(1&n||!l)&&Object.defineProperty(s,t,{get(){{if(!(2048&e.t[t][0]))return((t,e)=>i(this).l.get(e))(0,t);const n=i(this),o=n?n.i:s;if(!o)return;return o[t]}},configurable:!0,enumerable:!0}),Object.defineProperty(s,t,{set(l){const s=i(this);if(r){const n=32&o?this[t]:s.$hostElement$[t];return void 0===n&&s.l.get(t)?l=s.l.get(t):!s.l.get(t)&&n&&s.l.set(t,n),r.call(this,ut(l,o)),void ee(this,t,l=32&o?this[t]:s.$hostElement$[t],e)}{if(!(1&n&&4096&e.t[t][0]))return ee(this,t,l,e),void(1&n&&!s.i&&s._.then((()=>{4096&e.t[t][0]&&s.i[t]!==s.l.get(t)&&(s.i[t]=l)})));const r=()=>{const n=s.i[t];!s.l.get(t)&&n&&s.l.set(t,n),s.i[t]=ut(l,o),ee(this,t,s.i[t],e)};s.i?r():s._.then((()=>r()))}}})}else 1&n&&64&o&&Object.defineProperty(s,t,{value(...e){var n;const o=i(this);return null==(n=null==o?void 0:o.B)?void 0:n.then((()=>{var n;return null==(n=o.i)?void 0:n[t](...e)}))}})})),1&n){const n=new Map;s.attributeChangedCallback=function(t,o,l){g.jmp((()=>{var r;const c=n.get(t);if(this.hasOwnProperty(c))l=this[c],delete this[c];else{if(s.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==l)return;if(null==c){const n=i(this),s=null==n?void 0:n.u;if(s&&!(8&s)&&128&s&&l!==o){const s=n.i,i=null==(r=e.V)?void 0:r[t];null==i||i.forEach((e=>{null!=s[e]&&s[e].call(s,l,o,t)}))}return}}const u=Object.getOwnPropertyDescriptor(s,c);(l=(null!==l||"boolean"!=typeof this[c])&&l)===this[c]||u.get&&!u.set||(this[c]=l)}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(l=e.V)?l:{}),...r.filter((([t,e])=>15&e[0])).map((([t,e])=>{const o=e[1]||t;return n.set(o,t),o}))]))}}return t},oe=(t,e)=>{Zt(t,"connectedCallback",void 0,e)},le=t=>{if(!(1&g.u)){const e=i(t),n=e.o,o=()=>{};if(1&e.u)ue(t,e,n.H),(null==e?void 0:e.i)?oe(e.i,t):(null==e?void 0:e._)&&e._.then((()=>oe(e.i,t)));else{let o;if(e.u|=1,o=t.getAttribute(p),o){if(1&n.u){const e=$t(t.shadowRoot,n);t.classList.remove(e+"-h",e+"-s")}else if(2&n.u){const e=vt(n);t["s-sc"]=e}((t,e,n,o)=>{var l;const s=t.shadowRoot,r=[],i=[],c=[],u=s?[]:null,f=q(e,null);let a;f.O=t,Object.entries((null==(l=o.o)?void 0:l.t)||{}).forEach((([e,[n,l]])=>{var s;if(!(31&n))return;const r=t.getAttribute(l||e);if(null!==r){const t=ut(r,n);null==(s=null==o?void 0:o.l)||s.set(e,t)}}));{const e=o.o;e&&10&e.u&&t["s-sc"]?(a=t["s-sc"],t.classList.add(a+"-h")):t["s-sc"]&&delete t["s-sc"]}!b.document||g.J&&g.J.size||tt(b.document.body,g.J=new Map),t[p]=n,t.removeAttribute(p),o.F=Z(f,r,i,u,t,t,n,c);let d=0;const h=r.length;let $;for(;d<h;d++){$=r[d];const n=$.k+"."+$.C,o=g.J.get(n),l=$.O;s||(l["s-hn"]=e.toUpperCase(),"slot"===$.j&&(l["s-cr"]=t["s-cr"])),"slot"===$.j&&($.S=$.O["s-sn"]||$.O.name||null,$.v?($.u|=2,$.O.childNodes.length||$.v.forEach((t=>{$.O.appendChild(t.O)}))):$.u|=1),o&&o.isConnected&&(s&&""===o["s-en"]&&o.parentNode.insertBefore(l,o.nextSibling),o.parentNode.removeChild(o),s||(l["s-oo"]=parseInt($.C))),g.J.delete(n)}const v=[],m=c.length;let y,w,S,j,O=0;for(;O<m;O++)if(y=c[O],y&&y.length)for(S=y.length,w=0;w<S;w++){if(j=y[w],v[j.hostId]||(v[j.hostId]=g.J.get(j.hostId)),!v[j.hostId])continue;const t=v[j.hostId];t.shadowRoot&&s||(j.slot["s-cr"]=t["s-cr"],j.slot["s-cr"]=!j.slot["s-cr"]&&t.shadowRoot?t:(t.__childNodes||t.childNodes)[0],B(j.node,j.slot,0,j.node["s-oo"])),t.shadowRoot&&j.node.parentElement!==t&&t.appendChild(j.node)}if(a&&i.length&&i.forEach((t=>{t.O.parentElement.classList.add(a+"-s")})),s&&!s.childNodes.length){let e=0;const n=u.length;if(n){for(;e<n;e++)s.appendChild(u[e]);Array.from(t.childNodes).forEach((t=>{"string"!=typeof t["s-sn"]&&(1===t.nodeType&&t.slot&&t.hidden?t.removeAttribute("hidden"):(8===t.nodeType||3===t.nodeType&&!t.wholeText.trim())&&t.parentNode.removeChild(t))}))}}g.J.delete(t["s-id"]),o.$hostElement$=t})(t,n.R,o,e)}o||12&n.u&&se(t);{let n=t;for(;n=n.parentNode||n.host;)if(1===n.nodeType&&n.hasAttribute("s-id")&&n["s-p"]||n["s-p"]){Vt(e,e.T=n);break}}n.t&&Object.entries(n.t).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let o;if(!(32&e.u)){if(e.u|=32,n.Y){const l=((t,e)=>{const n=t.R.replace(/-/g,"_"),o=t.Y;if(!o)return;const l=a.get(o);return l?l[n]:import(`./${o}.entry.js`).then((t=>(a.set(o,t),t[n])),(t=>{f(t,e.$hostElement$)}))
2
+ /*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n,e);if(l&&"then"in l){const t=()=>{};o=await l,t()}else o=l;if(!o)throw Error(`Constructor for "${n.R}#${e.q}" was not found`);o.isProxied||(n.V=o.watchers,ne(o,n,2),o.isProxied=!0);const s=()=>{};e.u|=8;try{new o(e)}catch(e){f(e,t)}e.u&=-9,e.u|=128,s(),oe(e.i,t)}else o=t.constructor,customElements.whenDefined(t.localName).then((()=>e.u|=128));if(o&&o.style){let t;"string"==typeof o.style&&(t=o.style);const e=vt(n);if(!d.has(e)){const o=()=>{};ht(e,t,!!(1&n.u)),o()}}}const l=e.T,s=()=>_t(e,!0);l&&l["s-rc"]?l["s-rc"].push(s):s()})(t,e,n)}o()}},se=t=>{if(!b.document)return;const e=t["s-cr"]=b.document.createComment("");e["s-cn"]=!0,Ut(t,e,t.firstChild)},re=(t,e)=>{Zt(t,"disconnectedCallback",void 0,e||t)},ie=(t,e={})=>{var n;if(!b.document)return void console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");const o=[],l=e.exclude||[],s=b.customElements,r=b.document.head,c=r.querySelector("meta[charset]"),u=b.document.createElement("style"),f=[];let a,d=!0;Object.assign(g,e),g.p=new URL(e.resourcesUrl||"./",b.document.baseURI).href,g.u|=2,(()=>{if(!b.document)return;const t=b.document.querySelectorAll(`[${h}]`);let e=0;for(;e<t.length;e++)ht(t[e].getAttribute(h),mt(t[e].innerHTML),!0)})();let p=!1;if(t.map((t=>{t[1].map((e=>{var n;const r={u:e[0],R:e[1],t:e[2],H:e[3]};4&r.u&&(p=!0),r.t=e[2],r.H=e[3],r.V=null!=(n=e[4])?n:{};const c=r.R,u=class extends HTMLElement{constructor(t){if(super(t),this.hasRegisteredEventListeners=!1,((t,e)=>{const n={u:0,$hostElement$:t,o:e,l:new Map};n.B=new Promise((t=>n.W=t)),n._=new Promise((t=>n.U=t)),t["s-p"]=[],t["s-rc"]=[];const o=n;t.__stencil__getHostRef=()=>o})(t=this,r),1&r.u)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${r.R}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else t.attachShadow({mode:"open"})}connectedCallback(){const t=i(this);this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0,ue(this,t,r.H)),a&&(clearTimeout(a),a=null),d?f.push(this):g.jmp((()=>le(this)))}disconnectedCallback(){g.jmp((()=>(async t=>{if(!(1&g.u)){const e=i(t);e.G&&(e.G.map((t=>t())),e.G=void 0),(null==e?void 0:e.i)?re(e.i,t):(null==e?void 0:e._)&&e._.then((()=>re(e.i,t)))}pt.has(t)&&pt.delete(t),t.shadowRoot&&pt.has(t.shadowRoot)&&pt.delete(t.shadowRoot)})(this))),g.raf((()=>{var t;const e=i(this),n=f.findIndex((t=>t===this));n>-1&&f.splice(n,1),(null==(t=null==e?void 0:e.F)?void 0:t.O)instanceof Node&&!e.F.O.isConnected&&delete e.F.O}))}componentOnReady(){return i(this)._}};64&r.u&&(u.formAssociated=!0),r.Y=t[0],l.includes(c)||s.get(c)||(o.push(c),s.define(c,ne(u,r,1)))}))})),o.length>0&&(p&&(u.textContent+=v),u.textContent+=o.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",u.innerHTML.length)){u.setAttribute("data-styles","");const t=null!=(n=g.M)?n:R(b.document);null!=t&&u.setAttribute("nonce",t),r.insertBefore(u,c?c.nextSibling:r.firstChild)}d=!1,f.length?f.map((t=>t.connectedCallback())):g.jmp((()=>a=setTimeout(Xt,30)))},ce=(t,e)=>e,ue=(t,e,n)=>{n&&b.document&&n.map((([n,o,l])=>{const s=ae(b.document,t,n),r=fe(e,l),i=de(n);g.ael(s,o,r,i),(e.G=e.G||[]).push((()=>g.rel(s,o,r,i)))}))},fe=(t,e)=>n=>{var o;try{256&t.u?null==(o=t.i)||o[e](n):(t.D=t.D||[]).push([e,n])}catch(e){f(e,t.$hostElement$)}},ae=(t,e,n)=>4&n?t:e,de=t=>({passive:!!(1&t),capture:!!(2&t)}),pe=t=>g.M=t;export{ce as F,G as H,Gt as a,ie as b,at as c,Qt as f,ft as g,Y as h,w as p,c as r,pe as s}
@@ -0,0 +1 @@
1
+ import{a as e,f as t}from"./index-Cm7V4EAn.js";const n=e=>!("isConnected"in e)||e.isConnected,s=(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout((()=>{e=0,(e=>{for(let t of e.keys())e.set(t,e.get(t).filter(n))})(...t)}),2e3)}})(),o=e=>"function"==typeof e?e():e,r={validation:"client",language:"en"},{state:a,set:i}=(()=>{const n=((e,t=(e,t)=>e!==t)=>{const n=o(e);let s=new Map(Object.entries(n??{}));const r={dispose:[],get:[],set:[],reset:[]},a=()=>{s=new Map(Object.entries(o(e)??{})),r.reset.forEach((e=>e()))},i=e=>(r.get.forEach((t=>t(e))),s.get(e)),c=(e,n)=>{const o=s.get(e);t(n,o,e)&&(s.set(e,n),r.set.forEach((t=>t(e,n,o))))},u="undefined"==typeof Proxy?{}:new Proxy(n,{get:(e,t)=>i(t),ownKeys:()=>Array.from(s.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(e,t)=>s.has(t),set:(e,t,n)=>(c(t,n),!0)}),g=(e,t)=>(r[e].push(t),()=>{((e,t)=>{const n=e.indexOf(t);n>=0&&(e[n]=e[e.length-1],e.length--)})(r[e],t)});return{state:u,get:i,set:c,on:g,onChange:(t,n)=>{const s=g("set",((e,s)=>{e===t&&n(s)})),r=g("reset",(()=>n(o(e)[t])));return()=>{s(),r()}},use:(...e)=>{const t=e.reduce(((e,t)=>(t.set&&e.push(g("set",t.set)),t.get&&e.push(g("get",t.get)),t.reset&&e.push(g("reset",t.reset)),t.dispose&&e.push(g("dispose",t.dispose)),e)),[]);return()=>t.forEach((e=>e()))},dispose:()=>{r.dispose.forEach((e=>e())),a()},reset:a,forceUpdate:e=>{const t=s.get(e);r.set.forEach((n=>n(e,t,t)))}}})({...r},void 0);return n.use((()=>{if("function"!=typeof e)return{};const n=new Map;return{dispose:()=>n.clear(),get:t=>{const s=e();s&&((e,t,n)=>{const s=e.get(t);s?s.includes(n)||s.push(n):e.set(t,[n])})(n,t,s)},set:e=>{const o=n.get(e);o&&n.set(e,o.filter(t)),s(n)},reset:()=>{n.forEach((e=>e.forEach(t))),s(n)}}})()),n})(),c=e=>a.validation===e,u=()=>a.language,g=({validation:e,language:t})=>{i("validation",e||r.validation),i("language",t||r.language)};export{g as c,u as g,c as i}
@@ -1 +1 @@
1
- export{c as configure}from"./store-b8d17c10.js";import"./index-434995e1.js";
1
+ export{c as configure}from"./index-DuYjhvTn.js";import"./index-Cm7V4EAn.js";
@@ -0,0 +1 @@
1
+ import{g as e}from"./index-DuYjhvTn.js";const n=e=>"_blank"===e,t=()=>{switch(e()){case"fi":return"Avautuu uuteen välilehteen";case"sv":return"Öppnas i en ny flik";default:return"Opens in a new tab"}};export{n as o,t as v}
@@ -0,0 +1 @@
1
+ const s=s=>s.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w-]+/g,"").replace(/--+/g,"-").replace(/^-+/,"").replace(/-+$/,""),r=s=>{const r=parseFloat(s);return(t=""+16*r).endsWith("px")?t:`${t}px`;var t};function*t(s){let r=1;for(;;)yield`${s}-${r++}`}export{t as i,r,s}
@@ -72,8 +72,8 @@ const inheritAriaAttributes = (el, ignoreList) => {
72
72
  }
73
73
  return inheritSpecifiedAttributes(el, attributesToInherit);
74
74
  };
75
- const inheritAttributes = (component, elem) => {
76
- const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes]);
75
+ const inheritAttributes = (component, elem, attrsToIgnore = []) => {
76
+ const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes, ...attrsToIgnore]);
77
77
  const propsToIgnore = new Set(Object.keys(component));
78
78
  const attributes = {};
79
79
  for (const attr of elem.attributes) {
@@ -84,4 +84,4 @@ const inheritAttributes = (component, elem) => {
84
84
  return attributes;
85
85
  };
86
86
 
87
- export { inheritSpecifiedAttributes as a, inheritAttributes as b, inheritAriaAttributes as i };
87
+ export { inheritAriaAttributes as a, inheritSpecifiedAttributes as b, inheritAttributes as i };
@@ -1,4 +1,37 @@
1
- const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
1
+ import { g as getLanguage } from './index.js';
2
+
3
+ const getOptionalText = (text, optionalText) => {
4
+ let defaultText = '(optional)';
5
+ switch (getLanguage()) {
6
+ case 'fi':
7
+ defaultText = '(valinnainen)';
8
+ break;
9
+ case 'sv':
10
+ defaultText = '(valfritt)';
11
+ break;
12
+ }
13
+ return [text, optionalText || defaultText].join(' ');
14
+ };
2
15
  const getRequiredText = (text) => [text, '*'].join(' ');
16
+ const atLeastOneOption = () => {
17
+ switch (getLanguage()) {
18
+ case 'fi':
19
+ return 'Valitse vähintään yksi vaihtoehto.';
20
+ case 'sv':
21
+ return 'Vänligen välj minst ett alternativ.';
22
+ default:
23
+ return 'Please select at least one option.';
24
+ }
25
+ };
26
+ const allOptions = () => {
27
+ switch (getLanguage()) {
28
+ case 'fi':
29
+ return 'Valitse kaikki vaihtoehdot.';
30
+ case 'sv':
31
+ return 'Vänligen välj alla alternativ.';
32
+ default:
33
+ return 'Please select all options.';
34
+ }
35
+ };
3
36
 
4
- export { getOptionalText as a, getRequiredText as g };
37
+ export { getOptionalText as a, atLeastOneOption as b, allOptions as c, getRequiredText as g };
@@ -1,31 +1,35 @@
1
- import { p as proxyCustomElement, H, h } from './index2.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
2
2
  import { c as classNames } from './index3.js';
3
- import { d as defineCustomElement$3 } from './ds-button2.js';
4
- import { d as defineCustomElement$2 } from './ds-icon2.js';
3
+ import { d as defineCustomElement$5 } from './ds-button2.js';
4
+ import { d as defineCustomElement$4 } from './ds-icon2.js';
5
+ import { d as defineCustomElement$3 } from './ds-spinner2.js';
6
+ import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
5
7
 
6
- const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-textColor-default)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
7
- const DsAccordionStyle0 = dsAccordionCss;
8
+ const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-palette-black-95);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-palette-black-95);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-overlay-black-10)}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-overlay-black-15)}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button:not(.ds-accordion--hide-bottom-border)[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);padding-inline:var(--ds-spacing-small)}.ds-accordion__panel--expanded.ds-accordion__panel--hide-bottom-border{border-bottom:0}::slotted([slot=header]){color:var(--ds-palette-black-95)}.ds-accordion__content{color:var(--ds-palette-black-95);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
8
9
 
9
10
  const DsAccordion$1 = proxyCustomElement(class DsAccordion extends H {
10
11
  constructor() {
11
12
  super();
12
13
  this.__registerHost();
13
14
  this.__attachShadow();
15
+ this.dsToggle = createEvent(this, "dsToggle");
14
16
  }
15
- variant = 'default';
16
- borderAligned = false;
17
- openByDefault = false;
18
- accordionId = 'dsaccordion';
19
- headingLevel = 2;
20
- useCloseButton = false;
21
- closeButtonLabel = 'Close';
22
- hideTopBorder = false;
17
+ dsVariant = 'default';
18
+ dsBorderAligned = false;
19
+ dsOpenByDefault = false;
20
+ dsAccordionId = 'dsaccordion';
21
+ dsHeadingLevel = 2;
22
+ dsUseCloseButton = false;
23
+ dsCloseButtonLabel = 'Close';
24
+ dsHideTopBorder = false;
25
+ dsHideBottomBorder = false;
23
26
  isExpanded = false;
24
27
  get host() { return this; }
28
+ dsToggle;
25
29
  headerButtonRef;
26
30
  shouldMoveFocus = false;
27
31
  componentWillLoad() {
28
- if (this.openByDefault) {
32
+ if (this.dsOpenByDefault) {
29
33
  this.isExpanded = true;
30
34
  }
31
35
  }
@@ -34,6 +38,7 @@ const DsAccordion$1 = proxyCustomElement(class DsAccordion extends H {
34
38
  this.headerButtonRef.focus();
35
39
  this.shouldMoveFocus = false;
36
40
  }
41
+ this.dsToggle.emit(isExpanded);
37
42
  }
38
43
  handleClick = (event) => {
39
44
  const isCloseButton = event.target.closest('.ds-accordion__close-button');
@@ -43,45 +48,46 @@ const DsAccordion$1 = proxyCustomElement(class DsAccordion extends H {
43
48
  handleKeyDown = (event) => {
44
49
  switch (event.key) {
45
50
  case 'Enter':
46
- case ' ':
51
+ case ' ': {
47
52
  event.preventDefault();
48
53
  const isCloseButton = event.target.closest('.ds-accordion__close-button');
49
54
  this.shouldMoveFocus = isCloseButton ? true : false;
50
55
  this.isExpanded = !this.isExpanded;
51
56
  break;
57
+ }
52
58
  }
53
59
  };
54
60
  render() {
55
- const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
56
- const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
57
- return (h("div", { key: 'aeaa883c8500bda65c480ccea434cbeadc53ce69', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
58
- 'ds-accordion--border-aligned': this.borderAligned
59
- }), role: "presentation" }, h("div", { key: 'a7947fd7784084bcec3a02f2219fa2494366d590', class: "ds-accordion__item" }, h("div", { key: '20532a2d3f109e38341d496ffee0d2d02cfb26f4', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '40513d75b15c4701498b83c9a6afbcd7a322c73c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
60
- 'ds-accordion--border-aligned': this.borderAligned,
61
- 'ds-accordion--hide-top-border': this.hideTopBorder
62
- }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '883d1cbf50b3cfb0beacd62570a1077aa8bd7a04', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
63
- h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
64
- : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a8ddede4cec5ab873fb69ab9963e7f143613fe0f', name: "header" }))), h("div", { key: '76cf35006795136597efd9c424237ac1c48bbc74', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
65
- 'ds-accordion__panel--border-aligned': this.borderAligned,
66
- 'ds-accordion__panel--expanded': this.isExpanded
67
- }), hidden: !this.isExpanded }, h("div", { key: '6236db88bc5735ec4e5618a63e303d997335e1be', class: "ds-accordion__content" }, h("slot", { key: '4d206253394878b4fba531cea6870aaaa3e63821', name: "content" })), this.useCloseButton &&
68
- h("ds-button", { key: 'e5c0f76a802e6046f2872509a4944b72aa376bf1', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
69
- 'ds-accordion--border-aligned': this.borderAligned
70
- }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
61
+ const iconSize = this.dsVariant === 'compact' ? '1.5rem' : '2rem';
62
+ const buttonSize = this.dsVariant === 'compact' ? 'small' : 'medium';
63
+ return (h("div", { key: '3f11aeec4a4941f0dcce0380b05a515c3b9c89e6', class: classNames('ds-accordion', `ds-accordion--${this.dsVariant}`, {
64
+ 'ds-accordion--border-aligned': this.dsBorderAligned,
65
+ }) }, h("div", { key: '6a8ca7a66d2f43c970b359972cc5e2830252edb1', class: "ds-accordion__item" }, h("div", { key: '378a67aa57baf72f491370e2e357828d516832d2', role: "heading", "aria-level": this.dsHeadingLevel, class: "ds-accordion__title" }, h("button", { key: '3d495833ea4e1b31ac730947268850d7ba04a15d', class: classNames('ds-accordion__open-button', `ds-accordion--${this.dsVariant}`, {
66
+ 'ds-accordion--border-aligned': this.dsBorderAligned,
67
+ 'ds-accordion--hide-top-border': this.dsHideTopBorder,
68
+ 'ds-accordion--hide-bottom-border': this.dsHideBottomBorder,
69
+ }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsAccordionId}-panel`, id: this.dsAccordionId, ref: el => (this.headerButtonRef = el) }, h("span", { key: 'e720c9480de197083d4c3c956c6129caeb01a033', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ? h("ds-icon", { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_up" }) : h("ds-icon", { dsSize: iconSize, dsHidden: true, dsName: "keyboard_arrow_down" })), h("slot", { key: 'b406436f9de56d89e343150a19c0d133e8b9e2da', name: "header" }))), h("div", { key: 'a51a019dbc6e9401aaf1552edc127226cecb0b7c', id: `${this.dsAccordionId}-panel`, role: "region", "aria-labelledby": this.dsAccordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.dsVariant}`, {
70
+ 'ds-accordion__panel--border-aligned': this.dsBorderAligned,
71
+ 'ds-accordion__panel--expanded': this.isExpanded,
72
+ 'ds-accordion__panel--hide-bottom-border': this.dsHideBottomBorder,
73
+ }), hidden: !this.isExpanded }, h("div", { key: 'a7d46ee04bbe43fbfdea6ac0ec3a760aeb17ba64', class: "ds-accordion__content" }, h("slot", { key: '00e8c609cc32ed726226547af724295884e40bb7', name: "content" })), this.dsUseCloseButton && (h("ds-button", { key: '7b03bc58471493bc89501753e35238b770eaf563', "aria-labelledby": `${this.dsAccordionId}-close-button ${this.dsAccordionId}`, id: `${this.dsAccordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.dsVariant}`, {
74
+ 'ds-accordion--border-aligned': this.dsBorderAligned,
75
+ }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsValue: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
71
76
  }
72
77
  static get watchers() { return {
73
78
  "isExpanded": ["watchHandler"]
74
79
  }; }
75
- static get style() { return DsAccordionStyle0; }
80
+ static get style() { return dsAccordionCss; }
76
81
  }, [1, "ds-accordion", {
77
- "variant": [1],
78
- "borderAligned": [4, "border-aligned"],
79
- "openByDefault": [4, "open-by-default"],
80
- "accordionId": [1, "accordion-id"],
81
- "headingLevel": [2, "heading-level"],
82
- "useCloseButton": [4, "use-close-button"],
83
- "closeButtonLabel": [1, "close-button-label"],
84
- "hideTopBorder": [4, "hide-top-border"],
82
+ "dsVariant": [1, "ds-variant"],
83
+ "dsBorderAligned": [4, "ds-border-aligned"],
84
+ "dsOpenByDefault": [4, "ds-open-by-default"],
85
+ "dsAccordionId": [1, "ds-accordion-id"],
86
+ "dsHeadingLevel": [2, "ds-heading-level"],
87
+ "dsUseCloseButton": [4, "ds-use-close-button"],
88
+ "dsCloseButtonLabel": [1, "ds-close-button-label"],
89
+ "dsHideTopBorder": [4, "ds-hide-top-border"],
90
+ "dsHideBottomBorder": [4, "ds-hide-bottom-border"],
85
91
  "isExpanded": [32]
86
92
  }, undefined, {
87
93
  "isExpanded": ["watchHandler"]
@@ -90,7 +96,7 @@ function defineCustomElement$1() {
90
96
  if (typeof customElements === "undefined") {
91
97
  return;
92
98
  }
93
- const components = ["ds-accordion", "ds-button", "ds-icon"];
99
+ const components = ["ds-accordion", "ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
94
100
  components.forEach(tagName => { switch (tagName) {
95
101
  case "ds-accordion":
96
102
  if (!customElements.get(tagName)) {
@@ -99,10 +105,20 @@ function defineCustomElement$1() {
99
105
  break;
100
106
  case "ds-button":
101
107
  if (!customElements.get(tagName)) {
102
- defineCustomElement$3();
108
+ defineCustomElement$5();
103
109
  }
104
110
  break;
105
111
  case "ds-icon":
112
+ if (!customElements.get(tagName)) {
113
+ defineCustomElement$4();
114
+ }
115
+ break;
116
+ case "ds-spinner":
117
+ if (!customElements.get(tagName)) {
118
+ defineCustomElement$3();
119
+ }
120
+ break;
121
+ case "ds-visually-hidden":
106
122
  if (!customElements.get(tagName)) {
107
123
  defineCustomElement$2();
108
124
  }
@@ -1,10 +1,11 @@
1
- import { p as proxyCustomElement, H, h } from './index2.js';
1
+ import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
2
2
  import { c as classNames } from './index3.js';
3
- import { i as inheritAriaAttributes, a as inheritSpecifiedAttributes, b as inheritAttributes } from './attributes.js';
4
- import { d as defineCustomElement$1 } from './ds-icon2.js';
3
+ import { i as inheritAttributes, b as inheritSpecifiedAttributes, a as inheritAriaAttributes } from './attributes.js';
4
+ import { d as defineCustomElement$3 } from './ds-icon2.js';
5
+ import { d as defineCustomElement$2 } from './ds-spinner2.js';
6
+ import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
5
7
 
6
- const dsButtonCss = ".no-style-leak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
7
- const DsButtonStyle0 = dsButtonCss;
8
+ const dsButtonCss = ".sc-ds-button-h *.sc-ds-button,.ds-no-style-leak.sc-ds-button *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-button-h{display:inline-block}[dsFullWidth].sc-ds-button-h,[ds-full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button:not(.supplementary) .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.supplementary.sc-ds-button:has(ds-spinner) .button-value.sc-ds-button{padding-right:0;padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.sc-ds-button:has(ds-spinner):not(.small) .button-value.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-palette-mainBlue-70);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-90)}.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-palette-black-95);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-palette-black-80)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-palette-white-70)}.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-palette-white);border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-palette-black-10)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-palette-black-20)}.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-overlay-white-10);border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-palette-white);border-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-mainBlue-70)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-palette-white);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-black-95);color:var(--ds-palette-black-95)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-white);color:var(--ds-palette-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-white-15);color:var(--ds-overlay-white-40)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-mainBlue-70);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-95);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-white);padding-right:var(--ds-spacing-4xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}";
8
9
 
9
10
  const DsButton = proxyCustomElement(class DsButton extends H {
10
11
  constructor() {
@@ -15,18 +16,26 @@ const DsButton = proxyCustomElement(class DsButton extends H {
15
16
  buttonEl;
16
17
  pressedKeys = new Set();
17
18
  get el() { return this; }
18
- value = '';
19
- variant = 'primary';
20
- colour = 'blue';
21
- size = 'medium';
22
- fontWeight = 'normal';
23
- icon = '';
24
- iconPosition = 'start';
25
- type = 'button';
26
- disabled = false;
27
- fullWidth = false;
28
- ariaDisabled = 'false';
19
+ dsValue = '';
20
+ dsVariant = 'primary';
21
+ dsColour = 'blue';
22
+ dsSize = 'medium';
23
+ dsIcon = '';
24
+ dsIconPosition = 'start';
25
+ dsType = 'button';
26
+ dsDisabled = false;
27
+ dsIsLoading = false;
28
+ dsUseSpinner = false;
29
+ dsSpinnerHiddenText;
30
+ dsFullWidth = false;
31
+ dsAriaDisabled = 'false';
32
+ async dsFocus() {
33
+ this.buttonEl.focus();
34
+ }
29
35
  componentWillLoad() {
36
+ if (this.dsUseSpinner && !this.dsSpinnerHiddenText) {
37
+ throw new Error('dsSpinnerHiddenText is required when dsUseSpinner is true.');
38
+ }
30
39
  this.inheritedAttributes = {
31
40
  ...inheritAriaAttributes(this.el, ['aria-disabled']),
32
41
  ...inheritSpecifiedAttributes(this.el, [
@@ -52,7 +61,7 @@ const DsButton = proxyCustomElement(class DsButton extends H {
52
61
  case 'Enter':
53
62
  case ' ':
54
63
  this.pressedKeys.add(event.key);
55
- this.buttonEl.classList.add(`${this.colour}--active`);
64
+ this.buttonEl.classList.add(`${this.dsColour}--active`);
56
65
  break;
57
66
  }
58
67
  };
@@ -62,40 +71,60 @@ const DsButton = proxyCustomElement(class DsButton extends H {
62
71
  case ' ':
63
72
  this.pressedKeys.delete(event.key);
64
73
  if (this.pressedKeys.size === 0) {
65
- this.buttonEl.classList.remove(`${this.colour}--active`);
74
+ this.buttonEl.classList.remove(`${this.dsColour}--active`);
66
75
  }
67
76
  break;
68
77
  }
69
78
  };
70
- render() {
71
- const classes = classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
72
- 'icon-start': this.icon && this.iconPosition === 'start' && this.value,
73
- 'icon-end': this.icon && this.iconPosition === 'end' && this.value,
74
- 'icon-only': this.icon && !this.value,
79
+ getSpinnerColour = () => {
80
+ if (this.dsVariant === 'primary') {
81
+ if (this.dsColour === 'blue')
82
+ return 'white';
83
+ if (this.dsColour === 'white')
84
+ return 'black';
85
+ if (this.dsColour === 'black')
86
+ return 'white';
87
+ }
88
+ return this.dsColour;
89
+ };
90
+ renderButton = () => {
91
+ const classes = classNames(`ds-button ${this.dsVariant} ${this.dsColour} ${this.dsSize}`, {
92
+ 'icon-start': this.dsIcon && this.dsIconPosition === 'start' && this.dsValue,
93
+ 'icon-end': this.dsIcon && this.dsIconPosition === 'end' && this.dsValue,
94
+ 'icon-only': this.dsIcon && !this.dsValue,
75
95
  });
76
- const iconSize = this.size === 'small' ? '1rem' : undefined;
77
- const isDisabled = this.disabled || this.ariaDisabled === 'true';
78
- return (h("button", { key: 'a88d1c763917de40eeaefc79cadace3a107a761e', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '5a576ddabcd8be9957832560a1503ffc9b0a4b4c', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '44506977ee4a8e0d2044efa9c4e66f52e901c98c', name: this.icon, size: iconSize })), this.value && h("span", { key: '0a2a0ff071b51cfb9df7f4bc27b1ea6469f3a47e', class: "button-value" }, this.value), h("slot", { key: '757002ca6ed2f98f692b8f5b630ecfd0f6e83f5c', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2605d1808580c30f68717660a516d07fe8fcfc59', name: this.icon, size: iconSize }))));
96
+ const iconSize = this.dsSize === 'small' ? '1rem' : undefined;
97
+ return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, type: this.dsType, "aria-disabled": this.dsAriaDisabled == 'true' ? 'true' : 'false', disabled: this.dsDisabled, ...this.inheritedAttributes }, this.dsIsLoading ? (h(Fragment, null, h("ds-spinner", { dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsSpinnerColor: this.getSpinnerColour(), dsSize: this.dsSize == 'small' ? 'small' : 'medium' }), this.dsValue && h("span", { class: "button-value" }, this.dsValue))) : (h(Fragment, null, h("slot", { name: "prefix" }, this.dsIcon && this.dsIconPosition === 'start' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize })), this.dsValue && h("span", { class: "button-value" }, this.dsValue), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && h("ds-icon", { dsName: this.dsIcon, dsSize: iconSize }))))));
98
+ };
99
+ render() {
100
+ const buttonElement = this.renderButton();
101
+ return (this.dsUseSpinner ?
102
+ h("div", { "aria-live": "polite" }, buttonElement)
103
+ :
104
+ buttonElement);
79
105
  }
80
- static get style() { return DsButtonStyle0; }
106
+ static get style() { return dsButtonCss; }
81
107
  }, [6, "ds-button", {
82
- "value": [1],
83
- "variant": [1],
84
- "colour": [1],
85
- "size": [1],
86
- "fontWeight": [1, "font-weight"],
87
- "icon": [1],
88
- "iconPosition": [1, "icon-position"],
89
- "type": [1],
90
- "disabled": [4],
91
- "fullWidth": [4, "full-width"],
92
- "ariaDisabled": [1, "aria-disabled"]
108
+ "dsValue": [1, "ds-value"],
109
+ "dsVariant": [1, "ds-variant"],
110
+ "dsColour": [1, "ds-colour"],
111
+ "dsSize": [1, "ds-size"],
112
+ "dsIcon": [1, "ds-icon"],
113
+ "dsIconPosition": [1, "ds-icon-position"],
114
+ "dsType": [1, "ds-type"],
115
+ "dsDisabled": [4, "ds-disabled"],
116
+ "dsIsLoading": [4, "ds-is-loading"],
117
+ "dsUseSpinner": [4, "ds-use-spinner"],
118
+ "dsSpinnerHiddenText": [1, "ds-spinner-hidden-text"],
119
+ "dsFullWidth": [4, "ds-full-width"],
120
+ "dsAriaDisabled": [1, "ds-aria-disabled"],
121
+ "dsFocus": [64]
93
122
  }]);
94
123
  function defineCustomElement() {
95
124
  if (typeof customElements === "undefined") {
96
125
  return;
97
126
  }
98
- const components = ["ds-button", "ds-icon"];
127
+ const components = ["ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
99
128
  components.forEach(tagName => { switch (tagName) {
100
129
  case "ds-button":
101
130
  if (!customElements.get(tagName)) {
@@ -103,6 +132,16 @@ function defineCustomElement() {
103
132
  }
104
133
  break;
105
134
  case "ds-icon":
135
+ if (!customElements.get(tagName)) {
136
+ defineCustomElement$3();
137
+ }
138
+ break;
139
+ case "ds-spinner":
140
+ if (!customElements.get(tagName)) {
141
+ defineCustomElement$2();
142
+ }
143
+ break;
144
+ case "ds-visually-hidden":
106
145
  if (!customElements.get(tagName)) {
107
146
  defineCustomElement$1();
108
147
  }
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface DsCard extends Components.DsCard, HTMLElement {}
4
+ export const DsCard: {
5
+ prototype: DsCard;
6
+ new (): DsCard;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;