@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.1

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 (320) hide show
  1. package/LICENSE +163 -0
  2. package/README.md +82 -2
  3. package/package.json +111 -3
  4. package/src/action/action.yaml +291 -0
  5. package/src/action/button-group.yaml +56 -0
  6. package/src/action/button.yaml +239 -0
  7. package/src/action/split-button.yaml +87 -0
  8. package/src/color/color.yaml +181 -0
  9. package/src/color/palette.yaml +147 -0
  10. package/src/container/card.yaml +170 -0
  11. package/src/container/corner-radius.yaml +50 -0
  12. package/src/container/elevation.yaml +19 -0
  13. package/src/design.yaml +41 -0
  14. package/src/feedback/feedback.yaml +225 -0
  15. package/src/icon/icon-font.yaml +28 -0
  16. package/src/icon/icon.yaml +31 -0
  17. package/src/input/date-picker.yaml +144 -0
  18. package/src/input/date-range-input.yaml +162 -0
  19. package/src/input/range-slider.yaml +161 -0
  20. package/src/input/select.yaml +230 -0
  21. package/src/input/slider.yaml +172 -0
  22. package/src/input/text-field.yaml +240 -0
  23. package/src/input/time-picker.yaml +220 -0
  24. package/src/motion/motion.yaml +371 -0
  25. package/src/navigation/app-bar.yaml +147 -0
  26. package/src/navigation/navigation.yaml +339 -0
  27. package/src/navigation/scroll.yaml +23 -0
  28. package/src/navigation/search.yaml +112 -0
  29. package/src/navigation/tabs.yaml +144 -0
  30. package/src/navigation/toolbar.yaml +130 -0
  31. package/src/selection/checkbox.yaml +162 -0
  32. package/src/selection/chip.yaml +219 -0
  33. package/src/selection/radio.yaml +125 -0
  34. package/src/selection/segmented-group.yaml +11 -0
  35. package/src/selection/segmented.yaml +69 -0
  36. package/src/selection/switch.yaml +209 -0
  37. package/src/spacing/measurement.yaml +80 -0
  38. package/src/state/state.yaml +38 -0
  39. package/src/surface/surface.yaml +483 -0
  40. package/src/text/line-height.yaml +144 -0
  41. package/src/text/typeface.yaml +31 -0
  42. package/src/text/typescale.yaml +726 -0
  43. package/target/esbuild/action/action.css +1 -0
  44. package/target/esbuild/action/base.jsx +1 -0
  45. package/target/esbuild/action/button.jsx +17 -0
  46. package/target/esbuild/action/fab-menu-context.jsx +1 -0
  47. package/target/esbuild/action/fab-menu.jsx +15 -0
  48. package/target/esbuild/action/fab.jsx +7 -0
  49. package/target/esbuild/action/group.jsx +22 -0
  50. package/target/esbuild/action/icon-button.jsx +5 -0
  51. package/target/esbuild/action/index.jsx +1 -0
  52. package/target/esbuild/action/split-button.jsx +12 -0
  53. package/target/esbuild/color/contrast.jsx +1 -0
  54. package/target/esbuild/color/dynamic.jsx +1 -0
  55. package/target/esbuild/color/hct.jsx +1 -0
  56. package/target/esbuild/color/index.css +1 -0
  57. package/target/esbuild/color/index.jsx +1 -0
  58. package/target/esbuild/color/palette.jsx +1 -0
  59. package/target/esbuild/color/scheme.jsx +1 -0
  60. package/target/esbuild/color/temperature.jsx +1 -0
  61. package/target/esbuild/container/card.css +1 -0
  62. package/target/esbuild/container/card.jsx +1 -0
  63. package/target/esbuild/container/elevation-shadow.css +1 -0
  64. package/target/esbuild/container/elevation-shadow.jsx +1 -0
  65. package/target/esbuild/container/index.jsx +1 -0
  66. package/target/esbuild/dom/client.jsx +1 -0
  67. package/target/esbuild/dom/index.jsx +1 -0
  68. package/target/esbuild/dom/server.jsx +1 -0
  69. package/target/esbuild/dom/types.jsx +1 -0
  70. package/target/esbuild/feedback/badge.jsx +15 -0
  71. package/target/esbuild/feedback/feedback.css +1 -0
  72. package/target/esbuild/feedback/focus.jsx +1 -0
  73. package/target/esbuild/feedback/index.jsx +1 -0
  74. package/target/esbuild/feedback/loading.jsx +7 -0
  75. package/target/esbuild/feedback/observe.jsx +1 -0
  76. package/target/esbuild/feedback/progress.jsx +35 -0
  77. package/target/esbuild/feedback/snackbar.jsx +23 -0
  78. package/target/esbuild/feedback/tooltip.jsx +24 -0
  79. package/target/esbuild/icon/icon.css +1 -0
  80. package/target/esbuild/icon/icon.jsx +1 -0
  81. package/target/esbuild/icon/index.jsx +1 -0
  82. package/target/esbuild/index.css +1 -0
  83. package/target/esbuild/index.jsx +1 -0
  84. package/target/esbuild/input/autocomplete.jsx +5 -0
  85. package/target/esbuild/input/base.jsx +4 -0
  86. package/target/esbuild/input/date-picker.css +1 -0
  87. package/target/esbuild/input/date-picker.jsx +104 -0
  88. package/target/esbuild/input/date-range-input.css +1 -0
  89. package/target/esbuild/input/date-time.jsx +21 -0
  90. package/target/esbuild/input/index.css +1 -0
  91. package/target/esbuild/input/index.jsx +1 -0
  92. package/target/esbuild/input/paired-input.jsx +1 -0
  93. package/target/esbuild/input/picker-dialog.css +1 -0
  94. package/target/esbuild/input/picker-dialog.jsx +14 -0
  95. package/target/esbuild/input/select.css +1 -0
  96. package/target/esbuild/input/select.jsx +63 -0
  97. package/target/esbuild/input/slider.css +1 -0
  98. package/target/esbuild/input/slider.jsx +51 -0
  99. package/target/esbuild/input/text-field.css +1 -0
  100. package/target/esbuild/input/text-field.jsx +67 -0
  101. package/target/esbuild/input/time-picker.css +1 -0
  102. package/target/esbuild/input/time-picker.jsx +29 -0
  103. package/target/esbuild/motion/frame.jsx +1 -0
  104. package/target/esbuild/motion/index.css +1 -0
  105. package/target/esbuild/motion/index.jsx +1 -0
  106. package/target/esbuild/motion/material.jsx +1 -0
  107. package/target/esbuild/motion/motion.jsx +1 -0
  108. package/target/esbuild/motion/spring.jsx +1 -0
  109. package/target/esbuild/motion/transition.css +1 -0
  110. package/target/esbuild/motion/transition.jsx +1 -0
  111. package/target/esbuild/motion/velocity.jsx +1 -0
  112. package/target/esbuild/navigation/app-bar.jsx +51 -0
  113. package/target/esbuild/navigation/base.jsx +1 -0
  114. package/target/esbuild/navigation/drawer.jsx +25 -0
  115. package/target/esbuild/navigation/index.jsx +1 -0
  116. package/target/esbuild/navigation/navigation.css +1 -0
  117. package/target/esbuild/navigation/navigation.jsx +29 -0
  118. package/target/esbuild/navigation/scroll.jsx +1 -0
  119. package/target/esbuild/navigation/search.jsx +29 -0
  120. package/target/esbuild/navigation/tabs.jsx +7 -0
  121. package/target/esbuild/navigation/toolbar.jsx +23 -0
  122. package/target/esbuild/selection/base.jsx +1 -0
  123. package/target/esbuild/selection/checkbox.jsx +14 -0
  124. package/target/esbuild/selection/chip.jsx +23 -0
  125. package/target/esbuild/selection/index.jsx +1 -0
  126. package/target/esbuild/selection/radio.jsx +9 -0
  127. package/target/esbuild/selection/segmented.jsx +15 -0
  128. package/target/esbuild/selection/selection.css +1 -0
  129. package/target/esbuild/selection/switch.jsx +14 -0
  130. package/target/esbuild/shape/corner-rounding.jsx +1 -0
  131. package/target/esbuild/shape/cubic.jsx +1 -0
  132. package/target/esbuild/shape/index.jsx +1 -0
  133. package/target/esbuild/shape/material-shapes.jsx +1 -0
  134. package/target/esbuild/shape/morph.jsx +1 -0
  135. package/target/esbuild/shape/path.jsx +1 -0
  136. package/target/esbuild/shape/point.jsx +1 -0
  137. package/target/esbuild/shape/rounded-polygon.jsx +1 -0
  138. package/target/esbuild/shape/shapes.jsx +1 -0
  139. package/target/esbuild/spacing/index.jsx +1 -0
  140. package/target/esbuild/state/component.css +1 -0
  141. package/target/esbuild/state/component.jsx +1 -0
  142. package/target/esbuild/state/controller.jsx +1 -0
  143. package/target/esbuild/state/index.jsx +1 -0
  144. package/target/esbuild/state/ripple.jsx +1 -0
  145. package/target/esbuild/state/state.jsx +1 -0
  146. package/target/esbuild/state/style.jsx +1 -0
  147. package/target/esbuild/surface/carousel-layout.jsx +1 -0
  148. package/target/esbuild/surface/carousel.css +1 -0
  149. package/target/esbuild/surface/carousel.jsx +10 -0
  150. package/target/esbuild/surface/dialog.jsx +35 -0
  151. package/target/esbuild/surface/divider.jsx +1 -0
  152. package/target/esbuild/surface/drag.jsx +1 -0
  153. package/target/esbuild/surface/gestures.css +1 -0
  154. package/target/esbuild/surface/gestures.jsx +7 -0
  155. package/target/esbuild/surface/index.css +1 -0
  156. package/target/esbuild/surface/index.jsx +1 -0
  157. package/target/esbuild/surface/interactive.jsx +1 -0
  158. package/target/esbuild/surface/list-patterns.jsx +26 -0
  159. package/target/esbuild/surface/list.css +1 -0
  160. package/target/esbuild/surface/list.jsx +9 -0
  161. package/target/esbuild/surface/menu.css +1 -0
  162. package/target/esbuild/surface/menu.jsx +12 -0
  163. package/target/esbuild/surface/scaffold.jsx +47 -0
  164. package/target/esbuild/surface/sheet.jsx +21 -0
  165. package/target/esbuild/surface/side-sheet.jsx +17 -0
  166. package/target/esbuild/surface/slots.jsx +1 -0
  167. package/target/esbuild/surface/surface.css +1 -0
  168. package/target/esbuild/surface/surface.jsx +1 -0
  169. package/target/esbuild/text/index.css +1 -0
  170. package/target/esbuild/text/index.jsx +1 -0
  171. package/target/esbuild/text/text.css +1 -0
  172. package/target/esbuild/text/text.jsx +3 -0
  173. package/target/esbuild/text/typography.css +1 -0
  174. package/target/esbuild/text/typography.jsx +1 -0
  175. package/target/esbuild/util/box-side.jsx +1 -0
  176. package/target/esbuild/util/debug.jsx +1 -0
  177. package/target/esbuild/util/dom.jsx +1 -0
  178. package/target/esbuild/util/event.jsx +1 -0
  179. package/target/esbuild/util/index.jsx +1 -0
  180. package/target/esbuild/util/preconditions.jsx +1 -0
  181. package/target/esbuild/util/reactive.jsx +1 -0
  182. package/target/tsc/action/action.css.d.ts +3 -0
  183. package/target/tsc/action/base.d.ts +211 -0
  184. package/target/tsc/action/button.d.ts +126 -0
  185. package/target/tsc/action/fab-menu-context.d.ts +16 -0
  186. package/target/tsc/action/fab-menu.d.ts +112 -0
  187. package/target/tsc/action/fab.d.ts +98 -0
  188. package/target/tsc/action/group.d.ts +166 -0
  189. package/target/tsc/action/icon-button.d.ts +79 -0
  190. package/target/tsc/action/index.d.ts +24 -0
  191. package/target/tsc/action/split-button.d.ts +78 -0
  192. package/target/tsc/color/contrast.d.ts +48 -0
  193. package/target/tsc/color/dynamic.d.ts +203 -0
  194. package/target/tsc/color/hct.d.ts +114 -0
  195. package/target/tsc/color/index.css.d.ts +3 -0
  196. package/target/tsc/color/index.d.ts +23 -0
  197. package/target/tsc/color/palette.d.ts +30 -0
  198. package/target/tsc/color/scheme.d.ts +446 -0
  199. package/target/tsc/color/temperature.d.ts +24 -0
  200. package/target/tsc/container/card.css.d.ts +3 -0
  201. package/target/tsc/container/card.d.ts +110 -0
  202. package/target/tsc/container/elevation-shadow.css.d.ts +3 -0
  203. package/target/tsc/container/elevation-shadow.d.ts +23 -0
  204. package/target/tsc/container/index.d.ts +44 -0
  205. package/target/tsc/dom/client.d.ts +387 -0
  206. package/target/tsc/dom/index.d.ts +93 -0
  207. package/target/tsc/dom/server.d.ts +65 -0
  208. package/target/tsc/dom/types.d.ts +134 -0
  209. package/target/tsc/feedback/badge.d.ts +116 -0
  210. package/target/tsc/feedback/feedback.css.d.ts +3 -0
  211. package/target/tsc/feedback/focus.d.ts +20 -0
  212. package/target/tsc/feedback/index.d.ts +17 -0
  213. package/target/tsc/feedback/loading.d.ts +194 -0
  214. package/target/tsc/feedback/observe.d.ts +75 -0
  215. package/target/tsc/feedback/progress.d.ts +281 -0
  216. package/target/tsc/feedback/snackbar.d.ts +398 -0
  217. package/target/tsc/feedback/tooltip.d.ts +326 -0
  218. package/target/tsc/icon/icon.css.d.ts +3 -0
  219. package/target/tsc/icon/icon.d.ts +69 -0
  220. package/target/tsc/icon/index.d.ts +13 -0
  221. package/target/tsc/index.css.d.ts +3 -0
  222. package/target/tsc/index.d.ts +7 -0
  223. package/target/tsc/input/autocomplete.d.ts +119 -0
  224. package/target/tsc/input/base.d.ts +282 -0
  225. package/target/tsc/input/date-picker.css.d.ts +3 -0
  226. package/target/tsc/input/date-picker.d.ts +351 -0
  227. package/target/tsc/input/date-range-input.css.d.ts +3 -0
  228. package/target/tsc/input/date-time.d.ts +171 -0
  229. package/target/tsc/input/index.css.d.ts +3 -0
  230. package/target/tsc/input/index.d.ts +27 -0
  231. package/target/tsc/input/paired-input.d.ts +435 -0
  232. package/target/tsc/input/picker-dialog.css.d.ts +3 -0
  233. package/target/tsc/input/picker-dialog.d.ts +84 -0
  234. package/target/tsc/input/select.css.d.ts +3 -0
  235. package/target/tsc/input/select.d.ts +267 -0
  236. package/target/tsc/input/slider.css.d.ts +3 -0
  237. package/target/tsc/input/slider.d.ts +372 -0
  238. package/target/tsc/input/text-field.css.d.ts +3 -0
  239. package/target/tsc/input/text-field.d.ts +415 -0
  240. package/target/tsc/input/time-picker.css.d.ts +3 -0
  241. package/target/tsc/input/time-picker.d.ts +212 -0
  242. package/target/tsc/motion/frame.d.ts +36 -0
  243. package/target/tsc/motion/index.css.d.ts +3 -0
  244. package/target/tsc/motion/index.d.ts +34 -0
  245. package/target/tsc/motion/material.d.ts +110 -0
  246. package/target/tsc/motion/motion.d.ts +235 -0
  247. package/target/tsc/motion/spring.d.ts +223 -0
  248. package/target/tsc/motion/transition.css.d.ts +3 -0
  249. package/target/tsc/motion/transition.d.ts +597 -0
  250. package/target/tsc/motion/velocity.d.ts +54 -0
  251. package/target/tsc/navigation/app-bar.d.ts +473 -0
  252. package/target/tsc/navigation/base.d.ts +320 -0
  253. package/target/tsc/navigation/drawer.d.ts +301 -0
  254. package/target/tsc/navigation/index.d.ts +25 -0
  255. package/target/tsc/navigation/navigation.css.d.ts +3 -0
  256. package/target/tsc/navigation/navigation.d.ts +537 -0
  257. package/target/tsc/navigation/scroll.d.ts +218 -0
  258. package/target/tsc/navigation/search.d.ts +332 -0
  259. package/target/tsc/navigation/tabs.d.ts +497 -0
  260. package/target/tsc/navigation/toolbar.d.ts +248 -0
  261. package/target/tsc/selection/base.d.ts +100 -0
  262. package/target/tsc/selection/checkbox.d.ts +194 -0
  263. package/target/tsc/selection/chip.d.ts +358 -0
  264. package/target/tsc/selection/index.d.ts +21 -0
  265. package/target/tsc/selection/radio.d.ts +198 -0
  266. package/target/tsc/selection/segmented.d.ts +333 -0
  267. package/target/tsc/selection/selection.css.d.ts +3 -0
  268. package/target/tsc/selection/switch.d.ts +165 -0
  269. package/target/tsc/shape/corner-rounding.d.ts +36 -0
  270. package/target/tsc/shape/cubic.d.ts +215 -0
  271. package/target/tsc/shape/index.d.ts +35 -0
  272. package/target/tsc/shape/material-shapes.d.ts +176 -0
  273. package/target/tsc/shape/morph.d.ts +91 -0
  274. package/target/tsc/shape/path.d.ts +177 -0
  275. package/target/tsc/shape/point.d.ts +165 -0
  276. package/target/tsc/shape/rounded-polygon.d.ts +289 -0
  277. package/target/tsc/shape/shapes.d.ts +76 -0
  278. package/target/tsc/spacing/index.d.ts +19 -0
  279. package/target/tsc/state/component.css.d.ts +3 -0
  280. package/target/tsc/state/component.d.ts +276 -0
  281. package/target/tsc/state/controller.d.ts +257 -0
  282. package/target/tsc/state/index.d.ts +19 -0
  283. package/target/tsc/state/ripple.d.ts +50 -0
  284. package/target/tsc/state/state.d.ts +129 -0
  285. package/target/tsc/state/style.d.ts +22 -0
  286. package/target/tsc/surface/carousel-layout.d.ts +212 -0
  287. package/target/tsc/surface/carousel.css.d.ts +3 -0
  288. package/target/tsc/surface/carousel.d.ts +231 -0
  289. package/target/tsc/surface/dialog.d.ts +580 -0
  290. package/target/tsc/surface/divider.d.ts +92 -0
  291. package/target/tsc/surface/drag.d.ts +92 -0
  292. package/target/tsc/surface/gestures.css.d.ts +3 -0
  293. package/target/tsc/surface/gestures.d.ts +292 -0
  294. package/target/tsc/surface/index.css.d.ts +3 -0
  295. package/target/tsc/surface/index.d.ts +29 -0
  296. package/target/tsc/surface/interactive.d.ts +22 -0
  297. package/target/tsc/surface/list-patterns.d.ts +384 -0
  298. package/target/tsc/surface/list.css.d.ts +3 -0
  299. package/target/tsc/surface/list.d.ts +340 -0
  300. package/target/tsc/surface/menu.css.d.ts +3 -0
  301. package/target/tsc/surface/menu.d.ts +590 -0
  302. package/target/tsc/surface/scaffold.d.ts +337 -0
  303. package/target/tsc/surface/sheet.d.ts +384 -0
  304. package/target/tsc/surface/side-sheet.d.ts +183 -0
  305. package/target/tsc/surface/slots.d.ts +21 -0
  306. package/target/tsc/surface/surface.css.d.ts +3 -0
  307. package/target/tsc/surface/surface.d.ts +192 -0
  308. package/target/tsc/text/index.css.d.ts +3 -0
  309. package/target/tsc/text/index.d.ts +18 -0
  310. package/target/tsc/text/text.css.d.ts +3 -0
  311. package/target/tsc/text/text.d.ts +94 -0
  312. package/target/tsc/text/typography.css.d.ts +3 -0
  313. package/target/tsc/text/typography.d.ts +82 -0
  314. package/target/tsc/util/box-side.d.ts +76 -0
  315. package/target/tsc/util/debug.d.ts +20 -0
  316. package/target/tsc/util/dom.d.ts +35 -0
  317. package/target/tsc/util/event.d.ts +93 -0
  318. package/target/tsc/util/index.d.ts +12 -0
  319. package/target/tsc/util/preconditions.d.ts +79 -0
  320. package/target/tsc/util/reactive.d.ts +36 -0
@@ -0,0 +1,63 @@
1
+ import{For as E,createMemo as S,createUniqueId as f,onCleanup as L,onMount as V,untrack as p}from"solid-js";import{defineDomComponent as J}from"..";import{DomController as X}from"../dom/client";import{createFieldLabel as O,firstInputSlotOf as h,idReferencesOf as w,inputErrorOf as A,observeFormReset as q,observeLabelInlineSize as K,splitInputElementProps as G,supportingSlotOf as I}from"./base";import"./text-field.css";import"./select.css";const o="cw-Select",H="cw-Select-disabled",T="cw-Select-error",M="cw-Select-readOnly",D="_cw-Select-noAsterisk",k="cw-Select-select",b="cw-Select-placeholder",P=new Set([" ","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Enter","F4","Home","PageDown","PageUp"]);function _(d){return`_cw-Select-${d??"filled"}`}function N(d){return"options"in d}function x(d,e){return<E each={d()}>{t=>{if(!N(t))return e(t);const{disabled:i,label:n}=t;return<optgroup disabled={i===!0}label={n}>
2
+ <E each={t.options}>{e}</E>
3
+ </optgroup>}}</E>}function U(d,e){const t=f(),i=f(),n=A(e),s=I(e,n),a=G(d),{containerProps:l,elementProps:r}=a,v=e.invalid===!0||n!==void 0,m=e.disabled===!0,g=e.readOnly===!0,u="value"in e?e.value??"":e.defaultValue,y=e.id??r.id??t,R={...r,"aria-describedby":w(r["aria-describedby"],s===void 0?void 0:i),"aria-invalid":"aria-invalid"in r?r["aria-invalid"]:v?"true":void 0,"aria-readonly":"aria-readonly"in r?r["aria-readonly"]:g?"true":void 0,class:k,disabled:m,id:y,name:e.name,required:e.required===!0},F=c=><option disabled={c.disabled===!0}selected={u!==void 0&&c.value===u}value={c.value}>{c.label}</option>,C=O(o);return<div{...l}classList={{...l.classList,[_(e.variant)]:!0,[H]:m,[T]:v,[D]:e.noAsterisk===!0,[M]:g,[o]:!0}}>
4
+ <div class="cw-Select-control">
5
+ <span class="cw-Select-leading">
6
+ {h(()=>e.leading,()=>e.leadingIcon)}
7
+ </span>
8
+ <select{...R}>
9
+ {"placeholder"in e?<option class={b}disabled hidden selected={u===void 0||u===""}value="">{e.placeholder}</option>:void 0}
10
+ {e.options===void 0?a.children:x(()=>e.options,F)}
11
+ </select>
12
+ <span aria-hidden="true"class="cw-Select-arrow">
13
+ {h(()=>e.trailing,()=>e.trailingIcon)}
14
+ </span>
15
+ <fieldset class="cw-Select-outline"role="presentation">
16
+ <legend class="cw-Select-legend">
17
+ <span class="cw-Select-label">
18
+ <label class="cw-Select-labelText"for={y}>
19
+ {C.content(e.label)}
20
+ </label>
21
+ <span aria-hidden="true"class="cw-Select-asterisk">*</span>
22
+ </span>
23
+ </legend>
24
+ </fieldset>
25
+ {C.copies()}
26
+ </div>
27
+ <div class="cw-Select-footer">
28
+ <span aria-live="polite"class="cw-Select-supporting"id={i}>
29
+ {s}
30
+ </span>
31
+ </div>
32
+ </div>}class z extends X{#s;#c;#d;#o;#u;#t;#e;#n;#l;constructor(e){super(e,{functionElementIsStatic:!0}),this.#s="value"in e,this.#c=f(),this.#d=f(),this.#o=S(()=>A(e)),this.#u=S(()=>I(e,this.#o())),this.#t=null,this.#e=void 0,this.#n=null,this.#l=()=>{},V(()=>{const t=this.#r();t!==null&&this.#p(t),L(K(this,o))}),L(()=>{this.#n?.disconnect(),this.#l()})}#r(){return this.functionElement}#a(e){const t=`attr:${e}`;return t in this.props?[super.readProp(t)[0],!0]:[void 0,!1]}#h(){const[e]=this.#a("id");return this.props.id??e??this.#c}#p(e){this.#l(),this.#l=q(e,this.#v)}#i(e,t){(e.value!==t||e.selectedIndex<0)&&(e.value=t);const i=e.selectedIndex<0?null:e.options[e.selectedIndex];for(const n of Array.from(e.options))n.defaultSelected!==(n===i)&&(n.defaultSelected=n===i);this.#n?.takeRecords(),this.#e=t}#S(e){const t=Array.from(e.options),i=t.find(a=>a.defaultSelected),n=e.selectedIndex<0?void 0:t[e.selectedIndex],s=p(()=>this.props.defaultValue);if(i!==void 0&&n!==void 0&&n!==i){this.#e=n.value;return}s!==void 0?this.#i(e,s):i===void 0&&t[0]?.classList.contains(b)?this.#i(e,""):this.#e=e.value}#b=()=>{const e=this.#r();e!==null&&(this.#s?this.#i(e,p(()=>this.props.value)??""):this.#e!==void 0&&e.value!==this.#e&&(e.value=this.#e))};#v=()=>{const e=this.#r();e!==null&&(this.#e=e.value)};#m=e=>{const t=e.currentTarget,{onChange:i,onSelectedChange:n,onValueChange:s,readOnly:a}=this.props,l=t.value;if(a===!0){this.#e!==void 0&&(t.value=this.#e);return}this.#e=l,s?.(l,e),n!==s&&n?.(l,e),i!==s&&i!==n&&i?.(l,e),this.#s&&this.#i(t,p(()=>this.props.value)??"")};#f=e=>{this.props.readOnly===!0&&e.preventDefault()};#g=e=>{const t=e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey;this.props.readOnly===!0&&(t||P.has(e.key))&&e.preventDefault()};applyComponentProps(){const e=super.readProps(["disabled","id","invalid","name","noAsterisk","readOnly","required","value","variant"]),t=this.#r(),[i]=this.#a("aria-describedby"),[,n]=this.#a("aria-invalid"),[,s]=this.#a("aria-readonly"),a=e.invalid===!0||this.#o()!==void 0,l=this.#h();e.variantChanged&&super.setClass("variant",_(e.variant)),e.disabledChanged&&(super.setClass(H,e.disabled===!0),super.setAttribute("disabled",e.disabled===!0)),e.readOnlyChanged&&(super.setClass(M,e.readOnly===!0),s||super.setAttribute("aria-readonly",e.readOnly===!0?"true":void 0)),super.setClass(T,a),n||super.setAttribute("aria-invalid",a?"true":void 0),super.setAttribute("aria-describedby",w(i,this.#u()===void 0?void 0:this.#d)),super.setAttribute("id",l),this.#t!==null&&(this.#t.htmlFor=l),e.requiredChanged&&super.setAttribute("required",e.required===!0),e.noAsteriskChanged&&super.setClass(D,e.noAsterisk===!0),e.nameChanged&&super.setAttribute("name",e.name),t!==null&&(this.#s?e.valueChanged&&this.#i(t,e.value??""):this.#e===void 0&&this.#S(t))}onFunctionElementChanged(e){super.onFunctionElementChanged(e),e!==null&&(e.addEventListener("change",this.#m),e.addEventListener("click",this.#f),e.addEventListener("keydown",this.#g),e.addEventListener("mousedown",this.#f),this.#n=new MutationObserver(this.#b),this.#n.observe(e,{attributeFilter:["selected","value"],childList:!0,subtree:!0}),this.#p(e))}render(e,t){const i="placeholder"in this.props,n=S(()=>this.props.options!==void 0),s=this.#d,a=r=><option disabled={r.disabled===!0}value={r.value}>{r.label}</option>,l=O(o);return<div class={o}>
33
+ <div class="cw-Select-control">
34
+ <span class="cw-Select-leading">
35
+ {h(()=>this.props.leading,()=>this.props.leadingIcon)}
36
+ </span>
37
+ <select class={k}ref={t}>
38
+ {i?<option class={b}disabled hidden value="">
39
+ {this.props.placeholder}
40
+ </option>:void 0}
41
+ {n()?x(()=>this.props.options,a):p(()=>e)}
42
+ </select>
43
+ <span aria-hidden="true"class="cw-Select-arrow">
44
+ {h(()=>this.props.trailing,()=>this.props.trailingIcon)}
45
+ </span>
46
+ <fieldset class="cw-Select-outline"role="presentation">
47
+ <legend class="cw-Select-legend">
48
+ <span class="cw-Select-label">
49
+ <label class="cw-Select-labelText"ref={r=>this.#t=r}>
50
+ {l.content(this.props.label)}
51
+ </label>
52
+ <span aria-hidden="true"class="cw-Select-asterisk">*</span>
53
+ </span>
54
+ </legend>
55
+ </fieldset>
56
+ {l.copies(()=>this.#t)}
57
+ </div>
58
+ <div class="cw-Select-footer">
59
+ <span aria-live="polite"class="cw-Select-supporting"id={s}>
60
+ {this.#u()}
61
+ </span>
62
+ </div>
63
+ </div>}}const B=J(()=>U,()=>z),ee=B;export{ee as ExposedDropdownMenu,B as Select,z as SelectController};
@@ -0,0 +1 @@
1
+ @cw-attribute-roles cw-Slider;@cw-attribute-roles cw-RangeSlider;@layer cw-style{.cw-Slider{--cw-slider-active-tick-color: cw-var(--cw-Slider-activeTickColor);--cw-slider-active-track-color: cw-var(--cw-Slider-activeTrackColor);--cw-slider-disabled-active-track-color: cw-scale-opacity( cw-var(--cw-Slider-disabledActiveTrackColor), cw-var(--cw-Slider-disabledActiveTrackOpacity) );--cw-slider-disabled-handle-color: color-mix( in srgb, cw-var(--cw-Slider-disabledHandleColor) calc(cw-var(--cw-Slider-disabledHandleOpacity)*100%) , cw-var(--cw-Color-surface-fill) );--cw-slider-disabled-inactive-track-color: cw-scale-opacity( cw-var(--cw-Slider-disabledInactiveTrackColor), cw-var(--cw-Slider-disabledInactiveTrackOpacity) );--cw-slider-disabled-label-color: cw-scale-opacity( cw-var(--cw-Slider-disabledLabelTextColor), cw-var(--cw-Slider-disabledLabelTextOpacity) );--cw-slider-handle-color: cw-var(--cw-Slider-handleColor);--cw-slider-handle-gap: cw-var(--cw-Slider-handleGap);--cw-slider-handle-height: cw-var(--cw-Slider-handleHeight);--cw-slider-handle-width: cw-var(--cw-Slider-handleWidth);--cw-slider-inactive-tick-color: cw-var(--cw-Slider-inactiveTickColor);--cw-slider-inactive-track-color: cw-var(--cw-Slider-inactiveTrackColor);--cw-slider-inset-icon-padding: cw-var(--cw-Slider-insetIconPadding);--cw-slider-inset-icon-size: cw-var(--cw-Slider-insetIconSize);--cw-slider-inside-corner: cw-var(--cw-Slider-insideCornerSize);--cw-slider-label-color: cw-var(--cw-Slider-labelTextColor);--cw-slider-label-spacing: cw-var(--cw-Slider-labelSpacing);--cw-slider-min-length: cw-var(--cw-Slider-minLength);--cw-slider-pressed-handle-width: cw-var(--cw-Slider-pressedHandleWidth);--cw-slider-stop-size: cw-var(--cw-Slider-stopIndicatorSize);--cw-slider-tick-min-spacing: cw-var(--cw-Slider-tickMinSpacing);--cw-slider-touch-target: cw-var(--cw-Slider-touchTargetSize);--cw-slider-track-height: cw-var(--cw-Slider-trackHeight);--cw-slider-track-shape: cw-var(--cw-Slider-trackShape);--cw-slider-value-indicator-color: cw-var(--cw-Slider-valueIndicatorContainerColor);--cw-slider-value-indicator-height: cw-var(--cw-Slider-valueIndicatorHeight);--cw-slider-value-indicator-label-color: cw-var(--cw-Slider-valueIndicatorLabelTextColor);--cw-slider-value-indicator-space: cw-var(--cw-Slider-valueIndicatorBottomSpace);--cw-slider-value-indicator-width: cw-var(--cw-Slider-valueIndicatorWidth)}.cw-RangeSlider{--cw-slider-active-tick-color: cw-var(--cw-RangeSlider-activeTickColor);--cw-slider-active-track-color: cw-var(--cw-RangeSlider-activeTrackColor);--cw-slider-disabled-active-track-color: cw-scale-opacity( cw-var(--cw-RangeSlider-disabledActiveTrackColor), cw-var(--cw-RangeSlider-disabledActiveTrackOpacity) );--cw-slider-disabled-handle-color: color-mix( in srgb, cw-var(--cw-RangeSlider-disabledHandleColor) calc(cw-var(--cw-RangeSlider-disabledHandleOpacity)*100%) , cw-var(--cw-Color-surface-fill) );--cw-slider-disabled-inactive-track-color: cw-scale-opacity( cw-var(--cw-RangeSlider-disabledInactiveTrackColor), cw-var(--cw-RangeSlider-disabledInactiveTrackOpacity) );--cw-slider-disabled-label-color: cw-scale-opacity( cw-var(--cw-RangeSlider-disabledLabelTextColor), cw-var(--cw-RangeSlider-disabledLabelTextOpacity) );--cw-slider-handle-color: cw-var(--cw-RangeSlider-handleColor);--cw-slider-handle-gap: cw-var(--cw-RangeSlider-handleGap);--cw-slider-handle-height: cw-var(--cw-RangeSlider-handleHeight);--cw-slider-handle-width: cw-var(--cw-RangeSlider-handleWidth);--cw-slider-inactive-tick-color: cw-var(--cw-RangeSlider-inactiveTickColor);--cw-slider-inactive-track-color: cw-var(--cw-RangeSlider-inactiveTrackColor);--cw-slider-inside-corner: cw-var(--cw-RangeSlider-insideCornerSize);--cw-slider-label-color: cw-var(--cw-RangeSlider-labelTextColor);--cw-slider-label-spacing: cw-var(--cw-RangeSlider-labelSpacing);--cw-slider-min-length: cw-var(--cw-RangeSlider-minLength);--cw-slider-pressed-handle-width: cw-var(--cw-RangeSlider-pressedHandleWidth);--cw-slider-stop-size: cw-var(--cw-RangeSlider-stopIndicatorSize);--cw-slider-tick-min-spacing: cw-var(--cw-RangeSlider-tickMinSpacing);--cw-slider-touch-target: cw-var(--cw-RangeSlider-touchTargetSize);--cw-slider-track-height: cw-var(--cw-RangeSlider-trackHeight);--cw-slider-track-shape: cw-var(--cw-RangeSlider-trackShape);--cw-slider-value-indicator-color: cw-var(--cw-RangeSlider-valueIndicatorContainerColor);--cw-slider-value-indicator-height: cw-var(--cw-RangeSlider-valueIndicatorHeight);--cw-slider-value-indicator-label-color: cw-var(--cw-RangeSlider-valueIndicatorLabelTextColor);--cw-slider-value-indicator-space: cw-var(--cw-RangeSlider-valueIndicatorBottomSpace);--cw-slider-value-indicator-width: cw-var(--cw-RangeSlider-valueIndicatorWidth)}._cw-Slider-round,._cw-RangeSlider-round{--cw-slider-track-shape: calc(var(--cw-slider-track-height) / 2)}.cw-Slider-disabled,.cw-RangeSlider-disabled{--cw-slider-active-tick-color: var(--cw-slider-disabled-inactive-track-color);--cw-slider-active-track-color: var(--cw-slider-disabled-active-track-color);--cw-slider-handle-color: var(--cw-slider-disabled-handle-color);--cw-slider-inactive-tick-color: var(--cw-slider-disabled-active-track-color);--cw-slider-inactive-track-color: var(--cw-slider-disabled-inactive-track-color);--cw-slider-label-color: var(--cw-slider-disabled-label-color);pointer-events:none}.cw-Slider,.cw-RangeSlider{align-items:stretch;box-sizing:border-box;color:var(--cw-slider-label-color);contain:layout style;display:inline-flex;flex-flow:column nowrap;gap:var(--cw-slider-label-spacing);isolation:isolate;min-inline-size:var(--cw-slider-min-length);position:relative;vertical-align:top}.cw-RangeSlider{border:0;margin:0;padding:0}.cw-Slider-label,.cw-RangeSlider-label{-cw-typescale:--cw-Typescale-body-medium;padding:0}.cw-Slider-label:empty,.cw-Slider-supporting:empty,.cw-RangeSlider-label:empty,.cw-RangeSlider-supporting:empty{display:none}.cw-Slider-supporting,.cw-RangeSlider-supporting{-cw-typescale:--cw-Typescale-body-small}.cw-Slider-track,.cw-RangeSlider-track{align-items:center;display:flex;min-block-size:var(--cw-slider-touch-target);position:relative}.cw-Slider-control{block-size:max(var(--cw-slider-touch-target),var(--cw-slider-handle-height));cursor:pointer;flex:1;min-inline-size:0;position:relative;touch-action:pan-y}.cw-Slider-rail{--cw-slider-center-position: 50cqi;--cw-slider-corner: min(var(--cw-slider-track-shape), var(--cw-slider-track-height) / 2);--cw-slider-end-position: calc( var(--cw-slider-end) * 100cqi + var(--cw-slider-end-inset) * var(--cw-slider-corner) * (1 - 2 * var(--cw-slider-end)) );--cw-slider-gap: calc(var(--cw-slider-handle-gap) + var(--cw-slider-handle-width) / 2);--cw-slider-start-position: calc( var(--cw-slider-start) * 100cqi + var(--cw-slider-start-inset) * var(--cw-slider-corner) * (1 - 2 * var(--cw-slider-start)) );border-radius:var(--cw-slider-corner);container-type:size;height:var(--cw-slider-track-height);left:calc(var(--cw-slider-touch-target) / 2);pointer-events:none;position:absolute;right:calc(var(--cw-slider-touch-target) / 2);top:calc(50% - var(--cw-slider-track-height) / 2)}._cw-Slider-segment{--cw-slider-segment-start: 0px;--cw-slider-segment-threshold: var(--cw-slider-corner);--cw-slider-tick-color: var(--cw-slider-inactive-tick-color);background-color:var(--cw-slider-inactive-track-color);block-size:100%;border-end-end-radius:var(--cw-slider-inside-corner);border-end-start-radius:var(--cw-slider-corner);border-start-end-radius:var(--cw-slider-inside-corner);border-start-start-radius:var(--cw-slider-corner);inline-size:calc(max(0px,var(--cw-slider-segment-end) - var(--cw-slider-segment-start) - var(--cw-slider-segment-threshold)) + min(var(--cw-slider-segment-threshold),1000 * max(0px,var(--cw-slider-segment-end) - var(--cw-slider-segment-start) - var(--cw-slider-segment-threshold))));inset-block-start:0;inset-inline-start:var(--cw-slider-segment-start);overflow:hidden;position:absolute}.cw-Slider-inactiveBefore{--cw-slider-segment-end: calc(var(--cw-slider-start-position) - var(--cw-slider-gap))}.cw-Slider:not(.cw-Slider-centered) .cw-Slider-inactiveBefore{display:none}.cw-Slider-active{--cw-slider-segment-end: calc(var(--cw-slider-end-position) - var(--cw-slider-gap));--cw-slider-tick-color: var(--cw-slider-active-tick-color);background-color:var(--cw-slider-active-track-color)}.cw-Slider-inactiveAfter{--cw-slider-segment-end: 100cqi;--cw-slider-segment-start: calc(var(--cw-slider-end-position) + var(--cw-slider-gap));border-end-end-radius:var(--cw-slider-corner);border-end-start-radius:var(--cw-slider-inside-corner);border-start-end-radius:var(--cw-slider-corner);border-start-start-radius:var(--cw-slider-inside-corner)}:is(.cw-RangeSlider,.cw-Slider-centered) .cw-Slider-active{--cw-slider-segment-threshold: var(--cw-slider-inside-corner);border-end-start-radius:var(--cw-slider-inside-corner);border-start-start-radius:var(--cw-slider-inside-corner)}.cw-RangeSlider .cw-Slider-active{--cw-slider-segment-start: calc(var(--cw-slider-start-position) + var(--cw-slider-gap))}.cw-Slider-centered .cw-Slider-inactiveBefore{--cw-slider-segment-end: calc(var(--cw-slider-center-position) - var(--cw-slider-gap))}.cw-Slider-centered .cw-Slider-active{--cw-slider-segment-end: var(--cw-slider-center-position);--cw-slider-segment-start: var(--cw-slider-center-position)}.cw-Slider-centered .cw-Slider-inactiveAfter{--cw-slider-segment-start: calc(var(--cw-slider-center-position) + var(--cw-slider-gap))}._cw-Slider-belowCenter .cw-Slider-inactiveBefore{--cw-slider-segment-end: calc(var(--cw-slider-end-position) - var(--cw-slider-gap))}._cw-Slider-belowCenter .cw-Slider-active{--cw-slider-segment-start: calc(var(--cw-slider-end-position) + var(--cw-slider-gap))}._cw-Slider-belowCenter .cw-Slider-inactiveAfter{--cw-slider-segment-start: calc( var(--cw-slider-center-position) + var(--cw-slider-handle-gap) )}._cw-Slider-aboveCenter .cw-Slider-inactiveBefore{--cw-slider-segment-end: calc( var(--cw-slider-center-position) - var(--cw-slider-handle-gap) )}._cw-Slider-aboveCenter .cw-Slider-active{--cw-slider-segment-end: calc(var(--cw-slider-end-position) - var(--cw-slider-gap))}._cw-Slider-aboveCenter .cw-Slider-inactiveAfter{--cw-slider-segment-start: calc(var(--cw-slider-end-position) + var(--cw-slider-gap))}._cw-Slider-discrete ._cw-Slider-segment:before{--cw-slider-tick-interval: calc( (100cqi - 2 * var(--cw-slider-corner)) / var(--cw-slider-steps) );--cw-slider-tick-pitch: round( up, var(--cw-slider-tick-min-spacing), var(--cw-slider-tick-interval) );--cw-slider-tick-offset: calc( (var(--cw-slider-stop-size) - var(--cw-slider-tick-pitch)) / 2 );background-image:radial-gradient(circle,var(--cw-slider-tick-color) calc(var(--cw-slider-stop-size) / 2 - .5px),transparent calc(var(--cw-slider-stop-size) / 2));background-position:left var(--cw-slider-tick-offset) center;background-repeat:repeat-x;background-size:var(--cw-slider-tick-pitch) 100%;block-size:100%;content:"";inline-size:calc(100cqi - 2 * var(--cw-slider-corner) + var(--cw-slider-stop-size));inset-block-start:0;inset-inline-start:calc(var(--cw-slider-corner) - var(--cw-slider-stop-size) / 2 - var(--cw-slider-segment-start));position:absolute}._cw-Slider-discrete:dir(rtl) ._cw-Slider-segment:before{background-position:right var(--cw-slider-tick-offset) center}.cw-Slider-inactiveBefore:after,.cw-Slider-inactiveAfter:after{background-color:var(--cw-slider-active-track-color);block-size:var(--cw-slider-stop-size);border-radius:cw-var(--cw-CornerRadius-full);content:"";inline-size:var(--cw-slider-stop-size);inset-block-start:calc(50% - var(--cw-slider-stop-size) / 2);position:absolute}.cw-Slider-inactiveBefore:after{inset-inline-start:calc(var(--cw-slider-corner) - var(--cw-slider-stop-size) / 2)}.cw-Slider-inactiveAfter:after{inset-inline-end:calc(var(--cw-slider-corner) - var(--cw-slider-stop-size) / 2)}.cw-Slider-insetIcon{align-items:center;block-size:100%;color:var(--cw-slider-active-tick-color);display:flex;inline-size:var(--cw-slider-inset-icon-size);inset-block-start:0;inset-inline-start:var(--cw-slider-inset-icon-padding);justify-content:center;position:absolute}._cw-Slider-iconInactive .cw-Slider-insetIcon{color:var(--cw-slider-inactive-tick-color);inset-inline-start:calc(var(--cw-slider-end-position) + var(--cw-slider-gap) + var(--cw-slider-inset-icon-padding))}.cw-Slider-insetIcon:has(>:empty),:is(._cw-Slider-xs,._cw-Slider-sm) .cw-Slider-insetIcon,:is(.cw-Slider-centered,._cw-Slider-iconHidden) .cw-Slider-insetIcon{display:none}.cw-Slider-insetIcon>span{display:flex;flex:none;writing-mode:horizontal-tb}.cw-Slider-insetIcon .cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--cw-slider-inset-icon-size)}.cw-Slider-handle{align-items:center;block-size:var(--cw-slider-handle-height);display:flex;inline-size:0;inset-block-start:calc(50% - var(--cw-slider-handle-height) / 2);inset-inline-start:var(--cw-slider-end-position);justify-content:center;position:absolute}.cw-Slider-handle-start{inset-inline-start:var(--cw-slider-start-position)}.cw-Slider-handle:before{background-color:var(--cw-slider-handle-color);block-size:100%;border-radius:cw-var(--cw-CornerRadius-full);content:"";flex:none;inline-size:var(--cw-slider-handle-width);transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:inline-size;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing)}._cw-Slider-startPressed .cw-Slider-handle-start:before,._cw-Slider-endPressed .cw-Slider-handle-end:before,._cw-Slider-start:focus-visible~.cw-Slider-rail .cw-Slider-handle-start:before,._cw-Slider-end:focus-visible~.cw-Slider-rail .cw-Slider-handle-end:before{inline-size:var(--cw-slider-pressed-handle-width)}._cw-Slider-start:focus-visible~.cw-Slider-rail .cw-Slider-handle-start:before,._cw-Slider-end:focus-visible~.cw-Slider-rail .cw-Slider-handle-end:before{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-Slider-value{-cw-typescale:--cw-Typescale-label-large;align-items:center;background-color:var(--cw-slider-value-indicator-color);border-radius:cw-var(--cw-CornerRadius-full);bottom:calc(100% + var(--cw-slider-value-indicator-space));box-sizing:border-box;color:var(--cw-slider-value-indicator-label-color);display:flex;height:var(--cw-slider-value-indicator-height);justify-content:center;left:50%;min-width:var(--cw-slider-value-indicator-width);opacity:0;padding-inline:calc((var(--cw-slider-value-indicator-height) - 1lh) / 2);pointer-events:none;position:absolute;scale:0;transform-origin:bottom center;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:opacity,scale;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing);translate:-50% 0;white-space:nowrap;writing-mode:horizontal-tb}._cw-Slider-startPressed .cw-Slider-handle-start .cw-Slider-value,._cw-Slider-endPressed .cw-Slider-handle-end .cw-Slider-value,._cw-Slider-start:focus-visible~.cw-Slider-rail .cw-Slider-handle-start .cw-Slider-value,._cw-Slider-end:focus-visible~.cw-Slider-rail .cw-Slider-handle-end .cw-Slider-value{opacity:1;scale:1}._cw-Slider-noValueIndicator .cw-Slider-value{display:none}.cw-Slider-input,.cw-RangeSlider-input{appearance:none;background:transparent;block-size:100%;border:0;box-sizing:border-box;inline-size:100%;inset:0;margin:0;outline:none;padding:0;pointer-events:none;position:absolute}.cw-Slider-input::-webkit-slider-thumb,.cw-RangeSlider-input::-webkit-slider-thumb{appearance:none;background:transparent;border:0}.cw-Slider-input::-moz-range-thumb,.cw-RangeSlider-input::-moz-range-thumb{background:transparent;border:0}.cw-Slider-input::-moz-range-progress,.cw-RangeSlider-input::-moz-range-progress{background:transparent}.cw-Slider-vertical,.cw-RangeSlider-vertical{align-items:center;block-size:100%;min-block-size:var(--cw-slider-min-length);min-inline-size:auto}.cw-Slider-vertical .cw-Slider-track,.cw-RangeSlider-vertical .cw-RangeSlider-track{flex:1;min-block-size:var(--cw-slider-min-length)}:is(.cw-Slider-vertical,.cw-RangeSlider-vertical) .cw-Slider-control{align-self:stretch;block-size:auto;flex:none;inline-size:max(var(--cw-slider-touch-target),var(--cw-slider-handle-height));touch-action:pan-x}.cw-Slider-vertical .cw-Slider-input,.cw-RangeSlider-vertical .cw-RangeSlider-input{direction:rtl;writing-mode:vertical-lr}:is(.cw-Slider-vertical,.cw-RangeSlider-vertical) .cw-Slider-rail{bottom:calc(var(--cw-slider-touch-target) / 2);direction:rtl;height:auto;left:calc(50% - var(--cw-slider-track-height) / 2);right:auto;top:calc(var(--cw-slider-touch-target) / 2);width:var(--cw-slider-track-height);writing-mode:vertical-lr}.cw-Slider-vertical._cw-Slider-discrete ._cw-Slider-segment:before,.cw-RangeSlider-vertical._cw-Slider-discrete ._cw-Slider-segment:before{background-position:center bottom var(--cw-slider-tick-offset);background-repeat:repeat-y;background-size:100% var(--cw-slider-tick-pitch)}:is(.cw-Slider-vertical,.cw-RangeSlider-vertical) .cw-Slider-value{bottom:auto;left:auto;right:calc(100% + var(--cw-slider-value-indicator-space));top:50%;transform-origin:right center;translate:0 -50%}@media (forced-colors: active){.cw-Slider,.cw-RangeSlider{--cw-slider-active-tick-color: Canvas;--cw-slider-active-track-color: Highlight;--cw-slider-handle-color: Highlight;--cw-slider-inactive-tick-color: Canvas;--cw-slider-inactive-track-color: CanvasText;--cw-slider-value-indicator-color: CanvasText;--cw-slider-value-indicator-label-color: Canvas}.cw-Slider-disabled,.cw-RangeSlider-disabled{--cw-slider-active-track-color: GrayText;--cw-slider-handle-color: GrayText;--cw-slider-inactive-track-color: GrayText}.cw-Slider-rail{forced-color-adjust:none}}}@layer cw-theme{._cw-Slider-sm{@cw-apply-theme small,cw-Slider;}._cw-Slider-md{@cw-apply-theme medium,cw-Slider;}._cw-Slider-lg{@cw-apply-theme large,cw-Slider;}._cw-Slider-xl{@cw-apply-theme xlarge,cw-Slider;}._cw-RangeSlider-sm{@cw-apply-theme small,cw-RangeSlider;}._cw-RangeSlider-md{@cw-apply-theme medium,cw-RangeSlider;}._cw-RangeSlider-lg{@cw-apply-theme large,cw-RangeSlider;}._cw-RangeSlider-xl{@cw-apply-theme xlarge,cw-RangeSlider;}}
@@ -0,0 +1,51 @@
1
+ import{createUniqueId as x,onCleanup as H,onMount as se}from"solid-js";import{insert as p}from"solid-js/web";import{defineDomComponent as G}from"..";import{DomController as ae}from"../dom/client";import{dedupeCallbacks as de}from"../navigation/base";import{firstInputSlot as m,hasInputError as B,observeFormReset as z,supportingSlot as A}from"./base";import{NO_SUPPORTING_CONTENT as oe,PairedInputController as le,createSupportingContent as ue,pairedInputAttributes as ce,resolveInputPair as pe,splitFieldProps as U,supportingChangesOf as he}from"./paired-input";import"./slider.css";const b="cw-Slider",L="cw-RangeSlider",k=0,j=100,X=8,W=["Minimum","Maximum"],Y={start:["startValue","start"],end:["endValue","end"]};function g(i,e){const n=typeof i=="number"?i:Number(i);return Number.isFinite(n)?n:e}function f(i,e,n){return Math.min(n,Math.max(e,Number.isFinite(i)?i:e))}function K(i){const e=i.map(r=>{const[s,a="0"]=r.toString().split("e"),d=s.split(".")[1]?.length??0;return[BigInt(s.replace(".","")),Number(a)-d]}),n=Math.min(...e.map(([,r])=>r));return{coefficients:e.map(([r,s])=>r*10n**BigInt(s-n)),exponent:n}}function h(i){const e=g(i.min,k),n=Math.max(e,g(i.max,j)),t=i.step==="any"||typeof i.step=="number"&&Number.isFinite(i.step)&&i.step>0?i.step:void 0;if(typeof t!="number")return{min:e,max:n,step:t,steps:0};const{coefficients:[r,s,a]}=K([e,n,t]),d=Number((s-r)/a);return{min:e,max:n,step:t,steps:d>=2?d:0}}function R(i,e){const n=f(e,i.min,i.max),t=i.step??1;if(t==="any")return n;const{coefficients:[r,s,a,d],exponent:o}=K([i.min,i.max,t,n]),l=(s-r)/a,u=((d-r)*2n+a)/(a*2n);return+`${r+(u>l?l:u)*a}e${o}`}function D(i){return i.steps===0?i.max:R(i,i.max)}function E(i,e){const n=D(i);return n===i.min?0:(f(e,i.min,n)-i.min)/(n-i.min)}function V(i,e){return i.steps!==0&&e>i.min&&e<D(i)?1:0}function Q(i,e,n,t){const r=V(i,e);return E(i,e)*(n-2*t*r)+t*r}function me(i,e,n,t){const r=D(i);if(n<=0)return i.min;if(i.steps===0)return i.min+f(e/n,0,1)*(r-i.min);const s=(n-2*t)/i.steps,a=s>0?Math.round((e-t)/s):1,d=f(a,1,i.steps-1),o=[[0,0],[d,t+d*s],[i.steps,n]],[l]=o.reduce((u,c)=>Math.abs(c[1]-e)<Math.abs(u[1]-e)?c:u);return R(i,i.min+l*i.step)}function v(i){return i.vertical===!0?"vertical":i.orientation??"horizontal"}function Z(i,e){const n=E(i,e);return n<.5?"_cw-Slider-belowCenter":n>.5?"_cw-Slider-aboveCenter":void 0}function ee(i,e,n){if(n===void 0)return{inactive:E(i,e)<.5,hidden:!1};const t=Q(i,e,n.length,n.corner),r=n.iconSize+2*n.iconPadding+n.gap,s=t>=r;return{inactive:!s,hidden:!s&&n.length-t<r}}function N(i,e){const n=e.length===2?e[0]:i.min,t=e[e.length-1];return{"--cw-slider-start":`${E(i,n)}`,"--cw-slider-end":`${E(i,t)}`,"--cw-slider-start-inset":`${V(i,n)}`,"--cw-slider-end-inset":`${V(i,t)}`,"--cw-slider-steps":`${Math.max(1,i.steps)}`}}function ne(i,e,n,t,r){const s=e.centered===!0?Z(n,t):void 0;return{[i]:!0,[`${i}-${v(e)}`]:!0,[`${i}-disabled`]:e.disabled===!0,[`${i}-error`]:r,[`${i}-readOnly`]:e.readOnly===!0,[`_${i}-${e.size??"xs"}`]:!0,[`_${i}-${e.shape??"standard"}`]:!0,"_cw-Slider-discrete":n.steps!==0,"_cw-Slider-noValueIndicator":e.valueIndicator===!1,"cw-Slider-centered":e.centered===!0,"_cw-Slider-belowCenter":s==="_cw-Slider-belowCenter","_cw-Slider-aboveCenter":s==="_cw-Slider-aboveCenter"}}function J(i){return<span class={`cw-Slider-handle cw-Slider-handle-${i}`}>
2
+ <span class="cw-Slider-value"/>
3
+ </span>}function M(i,e,n){const t=i?J("start"):void 0,r=J("end");return<span class="cw-Slider-control">
4
+ {e}
5
+ <span class="cw-Slider-rail"aria-hidden="true">
6
+ <span class="_cw-Slider-segment cw-Slider-inactiveBefore"/>
7
+ <span class="_cw-Slider-segment cw-Slider-active"/>
8
+ <span class="_cw-Slider-segment cw-Slider-inactiveAfter"/>
9
+ {n}
10
+ {t}
11
+ {r}
12
+ </span>
13
+ </span>}function _(i,e){i.min=`${e.min}`,i.max=`${e.max}`,e.step===void 0?i.removeAttribute("step"):i.step=`${e.step}`}function $(i,e,n){const t=e.formatValue?.(n);t===void 0?i.removeAttribute("aria-valuetext"):i.setAttribute("aria-valuetext",t)}function te(i,e,n,t){const r=i.styleElement?.querySelectorAll(".cw-Slider-value")??[],s=t[t.length-1];for(const[a,d]of Object.entries(N(n,t)))i.setStyle(a,d);i.setClass("center",e.centered===!0?Z(n,s):void 0),i.setClass("_cw-Slider-discrete",n.steps!==0);for(const[a,d]of Array.from(r).entries()){const o=e.formatValue?.(t[a])??`${t[a]}`;d.textContent!==o&&(d.textContent=o)}}function q(i,e){const n=i.ownerDocument.defaultView?.Event??Event;i.dispatchEvent(new n(e,{bubbles:!0}))}class ie{#e;#l;#u;#f;#a;#t;#n;#d;#o;#i;constructor(e){this.#e=e,this.#l=n=>this.#r(n),this.#u=n=>{n.pointerId===this.#t&&this.#s(n)},this.#f=n=>{n.pointerId===this.#t&&this.#g(n.type==="pointerup"?n:void 0)},this.#a=null,this.#t=void 0,this.#n=void 0,this.#d=0,this.#o=[],this.#i=void 0}attach(e){const n=this.#a;if(n!==e){this.#g(void 0);for(const t of["pointerup","pointercancel","lostpointercapture"])n?.removeEventListener(t,this.#f),e?.addEventListener(t,this.#f);n?.removeEventListener("pointerdown",this.#l),n?.removeEventListener("pointermove",this.#u),e?.addEventListener("pointerdown",this.#l),e?.addEventListener("pointermove",this.#u),this.#a=e}}#c(){return!this.#e.readOnly()&&!this.#e.inputs().some(e=>e.matches(":disabled"))}#p(e){const n=this.#i,t=n.vertical?e.clientY:e.clientX;return n.reversed?n.origin-t:t-n.origin}#h(e){const n=this.#i,t=Number(this.#e.inputs()[e].value);return Q(this.#e.scale(),t,n.length,n.corner)}#b(e){if(this.#e.inputs().length===1)return 0;const n=this.#h(0),t=this.#h(1),r=Math.abs(n-e)-Math.abs(t-e);return r<0?0:r>0||n!==t?1:Math.abs(e-n)>X?e<n?0:1:void 0}#m(e,n){const t=this.#i,r=this.#e.inputs()[e],s=r.value,a=this.#p(n),d=me(this.#e.scale(),a,t.length,t.corner);r.value=`${d}`,r.value!==s&&q(r,"input")}#S(e){this.#e.inputs()[e].focus({preventScroll:!0}),this.#e.setPressed(e)}#r(e){const n=this.#a,t=n?.querySelector(".cw-Slider-rail")??null,r=this.#e.inputs();if(n===null||t===null||r.length===0||this.#t!==void 0||e.button!==0||!e.isPrimary||e.defaultPrevented||!this.#c())return;const s=t.getBoundingClientRect(),a=t.ownerDocument.defaultView.getComputedStyle(t),d=a.writingMode.startsWith("vertical"),o=!d&&a.direction==="rtl";e.preventDefault(),this.#i={vertical:d,reversed:d||o,origin:d?s.bottom:o?s.right:s.left,length:d?s.height:s.width,corner:Number.parseFloat(a.borderTopLeftRadius)||0},this.#o=r.map(l=>l.value),this.#t=e.pointerId,this.#d=this.#p(e),this.#n=this.#b(this.#d);try{n.setPointerCapture(e.pointerId)}catch{}this.#S(this.#n??r.length-1),this.#n!==void 0&&this.#m(this.#n,e)}#s(e){if(!this.#c()){this.#g(void 0);return}if(this.#n===void 0){const n=this.#p(e)-this.#d;if(Math.abs(n)<=X)return;this.#n=n<0?0:1,this.#S(this.#n)}this.#m(this.#n,e)}#g(e){const n=this.#t,t=this.#a;if(n!==void 0){e!==void 0&&this.#n!==void 0&&this.#c()&&this.#m(this.#n,e),this.#t=void 0,this.#i=void 0,this.#n=void 0,this.#e.setPressed(void 0),t?.hasPointerCapture(n)===!0&&t.releasePointerCapture(n);for(const[r,s]of this.#e.inputs().entries())s.value!==this.#o[r]&&q(s,"change")}}}function fe(i,e){const n=x(),t=x(),r=U(i),s=r.input,a=h(e),d=R(a,g("value"in e?e.value:e.defaultValue,a.min)),o=(F,re)=>F in s?s[F]:re,l=<span class="cw-Slider-label"id={n}>
14
+ {m(e.label)??i.children}
15
+ </span>,u=<span class="cw-Slider-leading">
16
+ {m(e.leading,e.leadingIcon)}
17
+ </span>,c=<span class="cw-Slider-prefix">{e.prefix}</span>,S=<span class="cw-Slider-suffix">{e.suffix}</span>,P=<span class="cw-Slider-trailing">
18
+ {m(e.trailing,e.trailingIcon)}
19
+ </span>,I=<span class="cw-Slider-supporting"aria-live="polite"id={t}>
20
+ {A(e)}
21
+ </span>,y=e.invalid===!0||B(e),T=ee(a,d,void 0),O=<input{...s}aria-describedby={o("aria-describedby",A(e)===void 0?void 0:t)}aria-invalid={o("aria-invalid",y?"true":void 0)}aria-labelledby={o("aria-labelledby","aria-label"in s?void 0:n)}aria-orientation={v(e)}aria-readonly={o("aria-readonly",e.readOnly===!0?"true":void 0)}aria-valuetext={e.formatValue?.(d)}class="cw-Slider-input _cw-Slider-end"disabled={e.disabled===!0}id={e.id??s.id}max={a.max}min={a.min}name={e.name}required={e.required===!0}step={a.step}type="range"value={d}/>,w=<span class="cw-Slider-insetIcon"><span>{e.insetIcon}</span></span>,C=M(!1,O,w);return<label{...r.container}classList={{...r.container.classList,...ne(b,e,a,d,y),"_cw-Slider-iconInactive":T.inactive}}style={{...r.container.style,...N(a,[d])}}>
22
+ {l}
23
+ <span class="cw-Slider-track">{u}{c}{C}{S}{P}</span>
24
+ {I}
25
+ </label>}class Se extends ae{#e;#l;#u;#f;#a;#t;#n;#d;#o;#i;#c;#p;#h;#b;#m;#S;#r;#s;constructor(e){super(e),this.#e="value"in e,this.#l=x(),this.#u=x(),this.#f="attr:aria-label"in e||"attr:aria-labelledby"in e,this.#a="attr:aria-describedby"in e,this.#t="attr:aria-invalid"in e,this.#n="attr:aria-readonly"in e,this.#d=new ie({inputs:()=>{const n=this.functionElement;return n===null?[]:[n]},scale:()=>h(this.props),readOnly:()=>this.props.readOnly===!0,setPressed:n=>this.setClass("_cw-Slider-endPressed",n!==void 0)}),this.#o=n=>this.#C(n),this.#i=()=>this.#y(),this.#c=()=>oe,this.#p=void 0,this.#h=null,this.#b=null,this.#m=void 0,this.#S=!1,this.#r=k,this.#s=()=>{},se(()=>{const n=this.functionElement,t=this.#h,s=t?.ownerDocument.defaultView?.ResizeObserver;if(n!==null&&(this.#s(),this.#s=z(n,this.#i)),t!==null&&s!==void 0){const a=new s(()=>this.#g());a.observe(t),H(()=>a.disconnect())}}),H(()=>{this.#s(),this.#d.attach(null),this.functionElement?.removeEventListener("input",this.#o)})}#g(){const e=this.#h,n=this.#b,t=e?.ownerDocument.defaultView;if(e===null||n===null||t===null||t===void 0||!e.isConnected)return;const r=t.getComputedStyle(e),s=t.getComputedStyle(n),a=e.getBoundingClientRect(),d=o=>Number.parseFloat(s.getPropertyValue(o))||0;this.#m={length:r.writingMode.startsWith("vertical")?a.height:a.width,corner:Number.parseFloat(r.borderTopLeftRadius)||0,gap:d("--cw-slider-handle-gap")+d("--cw-slider-handle-width")/2,iconSize:d("--cw-slider-inset-icon-size"),iconPadding:d("--cw-slider-inset-icon-padding")},this.#w()}#w(){const e=ee(h(this.props),this.#r,this.#m);this.setClass("_cw-Slider-iconInactive",e.inactive),this.setClass("_cw-Slider-iconHidden",e.hidden)}#v(){const e=this.functionElement;e!==null&&(te(this,this.props,h(this.props),[this.#r]),$(e,this.props,this.#r),this.#w())}#y(){const e=this.functionElement,n=h(this.props);e!==null&&(e.value=`${f(this.#e?g(this.props.value,n.min):Number(e.value),n.min,n.max)}`,this.#r=Number(e.value),this.#v())}#C(e){const n=this.functionElement,t=h(this.props);if(!(n===null||n.disabled)){if(this.props.readOnly===!0){n.value=`${this.#r}`;return}this.#r=f(Number(n.value),t.min,t.max),this.#v(),de([this.props.onValueChange,this.props.onChange],this.#r,e),this.#e&&this.#y()}}#x(e){const n=this.#c(),t=he(this.#p,n,this.props.invalid===!0,e);if(this.#p=n,t.error!==void 0&&(this.setClass(`${b}-error`,t.error),this.#t||this.setAttribute("aria-invalid",t.error?"true":void 0)),t.described!==void 0&&!this.#a){const r=t.described?this.#u:void 0;this.setAttribute("aria-describedby",r)}}applyComponentProps(){const e=super.readProps(["attr:id","centered","defaultValue","disabled","formatValue","id","invalid","max","min","name","orientation","readOnly","required","shape","size","step","value","valueIndicator","vertical"]),n=this.functionElement,t=h(this.props),r=e.id??e["attr:id"];if(n!==null){if((e.minChanged||e.maxChanged||e.stepChanged)&&_(n,t),!this.#S){const s=g(e.defaultValue,t.min);this.#S=!0,n.defaultValue=`${f(s,t.min,t.max)}`,this.#e||(n.value=n.defaultValue)}e.valueChanged||e.minChanged||e.maxChanged||e.stepChanged?this.#y():(e.centeredChanged||e.formatValueChanged)&&this.#v(),e.disabledChanged&&(n.disabled=e.disabled===!0,this.setClass(`${b}-disabled`,e.disabled===!0)),e.readOnlyChanged&&(this.setClass(`${b}-readOnly`,e.readOnly===!0),this.#n||this.setAttribute("aria-readonly",e.readOnly===!0?"true":void 0)),e.requiredChanged&&(n.required=e.required===!0),e.nameChanged&&this.setAttribute("name",e.name===""?void 0:e.name),"id"in this.props&&n.getAttribute("id")!==(r??null)&&this.setAttribute("id",r),(e.orientationChanged||e.verticalChanged)&&(this.setClass("orientation",`${b}-${v(this.props)}`),this.setAttribute("aria-orientation",v(this.props))),e.sizeChanged&&this.setClass("size",`_cw-Slider-${e.size??"xs"}`),e.shapeChanged&&(this.setClass("shape",`_cw-Slider-${e.shape??"standard"}`),this.#g()),e.centeredChanged&&this.setClass("cw-Slider-centered",e.centered===!0),e.valueIndicatorChanged&&this.setClass("_cw-Slider-noValueIndicator",e.valueIndicator===!1),this.#x(e.invalidChanged)}}onFunctionElementChanged(e){const n=this.functionElement;this.#s(),super.onFunctionElementChanged(e),n?.removeEventListener("input",this.#o),e?.addEventListener("input",this.#o),this.#s=()=>{},e!==null&&(this.#s=z(e,this.#i))}render(e,n){const t=<span class="cw-Slider-label"id={this.#l}/>;p(t,()=>m(this.props.label)??e);const r=<span class="cw-Slider-leading"/>;p(r,()=>m(this.props.leading,this.props.leadingIcon));const s=<span class="cw-Slider-prefix"/>;p(s,()=>this.props.prefix);const a=<span class="cw-Slider-suffix"/>;p(a,()=>this.props.suffix);const d=<span class="cw-Slider-trailing"/>;p(d,()=>m(this.props.trailing,this.props.trailingIcon));const o=<span class="cw-Slider-supporting"aria-live="polite"id={this.#u}/>,l=ue(this.props);this.#c=l,p(o,()=>l().content);const u=<input aria-labelledby={this.#f?void 0:this.#l}class="cw-Slider-input _cw-Slider-end"ref={n}type="range"/>,c=<span class="cw-Slider-insetIcon"><span/></span>;p(c.firstChild,()=>this.props.insetIcon);const S=M(!1,u,c);return this.#h=S.querySelector(".cw-Slider-rail"),this.#b=c,this.#d.attach(S),<label class={b}>
26
+ {t}
27
+ <span class="cw-Slider-track">{r}{s}{S}{a}{d}</span>
28
+ {o}
29
+ </label>}}const Re=G(()=>fe,()=>Se);function ge(i,e){const n=x(),t=U(i),r=h(e),[s,a]=pe(e,Y,!0,[void 0,void 0],(w,C)=>R(r,g(w,C===0?r.min:r.max)),(w,C)=>w-C),d=<legend class="cw-RangeSlider-label">
30
+ {m(e.label)??i.children}
31
+ </legend>,o=<span class="cw-RangeSlider-leading">
32
+ {m(e.leading,e.leadingIcon)}
33
+ </span>,l=<span class="cw-RangeSlider-prefix">{e.prefix}</span>,u=<span class="cw-RangeSlider-suffix">{e.suffix}</span>,c=<span class="cw-RangeSlider-trailing">
34
+ {m(e.trailing,e.trailingIcon)}
35
+ </span>,S=<span class="cw-RangeSlider-supporting"aria-live="polite"id={n}>
36
+ {A(e)}
37
+ </span>,P=e.invalid===!0||B(e),I=ce(t.input,e,W,n),y={"aria-orientation":v(e),max:r.max,min:r.min,step:r.step,type:"range"},T=<>
38
+ <input{...I.start}{...y}aria-valuemax={a}aria-valuemin={r.min}aria-valuetext={e.formatValue?.(s)}class="cw-RangeSlider-input _cw-Slider-start"value={s}/>
39
+ <input{...I.end}{...y}aria-valuemax={r.max}aria-valuemin={s}aria-valuetext={e.formatValue?.(a)}class="cw-RangeSlider-input _cw-Slider-end"value={a}/>
40
+ </>,O=M(!0,T);return<fieldset{...t.container}classList={{...t.container.classList,...ne(L,e,r,a,P)}}style={{...t.container.style,...N(r,[s,a])}}>
41
+ {d}
42
+ <span class="cw-RangeSlider-track">{o}{l}{O}{u}{c}</span>
43
+ {S}
44
+ </fieldset>}class be extends le{#e;constructor(e){super(e,L,W,Y,{parse:n=>Number(n.value),compare:(n,t)=>n-t},[k,j]),this.#e=new ie({inputs:()=>{const n=this.functionElement,t=this.endInput;return n===null||t===null?[]:[n,t]},scale:()=>h(this.props),readOnly:()=>this.props.readOnly===!0,setPressed:n=>{this.setClass("_cw-Slider-startPressed",n===0),this.setClass("_cw-Slider-endPressed",n===1)}}),H(()=>this.#e.attach(null))}normalize(e,n){const t=h(this.props),r=n===0?t.min:t.max;return f(g(e,r),t.min,t.max)}applyConstraints(e,n){const t=super.readProps(["max","min","step"]),r=h(this.props);return!t.minChanged&&!t.maxChanged&&!t.stepChanged?!1:(_(e,r),_(n,r),!0)}changeCallbacks(){return[this.props.onValueChange,this.props.onRangeChange,this.props.onChange]}onPairApplied(e){const n=this.functionElement,t=this.endInput,r=h(this.props);n===null||t===null||(n.setAttribute("aria-valuemin",`${r.min}`),n.setAttribute("aria-valuemax",`${e[1]}`),t.setAttribute("aria-valuemin",`${e[0]}`),t.setAttribute("aria-valuemax",`${r.max}`),$(n,this.props,e[0]),$(t,this.props,e[1]),te(this,this.props,r,e))}applyComponentProps(){super.applyComponentProps();const e=super.readProps(["formatValue","orientation","shape","size","valueIndicator","vertical"]),n=this.endInput,t=v(this.props);(e.orientationChanged||e.verticalChanged)&&(this.setClass("orientation",`${L}-${t}`),this.setAttribute("aria-orientation",t),n?.setAttribute("aria-orientation",t)),e.sizeChanged&&this.setClass("size",`_cw-RangeSlider-${e.size??"xs"}`),e.shapeChanged&&this.setClass("shape",`_cw-RangeSlider-${e.shape??"standard"}`),e.valueIndicatorChanged&&this.setClass("_cw-Slider-noValueIndicator",e.valueIndicator===!1),e.formatValueChanged&&this.onPairApplied(this.values)}render(e,n){const t=<legend class="cw-RangeSlider-label"/>;p(t,()=>m(this.props.label)??e);const r=<span class="cw-RangeSlider-leading"/>;p(r,()=>m(this.props.leading,this.props.leadingIcon));const s=<span class="cw-RangeSlider-prefix"/>;p(s,()=>this.props.prefix);const a=<span class="cw-RangeSlider-suffix"/>;p(a,()=>this.props.suffix);const d=<span class="cw-RangeSlider-trailing"/>;p(d,()=>m(this.props.trailing,this.props.trailingIcon));const o=<span class="cw-RangeSlider-supporting"aria-live="polite"id={this.supportingId}/>;this.insertSupporting(o);const l=<>
45
+ <input class="cw-RangeSlider-input _cw-Slider-start"ref={n}type="range"/>
46
+ <input class="cw-RangeSlider-input _cw-Slider-end"ref={c=>this.setEndInput(c)}type="range"/>
47
+ </>,u=M(!0,l);return this.#e.attach(u),<fieldset class={L}>
48
+ {t}
49
+ <span class="cw-RangeSlider-track">{r}{s}{u}{a}{d}</span>
50
+ {o}
51
+ </fieldset>}}const Me=G(()=>ge,()=>be);export{Me as RangeSlider,be as RangeSliderController,Re as Slider,Se as SliderController};
@@ -0,0 +1 @@
1
+ @cw-attribute-roles cw-TextField;@property --_CW-FIELD-LABEL_PROGRESS{syntax: "<number>"; inherits: true; initial-value: 1;}@property --_CW-FIELD-LABEL_FLOATED{syntax: "<number>"; inherits: true; initial-value: 1;}@property --_CW-FIELD-LABEL_RESTED{syntax: "<number>"; inherits: true; initial-value: 0;}@layer cw-style{.cw-TextField{--_cw-field-affix-color: cw-var(--cw-TextField-input-affixColor);--_cw-field-caret-color: cw-var(--cw-TextField-input-caretColor);--_cw-field-container-color: cw-var(--cw-TextField-container-color);--_cw-field-height: cw-var(--cw-TextField-container-height);--_cw-field-icon-size: cw-var(--cw-TextField-icon-size);--_cw-field-indicator-color: cw-var(--cw-TextField-indicator-color);--_cw-field-indicator-focus-opacity: 0;--_cw-field-indicator-focus-thickness: cw-var(--cw-TextField-focus-indicatorThickness);--_cw-field-indicator-thickness: cw-var(--cw-TextField-indicator-thickness);--_cw-field-input-color: cw-var(--cw-TextField-input-color);--_cw-field-label-color: cw-var(--cw-TextField-label-color);--_cw-field-leading-color: cw-var(--cw-TextField-icon-leadingColor);--_cw-field-menu-color: cw-var(--cw-TextField-menu-color);--_cw-field-menu-elevation: cw-var(--cw-TextField-menu-elevation);--_cw-field-menu-item-height: cw-var(--cw-TextField-menu-itemHeight);--_cw-field-menu-item-label-color: cw-var(--cw-TextField-menu-itemLabelColor);--_cw-field-menu-item-padding: cw-var(--cw-TextField-menu-itemPadding);--_cw-field-menu-item-state-layer-color: cw-var(--cw-TextField-menu-itemStateLayerColor);--_cw-field-menu-shadow-color: cw-var(--cw-TextField-menu-shadowColor);--_cw-field-menu-shape: cw-var(--cw-TextField-menu-shape);--_cw-field-padding: cw-var(--cw-TextField-container-padding);--_cw-field-placeholder-color: cw-var(--cw-TextField-input-placeholderColor);--_cw-field-state-layer-color: transparent;--_cw-field-state-layer-opacity: cw-var(--cw-TextField-hover-stateLayerOpacity);--_cw-field-supporting-color: cw-var(--cw-TextField-supportingText-color);--_cw-field-trailing-color: cw-var(--cw-TextField-icon-trailingColor);-cw-border-radius:--cw-TextField-container-shape}.cw-TextField:where(:has(>.cw-TextField-control:hover)){--_cw-field-indicator-color: cw-var(--cw-TextField-hover-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-hover-labelColor);--_cw-field-state-layer-color: cw-var(--cw-TextField-hover-stateLayerColor)}.cw-TextField:where(:has(.cw-TextField-input:focus)){--_cw-field-indicator-color: cw-var(--cw-TextField-focus-indicatorColor);--_cw-field-indicator-focus-opacity: 1;--_cw-field-label-color: cw-var(--cw-TextField-focus-labelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-focus-trailingIconColor)}.cw-TextField:where(.cw-TextField-error){--_cw-field-caret-color: cw-var(--cw-TextField-error-caretColor);--_cw-field-indicator-color: cw-var(--cw-TextField-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-labelColor);--_cw-field-supporting-color: cw-var(--cw-TextField-error-supportingTextColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-trailingIconColor)}.cw-TextField:where(.cw-TextField-error:has(>.cw-TextField-control:hover)){--_cw-field-indicator-color: cw-var(--cw-TextField-error-hoverIndicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-hoverLabelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-hoverTrailingIconColor)}.cw-TextField:where(.cw-TextField-error:has(.cw-TextField-input:focus)){--_cw-field-indicator-color: cw-var(--cw-TextField-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-labelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-trailingIconColor)}.cw-TextField:where(.cw-TextField-disabled){--_cw-field-affix-color: var(--_cw-field-disabled-content-color);--_cw-field-container-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-containerColor), cw-var(--cw-TextField-disabled-containerOpacity) );--_cw-field-disabled-content-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-contentColor), cw-var(--cw-TextField-disabled-contentOpacity) );--_cw-field-indicator-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-indicatorColor), cw-var(--cw-TextField-disabled-indicatorOpacity) );--_cw-field-input-color: var(--_cw-field-disabled-content-color);--_cw-field-label-color: var(--_cw-field-disabled-content-color);--_cw-field-leading-color: var(--_cw-field-disabled-content-color);--_cw-field-placeholder-color: var(--_cw-field-disabled-content-color);--_cw-field-supporting-color: var(--_cw-field-disabled-content-color);--_cw-field-trailing-color: var(--_cw-field-disabled-content-color)}:is(.cw-TextField,.cw-Select){--_cw-field-direction: 1;--_cw-field-icon-box: 48px;--_cw-field-icon-gap: calc( var(--_cw-field-padding) - (var(--_cw-field-icon-box) - var(--_cw-field-icon-size)) / 2 );--_cw-field-icon-text-inset: calc(var(--_cw-field-icon-box) + var(--_cw-field-icon-gap));--_cw-field-label-end: 0px;--_cw-field-label-float-x: 0px;--_cw-field-label-float-y: calc(8px + cw-var(--cw-Typescale-body-small-lineHeight)/2) ;--_cw-field-label-floated-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_cw-field-label-motion-opacity: calc( 1 - var(--_CW-FIELD-LABEL_FLOATED) - var(--_CW-FIELD-LABEL_RESTED) );--_cw-field-label-origin: var(--_cw-field-notch-padding) 50%;--_cw-field-label-rested-delay: 0s;--_cw-field-label-scale: .75;--_cw-field-label-start: 0px;--_CW-FIELD-LABEL_FLOATED: 1;--_CW-FIELD-LABEL_PROGRESS: 1;--_CW-FIELD-LABEL_RESTED: 0;--_cw-field-notch-padding: 4px;--_cw-field-notch-start: calc(var(--_cw-field-padding) - var(--_cw-field-notch-padding));--_cw-field-text-bottom: 16px;--_cw-field-text-top: 16px;box-sizing:border-box;display:inline-flex;flex-flow:column nowrap;gap:4px;max-inline-size:100%;min-inline-size:min(280px,100%);position:relative;transition-delay:var(--_cw-field-label-floated-delay),0s,var(--_cw-field-label-rested-delay);transition-duration:0s,cw-var(--cw-Motion-spring-spatial-fast-duration),0s;transition-property:--_CW-FIELD-LABEL_FLOATED,--_CW-FIELD-LABEL_PROGRESS,--_CW-FIELD-LABEL_RESTED;transition-timing-function:linear,cw-var(--cw-Motion-spring-spatial-fast-easing),linear;vertical-align:top}:is(.cw-TextField,.cw-Select):dir(rtl){--_cw-field-direction: -1;--_cw-field-label-origin: calc(100% - var(--_cw-field-notch-padding)) 50%}:is(.cw-TextField,.cw-Select):has(>*>:is(.cw-TextField-leading,.cw-Select-leading):not(:empty)){--_cw-field-label-start: calc(var(--_cw-field-icon-text-inset) - var(--_cw-field-padding))}:is(.cw-TextField,.cw-Select):has(>*>:is(.cw-TextField-trailing:not(:empty),.cw-TextField-reveal,.cw-Select-arrow)){--_cw-field-label-end: calc(var(--_cw-field-icon-text-inset) - var(--_cw-field-padding))}:is(._cw-TextField-filled,._cw-Select-filled):has(:is(.cw-TextField-labelText,.cw-Select-labelText):not(:empty)){--_cw-field-text-bottom: 8px;--_cw-field-text-top: calc(8px + cw-var(--cw-Typescale-body-small-lineHeight)) }:is(.cw-TextField-disabled,.cw-Select-disabled){cursor:default;pointer-events:none;user-select:none}:is(.cw-TextField-control,.cw-Select-control){-cw-typescale:--cw-Typescale-body-large;align-items:center;background-color:var(--_cw-field-container-color);border-radius:inherit;box-sizing:border-box;color:var(--_cw-field-input-color);isolation:isolate;min-block-size:var(--_cw-field-height);position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-control,.cw-Select-control):before{background-color:currentcolor;border-radius:inherit;color:var(--_cw-field-state-layer-color);content:"";inset:0;opacity:var(--_cw-field-state-layer-opacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-3}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading){--cw-Icon-size: var(--_cw-field-icon-size);align-items:center;display:flex;flex:none;font-size:var(--_cw-field-icon-size);justify-content:center;min-block-size:var(--_cw-field-icon-box);min-inline-size:var(--_cw-field-icon-box);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-leading,.cw-Select-leading){color:var(--_cw-field-leading-color)}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading)>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading):empty{display:none}:is(.cw-TextField-outline,.cw-Select-outline){border-color:currentcolor;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-field-indicator-thickness);box-sizing:border-box;color:var(--_cw-field-indicator-color);container-type:inline-size;inset:0;margin:0;min-inline-size:0;padding-block:0;padding-inline:var(--_cw-field-notch-start);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-1}:is(.cw-TextField-outline,.cw-Select-outline):after{border-color:currentcolor;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-field-indicator-focus-thickness);box-sizing:border-box;content:"";inset:0 0 calc(-1 * var(--_cw-field-indicator-thickness));opacity:var(--_cw-field-indicator-focus-opacity);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-legend,.cw-Select-legend){block-size:0;line-height:0;padding:0;position:relative;white-space:nowrap}:is(.cw-TextField-label,.cw-Select-label){-cw-typescale:--cw-Typescale-body-small;box-sizing:border-box;color:var(--_cw-field-label-color);display:inline-block;inset-block-start:8px;inset-inline-start:var(--_cw-field-label-start);max-inline-size:calc(100cqi - var(--_cw-field-label-end) - var(--_cw-field-label-start));opacity:var(--_CW-FIELD-LABEL_FLOATED);overflow:hidden;padding-inline:var(--_cw-field-notch-padding);pointer-events:none;position:relative;text-overflow:ellipsis;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);vertical-align:top;white-space:nowrap}:is(.cw-TextField-restingLabel,.cw-TextField-restingMotion,.cw-TextField-floatingMotion,.cw-Select-restingLabel,.cw-Select-restingMotion,.cw-Select-floatingMotion){box-sizing:border-box;color:var(--_cw-field-label-color);inset-block-start:calc((var(--_cw-field-height) - 1lh) / 2);inset-inline-start:calc(var(--_cw-field-notch-start) + var(--_cw-field-label-start));max-inline-size:calc(100% - 2 * var(--_cw-field-notch-start) - var(--_cw-field-label-start) - var(--_cw-field-label-end));overflow:hidden;padding-inline:var(--_cw-field-notch-padding);pointer-events:none;position:absolute;text-overflow:ellipsis;transform-origin:var(--_cw-field-label-origin);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap;z-index:-2}:is(.cw-TextField-restingLabel,.cw-Select-restingLabel){-cw-typescale:--cw-Typescale-body-large;opacity:var(--_CW-FIELD-LABEL_RESTED)}:is(.cw-TextField-restingMotion,.cw-Select-restingMotion){-cw-typescale:--cw-Typescale-body-large;opacity:calc(var(--_cw-field-label-motion-opacity) * (1 - round(down,var(--_CW-FIELD-LABEL_PROGRESS) + .5,1)));transform:translate(calc(var(--_cw-field-direction) * var(--_cw-field-label-float-x) * var(--_CW-FIELD-LABEL_PROGRESS)),calc((var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS))) scale(calc(1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)))}:is(.cw-TextField-floatingMotion,.cw-Select-floatingMotion){-cw-typescale:--cw-Typescale-body-small;opacity:calc(var(--_cw-field-label-motion-opacity) * round(down,var(--_CW-FIELD-LABEL_PROGRESS) + .5,1));transform:translate(calc(var(--_cw-field-direction) * var(--_cw-field-label-float-x) * var(--_CW-FIELD-LABEL_PROGRESS)),calc((var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS))) scale(calc((1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) / var(--_cw-field-label-scale)))}:is(.cw-TextField,.cw-Select):has(:is(.cw-TextField-labelText,.cw-Select-labelText):empty) :is(.cw-TextField-label,.cw-TextField-restingLabel,.cw-TextField-restingMotion,.cw-TextField-floatingMotion,.cw-Select-label,.cw-Select-restingLabel,.cw-Select-restingMotion,.cw-Select-floatingMotion){display:none}:is(.cw-TextField-asterisk,.cw-Select-asterisk){display:none}:is(._cw-TextField-outlined,._cw-Select-outlined){--_cw-field-label-float-x: calc(-1 * var(--_cw-field-label-start));--_cw-field-label-float-y: calc(var(--_cw-field-indicator-thickness) / 2);--_cw-field-label-text-top: calc( var(--_cw-field-height) / 2 + (var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS) - (1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) * 1cap / 2 );--_cw-field-notch-inline-size: calc( var(--_cw-field-notch-opening) * ( (var(--_cw-field-label-inline-size) - 2 * var(--_cw-field-notch-padding)) * (1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) / var(--_cw-field-label-scale) + 2 * var(--_cw-field-notch-padding) ) );--_cw-field-notch-opening: clamp( 0, round( up, tan(atan2( var(--_cw-field-indicator-focus-thickness) - var(--_cw-field-label-text-top), var(--_cw-field-indicator-focus-thickness) )), 1 ), 1 );--_cw-field-notch-overhang: 1px;:is(.cw-TextField-outline,.cw-Select-outline){border-width:var(--_cw-field-indicator-thickness);inset-block-start:calc(-1 * var(--_cw-field-notch-overhang));padding-inline:calc(var(--_cw-field-notch-start) - var(--_cw-field-indicator-thickness))}:is(.cw-TextField-legend,.cw-Select-legend){block-size:calc(var(--_cw-field-indicator-thickness) + 2 * var(--_cw-field-notch-overhang));inline-size:var(--_cw-field-notch-inline-size, auto);max-inline-size:var( --_cw-field-notch-inline-size, calc((1 - var(--_CW-FIELD-LABEL_RESTED)) * 100%) )}:is(.cw-TextField-outline,.cw-Select-outline):after{border-width:var(--_cw-field-indicator-focus-thickness);clip-path:polygon(0 0,var(--_cw-field-notch-start) 0,var(--_cw-field-notch-start) 50%,calc(100% - var(--_cw-field-notch-start)) 50%,calc(100% - var(--_cw-field-notch-start)) 0,100% 0,100% 100%,0 100%);inset:calc(-1 * var(--_cw-field-indicator-thickness));inset-block-start:calc(-1 * var(--_cw-field-indicator-thickness) - var(--_cw-field-notch-overhang))}:is(.cw-TextField-legend,.cw-Select-legend):after{border-block-start:var(--_cw-field-indicator-focus-thickness) solid currentcolor;content:"";inline-size:calc(100cqi - 100%);inset-block-start:var(--_cw-field-notch-overhang);inset-inline-start:100%;opacity:var(--_cw-field-indicator-focus-opacity);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-label,.cw-Select-label){inset-block-start:calc(var(--_cw-field-notch-overhang) + var(--_cw-field-indicator-thickness) / 2 - .5lh);inset-inline-start:0}}:is(.cw-TextField-footer,.cw-Select-footer){-cw-typescale:--cw-Typescale-body-small;color:var(--_cw-field-supporting-color);display:flex;gap:var(--_cw-field-padding);padding-inline:var(--_cw-field-padding);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-footer,.cw-Select-footer):not(:has(>:not(:empty))){display:none}:is(.cw-TextField-supporting,.cw-Select-supporting){flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere}.cw-TextField-control{cursor:text;display:flex;padding-inline:var(--_cw-field-padding)}.cw-TextField-leading{margin-inline:calc(-1 * var(--_cw-field-padding)) var(--_cw-field-icon-gap)}.cw-TextField-trailing{color:var(--_cw-field-trailing-color);margin-inline:var(--_cw-field-icon-gap) calc(-1 * var(--_cw-field-padding))}.cw-TextField-field{align-items:stretch;display:flex;flex:1 1 auto;min-inline-size:0}.cw-TextField-input{appearance:none;background:transparent;block-size:auto;border:0;box-sizing:content-box;caret-color:var(--_cw-field-caret-color);color:inherit;flex:1 1 auto;font:inherit;inline-size:100%;letter-spacing:inherit;margin:0;min-inline-size:0;outline:none;padding:var(--_cw-field-text-top) 0 var(--_cw-field-text-bottom)}.cw-TextField-input:autofill{-webkit-text-fill-color:var(--_cw-field-input-color);background-clip:text}.cw-TextField-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}textarea.cw-TextField-input{overflow-wrap:anywhere;resize:none}@supports (field-sizing: content){textarea.cw-TextField-input{field-sizing:content;min-block-size:calc(var(--_cw-TextField-rows, 1) * 1lh)}}.cw-TextField-input::placeholder{color:var(--_cw-field-placeholder-color);opacity:1;transition-duration:cw-var(--cw-Motion-spring-effect-slow-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-slow-easing)}:is(.cw-TextField-prefix,.cw-TextField-suffix){color:var(--_cw-field-affix-color);flex:none;opacity:1;padding-block:var(--_cw-field-text-top) var(--_cw-field-text-bottom);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color,opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap}.cw-TextField-prefix{padding-inline-end:2px}.cw-TextField-suffix{padding-inline-start:2px}:is(.cw-TextField-prefix,.cw-TextField-suffix):empty{display:none}.cw-TextField:has(.cw-TextField-input:required):not(._cw-TextField-noAsterisk){.cw-TextField-asterisk{display:inline}}.cw-TextField:not(:has(.cw-TextField-input:is(:focus,:not(:placeholder-shown)))){--_cw-field-label-floated-delay: 0s;--_cw-field-label-rested-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_CW-FIELD-LABEL_FLOATED: 0;--_CW-FIELD-LABEL_PROGRESS: 0;--_CW-FIELD-LABEL_RESTED: 1;&:has(.cw-TextField-labelText:not(:empty)) :is(.cw-TextField-prefix,.cw-TextField-suffix){opacity:0}&:has(.cw-TextField-labelText:not(:empty)) .cw-TextField-input::placeholder{opacity:0;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}}.cw-TextField-reveal{align-items:center;appearance:none;background:transparent;border:0;color:var(--_cw-field-trailing-color);cursor:pointer;display:flex;flex:none;font:inherit;justify-content:center;margin-block:0;margin-inline:var(--_cw-field-icon-gap) calc(-1 * var(--_cw-field-padding));min-block-size:var(--_cw-field-icon-box);min-inline-size:var(--_cw-field-icon-box);outline:none;padding:0;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-TextField-reveal:has(+.cw-TextField-trailing:not(:empty)){margin-inline-end:0}.cw-TextField-reveal+.cw-TextField-trailing{margin-inline-start:0}.cw-TextField-reveal>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}.cw-TextField-reveal:before{background-color:currentcolor;block-size:40px;border-radius:50%;color:transparent;content:"";inline-size:40px;opacity:cw-var(--cw-State-layer-hoverOpacity);outline:0 solid cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-TextField-reveal:hover:before{color:var(--_cw-field-trailing-color)}.cw-TextField-reveal:is(:focus-visible,:active):before{color:var(--_cw-field-trailing-color);opacity:cw-var(--cw-State-layer-pressOpacity)}.cw-TextField-reveal:focus-visible:before{opacity:cw-var(--cw-State-layer-focusOpacity);outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-TextField-counter{margin-inline-start:auto;white-space:nowrap}.cw-Autocomplete-menu{--cw-elevationShadow-color: var(--_cw-field-menu-shadow-color);--cw-elevationShadow-level: var(--_cw-field-menu-elevation);background-color:var(--_cw-field-menu-color);border:0;border-radius:var(--_cw-field-menu-shape);box-sizing:border-box;color:var(--_cw-field-menu-item-label-color);inset:auto;margin:0;opacity:0;overflow:hidden auto;overscroll-behavior:contain;padding:8px 0;position:fixed;transform:scale(.8);transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:display,opacity,overlay,transform;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-Autocomplete-menu:popover-open{opacity:1;transform:none}@starting-style{.cw-Autocomplete-menu:popover-open{opacity:0;transform:scale(.8)}}.cw-Autocomplete-option{-cw-typescale:--cw-Typescale-label-large;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;min-block-size:var(--_cw-field-menu-item-height);padding-inline:var(--_cw-field-menu-item-padding);position:relative;user-select:none}.cw-Autocomplete-option:before{background-color:currentcolor;color:transparent;content:"";inset:0;opacity:cw-var(--cw-State-layer-hoverOpacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-Autocomplete-option:hover:before{color:var(--_cw-field-menu-item-state-layer-color)}.cw-Autocomplete-option[aria-selected=true]:before{color:var(--_cw-field-menu-item-state-layer-color);opacity:cw-var(--cw-State-layer-focusOpacity)}.cw-Autocomplete-option:active:before{opacity:cw-var(--cw-State-layer-pressOpacity)}}@layer cw-theme{._cw-TextField-outlined{@cw-apply-theme outlined,cw-TextField;}}
@@ -0,0 +1,67 @@
1
+ import{createMemo as T,createUniqueId as p,mergeProps as w,onCleanup as M,onMount as j,untrack as o}from"solid-js";import{defineDomComponent as K}from"..";import{DomController as G}from"../dom/client";import{Icon as H}from"../icon";import{createFieldLabel as N,firstInputSlotOf as c,idReferencesOf as V,inputErrorOf as X,observeFormReset as Q,observeLabelInlineSize as Z,splitInputElementProps as ee,supportingSlotOf as J}from"./base";import"./text-field.css";const m="cw-TextField",P="cw-TextField-disabled",q="cw-TextField-error",B="cw-TextField-readOnly",z="_cw-TextField-noAsterisk",S="cw-TextField-input",$=" ",W="Show password",C="visibility",te="visibility_off",U="--_cw-TextField-rows",ne="a[href], button, input, select, textarea, [contenteditable], [tabindex]";let R;function ie(){return R??=typeof CSS<"u"&&CSS.supports("field-sizing","content"),R}function Y(i){return`_cw-TextField-${i??"filled"}`}function x(i){const{multiline:e,revealPassword:t,secure:n,type:s}=i;return e===!0||t===!1?!1:t===!0||n===!0||s==="password"}function E(i,e){const t=i.type??(i.secure===!0?"password":"text");return e&&x(i)?"text":t}function F(i,e){return e===void 0||e<=0?void 0:`${i} / ${e}`}function D(i){return i.localName==="textarea"}function se(i){return typeof i=="function"?i():i}function re(i,e,t){const n=p(),s=p(),r=p(),l=X(e),u=J(e,l),a=t?.(),f=ee(i),{containerProps:h,elementProps:d}=f,L=e.invalid===!0||l!==void 0,b=("value"in e?e.value:e.defaultValue)??"",A=F(b.length,e.maxLength),v=e.disabled===!0,I=e.readOnly===!0,g=e.id??d.id??n,O={...d,"aria-describedby":V(d["aria-describedby"],u===void 0?void 0:s,A===void 0?void 0:r),"aria-invalid":"aria-invalid"in d?d["aria-invalid"]:L?"true":void 0,class:S,disabled:v,id:g,maxLength:e.maxLength,minLength:e.minLength,name:e.name,placeholder:e.placeholder??$,readOnly:I||void 0,required:e.required===!0,spellcheck:e.spellCheck},_=e.multiline===!0,k=N(m);return<div{...h}classList={{...h.classList,[Y(e.variant)]:!0,[P]:v,[q]:L,[z]:e.noAsterisk===!0,[B]:I,[m]:!0,...a===void 0?void 0:{[a.className]:!0}}}style={_?{...h.style,[U]:`${e.rows??1}`}:h.style}>
2
+ <div class="cw-TextField-control">
3
+ <span class="cw-TextField-leading">
4
+ {c(()=>e.leading,()=>e.leadingIcon)}
5
+ </span>
6
+ <span class="cw-TextField-field">
7
+ <span class="cw-TextField-prefix">{e.prefix}</span>
8
+ {_?<textarea{...O}cols={e.cols}rows={e.rows??1}>{b}</textarea>:<input{...O}autocomplete={e.autocomplete}inputMode={e.inputMode}max={e.max}min={e.min}pattern={e.pattern}step={e.step}type={E(e,!1)}value={b}{...a?.controlAttributes}/>}
9
+ <span class="cw-TextField-suffix">{e.suffix}</span>
10
+ </span>
11
+ {x(e)?<button aria-controls={g}aria-label={e.revealPasswordLabel??W}aria-pressed="false"class="cw-TextField-reveal"disabled={v}type="button"><H name={C}/></button>:void 0}
12
+ <span class="cw-TextField-trailing">
13
+ {c(()=>e.trailing,()=>e.trailingIcon)}
14
+ </span>
15
+ <fieldset class="cw-TextField-outline"role="presentation">
16
+ <legend class="cw-TextField-legend">
17
+ <span class="cw-TextField-label">
18
+ <label class="cw-TextField-labelText"for={g}id={a?.labelId}>
19
+ {k.content(c(()=>e.label,()=>f.children))}
20
+ </label>
21
+ <span aria-hidden="true"class="cw-TextField-asterisk">*</span>
22
+ </span>
23
+ </legend>
24
+ </fieldset>
25
+ {k.copies()}
26
+ </div>
27
+ <div class="cw-TextField-footer">
28
+ <span aria-live="polite"class="cw-TextField-supporting"id={s}>
29
+ {u}
30
+ </span>
31
+ <span class="cw-TextField-counter"id={r}>{A}</span>
32
+ </div>
33
+ {a?.content()}
34
+ </div>}class de extends G{#d;#x;#a;#o;#u;#p;#n;#c;#i;#e;#s;#r;constructor(e){super(e),this.#d="value"in e,this.#x=p(),this.#a=p(),this.#o=p(),this.#u=T(()=>X(e)),this.#p=T(()=>J(e,this.#u())),this.#n=null,this.#c=null,this.#i=null,this.#e=!1,this.#s=!1,this.#r=()=>{},j(()=>{const t=this.#t();t!==null&&this.#v(t),M(Z(this,m))}),M(()=>this.#r())}#t(){return this.functionElement}#f(e){const t=`attr:${e}`;return t in this.props?[super.readProp(t)[0],!0]:[void 0,!1]}#b(){const[e]=this.#f("id");return this.props.id??e??this.#x}#v(e){this.#r(),this.#r=Q(e,this.#h)}#g(e,t){const{onChange:n,onTextChange:s,onValueChange:r}=this.props;r?.(e,t),s!==r&&s?.(e,t),n!==r&&n!==s&&n?.(e,t)}#l(){const e=this.#t();if(!(e===null||this.#s)){if(this.#d){const t=o(()=>this.props.value)??"";e.defaultValue!==t&&(e.defaultValue=t),e.value!==t&&(e.value=t)}this.#h()}}#h=()=>{const e=this.#t(),t=this.#c;if(e!==null){if(t!==null){const n=o(()=>this.props.maxLength);t.textContent=F(e.value.length,n)??""}D(e)&&!ie()&&(e.style.blockSize="auto",e.style.blockSize=`${e.scrollHeight}px`)}};commitValue(e,t){const n=this.#t();n!==null&&(this.#d||(n.value=e),this.#g(e,t),this.#l())}#T=e=>{const t=e.currentTarget;this.#g(t.value,e),e.isComposing?this.#h():this.#l()};#S=()=>{this.#s=!0};#C=()=>{this.#s=!1,setTimeout(()=>this.#l(),0)};#E=e=>{const t=this.#t();t===null||e.button!==0||e.target.closest(ne)!==null||(e.preventDefault(),t.focus())};#F=e=>{e.preventDefault()};#w=()=>{this.#e=!this.#e,this.#y(),this.#m()};#y(){const e=this.#t();if(e===null||D(e))return;const t=E(o(()=>this.props),this.#e),n=e.getRootNode().activeElement===e,{selectionDirection:s,selectionEnd:r,selectionStart:l}=e;e.type!==t&&(super.setAttribute("type",t),n&&l!==null&&r!==null&&e.setSelectionRange(l,r,s??void 0))}#m(){const e=this.#i;e!==null&&(o(()=>{e.disabled=this.props.disabled===!0,e.setAttribute("aria-controls",this.#b()),e.setAttribute("aria-label",this.props.revealPasswordLabel??W)}),e.setAttribute("aria-pressed",this.#e?"true":"false"),e.firstElementChild.textContent=this.#e?te:C)}applyComponentProps(){const e=super.readProps(["autocomplete","cols","disabled","id","inputMode","invalid","max","maxLength","min","minLength","multiline","name","noAsterisk","pattern","placeholder","readOnly","required","revealPassword","revealPasswordLabel","rows","secure","spellCheck","step","type","value","variant"]),t=e.multiline===!0,n=e.multilineChanged||void 0,[s]=this.#f("aria-describedby"),[,r]=this.#f("aria-invalid"),l=e.invalid===!0||this.#u()!==void 0,u=F(0,e.maxLength)!==void 0,a=this.#b();e.variantChanged&&super.setClass("variant",Y(e.variant)),e.disabledChanged&&(super.setClass(P,e.disabled===!0),super.setAttribute("disabled",e.disabled===!0)),e.readOnlyChanged&&(super.setClass(B,e.readOnly===!0),super.setAttribute("readonly",e.readOnly===!0)),super.setClass(q,l),r||super.setAttribute("aria-invalid",l?"true":void 0),super.setAttribute("aria-describedby",V(s,this.#p()===void 0?void 0:this.#a,u?this.#o:void 0)),super.setAttribute("id",a),this.#n!==null&&(this.#n.htmlFor=a),e.requiredChanged&&super.setAttribute("required",e.required===!0),e.noAsteriskChanged&&super.setClass(z,e.noAsterisk===!0),e.nameChanged&&super.setAttribute("name",e.name),e.placeholderChanged&&super.setAttribute("placeholder",e.placeholder??$),e.maxLengthChanged&&super.setAttribute("maxlength",e.maxLength),e.minLengthChanged&&super.setAttribute("minlength",e.minLength),e.spellCheckChanged&&super.setAttribute("spellcheck",e.spellCheck),(e.autocompleteChanged||n)&&super.setAttribute("autocomplete",t?void 0:e.autocomplete),(e.inputModeChanged||n)&&super.setAttribute("inputmode",t?void 0:e.inputMode),(e.patternChanged||n)&&super.setAttribute("pattern",t?void 0:e.pattern),(e.minChanged||n)&&super.setAttribute("min",t?void 0:e.min),(e.maxChanged||n)&&super.setAttribute("max",t?void 0:e.max),(e.stepChanged||n)&&super.setAttribute("step",t?void 0:e.step),(e.colsChanged||n)&&super.setAttribute("cols",t?e.cols:void 0),(e.rowsChanged||n)&&(super.setAttribute("rows",t?e.rows??1:void 0),super.setStyle(U,t?e.rows??1:void 0)),(e.typeChanged||e.secureChanged||e.revealPasswordChanged||n)&&(x(e)||(this.#e=!1),super.setAttribute("type",t?void 0:E(e,this.#e))),(e.valueChanged||e.maxLengthChanged||n)&&this.#l(),this.#m()}onFunctionElementChanged(e){const t=e,n=this.#t();super.onFunctionElementChanged(e),this.#r(),n?.removeEventListener("input",this.#T),n?.removeEventListener("compositionstart",this.#S),n?.removeEventListener("compositionend",this.#C),this.#s=!1,t!==null&&(t.addEventListener("input",this.#T),t.addEventListener("compositionstart",this.#S),t.addEventListener("compositionend",this.#C),o(()=>{n!==null?(t.defaultValue=n.defaultValue,t.value=n.value):this.#d?(t.defaultValue=this.props.value??"",t.value=this.props.value??""):this.props.defaultValue!==void 0&&(t.defaultValue=this.props.defaultValue)}),this.#v(t))}render(e,t){const n=t,s=T(()=>x(this.props)),r=()=>{const d=this.props.multiline===!0;return o(()=>d?<textarea class={S}ref={n}/>:<input class={S}ref={n}/>)},l=()=>{if(!s()){this.#i=null;return}return this.#i=<button aria-pressed="false"class="cw-TextField-reveal"on:click={this.#w}on:mousedown={this.#F}type="button"><H name={C}/></button>,o(()=>this.#m()),this.#i},u=this.#o,a=this.#a,f=N(m);return<div class={m}>
35
+ <div class="cw-TextField-control"on:mousedown={this.#E}>
36
+ <span class="cw-TextField-leading">
37
+ {c(()=>this.props.leading,()=>this.props.leadingIcon)}
38
+ </span>
39
+ <span class="cw-TextField-field">
40
+ <span class="cw-TextField-prefix">{this.props.prefix}</span>
41
+ {r()}
42
+ <span class="cw-TextField-suffix">{this.props.suffix}</span>
43
+ </span>
44
+ {l()}
45
+ <span class="cw-TextField-trailing">
46
+ {c(()=>this.props.trailing,()=>this.props.trailingIcon)}
47
+ </span>
48
+ <fieldset class="cw-TextField-outline"role="presentation">
49
+ <legend class="cw-TextField-legend">
50
+ <span class="cw-TextField-label">
51
+ <label class="cw-TextField-labelText"ref={d=>this.#n=d}>
52
+ {f.content(c(()=>this.props.label,()=>se(e)))}
53
+ </label>
54
+ <span aria-hidden="true"class="cw-TextField-asterisk">*</span>
55
+ </span>
56
+ </legend>
57
+ </fieldset>
58
+ {f.copies(()=>this.#n)}
59
+ </div>
60
+ <div class="cw-TextField-footer">
61
+ <span aria-live="polite"class="cw-TextField-supporting"id={a}>
62
+ {this.#p()}
63
+ </span>
64
+ <span class="cw-TextField-counter"id={u}ref={d=>this.#c=d}/>
65
+ </div>
66
+ {this.renderExtension()}
67
+ </div>}get labelElement(){return this.#n}renderExtension(){}}const y=K(()=>re,()=>de);function he(i){return y(w({variant:"outlined"},i))}function me(i){return y(w({variant:"filled"},i))}function le(i){return y(w({secure:!0,type:"password"},i))}const xe=le;export{me as FilledTextField,he as OutlinedTextField,le as PasswordField,xe as SecureField,y as TextField,de as TextFieldController,re as renderTextField};
@@ -0,0 +1 @@
1
+ @cw-attribute-roles cw-TimePicker;@layer cw-style{.cw-TimePicker{--cw-time-picker-center-size: cw-var(--cw-TimePicker-selectorCenterSize);--cw-time-picker-dial-color: cw-var(--cw-TimePicker-clockDialColor);--cw-time-picker-dial-label-color: cw-var(--cw-TimePicker-clockDialLabelTextColor);--cw-time-picker-dial-selected-label-color: cw-var(--cw-TimePicker-clockDialSelectedLabelTextColor);--cw-time-picker-dial-size: cw-var(--cw-TimePicker-clockDialSize);--cw-time-picker-dial-state-layer-color: cw-var(--cw-TimePicker-clockDialStateLayerColor);--cw-time-picker-disabled-label-color: cw-scale-opacity( cw-var(--cw-TimePicker-disabledLabelTextColor), cw-var(--cw-TimePicker-disabledLabelTextOpacity) );--cw-time-picker-field-color: cw-var(--cw-TimePicker-timeFieldContainerColor);--cw-time-picker-field-error-color: cw-var(--cw-TimePicker-timeFieldErrorColor);--cw-time-picker-field-focus-color: cw-var(--cw-TimePicker-timeFieldFocusContainerColor);--cw-time-picker-field-focus-label-color: cw-var(--cw-TimePicker-timeFieldFocusLabelTextColor);--cw-time-picker-field-focus-outline-color: cw-var(--cw-TimePicker-timeFieldFocusOutlineColor);--cw-time-picker-field-focus-outline-width: cw-var(--cw-TimePicker-timeFieldFocusOutlineWidth);--cw-time-picker-field-height: cw-var(--cw-TimePicker-timeFieldHeight);--cw-time-picker-field-label-color: cw-var(--cw-TimePicker-timeFieldLabelTextColor);--cw-time-picker-field-shape: cw-var(--cw-TimePicker-timeFieldShape);--cw-time-picker-field-supporting-color: cw-var(--cw-TimePicker-timeFieldSupportingTextColor);--cw-time-picker-field-width: cw-var(--cw-TimePicker-timeFieldWidth);--cw-time-picker-handle-size: cw-var(--cw-TimePicker-selectorHandleSize);--cw-time-picker-headline-color: cw-var(--cw-TimePicker-headlineColor);--cw-time-picker-period-horizontal-height: cw-var(--cw-TimePicker-periodHorizontalHeight);--cw-time-picker-period-horizontal-width: cw-var(--cw-TimePicker-periodHorizontalWidth);--cw-time-picker-period-input-height: cw-var(--cw-TimePicker-periodInputHeight);--cw-time-picker-period-label-color: cw-var(--cw-TimePicker-periodLabelTextColor);--cw-time-picker-period-outline-color: cw-var(--cw-TimePicker-periodOutlineColor);--cw-time-picker-period-outline-width: cw-var(--cw-TimePicker-periodOutlineWidth);--cw-time-picker-period-selected-color: cw-var(--cw-TimePicker-periodSelectedContainerColor);--cw-time-picker-period-selected-label-color: cw-var(--cw-TimePicker-periodSelectedLabelTextColor);--cw-time-picker-period-selected-state-layer-color: cw-var(--cw-TimePicker-periodSelectedStateLayerColor);--cw-time-picker-period-shape: cw-var(--cw-TimePicker-periodShape);--cw-time-picker-period-state-layer-color: cw-var(--cw-TimePicker-periodStateLayerColor);--cw-time-picker-period-vertical-height: cw-var(--cw-TimePicker-periodVerticalHeight);--cw-time-picker-period-vertical-width: cw-var(--cw-TimePicker-periodVerticalWidth);--cw-time-picker-selector-color: cw-var(--cw-TimePicker-selectorColor);--cw-time-picker-separator-color: cw-var(--cw-TimePicker-timeSeparatorColor);--cw-time-picker-target-size: cw-var(--cw-TimePicker-touchTargetSize);--cw-time-picker-time-24h-width: cw-var(--cw-TimePicker-timeSelector24hWidth);--cw-time-picker-time-color: cw-var(--cw-TimePicker-timeContainerColor);--cw-time-picker-time-height: cw-var(--cw-TimePicker-timeSelectorHeight);--cw-time-picker-time-label-color: cw-var(--cw-TimePicker-timeLabelTextColor);--cw-time-picker-time-selected-color: cw-var(--cw-TimePicker-timeSelectedContainerColor);--cw-time-picker-time-selected-label-color: cw-var(--cw-TimePicker-timeSelectedLabelTextColor);--cw-time-picker-time-selected-state-layer-color: cw-var(--cw-TimePicker-timeSelectedStateLayerColor);--cw-time-picker-time-shape: cw-var(--cw-TimePicker-timeSelectorShape);--cw-time-picker-time-state-layer-color: cw-var(--cw-TimePicker-timeStateLayerColor);--cw-time-picker-time-width: cw-var(--cw-TimePicker-timeSelectorWidth);--cw-time-picker-toggle-color: cw-var(--cw-TimePicker-modeToggleIconColor);--cw-time-picker-track-width: cw-var(--cw-TimePicker-selectorTrackWidth);-cw-typescale:--cw-Typescale-body-large;background-color:cw-var(--cw-TimePicker-containerColor);border-radius:cw-var(--cw-TimePicker-containerShape);box-sizing:border-box;color:cw-var(--cw-Color-surface-onFill);inline-size:cw-var(--cw-TimePicker-containerWidth);max-inline-size:100%;padding:24px}.cw-TimePicker-disabled{--cw-time-picker-dial-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-dial-selected-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-field-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-period-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-period-selected-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-separator-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-time-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-time-selected-label-color: var(--cw-time-picker-disabled-label-color);--cw-time-picker-toggle-color: var(--cw-time-picker-disabled-label-color)}.cw-TimePicker[hidden]{display:none}.cw-TimePicker-title{-cw-typescale:--cw-Typescale-label-medium;color:var(--cw-time-picker-headline-color);margin-block-end:20px}.cw-TimePicker-fields{align-items:start;display:flex;justify-content:center}.cw-TimePicker-time{direction:ltr;display:flex;flex:0 1 auto;min-inline-size:0}.cw-TimePicker-field{display:flex;flex:0 1 auto;flex-direction:column;inline-size:var(--cw-time-picker-time-width);min-inline-size:0}._cw-TimePicker-h23 .cw-TimePicker-field{inline-size:var(--cw-time-picker-time-24h-width)}.cw-TimePicker-inputMode .cw-TimePicker-field{inline-size:var(--cw-time-picker-field-width)}.cw-TimePicker-separator{-cw-typescale:--cw-Typescale-display-large;align-items:center;block-size:var(--cw-time-picker-time-height);color:var(--cw-time-picker-separator-color);display:flex;flex:none;inline-size:24px;justify-content:center}.cw-TimePicker-inputMode .cw-TimePicker-separator{block-size:var(--cw-time-picker-field-height)}._cw-TimePicker-option{--cw-interactable-focusIndicator-color: cw-var(--cw-Color-secondary-fill);--cw-interactable-focusIndicator-offset: cw-var(--cw-State-focusIndicator-outerOffset);--cw-interactable-focusIndicator-thickness: cw-var(--cw-State-focusIndicator-thickness);align-items:center;appearance:none;background-color:transparent;border:0;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;justify-content:center;margin:0;padding:0;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}._cw-TimePicker-option:disabled{cursor:default}._cw-TimePicker-option-hover{--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-hoverOpacity)}._cw-TimePicker-option-focus{--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity)}._cw-TimePicker-option-press{--cw-interactable-ripple-color: var(--cw-interactable-stateLayer-color);--cw-interactable-ripple-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-TimePicker-selector{--cw-interactable-stateLayer-color: var(--cw-time-picker-time-state-layer-color);-cw-typescale:--cw-Typescale-display-large;background-color:var(--cw-time-picker-time-color);block-size:var(--cw-time-picker-time-height);border-radius:var(--cw-time-picker-time-shape);color:var(--cw-time-picker-time-label-color);inline-size:100%}.cw-TimePicker-selector[aria-checked=true]{--cw-interactable-stateLayer-color: var(--cw-time-picker-time-selected-state-layer-color);background-color:var(--cw-time-picker-time-selected-color);color:var(--cw-time-picker-time-selected-label-color)}.cw-TimePicker-input{-cw-typescale:--cw-Typescale-display-medium;appearance:none;background-color:var(--cw-time-picker-field-color);block-size:var(--cw-time-picker-field-height);border:0;border-radius:var(--cw-time-picker-field-shape);box-sizing:border-box;color:var(--cw-time-picker-field-label-color);display:none;inline-size:100%;margin:0;outline:0 solid transparent;padding:0;text-align:center}.cw-TimePicker-input:focus{background-color:var(--cw-time-picker-field-focus-color);color:var(--cw-time-picker-field-focus-label-color);outline:var(--cw-time-picker-field-focus-outline-color) solid var(--cw-time-picker-field-focus-outline-width);outline-offset:calc(-1 * var(--cw-time-picker-field-focus-outline-width))}.cw-TimePicker-input[aria-invalid=true]{color:var(--cw-time-picker-field-error-color);outline:1px solid var(--cw-time-picker-field-error-color);outline-offset:-1px}.cw-TimePicker-input[aria-invalid=true]:focus{outline-color:var(--cw-time-picker-field-error-color);outline-offset:calc(-1 * var(--cw-time-picker-field-focus-outline-width));outline-width:var(--cw-time-picker-field-focus-outline-width)}.cw-TimePicker-supporting{-cw-typescale:--cw-Typescale-body-small;color:var(--cw-time-picker-field-supporting-color);display:none;padding-block-start:7px}.cw-TimePicker-input[aria-invalid=true]+.cw-TimePicker-supporting{color:var(--cw-time-picker-field-error-color)}.cw-TimePicker-inputMode .cw-TimePicker-input,.cw-TimePicker-inputMode .cw-TimePicker-supporting{display:block}.cw-TimePicker-inputMode .cw-TimePicker-selector{display:none}.cw-TimePicker-period{block-size:var(--cw-time-picker-period-vertical-height);border:var(--cw-time-picker-period-outline-width) solid var(--cw-time-picker-period-outline-color);border-radius:var(--cw-time-picker-period-shape);box-sizing:border-box;display:flex;flex:none;flex-direction:column;inline-size:var(--cw-time-picker-period-vertical-width);margin-inline-start:12px;overflow:hidden}._cw-TimePicker-h23 .cw-TimePicker-period{display:none}.cw-TimePicker-inputMode .cw-TimePicker-period{block-size:var(--cw-time-picker-period-input-height)}.cw-TimePicker-period>._cw-TimePicker-option{--cw-interactable-focusIndicator-offset: cw-var(--cw-State-focusIndicator-innerOffset);--cw-interactable-stateLayer-color: var(--cw-time-picker-period-state-layer-color);-cw-typescale:--cw-Typescale-title-medium;color:var(--cw-time-picker-period-label-color);flex:1;min-block-size:0}.cw-TimePicker-period>:last-child{border-block-start:var(--cw-time-picker-period-outline-width) solid var(--cw-time-picker-period-outline-color)}.cw-TimePicker-period>[aria-checked=true]{--cw-interactable-stateLayer-color: var(--cw-time-picker-period-selected-state-layer-color);background-color:var(--cw-time-picker-period-selected-color);color:var(--cw-time-picker-period-selected-label-color)}.cw-TimePicker-dial{--cw-time-picker-angle: 0deg;--cw-time-picker-hand-length: var(--cw-time-picker-outer-radius);--cw-time-picker-inner-radius: calc(69 / 256 * 100cqi);--cw-time-picker-outer-radius: calc(101 / 256 * 100cqi);aspect-ratio:1;background-color:var(--cw-time-picker-dial-color);border-radius:50%;container-type:inline-size;cursor:pointer;inline-size:min(100%,var(--cw-time-picker-dial-size));margin:24px auto 8px;position:relative;touch-action:none;user-select:none}._cw-TimePicker-inner .cw-TimePicker-dial{--cw-time-picker-hand-length: var(--cw-time-picker-inner-radius)}.cw-TimePicker-disabled .cw-TimePicker-dial,.cw-TimePicker-readOnly .cw-TimePicker-dial{cursor:default}.cw-TimePicker-inputMode .cw-TimePicker-dial{display:none}.cw-TimePicker-hand{background-color:var(--cw-time-picker-selector-color);block-size:var(--cw-time-picker-hand-length);bottom:50%;inline-size:var(--cw-time-picker-track-width);left:calc(50% - var(--cw-time-picker-track-width) / 2);pointer-events:none;position:absolute;rotate:var(--cw-time-picker-angle);transform-origin:bottom center}.cw-TimePicker-hand:before{background-color:inherit;block-size:var(--cw-time-picker-handle-size);border-radius:50%;content:"";inline-size:var(--cw-time-picker-handle-size);left:calc((var(--cw-time-picker-track-width) - var(--cw-time-picker-handle-size)) / 2);position:absolute;top:calc(var(--cw-time-picker-handle-size) / -2)}.cw-TimePicker-hand:after{background-color:inherit;block-size:var(--cw-time-picker-center-size);border-radius:50%;bottom:calc(var(--cw-time-picker-center-size) / -2);content:"";inline-size:var(--cw-time-picker-center-size);left:calc((var(--cw-time-picker-track-width) - var(--cw-time-picker-center-size)) / 2);position:absolute}.cw-TimePicker-face{--cw-time-picker-face-hide-delay: 0s;inset:0;position:absolute;transition-delay:0s,var(--cw-time-picker-face-hide-delay);transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),0s;transition-property:opacity,visibility;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),linear}.cw-TimePicker-face[inert]{--cw-time-picker-face-hide-delay: cw-var(--cw-Motion-spring-effect-default-duration);opacity:0;visibility:hidden}.cw-TimePicker-ring{--cw-time-picker-option-radius: var(--cw-time-picker-outer-radius)}.cw-TimePicker-ring-inner{--cw-time-picker-option-radius: var(--cw-time-picker-inner-radius)}.cw-TimePicker:not(._cw-TimePicker-h23) .cw-TimePicker-ring-inner{display:none}.cw-TimePicker-ring>.cw-TimePicker-number{--cw-interactable-stateLayer-color: var(--cw-time-picker-dial-state-layer-color);-cw-typescale:--cw-Typescale-body-large;block-size:var(--cw-time-picker-target-size);border-radius:50%;inline-size:var(--cw-time-picker-target-size);left:calc(50% + sin(var(--cw-time-picker-option-angle)) * var(--cw-time-picker-option-radius));position:absolute;top:calc(50% - cos(var(--cw-time-picker-option-angle)) * var(--cw-time-picker-option-radius));translate:-50% -50%}.cw-TimePicker-label{--cw-time-picker-handle-x: calc( 50% + sin(var(--cw-time-picker-angle)) * var(--cw-time-picker-hand-length) - sin(var(--cw-time-picker-option-angle)) * var(--cw-time-picker-option-radius) );--cw-time-picker-handle-y: calc( 50% - cos(var(--cw-time-picker-angle)) * var(--cw-time-picker-hand-length) + cos(var(--cw-time-picker-option-angle)) * var(--cw-time-picker-option-radius) );background-clip:text;background-image:radial-gradient(circle calc(var(--cw-time-picker-handle-size) / 2) at var(--cw-time-picker-handle-x) var(--cw-time-picker-handle-y),var(--cw-time-picker-dial-selected-label-color) calc(var(--cw-time-picker-handle-size) / 2 - .5px),var(--cw-time-picker-dial-label-color) calc(var(--cw-time-picker-handle-size) / 2));color:transparent}.cw-TimePicker-mode{--cw-interactable-stateLayer-color: var(--cw-time-picker-toggle-color);block-size:var(--cw-time-picker-target-size);border-radius:50%;color:var(--cw-time-picker-toggle-color);inline-size:var(--cw-time-picker-target-size);margin-block-start:8px}.cw-TimePicker-mode .cw-Icon{--cw-Icon-color: currentcolor}.cw-TimePicker-inputMode ._cw-TimePicker-inputIcon,.cw-TimePicker:not(.cw-TimePicker-inputMode) ._cw-TimePicker-clockIcon{display:none}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode){container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);inline-size:cw-var(--cw-TimePicker-landscapeContainerWidth)}@container (min-width: 536px){.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode)>.cw-TimePicker-title{grid-column:1 / 3}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode)>.cw-TimePicker-fields{align-self:center;flex-wrap:wrap;grid-column:1;grid-row:2;inline-size:var(--cw-time-picker-period-horizontal-width)}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode) .cw-TimePicker-field{inline-size:var(--cw-time-picker-time-width)}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode) .cw-TimePicker-period{block-size:var(--cw-time-picker-period-horizontal-height);flex-direction:row;inline-size:var(--cw-time-picker-period-horizontal-width);margin:16px 0 0}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode) .cw-TimePicker-period>:last-child{border-block-start:0;border-inline-start:var(--cw-time-picker-period-outline-width) solid var(--cw-time-picker-period-outline-color)}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode)>.cw-TimePicker-dial{grid-column:2;grid-row:2 / 4;inline-size:var(--cw-time-picker-dial-size);margin:0;margin-inline-start:32px}.cw-TimePicker-landscape:not(.cw-TimePicker-inputMode)>.cw-TimePicker-mode{grid-column:1;grid-row:3;justify-self:start}}@media (forced-colors: active){.cw-TimePicker{--cw-time-picker-dial-label-color: CanvasText;--cw-time-picker-dial-selected-label-color: HighlightText;--cw-time-picker-selector-color: Highlight}.cw-TimePicker-hand,.cw-TimePicker-label{forced-color-adjust:none}.cw-TimePicker-selector[aria-checked=true],.cw-TimePicker-period>[aria-checked=true]{outline:2px solid Highlight;outline-offset:-2px}}}
@@ -0,0 +1,29 @@
1
+ import{createUniqueId as S,onCleanup as Ve,onMount as Je,untrack as Ge}from"solid-js";import{insert as be}from"solid-js/web";import{defineDomComponent as ze}from"..";import{DomController as qe}from"../dom/client";import{Icon as K}from"../icon";import{applySpringMotion as je}from"../motion";import{FocusState as We,HoverState as Qe,PressState as Ze,defineInteractableComponent as et}from"../state";import{setAttribute as m}from"../util";import{observeFormReset as tt}from"./base";import"./time-picker.css";const Te="cw-TimePicker",ge="cw-TimePicker-landscape",Pe="cw-TimePicker-inputMode",ye="cw-TimePicker-disabled",Ee="cw-TimePicker-readOnly",ve="_cw-TimePicker-h23",Me="_cw-TimePicker-inner",k="_cw-TimePicker-option",Se=`cw-TimePicker-selector ${k}`,ke=`cw-TimePicker-number ${k}`,we=`cw-TimePicker-mode ${k}`,le=We|Qe|Ze,it={selectTime:"Select time",hour:"Hour",minute:"Minute",am:"AM",pm:"PM",selectPeriod:"Select AM or PM",hourError:"Hour must be 1\u201312",hour24Error:"Hour must be 0\u201323",minuteError:"Minute must be 0\u201359",switchToInput:"Switch to time input",switchToClock:"Switch to clock"},v=[0,1],W=["hour","minute"],nt="en-US",rt=/^(?:[01]\d|2[0-3]):[0-5]\d$/u,Fe=10,o=60,L=24,d=12,q=L*o,T=5,$=o/T,y=360,se=y/d,Ce=y/o,st=74/256,ot=8,at=100,Le=2,ue="data-cw-initial-focus",U="--cw-time-picker-angle",lt="--cw-time-picker-option-angle",ut={role:"spatial",speed:"default",unit:"deg"},Q=new Set(["ArrowDown","ArrowRight"]),Z=new Set(["ArrowLeft","ArrowUp"]);function ee(r){return r===void 0||!rt.test(r)?0:Number(r.slice(0,2))*o+Number(r.slice(3))}function te(r){const e=`${Math.floor(r/o)}`,t=`${r%o}`;return`${e.padStart(2,"0")}:${t.padStart(2,"0")}`}function g(r,e){return r?.[e]??it[e]}function ie(r,e){const t=r??nt,i=new Intl.NumberFormat(t,{useGrouping:!1}),n=e??new Intl.DateTimeFormat(t,{hour:"numeric"}).resolvedOptions().hourCycle,s=new Map;for(let a=0;a<Fe;a++)s.set(`${a}`,a),s.set(i.format(a),a);return{h23:n==="h23"||n==="h24",numeral:i,twoDigits:new Intl.NumberFormat(t,{minimumIntegerDigits:2,useGrouping:!1}),digits:s}}function de(r,e){let t;for(const i of r)t=(t??0)*Fe+(e.digits.get(i)??Number.NaN);return t}function X(r,e,t){const i=Math.floor(t/o);return e===1?t%o:r.h23?i:i%d===0?d:i%d}function ce(r,e,t){return e===1?t<o:r.h23?t<L:t>=1&&t<=d}function me(r,e,t,i){const n=Math.floor(i/o),s=n-n%d;return e===1?n*o+t:(r.h23?t:s+t%d)*o+i%o}function dt(r,e){return e===1?"minuteError":r.h23?"hour24Error":"hourError"}function ne(r,e,t){return r.h23||t<d?e:e+d}function C(r,e){return r.h23?e:e%d}function re(r){return Math.round(r/T)%$}function Ie(r,e){return r.h23?e===0?r.twoDigits.format(e):r.numeral.format(e):r.numeral.format(e===0?d:e)}function De(r,e){return r.twoDigits.format(e*T)}function He(r){return{[lt]:`${r%d*se}deg`}}function Oe(r,e){return r===0?Math.floor(e/o)%d*se:e%o*Ce}function oe(r){return(r%y+y)%y}function he(r,e){const t=oe(e-r);return t>=y/2?t-y:t}function fe(r,e){return oe(Math.atan2(r,-e)*y/(2*Math.PI))}function _e(r,e,t){return r.h23&&e===0&&t>=d*o}function ct(r,e,t,i){const n=Math.floor(t/o),s=t%o,a=e===1?$:r.h23?L:d,c=i==="Home"?0:i==="End"?a-1:e===1&&Q.has(i)?Math.floor(s/T)+1:e===1&&Z.has(i)?Math.ceil(s/T)-1:Q.has(i)?C(r,n)+1:Z.has(i)?C(r,n)-1:void 0;if(c===void 0)return;const l=(c+a)%a;return e===1?n*o+l*T:ne(r,l,n)*o+s}function pe(r){return(Q.has(r.key)||Z.has(r.key))&&!r.altKey&&!r.ctrlKey&&!r.metaKey}function M(r,e){r.textContent!==e&&(r.textContent=e)}function j(r){return r.map(e=>e.button)}const P=et(()=>(r,e)=><button{...r}disabled={e.disabled===!0}type="button"/>,r=>class extends r{constructor(e){super(e,{baseInteractionCssClassName:k,enabledInteractionStates:le,styleElementIsFunction:!0})}applyComponentProps(){const e=super.readProps(["disabled"]);e.disabledChanged&&(super.setAttribute("disabled",e.disabled===!0),super.setEnabledInteractionStates(e.disabled===!0?0:le))}render(e){const t=<button type="button"/>;return be(t,e),t}});function mt(r,e){const t=S(),i=[S(),S()],n=ie(e.locale,e.hourCycle),s=ee("value"in e?e.value:e.defaultValue),a=Math.floor(s/o),c=a>=d,l=e.disabled===!0,b=e.readOnly===!0,E=e.defaultDisplayMode==="input",p=f=>g(e.labels,f),I=f=>{const h=p(W[f]),B=n.twoDigits.format(X(n,f,s)),G=<P attr:aria-checked={f===0}attr:aria-label={h}attr:data-cw-initial-focus={f===0&&!E}attr:role="radio"attr:tabindex={f===0?0:-1}class={Se}disabled={l}>{B}</P>,z=<input aria-label={h}autocomplete="off"class="cw-TimePicker-input"data-cw-initial-focus={f===0&&E?"":void 0}disabled={l}inputmode="numeric"maxLength={Le}readOnly={b}type="text"value={B}/>,Ye=<span aria-live="polite"class="cw-TimePicker-supporting"id={i[f]}>{h}</span>;return<div class="cw-TimePicker-field">{G}{z}{Ye}</div>},D=(f,h)=><P attr:aria-checked={f}attr:role="radio"attr:tabindex={f?0:-1}class={k}disabled={l}>{h}</P>,H=(f,h,B,G,z)=><P attr:aria-checked={G}attr:aria-label={`${B} ${h}`}attr:role="radio"attr:tabindex={z?0:-1}class={ke}disabled={l}style={He(f)}>
2
+ <span class="cw-TimePicker-label">{h}</span>
3
+ </P>,Y=<div class="cw-TimePicker-title"id={t}>{p("selectTime")}</div>,O=I(0),_=I(1),V=<div aria-labelledby={t}class="cw-TimePicker-time"role={E?"group":"radiogroup"}>
4
+ {O}
5
+ <span aria-hidden="true"class="cw-TimePicker-separator">:</span>
6
+ {_}
7
+ </div>,J=D(!c,p("am")),N=D(c,p("pm")),A=<div aria-label={p("selectPeriod")}aria-readonly={b?"true":void 0}class="cw-TimePicker-period"role="radiogroup">{J}{N}</div>,R=<div class="cw-TimePicker-fields">{V}{A}</div>,x=<span aria-hidden="true"class="cw-TimePicker-hand"/>,w=C(n,a),u=Array.from({length:L},(f,h)=>H(h,Ie(n,h),p("hour"),h===w,h===w)),F=<div class="cw-TimePicker-ring">{u.slice(0,d)}</div>,Ne=<div class="cw-TimePicker-ring cw-TimePicker-ring-inner">
8
+ {u.slice(d)}
9
+ </div>,Ae=<div aria-label={p("hour")}aria-readonly={b?"true":void 0}class="cw-TimePicker-face"role="radiogroup">{F}{Ne}</div>,ae=s%o,Re=re(ae),xe=Array.from({length:$},(f,h)=>H(h,De(n,h),p("minute"),h*T===ae,h===Re)),Be=<div class="cw-TimePicker-ring">{xe}</div>,Ue=<div aria-label={p("minute")}aria-readonly={b?"true":void 0}class="cw-TimePicker-face"inert={!0}role="radiogroup">{Be}</div>,Xe=<div class="cw-TimePicker-dial"style={{[U]:`${Oe(0,s)}deg`}}>{x}{Ae}{Ue}</div>,Ke=<P attr:aria-label={p(E?"switchToClock":"switchToInput")}class={we}disabled={l}>
10
+ <K class="_cw-TimePicker-clockIcon"name="schedule"/>
11
+ <K class="_cw-TimePicker-inputIcon"name="keyboard"/>
12
+ </P>,$e=<input disabled={l||(e.name??"")===""}form={e.form}name={e.name}type="hidden"value={te(s)}/>;return<div{...r}classList={{...r.classList,[Te]:!0,[ye]:l,[ve]:n.h23,[Me]:_e(n,0,s),[Pe]:E,[ge]:e.orientation==="landscape",[Ee]:b}}>
13
+ {Y}{R}{Xe}{Ke}{$e}{r.children}
14
+ </div>}class ht extends qe{#c;#E;#v;#m;#M;#e;#i;#h;#b;#t;#n;#r;#s;#l;#o;#a;#d;#S;constructor(e){super(e,{styleElementIsFunction:!0}),this.#c="value"in e,this.#E=S(),this.#v=[S(),S()],this.#m=[!1,!1],this.#M=[Number.NaN,Number.NaN],this.#e=null,this.#i=Ge(()=>ie(e.locale,e.hourCycle)),this.#h=!1,this.#b=0,this.#t=0,this.#n=0,this.#r=e.defaultDisplayMode==="input",this.#s=Number.NaN,this.#l=void 0,this.#o=!1,this.#a=void 0,this.#d=void 0,this.#S=()=>{},Je(()=>{const t=this.#e?.value;t!==void 0&&(this.#S=tt(t,()=>this.#$()))}),Ve(()=>{this.#S(),this.#T(),this.#l?.cancel()})}#f(){const e=this.#e?.fields[0].input;return this.props.readOnly!==!0&&e?.matches(":disabled")===!1}#u(e,t,i){const n=(e%q+q)%q;if(!(!this.#f()||n===this.#t)){this.#o=i;try{this.#c||(this.#t=n,this.#w()),this.props.onChange?.(te(n),t)}finally{this.#o=!1}}}#C(e,t){const i=Math.floor(this.#t/o)%d+(e?d:0);this.#u(i*o+this.#t%o,t,!1)}#p(e,t){const i=this.#e;if(i===null||e===this.#n)return;const n=i.faces[this.#n].contains(i.dial.ownerDocument.activeElement);this.#T(),this.#n=e,this.#o=t,this.#O(),this.#o=!1,n&&this.#I(e).focus()}#L(){const e=this.#e?.dial.ownerDocument.defaultView;this.#T(),e!=null&&(this.#d=e.setTimeout(()=>{this.#d=void 0,this.#p(1,!0)},at))}#T(){this.#d!==void 0&&(this.#e?.dial.ownerDocument.defaultView?.clearTimeout(this.#d),this.#d=void 0)}#K(){this.#r=!this.#r,this.#_(),this.#F()}#$(){this.#c||(this.#t=this.#b),this.#w(),this.#F()}#I(e){const t=this.#e,i=Math.floor(this.#t/o);return e===0?t.hours[C(this.#i,i)].button:t.minutes[re(this.#t%o)].button}#Y(e){const t=Math.floor(this.#t/o);return this.#n===1?t*o+e*T:ne(this.#i,e,t)*o+this.#t%o}#D(e,t,i){const n=Math.floor(this.#t/o),s=i?T:1,a=Math.round(e/se)%d,c=this.#i.h23&&t<st;return this.#n===1?n*o+Math.round(e/Ce/s)*s%o:ne(this.#i,c?a+d:a,n)*o+this.#t%o}#V(e){const t=this.#l,i=t?.playState==="running"?t.value:this.#s;t?.cancel(),this.#l=void 0,this.#s=i+he(i,e),this.#e.dial.style.setProperty(U,`${this.#s}deg`)}#H(e){if(e&&this.#n===0){this.#p(1,!0);return}this.#o=!0,this.#k(),this.#o=!1}#k(){const e=this.#e.dial,t=Oe(this.#n,this.#t),i=this.#l,n=i?.playState==="running"?i.value:this.#s,s=n+he(n,t),a=_e(this.#i,this.#n,this.#t);if(super.setClass(Me,a),!(this.#a?.dragging===!0||oe(this.#s)===t)){if(this.#o&&Number.isFinite(n)){i?.playState==="running"?i.retarget(s):this.#l=je(e,U,n,s,ut),this.#s=s;return}i?.cancel(),this.#l=void 0,this.#s=t,e.style.setProperty(U,`${t}deg`)}}#w(){const e=this.#e,t=this.#i,i=Math.floor(this.#t/o),n=this.#t%o,s=C(t,i),a=re(n);for(const c of v){const l=X(t,c,this.#t);M(e.fields[c].selector,t.twoDigits.format(l)),this.#P(c,!1)}for(const[c,l]of e.periods.entries()){const b=i>=d==(c===1);m(l,"aria-checked",b),m(l,"tabindex",b?0:-1)}for(const[c,l]of e.hours.entries())m(l.button,"aria-checked",c===s),m(l.button,"tabindex",c===s?0:-1);for(const[c,l]of e.minutes.entries())m(l.button,"aria-checked",c*T===n),m(l.button,"tabindex",c===a?0:-1);e.value.value=te(this.#t),this.#k()}#O(){const e=this.#e;for(const t of v){const i=t===this.#n;m(e.fields[t].selector,"aria-checked",i),m(e.fields[t].selector,"tabindex",i?0:-1),m(e.faces[t],"inert",!i)}this.#N(),this.#k()}#_(){super.setClass(Pe,this.#r),m(this.#e.time,"role",this.#r?"group":"radiogroup"),this.#N(),this.#A()}#N(){for(const e of v){const{input:t,selector:i}=this.#e.fields[e],n=e===this.#n;m(i,ue,n&&!this.#r),m(t,ue,n&&this.#r)}}#A(){m(this.#e.mode,"aria-label",g(this.props.labels,this.#r?"switchToClock":"switchToInput"))}#J(){const e=this.#e,t=this.props.labels,i=this.#i;M(e.title,g(t,"selectTime"));for(const n of v){const s=g(t,W[n]),a=n===0?e.hours:e.minutes;m(e.fields[n].selector,"aria-label",s),m(e.fields[n].input,"aria-label",s),m(e.faces[n],"aria-label",s);for(const[c,l]of a.entries()){const b=n===0?Ie(i,c):De(i,c);M(l.label,b),m(l.button,"aria-label",`${s} ${b}`)}this.#R(n)}m(e.period,"aria-label",g(t,"selectPeriod")),M(e.periods[0],g(t,"am")),M(e.periods[1],g(t,"pm")),this.#A()}#R(e){const t=this.#m[e]?dt(this.#i,e):W[e];M(this.#e.fields[e].supporting,g(this.props.labels,t))}#g(e,t){const i=this.#e.fields[e].input;this.#m[e]!==t&&(this.#m[e]=t,m(i,"aria-invalid",t||void 0),m(i,"aria-describedby",t?this.#v[e]:void 0),this.#R(e))}#P(e,t){const i=this.#e.fields[e].input,n=X(this.#i,e,this.#t);!t&&n===this.#M[e]||(this.#M[e]=n,!(!t&&!this.#m[e]&&de(i.value,this.#i)===n)&&(i.value=this.#i.twoDigits.format(n),this.#g(e,!1)))}#F(){for(const e of v)this.#P(e,!0)}#x(e){const t=this.#e.fields[e].input,i=this.#i,n=Array.from(t.value).filter(s=>i.digits.has(s)).join("");return n!==t.value&&(t.value=n),de(n,i)}#G(e,t){const i=this.#x(e);if(i===void 0||!ce(this.#i,e,i)){this.#g(e,i!==void 0);return}this.#g(e,!1),this.#u(me(this.#i,e,i,this.#t),t,!1),X(this.#i,e,this.#t)!==i&&this.#P(e,!0)}#z(e,t){const i=this.#x(e);if(i!==void 0&&!ce(this.#i,e,i)){this.#g(e,!0);return}i!==void 0&&this.#u(me(this.#i,e,i,this.#t),t,!1),this.#P(e,!0)}#q(e){const t=this.#e,i=v.find(n=>t.fields[n].selector===e.target);i!==void 0&&this.#p(i,!0)}#j(e){const t=this.#e,i=v.find(s=>t.fields[s].selector===e.target),n=i===0?1:0;i===void 0||e.defaultPrevented||!pe(e)||(e.preventDefault(),this.#p(n,!0),t.fields[n].selector.focus())}#W(e){const t=this.#e.periods.findIndex(i=>i===e.target);t>=0&&!e.defaultPrevented&&this.#C(t===1,e)}#Q(e){const t=this.#e.periods,i=t.findIndex(n=>n===e.target);i<0||e.defaultPrevented||!pe(e)||(e.preventDefault(),this.#C(i===0,e),t[this.#t>=d*o?1:0].focus())}#Z(e){const t=this.#e.dial;if(e.button!==0||!e.isPrimary||e.defaultPrevented||!this.#f())return;const i=t.getBoundingClientRect();this.#a={centerX:i.left+i.width/2,centerY:i.top+i.height/2,dragging:!1,pointerId:e.pointerId,size:i.width,x:e.clientX,y:e.clientY};try{e.target.setPointerCapture(e.pointerId)}catch{}}#ee(e){const t=this.#a;if(t===void 0||e.pointerId!==t.pointerId)return;if(!this.#f()){this.#y(e);return}if(!t.dragging){if(Math.hypot(e.clientX-t.x,e.clientY-t.y)<ot)return;t.dragging=!0,this.#T();try{this.#e.dial.setPointerCapture(e.pointerId)}catch{}}const i=e.clientX-t.centerX,n=e.clientY-t.centerY,s=fe(i,n);this.#V(s),this.#u(this.#D(s,Math.hypot(i,n)/t.size,!1),e,!1)}#te(e){const t=this.#a,i=this.#e.dial;if(t===void 0||e.pointerId!==t.pointerId)return;if(!this.#f()){this.#y(e);return}if(this.#a=void 0,i.hasPointerCapture(e.pointerId)&&i.releasePointerCapture(e.pointerId),t.dragging){this.#H(!0);return}const n=e.clientX-t.centerX,s=e.clientY-t.centerY,a=this.#D(fe(n,s),Math.hypot(n,s)/t.size,!0);this.#u(a,e,!0),this.#n===0&&this.#L()}#y(e){const t=this.#a;t===void 0||e.pointerId!==t.pointerId||(this.#a=void 0,t.dragging&&this.#H(!1))}#ie(e){this.#e.dial.hasPointerCapture(e.pointerId)||this.#y(e)}#ne(e){const t=this.#e,n=(this.#n===0?t.hours:t.minutes).findIndex(s=>s.button===e.target||s.label===e.target);e.detail!==0||n<0||e.defaultPrevented||!this.#f()||(this.#u(this.#Y(n),e,!0),this.#n===0&&this.#L())}#re(e){const t=ct(this.#i,this.#n,this.#t,e.key);t===void 0||e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||(e.preventDefault(),this.#u(t,e,!0),this.#I(this.#n).focus())}applyComponentProps(){const e=super.readProps(["defaultValue","disabled","form","hourCycle","labels","locale","name","orientation","readOnly","value"]),t=this.#e,i=e.disabled===!0,n=e.readOnly===!0,s=e.localeChanged||e.hourCycleChanged;if(t!==null){if(s&&(this.#h&&(this.#i=ie(e.locale,e.hourCycle)),super.setClass(ve,this.#i.h23)),this.#h||(this.#b=ee(e.defaultValue),this.#c||(this.#t=this.#b)),this.#c&&e.valueChanged&&(this.#t=ee(e.value)),e.orientationChanged&&super.setClass(ge,e.orientation==="landscape"),e.disabledChanged){super.setClass(ye,i);for(const{input:a}of t.fields)a.disabled=i}if(e.readOnlyChanged){super.setClass(Ee,n);for(const{input:a}of t.fields)a.readOnly=n;for(const a of[t.period,...t.faces])m(a,"aria-readonly",n||void 0)}(e.nameChanged||e.formChanged||e.disabledChanged)&&(m(t.value,"form",e.form),m(t.value,"name",e.name),t.value.disabled=i||(e.name??"")===""),(e.labelsChanged||s)&&this.#J(),this.#h||(this.#h=!0,this.#_(),this.#O()),(e.valueChanged||s)&&this.#w(),s&&this.#F()}}#B(e){const t=<P attr:role="radio"class={Se}disabled={this.props.disabled===!0}/>,i=<input autocomplete="off"class="cw-TimePicker-input"inputmode="numeric"maxLength={Le}onChange={a=>this.#z(e,a)}onFocus={()=>this.#p(e,!1)}onInput={a=>this.#G(e,a)}type="text"/>,n=<span aria-live="polite"class="cw-TimePicker-supporting"id={this.#v[e]}/>,s=<div class="cw-TimePicker-field">
15
+ {t}{i}{n}
16
+ </div>;return{input:i,root:s,selector:t,supporting:n}}#U(){return<P attr:role="radio"class={k}disabled={this.props.disabled===!0}/>}#X(e){let t;return{button:<P attr:role="radio"class={ke}disabled={this.props.disabled===!0}style={He(e)}>
17
+ <span class="cw-TimePicker-label"ref={t}/>
18
+ </P>,label:t}}render(e){const t=<div class="cw-TimePicker-title"id={this.#E}/>,i=this.#B(0),n=this.#B(1),s=<div aria-labelledby={this.#E}class="cw-TimePicker-time"onClick={u=>this.#q(u)}onKeyDown={u=>this.#j(u)}>
19
+ {i.root}
20
+ <span aria-hidden="true"class="cw-TimePicker-separator">:</span>
21
+ {n.root}
22
+ </div>,a=this.#U(),c=this.#U(),l=<div class="cw-TimePicker-period"onClick={u=>this.#W(u)}onKeyDown={u=>this.#Q(u)}role="radiogroup">{a}{c}</div>,b=<div class="cw-TimePicker-fields">{s}{l}</div>,E=<span aria-hidden="true"class="cw-TimePicker-hand"/>,p=Array.from({length:L},(u,F)=>this.#X(F)),I=j(p.slice(0,d)),D=<div class="cw-TimePicker-ring">{I}</div>,H=j(p.slice(d)),Y=<div class="cw-TimePicker-ring cw-TimePicker-ring-inner">
23
+ {H}
24
+ </div>,O=<div class="cw-TimePicker-face"role="radiogroup">{D}{Y}</div>,_=Array.from({length:$},(u,F)=>this.#X(F)),V=j(_),J=<div class="cw-TimePicker-ring">{V}</div>,N=<div class="cw-TimePicker-face"role="radiogroup">{J}</div>,A=<div class="cw-TimePicker-dial"onClick={u=>this.#ne(u)}onKeyDown={u=>this.#re(u)}onLostPointerCapture={u=>this.#ie(u)}onPointerCancel={u=>this.#y(u)}onPointerDown={u=>this.#Z(u)}onPointerMove={u=>this.#ee(u)}onPointerUp={u=>this.#te(u)}>{E}{O}{N}</div>,R=<P class={we}disabled={this.props.disabled===!0}onClick={()=>this.#K()}>
25
+ <K class="_cw-TimePicker-clockIcon"name="schedule"/>
26
+ <K class="_cw-TimePicker-inputIcon"name="keyboard"/>
27
+ </P>,x=<input type="hidden"/>,w=<div class={Te}>
28
+ {t}{b}{A}{R}{x}
29
+ </div>;return be(w,e,null),this.#e={dial:A,faces:[O,N],fields:[i,n],hours:p,minutes:_,mode:R,period:l,periods:[a,c],time:s,title:t,value:x},w}}const St=ze(()=>mt,()=>ht);export{St as TimePicker};
@@ -0,0 +1 @@
1
+ import{checkArgument as r}from"../util";class o{#t;#e;#n;#i;constructor(e){this.#t=e,this.#e=new Set,this.#n=i=>this.#r(i),this.#i=void 0}subscribe(e){return this.#e.add(e),this.#i??=this.#t.requestAnimationFrame(this.#n),()=>this.#s(e)}#s(e){!this.#e.delete(e)||this.#e.size!==0||this.#i===void 0||(this.#t.cancelAnimationFrame(this.#i),this.#i=void 0)}#r(e){this.#i=void 0;for(const i of[...this.#e])if(this.#e.has(i))try{i(e)}catch(s){this.#t.reportError(s)}this.#e.size!==0&&(this.#i??=this.#t.requestAnimationFrame(this.#n))}}const n=new WeakMap;function d(t,e){let i=n.get(t);return r(typeof t.requestAnimationFrame=="function","window does not provide animation frames"),i===void 0&&(i=new o(t),n.set(t,i)),i.subscribe(e)}export{d as subscribeMotionFrames};
@@ -0,0 +1 @@
1
+ @cw-attribute-roles cw-Motion;:root{--cw-Motion-transition-easing-emphasized-uniform: cw-var(--cw-Motion-transition-easing-emphasized-uniform, default);--cw-Motion-transition-easing-emphasized-accelerate: cw-var(--cw-Motion-transition-easing-emphasized-accelerate, default);--cw-Motion-transition-easing-emphasized-decelerate: cw-var(--cw-Motion-transition-easing-emphasized-decelerate, default);--cw-Motion-transition-easing-standard-uniform: cw-var(--cw-Motion-transition-easing-standard-uniform, default);--cw-Motion-transition-easing-standard-accelerate: cw-var(--cw-Motion-transition-easing-standard-accelerate, default);--cw-Motion-transition-easing-standard-decelerate: cw-var(--cw-Motion-transition-easing-standard-decelerate, default);--cw-Motion-transition-easing-linear: cw-var(--cw-Motion-transition-easing-linear, default)}.cw-theme-standard{@cw-apply-theme standard,cw-Motion;}.cw-theme-expressive{@cw-apply-theme expressive,cw-Motion;}@media (prefers-reduced-motion: reduce){:root,.cw-theme-standard,.cw-theme-expressive{@cw-apply-theme reducedMotion,cw-Motion;}}
@@ -0,0 +1 @@
1
+ import{subscribeMotionFrames as t}from"./frame";import{createMaterialTransition as r}from"./material";import{SUPPORTS_MOTION as a,applyMotion as p}from"./motion";import{applySpringMotion as m}from"./spring";import{EnterSequenceBegin as T,EnterSequenceEnd as S,ExitSequenceBegin as f,ExitSequenceEnd as x,Transition as g,TransitionBegin as l,TransitionEnd as c}from"./transition";import{VelocityTracker as E}from"./velocity";export{T as EnterSequenceBegin,S as EnterSequenceEnd,f as ExitSequenceBegin,x as ExitSequenceEnd,a as SUPPORTS_MOTION,g as Transition,l as TransitionBegin,c as TransitionEnd,E as VelocityTracker,p as applyMotion,m as applySpringMotion,r as createMaterialTransition,t as subscribeMotionFrames};
@@ -0,0 +1 @@
1
+ import{isServer as L}from"solid-js/web";import{checkArgument as b}from"../util";import{applyMotion as G}from"./motion";const S="--cw-Motion-transition-easing-emphasized-uniform",U=30,W=.8,X=1.1,O=.35,V=.92,Y=.8,Z=.3,P=82/255,A=new WeakMap,j={fade:[0,.25],scaleMask:[0,1],shapeMask:[0,.75]},q={fade:[.6,.9],scaleMask:[0,.9],shapeMask:[.3,.9]},H=10;function M(e,o,i,n){const[t,a]=i;return n<=t?e:n>=a?o:e+(o-e)*(n-t)/(a-t)}function l(e){return`${Math.round(e*1e3)/1e3}px`}function v(e,o){const i=e.borderTopLeftRadius.trim().split(/\s+/)[0]??"",n=Number.parseFloat(i);return Number.isFinite(n)?i.endsWith("%")?n/100*Math.min(o.width,o.height):n:0}function I(e,o,i,n,t,a){const s=(t.top-n)/o,c=(t.left-i)/o,r=e.width-(t.left+t.width-i)/o,d=e.height-(t.top+t.height-n)/o,m=(u,g)=>l(u<-.5||g<-.5?0:a/o);return{clipPath:`inset(${l(Math.max(0,s))} ${l(Math.max(0,r))} ${l(Math.max(0,d))} ${l(Math.max(0,c))} round ${m(s,c)} ${m(s,r)} ${m(d,r)} ${m(d,c)})`,scale:`${Math.round(o*1e5)/1e5}`,transformOrigin:"0 0",translate:`${l(i-e.left)} ${l(n-e.top)}`}}function J(e,o,i){const n=e.getBoundingClientRect(),t=o.getBoundingClientRect(),a=o.ownerDocument.defaultView,s=a===null?0:v(a.getComputedStyle(e),n),c=a===null?0:v(a.getComputedStyle(o),t),r=i?j:q,d=[0,1],m=[...new Set([...Array.from({length:H+1},(f,h)=>h/H),...r.fade,...r.scaleMask,...r.shapeMask])].sort((f,h)=>f-h),u=i?t.height*n.width/t.width>=n.height:n.height*t.width/n.width>=t.height,g=u?n.width:n.height,B=u?n.height:n.width,C=u?t.width:t.height,z=u?t.height:t.width,_=[],N=[];for(const f of m){const h=M(0,1,r.scaleMask,f),E=M(n.left+n.width/2,t.left+t.width/2,d,f),x=M(n.top,t.top,d,f),y=M(g,C,d,f),R=y/g,w=y/C,T=B*R,p=z*w,D=T>p?T-(T-p)*h:p-(p-T)*(1-h),F=u?y:D,K=u?D:y,$={left:E-F/2,top:x,width:F,height:K},k=M(s,c,r.shapeMask,f);_.push({...I(n,R,E-n.width*R/2,x,$,k),offset:f}),N.push({...I(t,w,E-t.width*w/2,x,$,k),offset:f,opacity:M(0,1,r.fade,f)})}return{exiting:e,exitFrames:_,enterFrames:N}}function Q(e,o,i,n){if(e.parentNode===null)return;const t=e.ownerDocument.createElement("div");t.setAttribute("aria-hidden","true"),t.style.cssText="background-color:var(--cw-Color-scrim,#000);inset:0;opacity:0;pointer-events:none;position:fixed",e.before(t),G(t,[{opacity:o?0:P},{opacity:o?P:0}],{duration:i,easing:n}).finished.then(()=>t.remove(),()=>t.remove())}function tt(e,o,i,n){const[t,a]=e;let s=a===void 0?void 0:A.get(a);if(L||t===void 0||a===void 0)return o?["fade-in"]:["fade-out"];if(s?.exiting===t)A.delete(a);else{const c=t.getBoundingClientRect(),r=a.getBoundingClientRect();if(c.width===0||c.height===0||r.width===0||r.height===0)return o?["fade-in"]:["fade-out"];s=J(t,a,i),A.set(a,s),Q(t,i,n,S)}return o?s.enterFrames:s.exitFrames}function nt(e,o,i,n,t,a){const s=!L&&n==="x"&&o!==void 0&&o.ownerDocument.defaultView?.getComputedStyle(o).direction==="rtl",c=(t===i?1:-1)*(s?-1:1),r=n==="x"?`${c*a}px 0px`:`0px ${c*a}px`,d=t===i?W:X;return e==="fade"?i?[{offset:0,opacity:0,scale:`${Y}`},{offset:Z,opacity:1},{offset:1,opacity:1,scale:"1"}]:[{opacity:1},{opacity:0}]:i?[{offset:0,opacity:0,...e==="fadeThrough"?{scale:`${V}`}:n==="z"?{scale:`${d}`}:{translate:r}},{offset:O,opacity:0},{offset:1,opacity:1,...e==="fadeThrough"||n==="z"?{scale:"1"}:{translate:"0px 0px"}}]:[{offset:0,opacity:1,...e==="fadeThrough"?{}:n==="z"?{scale:"1"}:{translate:"0px 0px"}},{offset:O,opacity:0},{offset:1,opacity:0,...e==="fadeThrough"?{}:n==="z"?{scale:`${d}`}:{translate:r}}]}function at(e,o={}){const i=o.axis??"x",n=o.distance??U,t=o.forward!==!1;b(e==="containerTransform"||e==="fade"||e==="fadeThrough"||e==="sharedAxis","invalid Material transition pattern"),b(i==="x"||i==="y"||i==="z","invalid shared axis"),b(Number.isFinite(n)&&n>=0,"invalid shared-axis distance");const a=o.duration??(e==="fade"?"--cw-Motion-transition-duration-medium-4":e!=="containerTransform"?"--cw-Motion-transition-duration-long-1":t?"--cw-Motion-transition-duration-long-2":"--cw-Motion-transition-duration-medium-4"),s=o.duration??(e==="fade"?"--cw-Motion-transition-duration-short-3":a),c=(r,d)=>e==="containerTransform"?tt(r,d,t,a):nt(e,r[d?1:0],d,i,t,n);return{enterMotion:{duration:a,easing:e==="fade"?"--cw-Motion-transition-easing-emphasized-decelerate":S,keyframes:r=>c(r,!0)},exitMotion:{duration:s,easing:e==="fade"?"--cw-Motion-transition-easing-emphasized-accelerate":S,keyframes:r=>c(r,!1)}}}export{at as createMaterialTransition};
@@ -0,0 +1 @@
1
+ import{isServer as p}from"solid-js/web";import{BoxBottom as $,BoxLeft as b,BoxRight as w,BoxTop as h,axisOfBoxSide as D,checkArgument as s,checkState as k,logicalBoxSidesOf as O,printDebug as M}from"../util";const y=new WeakMap,R=/^([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(ms|s)?$/i,T=/^[a-z][-a-z0-9]*(?:\([^()]*\))?$/i,C="(prefers-reduced-motion: reduce)";function S(n){const t=p?!1:y.get(n);if(t!==void 0)return t;const e=n.createElement("div");let i=!1,o;try{if(e.style.cssText="width:0px;height:0px;display:none",n.documentElement.appendChild(e),typeof e.animate!="function"||typeof e.getAnimations!="function")throw new Error("Web Animations API unavailable");o=e.animate([{backgroundColor:"red"},{backgroundColor:"blue"}],{duration:1e3}),o.finished.catch(()=>{}),i=o.pending&&o.playState==="running"&&typeof o.finished.then=="function"&&e.getAnimations({subtree:!0}).includes(o)}catch(r){M("motion not supported, web animation api unavailable",r)}finally{o?.cancel(),e.remove()}return y.set(n,i),i}const F=!p&&S(document);function A(n){let t=n.memo["$$logical-sides"];return t===void 0&&(t=O(n.element,n.pseudoElement),n.memo["$$logical-sides"]=t),t}function v(n,t,e){let i=n.memo[t];if(i!==void 0)return i;const o=n.element.ownerDocument.defaultView;k(o!==null,"element owner document has no browsing context"),i=o.getComputedStyle(n.element,n.pseudoElement??null).getPropertyValue(t),s(i!=="",`element does not style '${t}'`);try{i=e(i)}catch(r){throw new Error(`failed to parse style property '${t}': ${i}`,{cause:r})}return n.memo[t]=i,i}function m(n,t){const e=t===void 0?0:typeof t=="number"?t:v(n,t,B);return s(Number.isFinite(e),"invalid duration"),e}function B(n){const t=R.exec((n.split(",").at(-1)??"").trim()),e=Number(t?.[1]);return s(t!==null&&Number.isFinite(e),"invalid duration"),e*(t[2]?.toLowerCase()==="s"?1e3:1)}function N(n){let t=0,e=0;for(let o=0;o<n.length;o++)n[o]==="("?t++:n[o]===")"?t--:n[o]===","&&t===0&&(e=o+1);const i=n.slice(e).trim();return s(T.test(i),"invalid easing function"),i}function x(n,t){return t===void 0||!t.startsWith("--")&&t!=="animation-timing-function"&&t!=="transition-timing-function"?t:v(n,t,N)}function K(n,t){s(t==="block"||t==="inline","invalid motion axis");const e=A(n);return(t==="block"?[h,$]:[b,w]).map(i=>e[i])}function z(n,t,e){const{axis:i,dir:o,name:r}=/^(?<name>[a-z]+)-(?<dir>in|out)(?:-(?<axis>block|inline))?$/.exec(e)?.groups??{};s(r!==void 0&&(o==="in"||o==="out"),`invalid predefined motion name: ${e}`);const[a,l]=o==="in"?n:[n[1],n[0]];if(r==="fade"||r==="zoom"){s(i===void 0,`predefined motion ${e} does not operate on an axis`),r==="fade"?a.opacity=0:a.scale=0;return}const[d,c]=K(t,i);(r==="clip"||r==="slide")&&(a.clipPath??=[0,0,0,0],l.clipPath??=[0,0,0,0]),r==="clip"?a.clipPath[c]=100:r==="expand"?i==="block"?a.blockSize=0:a.inlineSize=0:(s(r==="slide",`${e} is not a predefined motion`),a.translate??=[0,0],l.translate??=[0,0],a.clipPath[d]=100,a.translate[D(d)]=d===b||d===h?-100:100)}function g(n,t,e){const i={};let o=!1;for(const[r,a]of Object.entries(t)){if(typeof r!="string")continue;let l=Array.isArray(a)?a.map(d=>`${d}%`).join(" "):typeof a=="number"?a.toString():"";l!==""&&(r==="clipPath"&&(l=`inset(${l})`),i[r]=l,o=!0)}return o?(e!==void 0&&(i.offset=e),n.push(i)-1):-1}function I(n,t){const e=[],i={};let o=-1;for(let r=0;r<t.length;){let a=t[r];if(typeof a=="object"){e.push(a.easing===void 0?a:{...a,easing:x(n,a.easing)}),r++;continue}const l={};do z([l,i],n,a);while(++r<t.length&&typeof(a=t[r])!="object");o=g(e,l,e.length===0?0:void 0)}return g(e,i,1)===-1&&o!==-1&&o===e.length-1&&e[o].offset===void 0&&e.push({offset:1}),e}function E(){return{pending:!1,playState:"finished",get finished(){return Promise.resolve(this)},get ready(){return Promise.resolve(this)},updatePlaybackRate(n){},cancel(){}}}function L(n,t){const e=()=>{t.matches&&(n.effect?.updateTiming({iterations:1}),n.playbackRate=n.playbackRate===0?1:n.playbackRate,n.finish())},i=()=>t.removeEventListener("change",e);t.addEventListener("change",e),n.finished.then(i,i)}function _(n,t,e){const i={element:n,pseudoElement:e.pseudoElement,memo:e.cache??{}},o=I(i,t),r=m(i,e.startDelay),a=m(i,e.duration),l=m(i,e.endDelay),d=e.iterations??1,c=e.respectReducedMotion===!1?void 0:n.ownerDocument.defaultView?.matchMedia?.(C),f=c?.matches===!0;s(a>=0,"invalid duration"),s(d===1/0||Number.isFinite(d)&&d>=0,"invalid iteration count");const P={delay:f?0:r,direction:e.direction??"normal",duration:f?0:a,easing:x(i,e.easing)??"linear",endDelay:f?0:l,fill:e.fill??"none",iterations:f?1:d,composite:e.composite??"replace",pseudoElement:e.pseudoElement};try{const u=n.animate(o,P);if(!u||!("finished"in u)||!("playState"in u))throw u?.cancel(),new Error("invalid animate implementation");return c!==void 0&&L(u,c),u}catch(u){return M("failed to animate element",{cause:u}),E()}}function W(n,t,e){return p||typeof n.animate!="function"||!S(n.ownerDocument)?E():_(n,t,e)}export{F as SUPPORTS_MOTION,W as applyMotion};
@@ -0,0 +1 @@
1
+ import{getOwner as x,onCleanup as P}from"solid-js";import{isServer as R}from"solid-js/web";import{checkArgument as d}from"../util";import{subscribeMotionFrames as T}from"./frame";const F={expressive:{effect:{default:[1600,1],fast:[3800,1],slow:[800,1]},spatial:{default:[380,.8],fast:[800,.6],slow:[200,.8]}},standard:{effect:{default:[1600,1],fast:[3800,1],slow:[800,1]},spatial:{default:[700,.9],fast:[1400,.9],slow:[300,.9]}}},L={"%":.1,deg:.1,px:.4},N=.002,O=1e3/16,C="(prefers-reduced-motion: reduce)";function D(l,n,e,s,i,t){const o=Math.sqrt(s),r=l-e,a=i*o;if(i===1){const p=n+o*r,m=r+p*t,f=Math.exp(-o*t);return[e+m*f,(p-o*m)*f]}if(i<1){const p=o*Math.sqrt(1-i*i),m=(n+a*r)/p,f=Math.sin(p*t),v=Math.cos(p*t),b=r*v+m*f,M=Math.exp(-a*t);return[e+b*M,(p*(m*v-r*f)-a*b)*M]}const h=o*Math.sqrt(i*i-1),u=-s/(a+h),c=-a-h,g=(n-c*r)/(u-c),S=g*Math.exp(u*t),y=(r-g)*Math.exp(c*t);return[e+S+y,u*S+c*y]}function E(l,n){const e=l?.getPropertyValue(n).trim()??"",s=e===""?NaN:Number(e);return Number.isFinite(s)&&s>0?s:void 0}function _(l,n,e){const s=e.scheme??"standard",i=e.role??"spatial",t=e.speed??"default";d(s==="expressive"||s==="standard","invalid spring scheme"),d(i==="effect"||i==="spatial","invalid spring role"),d(t==="default"||t==="fast"||t==="slow","invalid spring speed");const[o,r]=F[s][i][t],a=e.scheme!==void 0||n===null||e.stiffness!==void 0&&e.damping!==void 0?void 0:n.getComputedStyle(l),h=`--cw-Motion-spring-${i}-${t}`;return[e.stiffness??E(a,`${h}-stiffness`)??o,e.damping??E(a,`${h}-damping`)??r]}function w(){let l,n;const e=new Promise((s,i)=>{l=s,n=i});return e.catch(()=>{}),{promise:e,resolve:l,reject:n}}class H{#m;#f;#g;#e;#r;#S;#y;#h;#v;#u;#n;#i;#s;#o;#t;#a;#d;constructor(n,e,s,i,t){const o=R?null:n.ownerDocument.defaultView,[r,a]=_(n,o,t),h=t.unit??"",u=t.threshold??L[h]??N,c=t.velocity??0;d(Number.isFinite(s)&&Number.isFinite(i),"invalid spring value"),d(Number.isFinite(c),"invalid spring velocity"),d(Number.isFinite(r)&&r>0,"invalid spring stiffness"),d(Number.isFinite(a)&&a>0,"invalid spring damping"),d(Number.isFinite(u)&&u>0,"invalid spring threshold"),this.#m=n,this.#f=e,this.#g=h,this.#e=typeof o?.requestAnimationFrame=="function"?o:null,this.#r=t.respectReducedMotion===!1?void 0:this.#e?.matchMedia?.(C),this.#S=r,this.#y=a,this.#h=u,this.#v=g=>this.#R(g),this.#u=()=>this.#E(),this.#n=s,this.#i=c,this.#s=i,this.#o=0,this.#t="idle",this.#a=w(),this.#d=void 0,this.#b()}get value(){return this.#n}get velocity(){return this.#i}get playState(){return this.#t}get finished(){return this.#a.promise}retarget(n){if(d(Number.isFinite(n),"invalid spring value"),this.#t==="running"&&this.#e!==null){this.#c(this.#e.performance.now()),this.#s=n,this.#l();return}this.#s=n,this.#a=w(),this.#b()}cancel(){this.#t==="running"&&(this.#e!==null&&this.#c(this.#e.performance.now()),this.#M(),this.#l(),this.#t="idle",this.#a.reject(new DOMException("Spring motion cancelled","AbortError")))}#b(){if(this.#t="running",this.#e===null||this.#r?.matches===!0){this.#p();return}this.#o=this.#e.performance.now(),this.#r?.addEventListener("change",this.#u),this.#l(),this.#d=T(this.#e,this.#v)}#c(n){const e=Math.max(this.#o,n);[this.#n,this.#i]=D(this.#n,this.#i,this.#s,this.#S,this.#y,(e-this.#o)/1e3),this.#o=e}#R(n){this.#c(n),Math.abs(this.#n-this.#s)<this.#h&&Math.abs(this.#i)<this.#h*O?this.#p():this.#l()}#E(){this.#r?.matches===!0&&this.#p()}#p(){this.#M(),this.#t="finished",this.#n=this.#s,this.#i=0,this.#l(),this.#a.resolve(this)}#M(){this.#d?.(),this.#d=void 0,this.#r?.removeEventListener("change",this.#u)}#l(){R||this.#m.style.setProperty(this.#f,`${this.#n}${this.#g}`)}}function A(l,n,e,s,i={}){const t=new H(l,n,e,s,i);return x()!==null&&P(()=>t.cancel()),t}export{A as applySpringMotion};
@@ -0,0 +1 @@
1
+ @layer cw-style{.cw-transition-exit{pointer-events:none;touch-action:none;user-select:none}}
@@ -0,0 +1 @@
1
+ import{createComputed as $,createSignal as F,onCleanup as L,onMount as I,untrack as d,useTransition as J}from"solid-js";import{isServer as X}from"solid-js/web";import{assertDebug as m,checkState as B,consumeProps as P}from"../util";import{applyMotion as O}from"./motion";import"./transition.css";const b=0,p=1,A=2,D=3,K=4,g=5;function v(e){L(()=>{e.lifetime.abort();for(const n of e.cancellations)n();e.cancellations.clear();for(const n of e.pending)C(n);e.pending.length=0})}function C(e){e.entering!==void 0&&s(e.entering,e.enterClass,e.enterStartClass,e.enterMotionClass),e.exiting!==void 0&&s(e.exiting,e.exitClass,e.exitStartClass,e.exitMotionClass)}function y(e,n,t=!1){const i=e.context.lifetime.signal,r=t?i:e.cancellation.signal;return new Promise((o,a)=>{const f=()=>{i.removeEventListener("abort",u),r.removeEventListener("abort",u)},u=()=>{f(),a(i.reason??r.reason)};if(i.aborted||r.aborted){Promise.resolve(n).catch(()=>{}),a(i.reason??r.reason);return}i.addEventListener("abort",u,{once:!0}),r.addEventListener("abort",u,{once:!0}),Promise.resolve(n).then(o,a).finally(f)})}function k(e){return e.flat().filter(n=>(n??"")!=="")}function c(e,...n){e.classList.add(...k(n))}function s(e,...n){e.classList.remove(...k(n))}function w(e,n){const t=e.ownerDocument.defaultView;return t===null||typeof t.requestAnimationFrame!="function"?Promise.resolve():y(n,new Promise(i=>{let r=t.requestAnimationFrame(()=>{r=t.requestAnimationFrame(()=>{n.context.cancellations.delete(o),i()})});const o=()=>t.cancelAnimationFrame(r);n.context.cancellations.add(o)}))}function M(e){const t=e.effect?.target?.ownerDocument;return!e.pending&&t!==void 0&&e.timeline===t.timeline&&e.playState==="running"&&e.effect!==null&&Number.isFinite(e.playbackRate)&&e.playbackRate!==0&&Number.isFinite(e.effect.getComputedTiming().endTime)}function E(e){return typeof e.getAnimations!="function"?Promise.resolve():Promise.allSettled(e.getAnimations({subtree:!0}).map(n=>M(n)?n.finished:n.pending||n.playState==="pending"?n.ready.then(t=>M(t)?t.finished:t):void 0).filter(n=>n!==void 0))}function q(e){return[e.exiting,e.entering]}function S(e,n,t,i=!1){if(t===void 0)return;let r=t.keyframes;if(typeof r=="function")try{r=r(q(e))}catch(o){console.warn("failed to compute keyframes of inline motion",o);return}e.context.lifetime.signal.throwIfAborted(),e.cancellation.signal.throwIfAborted();try{if(r.length!==0){const o=O(n,r,i&&t.fill===void 0?{...t,fill:"forwards"}:t),a=()=>{e.context.cancellations.delete(a),o.cancel()};return e.context.cancellations.add(a),i||o.finished.then(()=>e.context.cancellations.delete(a),()=>e.context.cancellations.delete(a)),a}}catch(o){console.warn("failed to apply inline motion",o)}}async function l(e,n){e.context.lifetime.signal.throwIfAborted(),n!==g&&e.cancellation.signal.throwIfAborted();const t=e.context.props.onStateChange;if(t!==void 0){const i=t(q(e),n);i!==null&&(typeof i=="object"||typeof i=="function")&&typeof i.then=="function"&&await y(e,i,n===g)}e.context.lifetime.signal.throwIfAborted(),n!==g&&e.cancellation.signal.throwIfAborted()}async function x(e){const n=e.entering;if(n!==void 0){if(c(n,e.enterClass,e.enterStartClass),e.order==="enter-exit")e.context.setRenderedElement(e.exiting===void 0?n:[e.exiting,n]);else if(e.order!=="exit-enter"){const t=e.context.renderedElement();Array.isArray(t)?m(t.length===2&&t[0]===e.exiting&&t[1]===n):t!==n&&(m(t===e.exiting),e.context.setRenderedElement(t===void 0?n:[t,n]))}await Promise.resolve(),await l(e,p),S(e,n,e.enterMotion),await w(n,e),s(n,e.enterStartClass),c(n,e.enterMotionClass),await y(e,E(n)),s(n,e.enterMotionClass),await l(e,A),s(n,e.enterClass)}}async function T(e){const n=e.exiting;if(n===void 0)return;c(n,e.exitClass,e.exitStartClass),await l(e,D);const t=S(e,n,e.exitMotion,!0);await w(n,e),s(n,e.exitStartClass),c(n,e.exitMotionClass),await y(e,E(n)),s(n,e.exitMotionClass),await l(e,K),s(n,e.exitClass),m(()=>{const i=e.context.renderedElement();return e.order==="exit-enter"?i===n:e.order==="enter-exit"?Array.isArray(i)&&i.length===2&&i[0]===n&&i[1]===e.entering:i===n||Array.isArray(i)&&i.length===2&&i[0]===n&&i[1]===e.entering}),e.context.setRenderedElement(e.entering),t?.()}function R(e,n){const t=n.name??"cw-transition";e.enterClass=n.enterClass??`${t}-enter`,e.enterMotion=n.enterMotion,e.enterMotionClass=n.enterMotionClass??`${t}-enterMotion`,e.enterStartClass=n.enterStartClass??`${t}-enterStart`,e.exitClass=n.exitClass??`${t}-exit`,e.exitMotion=n.exitMotion,e.exitMotionClass=n.exitMotionClass??`${t}-exitMotion`,e.exitStartClass=n.exitStartClass??`${t}-exitStart`,e.order=e.entering===void 0?"exit-enter":e.exiting===void 0?"enter-exit":n.order}async function N(e){const n=e.pending;for(;n.length>0;){const t=n[0];m(t.entering!==t.exiting&&t.context===e),R(t,e.props);try{try{switch(await l(t,b),t.order??"parallel"){case"enter-exit":await x(t),await T(t);break;case"exit-enter":await T(t),await x(t);break;default:{const i=[x(t),T(t)];try{await Promise.all(i)}catch(r){throw t.cancellation.abort(r),await Promise.allSettled(i),r}break}}}finally{await l(t,g)}}catch(i){for(const r of e.cancellations)r();if(e.cancellations.clear(),C(t),e.lifetime.signal.aborted)return;console.warn("failed to apply transition sequence",i),e.setRenderedElement(t.entering),t.entering!==void 0&&s(t.entering,t.enterClass,t.enterMotionClass,t.enterStartClass)}B(n.shift()===t,"pending transition queue corrupt"),m(()=>e.renderedElement()===t.entering)}}function h(e){if(e!==void 0&&(typeof e!="object"||e===null||e.nodeType!==1))throw new TypeError(`not a transition element: ${e}`)}function j(e,n){const[t]=J();if(d(t))return t(),n;const i=e.nextElement();if(h(i),i===n)return i;for(let a=0;a<e.pending.length;a++)if(e.pending[a].entering===i)return e.pending.splice(a+1),i;const r=e.pending.length===0?d(e.renderedElement):e.pending[e.pending.length-1].entering,o={cancellation:new AbortController,context:e,entering:i,exiting:Array.isArray(r)?r[1]:r};return o.exiting!==o.entering&&e.pending.push(o)===1&&d(()=>N(e)),i}function z(e,n){if(h(e),e===void 0)return;const t={lifetime:new AbortController,cancellations:new Set,nextElement:()=>{},pending:[],renderedElement:()=>{},setRenderedElement:(a=>{}),props:n};v(t);const i={cancellation:new AbortController,context:t,entering:e,exiting:void 0};d(()=>R(i,n)),t.pending.push(i);let r=d(()=>l(i,b));r===void 0?c(e,i.enterClass,i.enterStartClass):r=r.then(()=>{t.lifetime.signal.throwIfAborted(),c(e,i.enterClass,i.enterStartClass)}),r?.catch(()=>{});const o=async()=>{await l(i,p),S(i,i.entering,i.enterMotion),await w(e,i),s(e,i.enterStartClass),c(e,i.enterMotionClass),await y(i,E(e)),s(e,i.enterMotionClass),await l(i,A),s(e,i.enterClass),await l(i,g)};return I(()=>d(()=>{(r!==void 0?r.then(o):o()).catch(f=>{for(const u of t.cancellations)u();t.cancellations.clear(),C(i),!t.lifetime.signal.aborted&&(console.warn("appear transition failed",f),s(e,i.enterClass,i.enterMotionClass,i.enterStartClass))})})),e}const Q=X?e=>{const{children:n}=P(e,[],["children"]);return n}:e=>{const{appear:n,children:t}=P(e,[],["appear","children"]);if(typeof t!="function")return n?z(t,e):t;const i=n?void 0:d(t);h(i);const[r,o]=F(i,{equals:!1}),a={lifetime:new AbortController,cancellations:new Set,nextElement:t,pending:[],props:e,renderedElement:r,setRenderedElement:o};return v(a),$(f=>j(a,f),i),a.renderedElement};export{p as EnterSequenceBegin,A as EnterSequenceEnd,D as ExitSequenceBegin,K as ExitSequenceEnd,Q as Transition,b as TransitionBegin,g as TransitionEnd};
@@ -0,0 +1 @@
1
+ import{checkArgument as L}from"../util";const m=20,D=100,G=40,q=.01,H=3,j=.5;function A(a){return new Float64Array(a)}const w=A(m),g=A(m),N=A(m),u=A(11),d=A(16),M=A(4),b=A(16),i=A(4),P=A(4*m);function T(a,e){let r=1;for(let t=0;t<7;t++)u[t]+=r,t<4&&(u[7+t]+=r*e),r*=a}function _(a){for(let e=0;e<a;e++){for(let t=0;t<e;t++){let c=u[e+t];for(let l=0;l<t;l++)c-=d[e*4+l]*d[t*4+l]*M[l];d[e*4+t]=c/M[t]}let r=u[2*e];for(let t=0;t<e;t++)r-=d[e*4+t]*d[e*4+t]*M[t];if(!(r>0))return e;M[e]=r}return a}function R(a){b[0]=0,b[1]=1,b[2]=-d[9],b[3]=-d[13]-d[14]*b[2];for(let e=1;e<=a;e++){let r=0;for(let t=e;t>=0;t--){let c=b[t]/M[t];for(let l=t+1;l<=e;l++)c-=d[l*4+t]*b[e*4+l];b[e*4+t]=c,r+=c*u[7+t]}i[e]=r}}function W(a,e){if(i[0]=NaN,e<4)return;u.fill(0);let r=0;for(let o=0;o<e;o++)T(w[o],a[o]),r+=a[o]**2;if(_(3)<3)return;const t=u[8]-d[4]*u[7],c=(u[9]-d[8]*u[7]-d[9]*t)/M[2],l=t/M[1]-d[9]*c,F=u[7]/M[0]-d[4]*l-d[8]*c;i[0]=(r-(F*u[7]+l*u[8]+c*u[9]))/(e-3)}function k(a,e,r,t){return(a-r)*(a-t)/((e-r)*(e-t))}function z(a,e){const r=w,t=(a[0]-a[1])/(r[0]-r[1]);if(i[0]=t,e<=3)return;if(u.fill(0),e===4){for(let n=0;n<4;n++)T(r[n],a[n]);_(3)===3&&(R(2),i[0]=(t+i[2])/2);return}let c=0,l=0;for(let n=1;n+2<e;n++){const s=r[n],f=r[n-1],S=r[n+1],I=r[n+2],v=k(s,f,S,I),p=k(s,S,f,I),C=k(s,I,f,S),x=(a[n]-v*a[n-1]-p*a[n+1]-C*a[n+2])**2/(1+v**2+p**2+C**2);x<1/0&&(c+=x,l++)}const F=Math.max(q**2,c/l||0),o=H*F;let E=0,y=1/0;T(r[0],a[0]),T(r[1],a[1]);for(let n=3;n<=e;n++){T(r[n-1],a[n-1]);const s=_(Math.min(n,4))-1;if(!(s<2)){R(s);for(let f=s-1;f>0;f--){let S=0;for(let v=f+1;v<=s;v++)S=Math.max(S,(i[f]-i[v])**2-o*(b[v*4+1]-b[f*4+1]));const I=S+F*b[f*4+1];P[E++]=I,P[E++]=i[f],y=Math.min(y,I)}}}let O=0,h=0;for(let n=0;n<E;n+=2){const s=Math.exp((y-P[n])/(j*y));O+=s,h+=s*P[n+1]}E!==0&&(i[0]=h/O)}class X{#r;#t;#e;constructor(){this.#r=A(2*m),this.#t=0,this.#e=0}addDataPoint(e,r){L(Number.isFinite(e)&&Number.isFinite(r),"invalid data point");const t=this.#t;this.#r[t]=e,this.#r[t+m]=r,this.#t=t===m-1?0:t+1,this.#e<m&&this.#e++}calculateVelocity(e){L(e===void 0||e>0,"invalid maximum velocity"),this.#n();const r=i[0],t=Number.isFinite(r)?r:0;return e===void 0?t:Math.max(-e,Math.min(t,e))}resetTracking(){this.#t=0,this.#e=0}#n(){const e=this.#r,r=this.#t===0?m-1:this.#t-1,t=e[r],c=e[r+m];let l=t,F=0,o=0,E=!1;for(let h=r,n=0;n<this.#e;n++){const s=e[h],f=s-t,S=e[h+m]-c;if(t-s>D||Math.abs(s-l)>G)break;o!==0&&f===w[o-1]?(N[o-1]=S,E=!0):(w[o]=f,g[o]=S,N[o++]=S),F=Math.max(F,Math.abs(f)),l=s,h=h===0?m-1:h-1}if(i[0]=0,F===0)return;const y=2**-Math.ceil(Math.log2(F));let O=g;for(let h=0;h<o;h++)w[h]*=y;if(E){W(g,o);const h=i[0];W(N,o),i[0]<h&&(O=N)}z(O,o),i[0]=1e3*y*i[0]}}export{X as VelocityTracker};