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

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 +112 -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 +331 -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 +582 -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,51 @@
1
+ import{children as C,createComponent as O,createContext as M,createSignal as L,onCleanup as V,untrack as I,useContext as f}from"solid-js";import{insert as c}from"solid-js/web";import{defineDomComponent as T}from"..";import{IconButton as R}from"../action/icon-button";import{DomController as g}from"../dom/client";import{Menu as W,MenuItem as G}from"../surface/menu";import{isElementNode as b,mutationObserverOf as Y,resolveNavigationSlots as y}from"./base";import{BarScrollState as D,resizeObserverOf as E}from"./scroll";import"./navigation.css";const v=new Set(["medium","large","medium-flexible","large-flexible"]),U=["title","subtitle","navigationIcon","actions","avatar"],$=["actions","floatingActionButton"],j={role:"effect",speed:"default"},Z={role:"spatial",speed:"fast"},_=.5,H="More options",P=48,w=M(),A=M();function N(o){if(!(o===void 0||!Number.isFinite(o)))return Math.min(1,Math.max(0,o))}function z(o){return typeof o!="number"?o:Number.isFinite(o)&&o>=0?`${o}px`:void 0}function q(o){return typeof o=="function"?o():o}function J(o){return o.borderBoxSize[0]?.blockSize??o.contentRect.height}function x(o,e){e?o.setAttribute("aria-hidden","true"):o.removeAttribute("aria-hidden")}function K(o,e,t){const n=t.variant??o,r=v.has(n),s=t.collapsed===!0?1:N(t.scrollProgress)??0,a=s<_,m=f(w);let h;const d=()=>r?h??=m?.():void 0;return<div{...e}classList={{...e.classList,"cw-TopAppBar":!0,[`_cw-TopAppBar-${n}`]:!0,"_cw-TopAppBar-twoRows":r}}data-cw-app-bar-scrolled={t.scrolled===!0?"true":void 0}data-cw-top-app-bar-variant={n}data-cw-title-alignment={t.titleAlignment??(n==="center"?"center":"start")}style={{...e.style,"--cw-TopAppBar-expanded-height":z(t.expandedHeight),"--cw-TopAppBar-scroll-progress":s}}>
2
+ <div class="cw-TopAppBar-row">
3
+ <span class="cw-TopAppBar-navigation">{t.navigationIcon}</span>
4
+ <span aria-hidden={r&&a?"true":void 0}class="cw-TopAppBar-titleGroup">
5
+ <span class="cw-TopAppBar-title">{t.title??e.children}</span>
6
+ <span class="cw-TopAppBar-subtitle">{t.subtitle}</span>
7
+ </span>
8
+ <span class="cw-TopAppBar-trailing">
9
+ <span class="cw-TopAppBar-actions">{t.actions}</span>
10
+ <span class="cw-TopAppBar-avatar">{t.avatar}</span>
11
+ </span>
12
+ </div>
13
+ <div aria-hidden={r&&!a?"true":void 0}class="cw-TopAppBar-expandedRow">
14
+ <span class="cw-TopAppBar-titleGroup">
15
+ <span class="cw-TopAppBar-title">{d()?.title()}</span>
16
+ <span class="cw-TopAppBar-subtitle">{d()?.subtitle()}</span>
17
+ </span>
18
+ </div>
19
+ </div>}class Q extends g{#n;#t;#e;#o;#l;#a;#i;#s;#r;#c;#p;#u;#m;constructor(e,t="small"){super(e,{styleElementIsFunction:!0}),this.#n=t,this.#t=f(w),this.#e=t,this.#o=null,this.#l=null,this.#a=null,this.#i=null,this.#s=null,this.#r=null,this.#c=null,this.#p=void 0,this.#u=!1,this.#m=!1}#d(){return v.has(this.#e)}#h(){const e=this.#p??(!this.#d()&&this.#u);super.setAttribute("data-cw-app-bar-scrolled",e?"true":void 0)}#f(e){const t=this.#d(),n=e<_;this.#a!==null&&x(this.#a,t&&n),this.#i!==null&&x(this.#i,t&&!n)}#A(){const e=this.#d()?this.#s:this.#l;if(e===this.#c||(this.#r?.disconnect(),this.#r=null,this.#c=e,e===null))return;const t=E(e);t!==void 0&&(this.#r=new t(n=>{for(const r of n)this.#B(J(r))}),this.#r.observe(e))}#B(e){this.#o?.setRange(e),super.setStyle("--cw-TopAppBar-collapse-range",`${e}px`)}applyComponentProps(){const e=super.readProps(["collapsed","expandedHeight","scrollBehavior","scrollProgress","scrollTarget","scrolled","titleAlignment","variant"]),t=this.#o,n=N(e.scrollProgress);if(e.variantChanged&&(this.#e=e.variant??this.#n,super.setClass("variant",`_cw-TopAppBar-${this.#e}`),super.setClass("_cw-TopAppBar-twoRows",this.#d()),super.setAttribute("data-cw-top-app-bar-variant",this.#e),this.#A()),(e.variantChanged||e.titleAlignmentChanged)&&super.setAttribute("data-cw-title-alignment",e.titleAlignment??(this.#e==="center"?"center":"start")),e.expandedHeightChanged&&super.setStyle("--cw-TopAppBar-expanded-height",z(e.expandedHeight)),(e.variantChanged||e.scrolledChanged)&&(this.#p=e.scrolled,this.#h()),t!==null){const r=e.scrollProgressChanged||e.collapsedChanged||e.scrollBehaviorChanged||e.scrollTargetChanged;e.collapsed===void 0&&n===void 0?r&&t.bind(e.scrollBehavior,e.scrollTarget):(r&&t.bind(void 0,void 0),e.collapsed!==!0&&n!==void 0?t.setFraction(n):this.#m?r&&t.animateFraction(e.collapsed===!0?1:0):t.setFraction(e.collapsed===!0?1:0)),e.variantChanged&&this.#f(t.fraction)}this.#m=!0}onStyleElementChanged(e){super.onStyleElementChanged(e),!(!b(e)||this.#o!==null)&&(this.#o=new D(e,{property:"--cw-TopAppBar-scroll-progress",spring:j,onOverlapChange:t=>{this.#u=t,this.#h()},onFractionChange:t=>this.#f(t)}))}onControllerCleanup(){this.#o?.dispose(),this.#r?.disconnect(),this.#r=null,super.onControllerCleanup()}render(e){let t,n,r,s,a,m,h,d,l,i,p;const B=<div class="cw-TopAppBar">
20
+ <div class="cw-TopAppBar-row"ref={t}>
21
+ <span class="cw-TopAppBar-navigation"ref={n}/>
22
+ <span class="cw-TopAppBar-titleGroup"ref={r}>
23
+ <span class="cw-TopAppBar-title"ref={s}/>
24
+ <span class="cw-TopAppBar-subtitle"ref={a}/>
25
+ </span>
26
+ <span class="cw-TopAppBar-trailing">
27
+ <span class="cw-TopAppBar-actions"ref={m}/>
28
+ <span class="cw-TopAppBar-avatar"ref={h}/>
29
+ </span>
30
+ </div>
31
+ <div class="cw-TopAppBar-expandedRow"ref={d}>
32
+ <span class="cw-TopAppBar-titleGroup"ref={l}>
33
+ <span class="cw-TopAppBar-title"ref={i}/>
34
+ <span class="cw-TopAppBar-subtitle"ref={p}/>
35
+ </span>
36
+ </div>
37
+ </div>;let k;const S=()=>v.has(this.props.variant??this.#n)?k??=I(()=>this.#t?.()):void 0;return this.#l=t,this.#a=r,this.#i=d,this.#s=l,c(n,()=>this.props.navigationIcon),c(s,()=>this.props.title??e),c(a,()=>this.props.subtitle),c(m,()=>this.props.actions),c(h,()=>this.props.avatar),c(i,()=>S()?.title()),c(p,()=>S()?.subtitle()),B}}function u(o){const e=T(()=>(t,n)=>K(o,t,n),()=>class extends Q{constructor(t){super(t,o)}});return t=>O(w.Provider,{value:()=>({title:C(()=>q(t.title??t.children)),subtitle:C(()=>t.subtitle)}),get children(){return e(y(t,void 0,U))}})}const Ae=u("small"),Be=u("small"),ve=u("center"),Te=u("medium"),ee=u("large"),ge=u("medium-flexible"),be=u("large-flexible"),ye=ee;function te(o,e){return<div{...o}classList={{...o.classList,"cw-BottomAppBar":!0}}>
38
+ <span class="cw-BottomAppBar-actions">{e.actions??o.children}</span>
39
+ <span class="cw-BottomAppBar-fab">{e.floatingActionButton}</span>
40
+ </div>}class ne extends g{#n;#t;constructor(e){super(e,{styleElementIsFunction:!0}),this.#n=null,this.#t=null}applyComponentProps(){const e=super.readProps(["scrollBehavior","scrollTarget"]);(e.scrollBehaviorChanged||e.scrollTargetChanged)&&this.#n?.bind(e.scrollBehavior,e.scrollTarget)}onStyleElementChanged(e){if(super.onStyleElementChanged(e),!b(e)||this.#n!==null)return;const t=new D(e,{property:"--cw-BottomAppBar-scroll-progress",spring:Z,onFractionChange:r=>{e.inert!==r>0&&(e.inert=r>0)}}),n=E(e);this.#n=t,n!==void 0&&(this.#t=new n(r=>{for(const s of r)t.setRange(J(s))}),this.#t.observe(e))}onControllerCleanup(){this.#n?.dispose(),this.#t?.disconnect(),this.#t=null,super.onControllerCleanup()}render(e){let t,n;const r=<div class="cw-BottomAppBar">
41
+ <span class="cw-BottomAppBar-actions"ref={t}/>
42
+ <span class="cw-BottomAppBar-fab"ref={n}/>
43
+ </div>;return c(t,()=>this.props.actions??e),c(n,()=>this.props.floatingActionButton),r}}function oe(){const o=T(()=>te,()=>ne);return e=>o(y(e,void 0,$))}const Ee=oe();function re(){const[o,e]=L([]),[t,n]=L([]);return{entries:o,overflowed:t,setOverflowed:n,register(r){return e(s=>[...s,r]),()=>{e(s=>s.filter(a=>a!==r)),n(s=>s.filter(a=>a!==r))}}}}function X(o,e,t){const n=<R attr:aria-label={e()}name="more_vert"size="sm"/>;return<W label={e()}placement={t==="horizontal"?"bottom-end":"inline-end"}trigger={n}>
44
+ {()=>(o?.overflowed()??[]).map(r=><G disabled={r.disabled()}label={r.label()}leading={r.renderIcon()}onSelect={s=>r.activate(s)}/>)}
45
+ </W>}function se(o,e,t){const n=f(A);return<div{...e}classList={{...e.classList,[o==="horizontal"?"cw-AppBarRow":"cw-AppBarColumn"]:!0}}>
46
+ <span class="cw-AppBarLayout-items">{e.children}</span>
47
+ <span class="cw-AppBarLayout-overflow"hidden>{X(n,()=>t.overflowLabel??H,o)}</span>
48
+ </div>}class ie extends g{#n;#t;#e;#o;#l;#a;#i;#s;#r;#c;#p;constructor(e,t){super(e,{styleElementIsFunction:!0}),this.#n=t,this.#t=f(A),this.#e=null,this.#o=null,this.#l=new WeakMap,this.#a=new WeakMap,this.#i=null,this.#s=null,this.#r=P,this.#c=Number.POSITIVE_INFINITY,this.#p=Number.POSITIVE_INFINITY}#u(e){const t=e.borderBoxSize[0];return this.#n==="horizontal"?t?.inlineSize??e.contentRect.width:t?.blockSize??e.contentRect.height}#m(e){const t=new Set(this.#t?.entries().map(n=>n.element));for(const n of e){const r=this.#u(n);n.target===this.styleElement?this.#c=r:n.target===this.#s?this.#r=r>0?r:this.#r:t.has(n.target)?r>0&&this.#l.set(n.target,r):this.#a.set(n.target,r)}this.#d()}#d(){const e=this.#t,t=this.#i,n=this.#s;if(e===void 0||t===null||n===null)return;const r=(i,p)=>(i.element.compareDocumentPosition(p.element)&Node.DOCUMENT_POSITION_FOLLOWING)!==0,s=[...e.entries()].sort((i,p)=>r(i,p)?-1:1),a=s.map(i=>this.#l.get(i.element)??P),m=a.reduce((i,p)=>i+p,0),h=Array.from(t.children).reduce((i,p)=>s.some(B=>p.contains(B.element))?i:i+(this.#a.get(p)??0),0),d=this.#c-h;let l=s.length;if(m>d||s.length>this.#p){let i=this.#r;for(l=0;l<s.length&&l+1<this.#p&&i+a[l]<=d;)i+=a[l++]}s.forEach((i,p)=>{i.element.hidden=p>=l}),n.hidden=l===s.length,e.setOverflowed(s.slice(l))}#h(){const e=this.styleElement,t=this.#i;if(!b(e)||t===null||this.#s===null)return;this.#e?.disconnect();const n=E(e);if(n!==void 0){this.#e=new n(r=>this.#m(r)),this.#e.observe(e),this.#e.observe(this.#s);for(const r of Array.from(t.children))this.#e.observe(r);for(const r of this.#t?.entries()??[])this.#e.observe(r.element)}}applyComponentProps(){const[e,t]=super.readProp("maxItemCount");this.#t?.entries(),t&&(this.#p=e!==void 0&&Number.isFinite(e)&&e>=1?Math.floor(e):Number.POSITIVE_INFINITY),I(()=>{this.#h(),this.#d()})}onControllerCleanup(){this.#e?.disconnect(),this.#e=null,this.#o?.disconnect(),this.#o=null,super.onControllerCleanup()}render(e){let t,n;const r=this.#n==="horizontal"?"cw-AppBarRow":"cw-AppBarColumn",s=<div class={r}>
49
+ <span class="cw-AppBarLayout-items"ref={t}/>
50
+ <span class="cw-AppBarLayout-overflow"hidden ref={n}/>
51
+ </div>;this.#i=t,this.#s=n;const a=Y(t);return a!==void 0&&(this.#o=new a(()=>this.#h()),this.#o.observe(t,{childList:!0})),c(t,e),c(n,X(this.#t,()=>this.props.overflowLabel??H,this.#n)),s}}function F(o){const e=T(()=>(t,n)=>se(o,t,n),()=>class extends ie{constructor(t){super(t,o)}});return t=>O(A.Provider,{value:re(),get children(){return e(y(t,void 0,[]))}})}const we=F("horizontal"),Se=F("vertical");function Ce(o){const e=f(A),t=<R attr:aria-label={o.label}disabled={o.disabled===!0}onClick={r=>o.onActivate?.(r)}size="sm">{o.icon}</R>,n=<span class="cw-AppBarItem">{t}</span>;return e!==void 0&&V(e.register({element:n,label:()=>o.label,disabled:()=>o.disabled===!0,renderIcon:()=>o.icon,activate:r=>o.onActivate?.(r)})),n}export{Se as AppBarColumn,Ce as AppBarItem,ie as AppBarLayoutController,we as AppBarRow,Ee as BottomAppBar,ne as BottomAppBarController,ve as CenterAlignedTopAppBar,be as LargeFlexibleTopAppBar,ee as LargeTopAppBar,ge as MediumFlexibleTopAppBar,Te as MediumTopAppBar,Be as SmallTopAppBar,Ae as TopAppBar,Q as TopAppBarController,ye as TwoRowsTopAppBar};
@@ -0,0 +1 @@
1
+ import{children as M,createUniqueId as L,mergeProps as x}from"solid-js";import{DragVelocity as A}from"../surface/drag";import{deferAfterDelegatedCancellation as B}from"../util/event";const u=new WeakMap,d=new WeakMap,g=":modal, :popover-open",h=/[^a-zA-Z0-9_-]+/g,D=50,m=8,E=.5,S=["lostpointercapture","pointercancel","pointerdown","pointermove","pointerup"];function N(t,e,n){const r=t,o={},i=new Set(["children",...n]),s=l=>{const T=M(()=>l==="children"&&e!==void 0?e:r[l]);Object.defineProperty(o,l,{enumerable:!0,get:T})};for(const l of Object.keys(r))i.delete(l)&&s(l);for(const l of i)l==="children"?s(l):o[l]=void 0;return x(t,o)}function H(t,e){const n=L().replace(h,"-");return e===void 0||e===""?`${t}-${n}`:`${t}-${e.replace(h,"-")}-${n}`}function X(t){return"value"in t?t.value:"selectedValue"in t?t.selectedValue:t.defaultValue}function y(t){return t.matches(":disabled")||t.hasAttribute("disabled")||t.getAttribute("aria-disabled")==="true"}function C(t,e){const n=[];let r=!0;for(let o=t;o!==null;o=o.parentElement){const i=e?.get(o);if(i!==void 0){r=i;break}if(n.push(o),o.hasAttribute("hidden")||o.hasAttribute("inert")){r=!1;break}const s=p(o);if(s.display==="none"||s.visibility==="hidden"||s.visibility==="collapse"){r=!1;break}}for(const o of n)e?.set(o,r);return r}function P(t){const e=t.getAttribute("popover");return e===null||e===""||e==="auto"}function R(t){const e=t.ownerDocument,n=u.get(e)??[];let r=d.get(e);if(r===void 0){const i={order:new WeakMap,sequence:0,onToggle(s){!f(s.target)||!("newState"in s)||(s.newState==="open"?i.order.set(s.target,++i.sequence):n.includes(s.target)||i.order.delete(s.target))}};r=i,d.set(e,i),e.addEventListener("beforetoggle",i.onToggle,!0)}try{for(const i of Array.from(e.querySelectorAll(g)))r.order.has(i)||r.order.set(i,++r.sequence)}catch{}r.order.set(t,++r.sequence),n.push(t),u.set(e,n);const o=r;return()=>{const i=n.lastIndexOf(t);i>=0&&n.splice(i,1),n.length===0&&u.get(e)===n&&(e.removeEventListener("beforetoggle",o.onToggle,!0),d.delete(e),u.delete(e))}}function _(t){const e=t.ownerDocument,n=u.get(e),r=d.get(e);let o;if(n===void 0||r===void 0)return!1;try{o=Array.from(e.querySelectorAll(g))}catch{return n.at(-1)===t}for(const a of o)r.order.has(a)||r.order.set(a,++r.sequence);const i=n.filter(a=>o.some(l=>l.contains(a))),s=r.order.get(t)??0;return(i.length>0?i:n).at(-1)!==t?!1:o.every(a=>a.contains(t)||n.includes(a)||!P(a)||(r.order.get(a)??0)<s)}function f(t){return typeof t=="object"&&t!==null&&t.nodeType===1}function v(t){return f(t)&&t.localName==="a"}function q(t){return f(t)&&t.localName==="button"}function I(){throw new Error("server renderer requested on the client")}function V(t,e){return v(e)&&(t.button!==0||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey)}function W(t,e){v(e)&&y(e)&&(t.key==="Enter"||t.key===" ")&&t.preventDefault()}function c(t){return(t?.nodeType===9?t:t?.ownerDocument)?.defaultView}function p(t){return c(t)?.getComputedStyle(t)??getComputedStyle(t)}function J(t){return c(t)?.MutationObserver??globalThis.MutationObserver}function b(t){const e=Number.parseFloat(t);return Number.isFinite(e)?t.trim().endsWith("ms")?e:e*1e3:0}function w(t,e){const n=p(t),r=n.transitionDuration.split(","),o=n.transitionDelay.split(",");let i=0;return n.transitionProperty.split(",").forEach((s,a)=>{(e.includes(s.trim())||s.trim()==="all")&&(i=Math.max(0,b(r[a%r.length]??"0s")+b(o[a%o.length]??"0s")))}),i}function K(t,e,n){const r=c(t),o=w(t,e);let i;const s=()=>{t.removeEventListener("transitionend",a),i!==void 0&&r?.clearTimeout(i),i=void 0},a=l=>{l.target!==t||!e.includes(l.propertyName)||(s(),n())};return o===0||r===void 0?(n(),()=>{}):(t.addEventListener("transitionend",a),i=r.setTimeout(()=>{s(),n()},o+D),s)}function Y(t,e=!1){return Array.from(t.querySelectorAll("button, a[href], input, select, textarea, [role=button], [tabindex]")).filter(n=>n.closest("[role=toolbar]")===t&&!y(n)&&(n.matches("button, a[href], input, select, textarea")||n.tabIndex>=0||e&&n.matches("[role=button], [tabindex]")))}function j(t,...e){const n=new Set;for(const r of t)r!==void 0&&!n.has(r)&&(n.add(r),r(...e))}function $(t,e,n){return Math.abs(e)>=n?e>0:e>0?t>=E:t>E}class F{#s;#n;#l;#u;#r;#t;#d;#i;#e;#a;#o;constructor(e){this.#s=e,this.#n=new A,this.#l=n=>this.#f(n),this.#u=n=>{this.#o&&(this.#o=!1,n.preventDefault(),n.stopPropagation())},this.#r=null,this.#t=null,this.#d=0,this.#i=0,this.#e=0,this.#a=-1,this.#o=!1}attach(e){const n=this.#r;if(n!==e){this.#t=null,this.#e=0;for(const r of S)n?.removeEventListener(r,this.#l),e?.addEventListener(r,this.#l);n?.removeEventListener("click",this.#u,!0),e?.addEventListener("click",this.#u,!0),this.#r=e}}#f(e){const n=this.#t;if(e.type==="pointerdown"){n===null&&e.isPrimary&&e.button===0&&(this.#t=e,this.#i=e.clientX,this.#n.reset(),this.#n.track(e,r=>r.clientX));return}if(!(n===null||e.pointerId!==n.pointerId)){if(e.type!=="pointermove"){e.type==="pointerup"&&(this.#i=e.clientX),this.#h(e);return}this.#n.track(e,r=>r.clientX),this.#i=e.clientX,this.#e===0&&this.#p(n,e),this.#e>0&&this.#s.update(this.#c())}}#p(e,n){const r=this.#r,o=n.clientX-e.clientX,i=n.clientY-e.clientY;if(r===null||Math.max(Math.abs(o),Math.abs(i))<=m)return;if(Math.abs(i)>=Math.abs(o)){this.#t=null;return}const s=this.#s.begin(e);if(s===null||s<=0){this.#t=null;return}this.#e=s,this.#a=p(r).direction==="rtl"?1:-1,this.#d=e.clientX+Math.sign(o)*m;try{r.setPointerCapture(n.pointerId)}catch{}}#h(e){const n=this.#e,r=c(this.#r);if(this.#t=null,n===0)return;const o=this.#c(),i=e.type==="pointerup"?this.#n.release(e)*this.#a/n:0;this.#e=0,this.#o=!0,r?.setTimeout(()=>this.#o=!1,0),this.#s.end(o,i,e)}#c(){return(this.#i-this.#d)*this.#a/this.#e}}export{F as DismissDrag,K as afterTransition,p as computedStyleOf,j as dedupeCallbacks,B as deferAfterDelegatedCancellation,Y as directActionableChildren,V as isAlternateLinkActivation,v as isAnchorElement,q as isButtonElement,y as isDisabledElement,$ as isDismissedAt,f as isElementNode,_ as isTopModalLayer,C as isVisibleElement,J as mutationObserverOf,c as ownerWindow,W as preventDisabledLinkKey,R as registerModalLayer,N as resolveNavigationSlots,X as selectedValueOf,w as transitionTimeOf,H as uniqueId,I as unreachableServerRender};
@@ -0,0 +1,25 @@
1
+ import{splitProps as R,untrack as p}from"solid-js";import{isServer as D}from"solid-js/web";import{defineDomComponent as E}from"..";import{DomController as b}from"../dom/client";import{applySpringMotion as M}from"../motion";import{DismissDrag as T,afterTransition as k,computedStyleOf as A,deferAfterDelegatedCancellation as g,isDisabledElement as H,isDismissedAt as O,isElementNode as d,isTopModalLayer as u,isVisibleElement as x,ownerWindow as f,registerModalLayer as V,resolveNavigationSlots as N,uniqueId as y,unreachableServerRender as S}from"./base";import{NAVIGATION_KIND_ATTRIBUTE as I,NavigationSelection as F,provideNavigationSelection as _}from"./navigation";import"../container/elevation-shadow.css";import"./navigation.css";const C="cw-NavigationDrawer-open",h="Close navigation menu",r="--_CW-NAVIGATION-DRAWER_PROGRESS",w="_cw-NavigationDrawer-dragging",J=400,X=["headline","drawerContent","content"],K=["a[href]","button:not(:disabled)","input:not(:disabled)","select:not(:disabled)","textarea:not(:disabled)",'[tabindex]:not([tabindex="-1"])'].join(", ");function L(o){return o.variant??o.mode??"modal"}function P(o){return`_cw-NavigationDrawer-${o}`}function m(o){return"value"in o||"selectedValue"in o||"defaultValue"in o}class q extends b{#o;#l;#D;#E;#b;#N;#v;#p;#s;#y;#e;#t;#d;#S;#g;#n;#h;#i;#u;#m;#a;#c;#f;#C;#w;constructor(e){super(e),this.#o="open"in e,this.#l=m(e)?new F(e):null,this.#D=new T({begin:t=>this.#F(t),update:t=>this.#M(t),end:(t,n,i)=>this.#_(t,n,i)}),this.#E=t=>this.#J(t),this.#b=t=>this.#x(t),this.#N=()=>this.#R(),this.#v=t=>{const n=super.styleElement;t.key==="Escape"&&n!==null&&t.composedPath().includes(n)&&this.#x(t)},this.#p=t=>this.#X(t),this.#s=null,this.#y=null,this.#e=p(()=>L(e)),this.#t=p(()=>(this.#o?e.open:e.defaultOpen)===!0),this.#d=!1,this.#S=!1,this.#g=!1,this.#n=!0,this.#h=null,this.#i=null,this.#u=!1,this.#m=null,this.#a=null,this.#c=null,this.#f=null,this.#C=null,this.#w=()=>{},this.#l!==null&&super.setAttribute(I,"NavigationDrawer")}#r(){return this.#e==="modal"&&this.#t}#L(){const e=super.functionElement,t=this.#s,n=new Map;if(e===null)return[];const i=Array.from(e.querySelectorAll(K)).filter(s=>s.tabIndex>=0&&!H(s)&&x(s,n));return t!==null&&!t.hidden&&this.#n&&i.push(t),i}#T(){const e=super.styleElement,t=this.#e==="permanent"||this.#t;e===null||super.functionElement===null||((t!==this.#S||!this.#g)&&(this.#w(),this.#S=t,super.setClass(C,t),this.#i?.retarget(t?1:0),t||!this.#g?this.#d=t:this.#h===null&&(this.#w=k(e,[r],()=>{this.#d=!1,this.#P()}))),this.#g=!0,this.#P(),this.#V(this.#r()))}#P(){const e=this.#s,t=this.#y,n=this.#d,i=this.#e==="modal"&&n,s=n&&!this.#t&&this.#e!=="permanent";super.setAttribute("hidden",!n),super.setAttribute("aria-hidden",n?void 0:"true"),super.setAttribute("inert",s),e!==null&&(e.hidden=!i,e.inert=s||!this.#n,e.tabIndex=this.#n?0:-1,this.#n?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden","true")),t!==null&&(t.inert=this.#r())}#V(e){const t=super.styleElement;if(t===null||e===this.#u)return;if(this.#u=e,!e){this.#k(),this.#I(t);return}const n=t.getRootNode().activeElement;this.#f=d(n)&&n!==t.ownerDocument.body?n:null,(f(t)?.queueMicrotask??queueMicrotask)(()=>{!this.#u||super.styleElement!==t||!t.isConnected||(this.#R(),u(t)&&(this.#L()[0]??super.functionElement)?.focus())})}#I(e){const t=this.#f;this.#f=null,t!==null&&(f(e)?.queueMicrotask??queueMicrotask)(()=>{const n=e.getRootNode(),i=n.activeElement;!this.#r()&&t.isConnected&&t.getRootNode()===n&&(i===null||i===e.ownerDocument.body||e.contains(i))&&t.focus()})}#R(){const e=super.styleElement;if(e===null||!this.#u||!e.isConnected)return;const t=e.getRootNode(),n=t.nodeType===11?t:e.ownerDocument;n!==this.#c&&(this.#c?.removeEventListener("focusin",this.#p,!0),this.#c=n,n.addEventListener("focusin",this.#p,!0)),e.ownerDocument!==this.#a&&(this.#a?.removeEventListener("keydown",this.#v,!0),this.#a=e.ownerDocument,this.#a.addEventListener("keydown",this.#v,!0),this.#m?.(),this.#m=V(e))}#k(){this.#m?.(),this.#m=null,this.#c?.removeEventListener("focusin",this.#p,!0),this.#c=null,this.#a?.removeEventListener("keydown",this.#v,!0),this.#a=null}#A(e,t){this.#e==="permanent"||!this.#n||(this.#o||(this.#t=e,this.#T()),this.props.onOpenChange?.(e,t))}#H(e){const t=super.styleElement;g(e,t,()=>{super.styleElement===t&&t?.isConnected===!0&&this.#A(!1,e)})}#F(e){const t=super.styleElement,n=super.functionElement,i=e.target;if(t===null||n===null||!this.#r()||!this.#n||!u(t)||!d(i)||!(n.contains(i)||i===this.#s))return null;const s=Number.parseFloat(A(t).getPropertyValue(r));return this.#i?.cancel(),this.#i=null,this.#h=Number.isFinite(s)?s:1,super.setClass(w,!0),this.#M(0),n.getBoundingClientRect().width}#M(e){const t=super.styleElement,n=Math.min(1,Math.max(0,(this.#h??1)-e));return t?.style.setProperty(r,String(n)),n}#_(e,t,n){const i=super.styleElement,s=super.functionElement,a=this.#M(e),l=s?.getBoundingClientRect().width??0;if(i===null||l===0){this.#O();return}O(1-a,t,J/l)&&this.#A(!1,n);const c=M(i,r,a,this.#t?1:0,{velocity:-t});this.#i=c,c.finished.then(()=>{this.#i===c&&this.#O()},()=>{})}#O(){const e=super.styleElement;this.#i?.cancel(),this.#i=null,this.#h=null,e?.style.removeProperty(r),super.setClass(w,!1),this.#d&&this.#e!=="permanent"&&!this.#t&&(this.#d=!1,this.#P())}#J(e){e.target===this.#s&&this.#n&&this.#H(e)}#x(e){const t=super.styleElement;if(e===this.#C||t===null||(this.#C=e,this.#R(),this.#e==="modal"&&(!this.#t||!u(t))))return;if(e.key==="Escape"){this.#t&&this.#n&&!e.defaultPrevented&&this.#H(e);return}if(e.key!=="Tab"||!this.#r())return;const n=this.#L(),i=t.getRootNode().activeElement,s=d(i)?n.indexOf(i):-1;(e.shiftKey?s>0:s>=0&&s<n.length-1)||g(e,t,()=>{const l=n[e.shiftKey?n.length-1:0];super.styleElement===t&&t.isConnected&&this.#r()&&(l??super.functionElement)?.focus()})}#X(e){const t=super.styleElement,n=e.composedPath()[0]??e.target;!this.#r()||t===null||!d(n)||t.contains(n)||!u(t)||t.getRootNode().activeElement===n&&(this.#L()[0]??super.functionElement)?.focus()}applyComponentProps(){const e=super.readProps(["dismissible","mode","open","scrimLabel","selectedValue","value","variant"]);(e.variantChanged||e.modeChanged)&&(this.#e=e.variant??e.mode??"modal",super.setClass("variant",P(this.#e))),e.openChanged&&this.#o&&(this.#t=e.open===!0),e.dismissibleChanged&&(this.#n=e.dismissible!==!1),e.scrimLabelChanged&&this.#s?.setAttribute("aria-label",e.scrimLabel??h),(e.valueChanged||e.selectedValueChanged)&&this.#l?.update(),this.#T(),this.#l?.sync()}onStyleElementChanged(e){const t=super.styleElement;super.onStyleElementChanged(e),t?.removeEventListener("click",this.#E),t?.removeEventListener("keydown",this.#b),t?.removeEventListener("focusin",this.#N),e?.addEventListener("click",this.#E),e?.addEventListener("keydown",this.#b),e?.addEventListener("focusin",this.#N),this.#D.attach(e)}onFunctionElementChanged(e){super.onFunctionElementChanged(e),this.#l?.attach(e)}onControllerCleanup(){this.#w(),this.#i?.cancel(),this.#D.attach(null),this.#u=!1,this.#k(),this.#l?.dispose(),super.onControllerCleanup()}render(e,t){return<div class="cw-NavigationDrawer">
2
+ <nav class="cw-NavigationDrawer-panel cw-elevationShadow"ref={t}role="navigation"tabIndex={-1}>
3
+ <div class="cw-NavigationDrawer-headline">{this.props.headline}</div>
4
+ <div class="cw-NavigationDrawer-items">{this.props.drawerContent??e}</div>
5
+ </nav>
6
+ <button aria-label={h}class="cw-NavigationDrawer-scrim"ref={n=>{this.#s=n}}type="button"/>
7
+ <div class="cw-NavigationDrawer-content"ref={n=>{this.#y=n}}>{this.props.content}</div>
8
+ </div>}}function B(o,e){const[t,n]=R(o,["children","class","classList","style"]),i=L(e),s=i==="permanent"||("open"in e?e.open:e.defaultOpen)===!0,a=e.dismissible!==!1;return<div class={t.class}classList={{...t.classList,[P(i)]:!0,[C]:s,"cw-NavigationDrawer":!0}}style={t.style}>
9
+ <nav{...n}aria-hidden={s?void 0:"true"}class="cw-NavigationDrawer-panel cw-elevationShadow"data-cw-navigation-kind={m(e)?"NavigationDrawer":void 0}hidden={!s}role="navigation"tabIndex={-1}>
10
+ <div class="cw-NavigationDrawer-headline">{e.headline}</div>
11
+ <div class="cw-NavigationDrawer-items">
12
+ {e.drawerContent??t.children}
13
+ </div>
14
+ </nav>
15
+ <button aria-hidden={a?void 0:"true"}aria-label={e.scrimLabel??h}class="cw-NavigationDrawer-scrim"hidden={i!=="modal"||!s}inert={!a}tabIndex={a?0:-1}type="button"/>
16
+ <div class="cw-NavigationDrawer-content"inert={i==="modal"&&s}>
17
+ {e.content}
18
+ </div>
19
+ </div>}const G=E(D?()=>B:S,()=>q),W=o=>_(o,m(o),()=>G(N(o,void 0,X)));function v(o){return e=><W{...e}variant={o}/>}const se=v("modal"),ae=v("dismissible"),re=v("permanent");class U extends b{#o;constructor(e){super(e,{styleElementIsFunction:!0}),this.#o=y("cw-drawer-section")}applyComponentProps(){const e=super.readProps(["label"]);e.labelChanged&&super.setAttribute("aria-labelledby",e.label===void 0?void 0:this.#o)}render(e){const t=this.#o;return<div class="cw-NavigationDrawerSection"role="group">
20
+ <div class="cw-NavigationDrawerSection-label"id={t}>{this.props.label}</div>
21
+ {e}
22
+ </div>}}function j(o,e){const t=y("cw-drawer-section");return<div{...o}aria-labelledby={e.label===void 0?void 0:t}classList={{...o.classList,"cw-NavigationDrawerSection":!0}}role="group">
23
+ <div class="cw-NavigationDrawerSection-label"id={t}>{e.label}</div>
24
+ {o.children}
25
+ </div>}const Y=E(D?()=>j:S,()=>U),le=o=>Y(N(o,void 0,["label"]));export{ae as DismissibleNavigationDrawer,se as ModalNavigationDrawer,W as NavigationDrawer,q as NavigationDrawerController,le as NavigationDrawerSection,U as NavigationDrawerSectionController,re as PermanentNavigationDrawer};
@@ -0,0 +1 @@
1
+ import"./navigation.css";import{LeadingIconTab as t,PrimaryTabRow as e,SecondaryTabRow as i,Tab as p,TabController as l,TabList as n,TabListController as g,TabPanel as b,TabPanelController as m,TabRow as T,Tabs as B,TabsController as s}from"./tabs";import{NavigationBar as c,FlexibleNavigationBar as N,NavigationBarItem as A,NavigationController as P,NavigationDrawerItem as S,NavigationItem as C,NavigationItemController as w,NavigationRail as x,NavigationRailItem as d,ShortNavigationBar as f,ShortNavigationBarItem as D,WideNavigationRailItem as F,WideNavigationRail as h}from"./navigation";import{DismissibleNavigationDrawer as y,ModalNavigationDrawer as R,NavigationDrawer as L,NavigationDrawerController as u,NavigationDrawerSection as V,NavigationDrawerSectionController as H,PermanentNavigationDrawer as M}from"./drawer";import{AppBarColumn as z,AppBarItem as E,AppBarLayoutController as O,AppBarRow as W,BottomAppBar as j,BottomAppBarController as q,CenterAlignedTopAppBar as G,LargeFlexibleTopAppBar as J,LargeTopAppBar as K,MediumFlexibleTopAppBar as Q,MediumTopAppBar as U,SmallTopAppBar as X,TopAppBar as Y,TopAppBarController as Z,TwoRowsTopAppBar as _}from"./app-bar";import{DockedToolbar as oo,FloatingToolbar as ro,FloatingToolbarController as ao,FloatingToolbarItem as to,HorizontalFloatingToolbar as eo,VerticalFloatingToolbar as io}from"./toolbar";import{DockedSearchBar as lo,SearchAppBar as no,SearchBar as go,SearchBarController as bo,SearchView as mo}from"./search";import{HorizontalScrollbar as Bo,Scrollbar as so,ScrollbarController as vo,ScrollField as co,ScrollFieldController as No,VerticalScrollbar as Ao}from"./scroll";export{z as AppBarColumn,E as AppBarItem,O as AppBarLayoutController,W as AppBarRow,j as BottomAppBar,q as BottomAppBarController,G as CenterAlignedTopAppBar,y as DismissibleNavigationDrawer,lo as DockedSearchBar,oo as DockedToolbar,N as FlexibleNavigationBar,ro as FloatingToolbar,ao as FloatingToolbarController,to as FloatingToolbarItem,eo as HorizontalFloatingToolbar,Bo as HorizontalScrollbar,J as LargeFlexibleTopAppBar,K as LargeTopAppBar,t as LeadingIconTab,Q as MediumFlexibleTopAppBar,U as MediumTopAppBar,R as ModalNavigationDrawer,c as NavigationBar,A as NavigationBarItem,P as NavigationController,L as NavigationDrawer,u as NavigationDrawerController,S as NavigationDrawerItem,V as NavigationDrawerSection,H as NavigationDrawerSectionController,C as NavigationItem,w as NavigationItemController,x as NavigationRail,d as NavigationRailItem,M as PermanentNavigationDrawer,e as PrimaryTabRow,co as ScrollField,No as ScrollFieldController,so as Scrollbar,vo as ScrollbarController,no as SearchAppBar,go as SearchBar,bo as SearchBarController,mo as SearchView,i as SecondaryTabRow,f as ShortNavigationBar,D as ShortNavigationBarItem,X as SmallTopAppBar,p as Tab,l as TabController,n as TabList,g as TabListController,b as TabPanel,m as TabPanelController,T as TabRow,B as Tabs,s as TabsController,Y as TopAppBar,Z as TopAppBarController,_ as TwoRowsTopAppBar,io as VerticalFloatingToolbar,Ao as VerticalScrollbar,h as WideNavigationRail,F as WideNavigationRailItem};
@@ -0,0 +1 @@
1
+ @cw-attribute-roles cw-Navigation;@cw-attribute-roles cw-Tabs;@cw-attribute-roles cw-AppBar;@cw-attribute-roles cw-FloatingToolbar;@cw-attribute-roles cw-SearchBar;@cw-attribute-roles cw-Scrollbar;@property --_CW-NAVIGATION-DRAWER_PROGRESS{syntax: "<number>"; inherits: false; initial-value: 0;}@property --_CW-NAVIGATION-INDICATOR_PROGRESS{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_CW-NAVIGATION-ITEM_SHIFT{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --_CW-NAVIGATION-MODAL_PROGRESS{syntax: "<number>"; inherits: false; initial-value: 1;}@property --_CW-TAB-INDICATOR_SHIFT{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --_CW-TAB-INDICATOR_STRETCH{syntax: "<number>"; inherits: true; initial-value: 1;}@layer cw-style{._cw-Navigation-bar{--cw-Navigation-bar-containerColor: cw-var(--cw-Navigation-bar-containerColor, default);--_CW-NAVIGATION-BAR_HEIGHT: cw-var(--cw-Navigation-bar-shortHeight);background-color:cw-var(--cw-Navigation-bar-containerColor);box-sizing:border-box;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;inline-size:100%;min-block-size:var(--_CW-NAVIGATION-BAR_HEIGHT)}.cw-NavigationBar{--_CW-NAVIGATION-BAR_HEIGHT: cw-var(--cw-Navigation-bar-height);column-gap:cw-var(--cw-Navigation-bar-itemSpacing)}._cw-Navigation-bar._cw-Navigation-startIcons{--_CW-NAVIGATION-BAR_HEIGHT: cw-var(--cw-Navigation-bar-shortHeight);column-gap:0}._cw-Navigation-bar[data-cw-navigation-arrangement=centered]{padding-inline:max(0%,(70% - var(--_CW-NAVIGATION-ITEM_COUNT) * 10%) / 2)}._cw-Navigation-rail{--cw-Navigation-rail-containerColor: cw-var(--cw-Navigation-rail-containerColor, default);background-color:cw-var(--cw-Navigation-rail-containerColor);box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;inline-size:var(--_CW-NAVIGATION-RAIL_WIDTH, cw-var(--cw-Navigation-rail-collapsedWidth));min-block-size:100%;overflow-x:clip;padding-block-start:cw-var(--cw-Navigation-rail-topSpace);padding-inline:cw-var(--cw-Navigation-rail-itemInset);transition-duration:cw-var(--cw-Motion-spring-spatial-default-duration);transition-property:inline-size;transition-timing-function:cw-var(--cw-Motion-spring-spatial-default-easing)}._cw-Navigation-rail[data-cw-navigation-expanded=true]:not([data-cw-navigation-modal]){inline-size:var(--_CW-NAVIGATION-RAIL_WIDTH, fit-content);max-inline-size:cw-var(--cw-Navigation-rail-expandedMaxWidth);min-inline-size:cw-var(--cw-Navigation-rail-expandedMinWidth)}._cw-NavigationRail-morphing{max-inline-size:none;min-inline-size:0}._cw-Navigation-rail[data-cw-navigation-hide-collapsed=true]:not([data-cw-navigation-expanded=true],[data-cw-navigation-modal]){display:none}._cw-Navigation-rail[data-cw-navigation-hide-collapsed=true][data-cw-navigation-modal]{inline-size:0;padding:0}[data-cw-navigation-hide-collapsed=true][data-cw-navigation-modal]>.cw-NavigationRail-content{visibility:hidden}.cw-NavigationRail-content{--_CW-NAVIGATION-ITEM_SPACING: cw-var(--cw-Navigation-rail-itemSpacing);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--_CW-NAVIGATION-ITEM_SPACING)}[data-cw-navigation-arrangement=center]>.cw-NavigationRail-content{justify-content:center}[data-cw-navigation-expanded=true]:not([data-cw-navigation-modal])>.cw-NavigationRail-content,.cw-NavigationRail-modal:not(._cw-NavigationRail-modal-closing)>.cw-NavigationRail-content{--_CW-NAVIGATION-ITEM_SPACING: 0px}.cw-NavigationRail-header{align-items:center;display:flex;flex-direction:column;margin-block-end:calc(cw-var(--cw-Navigation-rail-headerSpace) - var(--_CW-NAVIGATION-ITEM_SPACING))}.cw-NavigationRail-header:empty{display:none}[data-cw-navigation-expanded=true]:not([data-cw-navigation-modal]) .cw-NavigationRail-header,.cw-NavigationRail-modal .cw-NavigationRail-header{align-items:start}.cw-NavigationRail-modal{--cw-Navigation-modal-containerColor: cw-var(--cw-Navigation-modal-containerColor, default);--cw-Navigation-modal-shadowColor: cw-var(--cw-Navigation-modal-shadowColor, default);--cw-elevationShadow-color: cw-var(--cw-Navigation-modal-shadowColor);--cw-elevationShadow-level: cw-var(--cw-Navigation-modal-elevation);-cw-border-radius:--cw-Navigation-modal-shape;background-color:cw-var(--cw-Navigation-modal-containerColor);block-size:100%;border:0;box-sizing:border-box;color:inherit;inline-size:var(--_CW-NAVIGATION-MODAL_WIDTH, fit-content);inset-block:0;inset-inline:0 auto;margin:0;max-block-size:none;max-inline-size:cw-var(--cw-Navigation-rail-expandedMaxWidth);min-inline-size:cw-var(--cw-Navigation-rail-expandedMinWidth);overflow-x:clip;overflow-y:auto;padding-block:cw-var(--cw-Navigation-rail-topSpace) 0;padding-inline:cw-var(--cw-Navigation-rail-itemInset);touch-action:pan-y;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-default-duration);transition-property:inline-size,--_CW-NAVIGATION-MODAL_PROGRESS;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-default-easing);translate:calc((var(--_CW-NAVIGATION-MODAL_PROGRESS) - 1) * 100%) 0}.cw-NavigationRail-modal[open]{display:flex;flex-direction:column}.cw-NavigationRail-modal:dir(rtl){translate:calc((1 - var(--_CW-NAVIGATION-MODAL_PROGRESS)) * 100%) 0}.cw-NavigationRail-modal::backdrop{background-color:cw-scale-opacity(cw-var(--cw-Navigation-modal-scrimColor,default),cw-var(--cw-Navigation-modal-scrimOpacity,default));transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing)}._cw-NavigationRail-modal-closing{max-inline-size:none;min-inline-size:0}._cw-NavigationRail-modal-closing::backdrop{opacity:0}[data-cw-navigation-hide-collapsed=true]>._cw-NavigationRail-modal-closing{--_CW-NAVIGATION-MODAL_PROGRESS: 0}._cw-NavigationRail-modal-dragging{transition-duration:0s}@starting-style{.cw-NavigationRail-modal[open]::backdrop{opacity:0}[data-cw-navigation-hide-collapsed=true]>.cw-NavigationRail-modal[open]{--_CW-NAVIGATION-MODAL_PROGRESS: 0}}.cw-NavigationItem{--cw-Navigation-item-contentColor: cw-var(--cw-Navigation-item-contentColor, default);--cw-Navigation-item-indicatorColor: cw-var(--cw-Navigation-item-indicatorColor, default);--cw-Navigation-item-selectedIconColor: cw-var(--cw-Navigation-item-selectedIconColor, default);--cw-Navigation-item-selectedLabelColor: cw-var(--cw-Navigation-item-selectedLabelColor, default);--cw-Navigation-item-selectedStartLabelColor: cw-var(--cw-Navigation-item-selectedStartLabelColor, default);--cw-Navigation-item-stateLayerColor: cw-var(--cw-Navigation-item-stateLayerColor, default);--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);--cw-interactable-stateLayer-color: cw-var(--cw-Navigation-item-stateLayerColor);--_CW-NAVIGATION-ICON_COLOR: cw-var(--cw-Navigation-item-contentColor);--_CW-NAVIGATION-LABEL_COLOR: cw-var(--cw-Navigation-item-contentColor);--_CW-NAVIGATION-ICON_TOP: calc( cw-var(--cw-Navigation-item-verticalPadding) + var(--_CW-NAVIGATION-INDICATOR_INSET) );--_CW-NAVIGATION-INDICATOR_INSET: calc((cw-var(--cw-Navigation-item-indicatorHeight) - cw-var(--cw-Navigation-item-iconSize))/2) ;align-items:center;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--_CW-NAVIGATION-LABEL_COLOR);cursor:pointer;display:flex;flex-direction:column;font:inherit;margin:0;min-block-size:cw-var(--cw-Navigation-item-height);min-inline-size:0;padding-block:var(--_CW-NAVIGATION-ICON_TOP) 0;padding-inline:0;text-decoration:none;transition-duration:cw-var(--cw-Motion-spring-spatial-default-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-default-duration);transition-property:--_CW-NAVIGATION-INDICATOR_PROGRESS,--_CW-NAVIGATION-ITEM_SHIFT,color;transition-timing-function:cw-var(--cw-Motion-spring-spatial-default-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-default-easing);user-select:none}.cw-NavigationItem-hover{--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-hoverOpacity)}.cw-NavigationItem-focus{--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity)}.cw-NavigationItem-press{--cw-interactable-ripple-color: var(--cw-interactable-stateLayer-color);--cw-interactable-ripple-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-NavigationItem-selected{--_CW-NAVIGATION-ICON_COLOR: cw-var(--cw-Navigation-item-selectedIconColor);--_CW-NAVIGATION-INDICATOR_PROGRESS: 1;--_CW-NAVIGATION-LABEL_COLOR: cw-var(--cw-Navigation-item-selectedLabelColor)}.cw-NavigationItem-disabled{--_CW-NAVIGATION-ICON_COLOR: cw-scale-opacity( cw-var(--cw-Navigation-item-contentColor), cw-var(--cw-Navigation-item-disabledContentOpacity) );--_CW-NAVIGATION-LABEL_COLOR: cw-scale-opacity( cw-var(--cw-Navigation-item-contentColor), cw-var(--cw-Navigation-item-disabledContentOpacity) );cursor:default;pointer-events:none}.cw-NavigationItem:before,.cw-NavigationItem:after{--cw-Navigation-item-iconSize: inherit;--cw-Navigation-item-indicatorHeight: inherit;--cw-Navigation-item-indicatorShape: inherit;--cw-Navigation-item-indicatorWidth: inherit;--cw-Navigation-item-noLabelIndicatorHeight: inherit}.cw-NavigationItem:after{--cw-Navigation-item-indicatorColor: inherit;background-color:cw-var(--cw-Navigation-item-indicatorColor);block-size:cw-var(--cw-Navigation-item-indicatorHeight);border-radius:cw-var(--cw-Navigation-item-indicatorShape);clip-path:inset(0 calc((1 - var(--_CW-NAVIGATION-INDICATOR_PROGRESS)) * 50%) round cw-var(--cw-Navigation-item-indicatorShape));content:"";inline-size:cw-var(--cw-Navigation-item-indicatorWidth);inset-block-start:calc(var(--_CW-NAVIGATION-ICON_TOP) - var(--_CW-NAVIGATION-INDICATOR_INSET));inset-inline-start:calc(50% - (cw-var(--cw-Navigation-item-indicatorWidth)/2));opacity:0;pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing);translate:0 var(--_CW-NAVIGATION-ITEM_SHIFT);z-index:-2}.cw-NavigationItem-selected:after{opacity:1}.cw-NavigationItem.cw-interactable:before{block-size:cw-var(--cw-Navigation-item-indicatorHeight);border-radius:cw-var(--cw-Navigation-item-indicatorShape);inline-size:cw-var(--cw-Navigation-item-indicatorWidth);inset:auto;inset-block-start:calc(var(--_CW-NAVIGATION-ICON_TOP) - var(--_CW-NAVIGATION-INDICATOR_INSET));inset-inline-start:calc(50% - (cw-var(--cw-Navigation-item-indicatorWidth)/2));translate:0 var(--_CW-NAVIGATION-ITEM_SHIFT)}._cw-Navigation-rail .cw-NavigationItem:has(>.cw-NavigationItem-label:empty):not(._cw-Navigation-startIcons *){--_CW-NAVIGATION-ICON_TOP: calc((cw-var(--cw-Navigation-item-noLabelIndicatorHeight) - cw-var(--cw-Navigation-item-iconSize))/2) ;min-block-size:cw-var(--cw-Navigation-item-noLabelIndicatorHeight);&:after,&.cw-interactable:before{block-size:cw-var(--cw-Navigation-item-noLabelIndicatorHeight);inset-block-start:0}}.cw-NavigationItem-icon{align-items:center;block-size:cw-var(--cw-Navigation-item-iconSize);color:var(--_CW-NAVIGATION-ICON_COLOR);display:inline-flex;flex:none;font-size:cw-var(--cw-Navigation-item-iconSize);inline-size:cw-var(--cw-Navigation-item-iconSize);justify-content:center;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing);translate:0 var(--_CW-NAVIGATION-ITEM_SHIFT)}.cw-NavigationItem .cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: cw-var(--cw-Navigation-item-iconSize)}.cw-NavigationItem-label{-cw-typescale:--cw-Typescale-label-medium;margin-block-start:calc(var(--_CW-NAVIGATION-INDICATOR_INSET) + cw-var(--cw-Navigation-item-indicatorLabelSpace));max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing);white-space:nowrap}.cw-NavigationItem-badge{--_CW-NAVIGATION-BADGE_INSET: 12px;--_CW-NAVIGATION-BADGE_OVERLAP: 14px;display:flex;inset-block-end:calc(100% - var(--_CW-NAVIGATION-ICON_TOP) - var(--_CW-NAVIGATION-BADGE_OVERLAP));inset-inline-start:calc(50% + cw-var(--cw-Navigation-item-iconSize) / 2 - var(--_CW-NAVIGATION-BADGE_INSET));pointer-events:none;position:absolute;translate:0 var(--_CW-NAVIGATION-ITEM_SHIFT);z-index:1}.cw-NavigationItem-badge:has(.cw-Badge-small){--_CW-NAVIGATION-BADGE_INSET: 6px;--_CW-NAVIGATION-BADGE_OVERLAP: 6px}.cw-NavigationItem-badge:empty,.cw-NavigationItem-icon:empty,.cw-NavigationItem-label:empty{display:none}._cw-Navigation-rail .cw-NavigationItem{inline-size:100%}.cw-NavigationBar .cw-NavigationItem{--_CW-NAVIGATION-ICON_TOP: calc( ( var(--_CW-NAVIGATION-BAR_HEIGHT) - cw-var(--cw-Navigation-item-iconSize) - var(--_CW-NAVIGATION-INDICATOR_INSET) - cw-var(--cw-Navigation-item-indicatorLabelSpace) - cw-var(--cw-Typescale-label-medium-lineHeight) ) / 2 );transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-default-duration);transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-default-easing)}._cw-Navigation-bar._cw-Navigation-selectedLabel .cw-NavigationItem:not(.cw-NavigationItem-selected){--_CW-NAVIGATION-ITEM_SHIFT: calc( (var(--_CW-NAVIGATION-BAR_HEIGHT) - cw-var(--cw-Navigation-item-iconSize)) / 2 - var(--_CW-NAVIGATION-ICON_TOP) )}._cw-Navigation-rail._cw-Navigation-selectedLabel .cw-NavigationItem:not(.cw-NavigationItem-selected){--_CW-NAVIGATION-ITEM_SHIFT: calc( (cw-var(--cw-Navigation-item-height) - cw-var(--cw-Navigation-item-iconSize)) / 2 - var(--_CW-NAVIGATION-ICON_TOP) )}._cw-Navigation-selectedLabel .cw-NavigationItem:not(.cw-NavigationItem-selected) .cw-NavigationItem-label{opacity:0}._cw-Navigation-startIcons .cw-NavigationItem{--_CW-NAVIGATION-ICON_TOP: calc(50% - (cw-var(--cw-Navigation-item-iconSize)/2)) ;--_CW-NAVIGATION-LABEL_COLOR: var(--_CW-NAVIGATION-ICON_COLOR);border-radius:cw-var(--cw-Navigation-item-indicatorShape);flex-direction:row;gap:cw-var(--cw-Navigation-item-iconLabelSpace);inline-size:fit-content;max-inline-size:100%;min-block-size:cw-var(--cw-Navigation-item-startIndicatorHeight);padding-block:0;padding-inline:cw-var(--cw-Navigation-item-indicatorPadding)}._cw-Navigation-startIcons .cw-NavigationItem-selected{--_CW-NAVIGATION-LABEL_COLOR: cw-var(--cw-Navigation-item-selectedStartLabelColor)}._cw-Navigation-startIcons .cw-NavigationItem-disabled{--_CW-NAVIGATION-LABEL_COLOR: var(--_CW-NAVIGATION-ICON_COLOR)}._cw-Navigation-startIcons .cw-NavigationItem:after,._cw-Navigation-startIcons .cw-NavigationItem.cw-interactable:before{block-size:auto;inline-size:auto;inset:0;translate:none}._cw-Navigation-startIcons .cw-NavigationItem-label{-cw-typescale:--cw-Typescale-label-large;margin-block-start:0}._cw-Navigation-startIcons .cw-NavigationItem-badge{inset-inline-start:calc(cw-var(--cw-Navigation-item-indicatorPadding) + cw-var(--cw-Navigation-item-iconSize) - var(--_CW-NAVIGATION-BADGE_INSET))}._cw-Navigation-bar._cw-Navigation-startIcons .cw-NavigationItem{align-self:center;gap:cw-var(--cw-Navigation-bar-startIconLabelSpace);justify-self:center;min-block-size:cw-var(--cw-Navigation-bar-startIndicatorHeight)}._cw-Navigation-bar._cw-Navigation-startIcons .cw-NavigationItem-label{-cw-typescale:--cw-Typescale-label-medium}._cw-NavigationRail-morphing .cw-NavigationItem-label{animation-duration:cw-var(--cw-Motion-spring-effect-default-duration);animation-name:_cw-NavigationItem-label-fade;animation-timing-function:cw-var(--cw-Motion-spring-effect-default-easing)}@keyframes _cw-NavigationItem-label-fade{0%,50%{opacity:0}to{opacity:1}}.cw-NavigationDrawer{--_CW-NAVIGATION-DRAWER_PROGRESS: 0;block-size:100%;box-sizing:border-box;display:grid;grid-template-areas:"drawer";grid-template-columns:minmax(0,1fr);overflow-x:clip;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:--_CW-NAVIGATION-DRAWER_PROGRESS;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-NavigationDrawer-open{--_CW-NAVIGATION-DRAWER_PROGRESS: 1;transition-duration:cw-var(--cw-Motion-spring-spatial-default-duration);transition-timing-function:cw-var(--cw-Motion-spring-spatial-default-easing)}._cw-NavigationDrawer-dragging{transition-duration:0s}._cw-NavigationDrawer-permanent{grid-template-areas:"drawer content";grid-template-columns:auto minmax(0,1fr)}.cw-NavigationDrawer-panel{--cw-Navigation-drawer-containerColor: cw-var(--cw-Navigation-drawer-containerColor, default);--cw-Navigation-drawer-shadowColor: cw-var(--cw-Navigation-drawer-shadowColor, default);--cw-elevationShadow-color: cw-var(--cw-Navigation-drawer-shadowColor);--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0);--_CW-NAVIGATION-DRAWER_PROGRESS: inherit;background-color:cw-var(--cw-Navigation-drawer-containerColor);box-sizing:border-box;display:flex;flex-direction:column;grid-area:drawer;inline-size:cw-var(--cw-Navigation-drawer-width);inset-block-start:0;justify-self:start;max-block-size:100dvh;max-inline-size:100%;overflow:clip;padding-block-start:cw-var(--cw-Navigation-drawer-padding);position:sticky;translate:calc((var(--_CW-NAVIGATION-DRAWER_PROGRESS) - 1) * 100%) 0;z-index:2}.cw-NavigationDrawer-panel:dir(rtl){translate:calc((1 - var(--_CW-NAVIGATION-DRAWER_PROGRESS)) * 100%) 0}.cw-NavigationDrawer-items{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;overflow-y:auto;padding-block-end:cw-var(--cw-Navigation-drawer-padding);padding-inline:cw-var(--cw-Navigation-drawer-padding)}._cw-NavigationDrawer-modal .cw-NavigationDrawer-panel{--cw-Navigation-drawer-modalContainerColor: cw-var(--cw-Navigation-drawer-modalContainerColor, default);--cw-elevationShadow-level: cw-var(--cw-Navigation-drawer-modalElevation);-cw-border-radius:--cw-Navigation-drawer-modalShape;background-color:cw-var(--cw-Navigation-drawer-modalContainerColor)}._cw-NavigationDrawer-modal :is(.cw-NavigationDrawer-panel,.cw-NavigationDrawer-items){touch-action:pan-y}._cw-NavigationDrawer-permanent .cw-NavigationDrawer-panel{translate:none}.cw-NavigationDrawer-scrim{--cw-Navigation-drawer-scrimColor: cw-var(--cw-Navigation-drawer-scrimColor, default);--_CW-NAVIGATION-DRAWER_PROGRESS: inherit;appearance:none;background-color:cw-scale-opacity(cw-var(--cw-Navigation-drawer-scrimColor),cw-var(--cw-Navigation-drawer-scrimOpacity));border:0;cursor:pointer;grid-area:drawer;margin:0;opacity:var(--_CW-NAVIGATION-DRAWER_PROGRESS);padding:0;touch-action:pan-y;z-index:1}.cw-NavigationDrawer-scrim:focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-innerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-NavigationDrawer-content{--_CW-NAVIGATION-DRAWER_PROGRESS: inherit;grid-area:drawer;min-inline-size:0}._cw-NavigationDrawer-dismissible .cw-NavigationDrawer-content{translate:calc(var(--_CW-NAVIGATION-DRAWER_PROGRESS) * cw-var(--cw-Navigation-drawer-width)) 0}._cw-NavigationDrawer-dismissible:dir(rtl) .cw-NavigationDrawer-content{translate:calc(var(--_CW-NAVIGATION-DRAWER_PROGRESS) * cw-var(--cw-Navigation-drawer-width) * -1) 0}._cw-NavigationDrawer-permanent .cw-NavigationDrawer-content{grid-area:content}.cw-NavigationDrawer-headline,.cw-NavigationDrawerSection-label{--cw-Navigation-drawer-headlineColor: cw-var(--cw-Navigation-drawer-headlineColor, default);-cw-typescale:--cw-Typescale-title-small;align-items:center;color:cw-var(--cw-Navigation-drawer-headlineColor);display:flex;min-block-size:cw-var(--cw-Navigation-drawer-itemHeight);padding-inline:calc(cw-var(--cw-Navigation-drawer-headlineInset) - cw-var(--cw-Navigation-drawer-padding))}.cw-NavigationDrawer-headline{flex:none;margin-inline:cw-var(--cw-Navigation-drawer-padding)}.cw-NavigationDrawer-headline:empty,.cw-NavigationDrawerSection-label:empty{display:none}.cw-NavigationDrawerSection{display:flex;flex-direction:column}.cw-NavigationDrawerSection:not(:first-child):before{--cw-Navigation-drawer-dividerColor: cw-var(--cw-Navigation-drawer-dividerColor, default);background-color:cw-var(--cw-Navigation-drawer-dividerColor);block-size:1px;content:"";margin-inline:calc(cw-var(--cw-Navigation-drawer-headlineInset) - cw-var(--cw-Navigation-drawer-padding))}.cw-NavigationDrawer .cw-NavigationItem{--cw-Navigation-drawer-activeContentColor: cw-var(--cw-Navigation-drawer-activeContentColor, default);--cw-Navigation-drawer-badgeColor: cw-var(--cw-Navigation-drawer-badgeColor, default);--cw-Navigation-drawer-contentColor: cw-var(--cw-Navigation-drawer-contentColor, default);--cw-Navigation-drawer-selectedContentColor: cw-var(--cw-Navigation-drawer-selectedContentColor, default);--cw-interactable-stateLayer-color: cw-var(--cw-Navigation-drawer-activeContentColor);--_CW-NAVIGATION-BADGE_COLOR: cw-var(--cw-Navigation-drawer-badgeColor);--_CW-NAVIGATION-ICON_COLOR: cw-var(--cw-Navigation-drawer-contentColor);--_CW-NAVIGATION-LABEL_COLOR: cw-var(--cw-Navigation-drawer-contentColor);border-radius:cw-var(--cw-Navigation-item-indicatorShape);flex:none;flex-direction:row;gap:cw-var(--cw-Navigation-drawer-iconLabelSpace);inline-size:100%;min-block-size:cw-var(--cw-Navigation-drawer-itemHeight);padding-block:0;padding-inline-end:cw-var(--cw-Navigation-drawer-itemEndPadding);padding-inline-start:cw-var(--cw-Navigation-drawer-itemStartPadding);text-align:start}.cw-NavigationDrawer :is(.cw-NavigationItem-hover,.cw-NavigationItem-focus,.cw-NavigationItem-press){--_CW-NAVIGATION-ICON_COLOR: cw-var(--cw-Navigation-drawer-activeContentColor);--_CW-NAVIGATION-LABEL_COLOR: cw-var(--cw-Navigation-drawer-activeContentColor)}.cw-NavigationDrawer .cw-NavigationItem-selected{--cw-interactable-stateLayer-color: cw-var(--cw-Navigation-drawer-selectedContentColor);--_CW-NAVIGATION-ICON_COLOR: cw-var(--cw-Navigation-drawer-selectedContentColor);--_CW-NAVIGATION-LABEL_COLOR: cw-var(--cw-Navigation-drawer-selectedContentColor)}.cw-NavigationDrawer .cw-NavigationItem-disabled{--_CW-NAVIGATION-ICON_COLOR: cw-scale-opacity( cw-var(--cw-Navigation-drawer-contentColor), cw-var(--cw-Navigation-item-disabledContentOpacity) );--_CW-NAVIGATION-LABEL_COLOR: cw-scale-opacity( cw-var(--cw-Navigation-drawer-contentColor), cw-var(--cw-Navigation-item-disabledContentOpacity) )}.cw-NavigationDrawer .cw-NavigationItem:after,.cw-NavigationDrawer .cw-NavigationItem.cw-interactable:before{block-size:auto;inline-size:auto;inset:0;translate:none}.cw-NavigationDrawer .cw-NavigationItem-label{-cw-typescale:--cw-Typescale-label-large;flex:1 1 auto;margin-block-start:0}.cw-NavigationDrawer .cw-NavigationItem-badge{-cw-typescale:--cw-Typescale-label-large;color:var(--_CW-NAVIGATION-BADGE_COLOR);position:static;translate:none}.cw-Tabs,.cw-TabPanel{box-sizing:border-box}.cw-TabList{--cw-Tabs-container-color: cw-var(--cw-Tabs-container-color, default);--cw-Tabs-container-dividerColor: cw-var(--cw-Tabs-container-dividerColor, default);background-color:cw-var(--cw-Tabs-container-color);box-shadow:inset 0 calc(-1*cw-var(--cw-Tabs-container-dividerThickness)) cw-var(--cw-Tabs-container-dividerColor);box-sizing:border-box;display:flex;inline-size:100%;position:relative}._cw-TabList-vertical{flex-direction:column;inline-size:max-content}.cw-TabList[data-cw-tab-scrollable=true]{overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:cw-var(--cw-Tabs-container-scrollablePadding);scrollbar-width:none}.cw-Tab{--cw-Tabs-primary-activeColor: cw-var(--cw-Tabs-primary-activeColor, default);--cw-Tabs-primary-color: cw-var(--cw-Tabs-primary-color, default);--cw-Tabs-primary-indicatorColor: cw-var(--cw-Tabs-primary-indicatorColor, default);--cw-Tabs-primary-selectedColor: cw-var(--cw-Tabs-primary-selectedColor, default);--cw-Tabs-secondary-activeColor: cw-var(--cw-Tabs-secondary-activeColor, default);--cw-Tabs-secondary-color: cw-var(--cw-Tabs-secondary-color, default);--cw-Tabs-secondary-indicatorColor: cw-var(--cw-Tabs-secondary-indicatorColor, default);--cw-Tabs-secondary-selectedColor: cw-var(--cw-Tabs-secondary-selectedColor, default);--cw-interactable-focusIndicator-color: cw-var(--cw-Color-secondary-fill);--cw-interactable-focusIndicator-offset: cw-var(--cw-State-focusIndicator-innerOffset);--cw-interactable-focusIndicator-thickness: cw-var(--cw-State-focusIndicator-thickness);--cw-interactable-stateLayer-color: cw-var(--cw-Tabs-primary-activeColor);--_CW-TAB-INDICATOR_COLOR: cw-var(--cw-Tabs-primary-indicatorColor);-cw-typescale:--cw-Typescale-title-small;align-items:stretch;appearance:none;background:none;border:0;box-sizing:border-box;color:cw-var(--cw-Tabs-primary-color);cursor:pointer;display:flex;flex:1 1 0;justify-content:center;margin:0;min-block-size:cw-var(--cw-Tabs-tab-height);min-inline-size:0;padding-block:0;padding-inline:cw-var(--cw-Tabs-tab-padding);text-decoration:none;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);user-select:none}:is(.cw-Tab-hover,.cw-Tab-focus,.cw-Tab-press){color:cw-var(--cw-Tabs-primary-activeColor)}.cw-Tab-hover{--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-hoverOpacity)}.cw-Tab-focus{--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity)}.cw-Tab-press{--cw-interactable-ripple-color: var(--cw-interactable-stateLayer-color);--cw-interactable-ripple-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-Tab-selected{--cw-interactable-stateLayer-color: cw-var(--cw-Tabs-primary-selectedColor);color:cw-var(--cw-Tabs-primary-selectedColor);transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing)}.cw-TabList[data-cw-tab-variant=secondary] .cw-Tab{--cw-interactable-stateLayer-color: cw-var(--cw-Tabs-secondary-activeColor);--_CW-TAB-INDICATOR_COLOR: cw-var(--cw-Tabs-secondary-indicatorColor);color:cw-var(--cw-Tabs-secondary-color)}.cw-TabList[data-cw-tab-variant=secondary] :is(.cw-Tab-hover,.cw-Tab-focus,.cw-Tab-press){color:cw-var(--cw-Tabs-secondary-activeColor)}.cw-TabList[data-cw-tab-variant=secondary] .cw-Tab-selected{--cw-interactable-stateLayer-color: cw-var(--cw-Tabs-secondary-selectedColor);color:cw-var(--cw-Tabs-secondary-selectedColor)}.cw-Tab-disabled{cursor:default;pointer-events:none}.cw-Tab-disabled .cw-Tab-content{opacity:cw-var(--cw-Tabs-tab-disabledOpacity)}.cw-TabList[data-cw-tab-scrollable=true] .cw-Tab{flex:none;min-inline-size:cw-var(--cw-Tabs-tab-scrollableMinWidth)}.cw-Tab-content{align-items:center;display:inline-flex;flex-direction:column;gap:cw-var(--cw-Tabs-tab-stackedSpace);justify-content:center;min-inline-size:cw-var(--cw-Tabs-primary-indicatorMinWidth);position:relative}.cw-Tab:not([data-cw-tab-icon-placement=start]):has(.cw-Tab-icon:not(:empty)){min-block-size:cw-var(--cw-Tabs-tab-stackedHeight)}.cw-Tab[data-cw-tab-icon-placement=start] .cw-Tab-content{flex-direction:row;gap:cw-var(--cw-Tabs-tab-leadingSpace)}.cw-Tab-icon{align-items:center;block-size:cw-var(--cw-Tabs-tab-iconSize);display:inline-flex;font-size:cw-var(--cw-Tabs-tab-iconSize);inline-size:cw-var(--cw-Tabs-tab-iconSize);justify-content:center}.cw-Tab-icon:empty{display:none}.cw-Tab .cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: cw-var(--cw-Tabs-tab-iconSize)}.cw-Tab-label{white-space:nowrap}.cw-TabList[data-cw-tab-variant=primary] .cw-Tab-selected .cw-Tab-content:after,.cw-TabList[data-cw-tab-variant=secondary] .cw-Tab-selected:after{background-color:var(--_CW-TAB-INDICATOR_COLOR);content:"";inset-block-end:0;inset-inline:0;pointer-events:none;position:absolute;scale:var(--_CW-TAB-INDICATOR_STRETCH) 1;transform-origin:left;translate:var(--_CW-TAB-INDICATOR_SHIFT) 0}.cw-TabList[data-cw-tab-variant=primary] .cw-Tab-selected .cw-Tab-content:after{-cw-border-radius:--cw-Tabs-primary-indicatorShape;block-size:cw-var(--cw-Tabs-primary-indicatorHeight)}.cw-TabList[data-cw-tab-variant=secondary] .cw-Tab-selected:after{block-size:cw-var(--cw-Tabs-secondary-indicatorHeight)}.cw-TabPanel{padding:16px}.cw-TabPanel:focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-innerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}:is(._cw-Navigation-bar,._cw-Navigation-rail,.cw-NavigationItem,.cw-NavigationDrawer,.cw-NavigationDrawer-panel,.cw-NavigationDrawerSection,.cw-TabList,.cw-Tab)[hidden]{display:none}.cw-TopAppBar{--cw-AppBar-top-actionIconColor: cw-var(--cw-AppBar-top-actionIconColor, default);--cw-AppBar-top-containerColor: cw-var(--cw-AppBar-top-containerColor, default);--cw-AppBar-top-navigationIconColor: cw-var(--cw-AppBar-top-navigationIconColor, default);--cw-AppBar-top-scrolledContainerColor: cw-var(--cw-AppBar-top-scrolledContainerColor, default);--cw-AppBar-top-subtitleColor: cw-var(--cw-AppBar-top-subtitleColor, default);--cw-AppBar-top-titleColor: cw-var(--cw-AppBar-top-titleColor, default);--cw-TopAppBar-color-fraction: 0;--_cw-TopAppBar-progress: clamp(0, var(--cw-TopAppBar-scroll-progress, 0), 1);--_cw-TopAppBar-row-height: var(--cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-top-height));background-color:color-mix(in oklab,cw-var(--cw-AppBar-top-scrolledContainerColor) calc(100% * var(--cw-TopAppBar-color-fraction)),cw-var(--cw-AppBar-top-containerColor));box-sizing:border-box;color:cw-var(--cw-AppBar-top-titleColor);display:flex;flex-direction:column;justify-content:center;max-block-size:calc(var(--cw-TopAppBar-collapse-range, 100vh) * (1 - var(--_cw-TopAppBar-progress)));overflow:clip;padding-inline-end:cw-var(--cw-AppBar-top-trailingSpace);padding-inline-start:cw-var(--cw-AppBar-top-leadingSpace);transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:--cw-TopAppBar-color-fraction;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing)}.cw-TopAppBar :is(.cw-TopAppBar-row,.cw-TopAppBar-expandedRow,.cw-TopAppBar-navigation,.cw-TopAppBar-titleGroup,.cw-TopAppBar-subtitle,.cw-TopAppBar-trailing,.cw-TopAppBar-actions,.cw-TopAppBar-avatar,.cw-TopAppBar-avatar>*){--cw-AppBar-top-actionIconColor: inherit;--cw-AppBar-top-avatarSize: inherit;--cw-AppBar-top-iconButtonSpace: inherit;--cw-AppBar-top-navigationIconColor: inherit;--cw-AppBar-top-subtitleColor: inherit}.cw-TopAppBar[data-cw-app-bar-scrolled=true]{--cw-TopAppBar-color-fraction: 1}._cw-TopAppBar-twoRows{--_cw-TopAppBar-row-height: cw-var(--cw-AppBar-top-height);justify-content:flex-start;max-block-size:none}._cw-TopAppBar-twoRows:not([data-cw-app-bar-scrolled]){animation-delay:calc(-1s * var(--_cw-TopAppBar-progress));animation-duration:1s;animation-fill-mode:both;animation-name:cw-TopAppBar-color-fraction;animation-play-state:paused;animation-timing-function:cubic-bezier(.4,0,1,1)}._cw-TopAppBar-medium{--_cw-TopAppBar-expanded-row-height: calc( var(--cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-medium-height)) - cw-var(--cw-AppBar-top-height) );--_cw-TopAppBar-title-baseline-space: cw-var(--cw-AppBar-medium-titleBaselineSpace)}._cw-TopAppBar-large{--_cw-TopAppBar-expanded-row-height: calc( var(--cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-large-height)) - cw-var(--cw-AppBar-top-height) );--_cw-TopAppBar-title-baseline-space: cw-var(--cw-AppBar-large-titleBaselineSpace)}._cw-TopAppBar-medium-flexible{--_cw-TopAppBar-expanded-row-height: calc( var(--cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-mediumFlexible-height)) - cw-var(--cw-AppBar-top-height) );--_cw-TopAppBar-title-baseline-space: cw-var(--cw-AppBar-mediumFlexible-titleBaselineSpace)}._cw-TopAppBar-medium-flexible:has(>.cw-TopAppBar-expandedRow .cw-TopAppBar-subtitle:not(:empty)){--_cw-TopAppBar-expanded-row-height: calc( var( --cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-mediumFlexible-subtitledHeight) ) - cw-var(--cw-AppBar-top-height) )}._cw-TopAppBar-large-flexible{--_cw-TopAppBar-expanded-row-height: calc( var(--cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-largeFlexible-height)) - cw-var(--cw-AppBar-top-height) );--_cw-TopAppBar-title-baseline-space: cw-var(--cw-AppBar-largeFlexible-titleBaselineSpace)}._cw-TopAppBar-large-flexible:has(>.cw-TopAppBar-expandedRow .cw-TopAppBar-subtitle:not(:empty)){--_cw-TopAppBar-expanded-row-height: calc( var( --cw-TopAppBar-expanded-height, cw-var(--cw-AppBar-largeFlexible-subtitledHeight) ) - cw-var(--cw-AppBar-top-height) )}.cw-TopAppBar-row{align-items:center;box-sizing:border-box;display:grid;flex:none;grid-template-columns:auto minmax(0,1fr) auto;min-block-size:var(--_cw-TopAppBar-row-height)}.cw-TopAppBar[data-cw-title-alignment=center]>.cw-TopAppBar-row{grid-template-columns:minmax(max-content,1fr) minmax(0,max-content) minmax(max-content,1fr)}.cw-TopAppBar-navigation{--_cw-TopAppBar-icon-color: cw-var(--cw-AppBar-top-navigationIconColor);align-items:center;color:var(--_cw-TopAppBar-icon-color);display:flex;min-inline-size:8px}.cw-TopAppBar-trailing{align-items:center;display:flex;justify-self:end}.cw-TopAppBar-actions{--_cw-TopAppBar-icon-color: cw-var(--cw-AppBar-top-actionIconColor);align-items:center;color:var(--_cw-TopAppBar-icon-color);display:flex;gap:cw-var(--cw-AppBar-top-iconButtonSpace)}:is(.cw-TopAppBar-navigation,.cw-TopAppBar-actions)>:is(a,button){box-sizing:border-box;min-block-size:48px;min-inline-size:48px}.cw-TopAppBar-avatar{align-items:center;display:flex;justify-content:center;min-block-size:48px;min-inline-size:48px}.cw-TopAppBar-avatar>*{block-size:cw-var(--cw-AppBar-top-avatarSize);border-radius:cw-var(--cw-CornerRadius-full);inline-size:cw-var(--cw-AppBar-top-avatarSize);object-fit:cover;overflow:clip}:is(.cw-TopAppBar-actions,.cw-TopAppBar-avatar,.cw-TopAppBar-subtitle):empty{display:none}.cw-TopAppBar-titleGroup{box-sizing:border-box;display:flex;flex-direction:column;min-inline-size:0;padding-inline:4px}.cw-TopAppBar[data-cw-title-alignment=center] .cw-TopAppBar-titleGroup{align-items:center;text-align:center}.cw-TopAppBar-subtitle{color:cw-var(--cw-AppBar-top-subtitleColor)}.cw-TopAppBar-row :is(.cw-TopAppBar-title,.cw-TopAppBar-subtitle){max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cw-TopAppBar-row .cw-TopAppBar-title{-cw-typescale:--cw-Typescale-title-large}.cw-TopAppBar-row .cw-TopAppBar-subtitle{-cw-typescale:--cw-Typescale-label-medium}._cw-TopAppBar-twoRows>.cw-TopAppBar-row>.cw-TopAppBar-titleGroup{animation-delay:calc(-1s * var(--_cw-TopAppBar-progress));animation-duration:1s;animation-fill-mode:both;animation-name:cw-TopAppBar-fade-in;animation-play-state:paused;animation-timing-function:cubic-bezier(.8,0,.8,.15)}.cw-TopAppBar:not(._cw-TopAppBar-twoRows)>.cw-TopAppBar-expandedRow{display:none}.cw-TopAppBar-expandedRow{display:flex;flex:none;flex-direction:column;justify-content:flex-end;max-block-size:calc(var(--cw-TopAppBar-collapse-range, 100vh) * (1 - var(--_cw-TopAppBar-progress)));overflow:clip}.cw-TopAppBar-expandedRow>.cw-TopAppBar-titleGroup{flex:none;min-block-size:var(--_cw-TopAppBar-expanded-row-height);opacity:calc(1 - var(--_cw-TopAppBar-progress));padding-inline-start:12px}.cw-TopAppBar-expandedRow>.cw-TopAppBar-titleGroup:before,.cw-TopAppBar-expandedRow>.cw-TopAppBar-titleGroup:after{content:"";flex:1 0 0px}.cw-TopAppBar-expandedRow>.cw-TopAppBar-titleGroup:after{flex-grow:1000000;max-block-size:max(0px,calc(var(--_cw-TopAppBar-title-baseline-space) - .5lh + .3418em))}.cw-TopAppBar[data-cw-title-alignment=center]>.cw-TopAppBar-expandedRow>.cw-TopAppBar-titleGroup{padding-inline-end:12px}.cw-TopAppBar-expandedRow :is(.cw-TopAppBar-title,.cw-TopAppBar-subtitle){flex:none;overflow-wrap:anywhere}._cw-TopAppBar-medium>.cw-TopAppBar-expandedRow :is(.cw-TopAppBar-titleGroup,.cw-TopAppBar-title){-cw-typescale:--cw-Typescale-headline-small}:is(._cw-TopAppBar-large,._cw-TopAppBar-medium-flexible)>.cw-TopAppBar-expandedRow :is(.cw-TopAppBar-titleGroup,.cw-TopAppBar-title){-cw-typescale:--cw-Typescale-headline-medium}._cw-TopAppBar-large-flexible>.cw-TopAppBar-expandedRow :is(.cw-TopAppBar-titleGroup,.cw-TopAppBar-title){-cw-typescale:--cw-Typescale-display-small}:is(._cw-TopAppBar-medium,._cw-TopAppBar-medium-flexible)>.cw-TopAppBar-expandedRow :is(.cw-TopAppBar-titleGroup:has(>.cw-TopAppBar-subtitle:not(:empty)),.cw-TopAppBar-subtitle){-cw-typescale:--cw-Typescale-label-large}:is(._cw-TopAppBar-large,._cw-TopAppBar-large-flexible)>.cw-TopAppBar-expandedRow :is(.cw-TopAppBar-titleGroup:has(>.cw-TopAppBar-subtitle:not(:empty)),.cw-TopAppBar-subtitle){-cw-typescale:--cw-Typescale-title-medium}.cw-BottomAppBar{--cw-AppBar-bottom-containerColor: cw-var(--cw-AppBar-bottom-containerColor, default);--cw-AppBar-bottom-contentColor: cw-var(--cw-AppBar-bottom-contentColor, default);align-items:center;background-color:cw-var(--cw-AppBar-bottom-containerColor);block-size:cw-var(--cw-AppBar-bottom-height);box-sizing:border-box;color:cw-var(--cw-AppBar-bottom-contentColor);display:flex;margin-block-end:calc(-1*cw-var(--cw-AppBar-bottom-height)*clamp(0,var(--cw-BottomAppBar-scroll-progress, 0),1));padding-block-start:cw-var(--cw-AppBar-bottom-topSpace);padding-inline-end:cw-var(--cw-AppBar-bottom-trailingSpace);padding-inline-start:cw-var(--cw-AppBar-bottom-leadingSpace)}.cw-BottomAppBar-actions{align-items:center;display:flex;flex:1 1 auto;min-inline-size:0}.cw-BottomAppBar-fab{align-items:flex-start;align-self:stretch;display:flex;padding-block-start:8px;padding-inline-end:12px}.cw-BottomAppBar-fab:empty{display:none}.cw-AppBarRow,.cw-AppBarColumn{align-items:center;box-sizing:border-box;display:flex;min-block-size:0;min-inline-size:0}.cw-AppBarColumn{flex-direction:column}.cw-AppBarLayout-items{align-items:center;display:flex;flex:0 1 auto;flex-direction:inherit;min-block-size:0;min-inline-size:0;overflow:clip}.cw-AppBarItem,.cw-AppBarLayout-overflow{display:flex;flex:none}.cw-AppBarItem[hidden],.cw-AppBarLayout-overflow[hidden]{display:none}.cw-FloatingToolbar{--_cw-FloatingToolbar-content-color: cw-var(--cw-FloatingToolbar-standard-contentColor);--_cw-FloatingToolbar-exit: calc((100% + cw-var(--cw-FloatingToolbar-floating-screenOffset))*clamp(0, var(--cw-FloatingToolbar-exit-progress, 0), 1)) ;--_cw-FloatingToolbar-selected-container-color: cw-var(--cw-FloatingToolbar-standard-selectedContainerColor);--_cw-FloatingToolbar-selected-content-color: cw-var(--cw-FloatingToolbar-standard-selectedContentColor);align-items:center;box-sizing:border-box;display:inline-grid;gap:cw-var(--cw-FloatingToolbar-floating-fabSpace);grid-auto-flow:column}.cw-FloatingToolbar :is(.cw-FloatingToolbar-container,.cw-FloatingToolbar-fab,.cw-FloatingToolbar-leading,.cw-FloatingToolbar-trailing,.cw-FloatingToolbar-slot){--cw-FloatingToolbar-floating-collapsedFabSize: inherit;--cw-FloatingToolbar-floating-containerElevation: inherit;--cw-FloatingToolbar-floating-containerShape: inherit;--cw-FloatingToolbar-floating-fabContainerElevation: inherit;--cw-FloatingToolbar-floating-fabSize: inherit;--cw-FloatingToolbar-floating-height: inherit;--cw-FloatingToolbar-floating-itemSpace: inherit;--cw-FloatingToolbar-floating-leadingSpace: inherit;--cw-FloatingToolbar-floating-trailingSpace: inherit;--cw-FloatingToolbar-standard-containerColor: inherit;--cw-FloatingToolbar-vibrant-containerColor: inherit}.cw-FloatingToolbar[data-cw-toolbar-design=vibrant]{--_cw-FloatingToolbar-content-color: cw-var(--cw-FloatingToolbar-vibrant-contentColor);--_cw-FloatingToolbar-selected-container-color: cw-var(--cw-FloatingToolbar-vibrant-selectedContainerColor);--_cw-FloatingToolbar-selected-content-color: cw-var(--cw-FloatingToolbar-vibrant-selectedContentColor)}._cw-FloatingToolbar-vertical{grid-auto-flow:row;justify-items:center}.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-exit-direction=bottom]{translate:0 var(--_cw-FloatingToolbar-exit)}.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-exit-direction=top]{translate:0 calc(-1 * var(--_cw-FloatingToolbar-exit))}.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-exit-direction=end],.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-exit-direction=start]:dir(rtl){translate:var(--_cw-FloatingToolbar-exit) 0}.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-exit-direction=start],.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-exit-direction=end]:dir(rtl){translate:calc(-1 * var(--_cw-FloatingToolbar-exit)) 0}.cw-FloatingToolbar-container{--cw-elevationShadow-level: cw-var(--cw-FloatingToolbar-floating-containerElevation);align-items:center;background-color:cw-var(--cw-FloatingToolbar-standard-containerColor);border-radius:cw-var(--cw-FloatingToolbar-floating-containerShape);box-sizing:border-box;color:var(--_cw-FloatingToolbar-content-color);display:flex;gap:cw-var(--cw-FloatingToolbar-floating-itemSpace);min-block-size:cw-var(--cw-FloatingToolbar-floating-height);min-inline-size:0;overflow:clip;padding-block-end:cw-var(--cw-FloatingToolbar-floating-trailingSpace);padding-block-start:cw-var(--cw-FloatingToolbar-floating-leadingSpace);padding-inline-end:cw-var(--cw-FloatingToolbar-floating-trailingSpace);padding-inline-start:cw-var(--cw-FloatingToolbar-floating-leadingSpace)}._cw-FloatingToolbar-vertical>.cw-FloatingToolbar-container{flex-direction:column;min-block-size:0;min-inline-size:cw-var(--cw-FloatingToolbar-floating-height)}.cw-FloatingToolbar[data-cw-toolbar-design=vibrant]>.cw-FloatingToolbar-container{background-color:cw-var(--cw-FloatingToolbar-vibrant-containerColor)}.cw-FloatingToolbar-content{display:contents}.cw-FloatingToolbar-leading,.cw-FloatingToolbar-trailing{display:grid;flex:none;grid-template-columns:1fr;grid-template-rows:1fr;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:grid-template-columns,grid-template-rows;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing)}:is(.cw-FloatingToolbar-leading,.cw-FloatingToolbar-trailing):has(>.cw-FloatingToolbar-slot:empty){display:none}.cw-FloatingToolbar-slot{align-items:center;display:flex;gap:cw-var(--cw-FloatingToolbar-floating-itemSpace);min-block-size:0;min-inline-size:0;overflow:clip}._cw-FloatingToolbar-vertical .cw-FloatingToolbar-slot{flex-direction:column}.cw-FloatingToolbar-leading>.cw-FloatingToolbar-slot{justify-content:flex-end}.cw-FloatingToolbar:not(.cw-DockedToolbar)[data-cw-floating-toolbar-expanded=false]{&._cw-FloatingToolbar-horizontal :is(.cw-FloatingToolbar-leading,.cw-FloatingToolbar-trailing){grid-template-columns:0fr}&._cw-FloatingToolbar-vertical :is(.cw-FloatingToolbar-leading,.cw-FloatingToolbar-trailing){grid-template-rows:0fr}}.cw-FloatingToolbar-fab{align-items:center;display:flex;justify-content:center}._cw-FloatingToolbar-vertical>.cw-FloatingToolbar-fab{flex-direction:column}.cw-FloatingToolbar-fab:empty{display:none}.cw-FloatingToolbar[data-cw-fab-position=start]>.cw-FloatingToolbar-fab{grid-column:1;grid-row:1}.cw-FloatingToolbar:not(.cw-DockedToolbar):has(>.cw-FloatingToolbar-fab:not(:empty)){&._cw-FloatingToolbar-horizontal{min-block-size:cw-var(--cw-FloatingToolbar-floating-collapsedFabSize)}&._cw-FloatingToolbar-vertical{min-inline-size:cw-var(--cw-FloatingToolbar-floating-collapsedFabSize)}>.cw-FloatingToolbar-fab{--_cw-FloatingToolbar-fab-size: cw-var(--cw-FloatingToolbar-floating-fabSize);justify-content:flex-end}&[data-cw-fab-position=start]>.cw-FloatingToolbar-fab{justify-content:flex-start}&._cw-FloatingToolbar-horizontal>.cw-FloatingToolbar-fab{inline-size:cw-var(--cw-FloatingToolbar-floating-fabSize)}&._cw-FloatingToolbar-vertical>.cw-FloatingToolbar-fab{block-size:cw-var(--cw-FloatingToolbar-floating-fabSize)}>.cw-FloatingToolbar-fab .cw-FAB{--cw-Button-containerHeight: var(--_cw-FloatingToolbar-fab-size);block-size:auto;min-inline-size:0;padding-block:calc((var(--_cw-FloatingToolbar-fab-size) - cw-var(--cw-Button-iconSize)) / 2)}>.cw-FloatingToolbar-container{--cw-elevationShadow-level: cw-var(--cw-FloatingToolbar-floating-fabContainerElevation);--_cw-FloatingToolbar-padding: calc(cw-var(--cw-FloatingToolbar-floating-leadingSpace) + cw-var(--cw-FloatingToolbar-floating-trailingSpace)) ;transition-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),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:--cw-elevationShadow-level,block-size,inline-size,margin,padding;transition-timing-function: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-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}&._cw-FloatingToolbar-horizontal>.cw-FloatingToolbar-container{inline-size:100%;justify-self:end}&._cw-FloatingToolbar-vertical>.cw-FloatingToolbar-container{align-self:end;block-size:100%}&._cw-FloatingToolbar-horizontal[data-cw-fab-position=start]>.cw-FloatingToolbar-container{justify-self:start}&._cw-FloatingToolbar-vertical[data-cw-fab-position=start]>.cw-FloatingToolbar-container{align-self:start}&[data-cw-floating-toolbar-expanded=false]{>.cw-FloatingToolbar-container{--cw-elevationShadow-level: 0}&._cw-FloatingToolbar-horizontal>.cw-FloatingToolbar-container{inline-size:0%;margin-inline-start:var(--_cw-FloatingToolbar-padding);padding-inline:0}&._cw-FloatingToolbar-horizontal[data-cw-fab-position=start]>.cw-FloatingToolbar-container{margin-inline-end:var(--_cw-FloatingToolbar-padding);margin-inline-start:0}&._cw-FloatingToolbar-vertical>.cw-FloatingToolbar-container{block-size:0%;margin-block-start:var(--_cw-FloatingToolbar-padding);padding-block:0}&._cw-FloatingToolbar-vertical[data-cw-fab-position=start]>.cw-FloatingToolbar-container{margin-block-end:var(--_cw-FloatingToolbar-padding);margin-block-start:0}>.cw-FloatingToolbar-fab{--_cw-FloatingToolbar-fab-size: cw-var(--cw-FloatingToolbar-floating-collapsedFabSize)}}}.cw-DockedToolbar{align-items:center;background-color:cw-var(--cw-FloatingToolbar-standard-containerColor);block-size:cw-var(--cw-FloatingToolbar-docked-height);color:var(--_cw-FloatingToolbar-content-color);display:flex;inline-size:100%;justify-content:space-between;margin-block-end:calc(-1*cw-var(--cw-FloatingToolbar-docked-height)*clamp(0,var(--cw-FloatingToolbar-exit-progress, 0),1));padding-inline-end:cw-var(--cw-FloatingToolbar-docked-trailingSpace);padding-inline-start:cw-var(--cw-FloatingToolbar-docked-leadingSpace)}.cw-DockedToolbar[data-cw-toolbar-design=vibrant]{background-color:cw-var(--cw-FloatingToolbar-vibrant-containerColor)}.cw-DockedToolbar :is(.cw-FloatingToolbar-container,.cw-FloatingToolbar-leading,.cw-FloatingToolbar-trailing,.cw-FloatingToolbar-slot,.cw-FloatingToolbar-fab){display:contents}.cw-FloatingToolbar-item:focus-visible{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-SearchBar{--_cw-SearchBar-results-clip-start: 0px;box-sizing:border-box;display:flex;min-block-size:cw-var(--cw-SearchBar-bar-height)}.cw-SearchBar :is(.cw-SearchAppBar-navigation,.cw-SearchBar-container,.cw-SearchBar-header,.cw-SearchBar-back,.cw-SearchBar-leading,.cw-SearchBar-input,.cw-SearchBar-trailing,.cw-SearchBar-avatar,.cw-SearchBar-avatar>*,.cw-SearchBar-results,.cw-SearchAppBar-actions){--cw-SearchBar-appBar-actionIconColor: inherit;--cw-SearchBar-appBar-fieldColor: inherit;--cw-SearchBar-appBar-navigationIconColor: inherit;--cw-SearchBar-appBar-scrolledFieldColor: inherit;--cw-SearchBar-bar-avatarSize: inherit;--cw-SearchBar-bar-containerColor: inherit;--cw-SearchBar-bar-containerElevation: inherit;--cw-SearchBar-bar-height: inherit;--cw-SearchBar-bar-inputTextColor: inherit;--cw-SearchBar-bar-leadingIconColor: inherit;--cw-SearchBar-bar-supportingTextColor: inherit;--cw-SearchBar-bar-trailingIconColor: inherit;--cw-SearchBar-view-containedFullScreenColor: inherit;--cw-SearchBar-view-containedResultsShape: inherit;--cw-SearchBar-view-containedResultsSpace: inherit;--cw-SearchBar-view-containerColor: inherit;--cw-SearchBar-view-containerElevation: inherit;--cw-SearchBar-view-dividerColor: inherit;--cw-SearchBar-view-dockedShape: inherit;--cw-SearchBar-view-fullScreenHeaderHeight: inherit}[data-cw-search-design=contained]{--_cw-SearchBar-results-clip-start: -24px}.cw-SearchBar-container{--cw-elevationShadow-level: cw-var(--cw-SearchBar-bar-containerElevation);background-color:cw-var(--cw-SearchBar-bar-containerColor);border-radius:calc(cw-var(--cw-SearchBar-bar-height)/2);box-sizing:border-box;display:flex;flex-direction:column;inline-size:min(100%,720px);position:relative;transition-duration:cw-var(--cw-Motion-spring-spatial-default-duration);transition-property:border-radius;transition-timing-function:cw-var(--cw-Motion-spring-spatial-default-easing)}.cw-SearchBar-header{align-items:center;box-sizing:border-box;display:flex;min-block-size:cw-var(--cw-SearchBar-bar-height);padding-inline:4px}:is(.cw-SearchBar-back,.cw-SearchBar-leading,.cw-SearchBar-trailing,.cw-SearchBar-avatar){align-items:center;display:flex;flex:none;justify-content:center;min-block-size:48px;min-inline-size:48px}:is(.cw-SearchBar-leading,.cw-SearchBar-trailing,.cw-SearchBar-avatar):empty,.cw-SearchBar-back{display:none}.cw-SearchBar-back,.cw-SearchBar-leading{--_cw-SearchBar-icon-color: cw-var(--cw-SearchBar-bar-leadingIconColor)}.cw-SearchBar-trailing{--_cw-SearchBar-icon-color: cw-var(--cw-SearchBar-bar-trailingIconColor)}:is(.cw-SearchBar-back,.cw-SearchBar-leading,.cw-SearchBar-trailing){color:var(--_cw-SearchBar-icon-color)}.cw-SearchBar-avatar>*{block-size:cw-var(--cw-SearchBar-bar-avatarSize);border-radius:cw-var(--cw-CornerRadius-full);inline-size:cw-var(--cw-SearchBar-bar-avatarSize);object-fit:cover;overflow:clip}.cw-SearchBar-input{--_cw-SearchBar-placeholder-color: cw-var(--cw-SearchBar-bar-supportingTextColor);-cw-typescale:--cw-Typescale-body-large;appearance:none;background:transparent;block-size:48px;border:0;box-sizing:border-box;color:cw-var(--cw-SearchBar-bar-inputTextColor);flex:1 1 auto;margin:0;min-inline-size:0;outline:none;padding-block:0;padding-inline:4px}.cw-SearchBar-header:has(>.cw-SearchBar-leading:empty)>.cw-SearchBar-input{padding-inline-start:12px}.cw-SearchBar-header:has(>.cw-SearchBar-trailing:empty+.cw-SearchBar-avatar:empty)>.cw-SearchBar-input{padding-inline-end:12px}.cw-SearchBar-input::placeholder{color:var(--_cw-SearchBar-placeholder-color);opacity:1}._cw-SearchBar-textCentered:not(.cw-SearchBar-expanded) .cw-SearchBar-input{text-align:center}.cw-SearchBar:not([data-cw-search-view])>.cw-SearchBar-container:has(.cw-SearchBar-input:focus-visible),[data-cw-search-view]:not(._cw-SearchBar-morphing) .cw-SearchBar-header:has(>.cw-SearchBar-input:focus-visible){outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-innerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-SearchBar-disabled{opacity:.38}.cw-SearchBar-results{--cw-elevationShadow-level: cw-var(--cw-SearchBar-view-containerElevation);background-color:cw-var(--cw-SearchBar-view-containerColor);box-sizing:border-box;clip-path:inset(var(--_cw-SearchBar-results-clip-start) -24px -24px);inline-size:100%;inset-block-start:100%;inset-inline-start:0;max-block-size:calc(100dvh * 2 / 3);min-block-size:min(240px,calc(100dvh * 2 / 3));opacity:1;overflow:auto;overscroll-behavior:contain;position:absolute;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-spatial-default-duration),cw-var(--cw-Motion-spring-spatial-default-duration),cw-var(--cw-Motion-spring-effect-default-duration);transition-property:clip-path,display,opacity;transition-timing-function:cw-var(--cw-Motion-spring-spatial-default-easing),linear,cw-var(--cw-Motion-spring-effect-default-easing);z-index:1}.cw-SearchBar-results[hidden]{clip-path:inset(var(--_cw-SearchBar-results-clip-start) -24px 100%);display:none;opacity:0}@starting-style{.cw-SearchBar-results:not([hidden]){clip-path:inset(var(--_cw-SearchBar-results-clip-start) -24px 100%);opacity:0}}[data-cw-search-design=divided][data-cw-search-expansion=docked] .cw-SearchBar-results{border-block-start:1px solid cw-var(--cw-SearchBar-view-dividerColor);border-end-end-radius:cw-var(--cw-SearchBar-view-dockedShape);border-end-start-radius:cw-var(--cw-SearchBar-view-dockedShape)}[data-cw-search-design=divided][data-cw-search-expansion=docked]:is([data-cw-search-expanded=true])>.cw-SearchBar-container{border-end-end-radius:0;border-end-start-radius:0}[data-cw-search-design=contained][data-cw-search-expansion=docked] .cw-SearchBar-results{border-radius:cw-var(--cw-SearchBar-view-containedResultsShape);margin-block-start:cw-var(--cw-SearchBar-view-containedResultsSpace)}[data-cw-search-expansion=fullscreen] :is(.cw-SearchBar-container,.cw-SearchBar-results){transition:none}[data-cw-search-view]>.cw-SearchBar-container{block-size:auto;border:0;border-radius:0;color:inherit;inline-size:auto;inset:0;margin:0;max-block-size:none;max-inline-size:none;overflow:clip;padding:0;position:fixed}[data-cw-search-view] .cw-SearchBar-back{display:flex}[data-cw-search-view] .cw-SearchBar-leading{display:none}[data-cw-search-view] .cw-SearchBar-input{padding-inline-start:4px}[data-cw-search-view] .cw-SearchBar-results{background-color:transparent;clip-path:none;flex:1 1 auto;max-block-size:none;min-block-size:0;position:static}[data-cw-search-view][data-cw-search-design=divided]>.cw-SearchBar-container{background-color:cw-var(--cw-SearchBar-view-containerColor)}[data-cw-search-view][data-cw-search-design=divided] .cw-SearchBar-header{border-block-end:1px solid cw-var(--cw-SearchBar-view-dividerColor);min-block-size:cw-var(--cw-SearchBar-view-fullScreenHeaderHeight)}[data-cw-search-view][data-cw-search-design=contained]>.cw-SearchBar-container{background-color:cw-var(--cw-SearchBar-view-containedFullScreenColor)}[data-cw-search-view][data-cw-search-design=contained] .cw-SearchBar-header{background-color:cw-var(--cw-SearchBar-bar-containerColor);border-radius:calc(cw-var(--cw-SearchBar-bar-height)/2);margin-block:4px;margin-inline:12px}.cw-SearchAppBar{--cw-SearchAppBar-color-fraction: 0;--_cw-SearchAppBar-progress: clamp(0, var(--cw-SearchAppBar-scroll-progress, 0), 1);align-items:center;background-color:color-mix(in oklab,cw-var(--cw-SearchBar-appBar-scrolledContainerColor) calc(100% * var(--cw-SearchAppBar-color-fraction)),cw-var(--cw-SearchBar-appBar-containerColor));justify-content:space-between;margin-block-end:calc(-1 * cw-var(--cw-SearchBar-appBar-height) * var(--_cw-SearchAppBar-progress));min-block-size:cw-var(--cw-SearchBar-appBar-height);padding-block:4px;padding-inline:4px;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:--cw-SearchAppBar-color-fraction;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing);translate:0 calc(-100% * var(--_cw-SearchAppBar-progress))}.cw-SearchAppBar[data-cw-app-bar-scrolled=true]{--cw-SearchAppBar-color-fraction: 1}.cw-SearchAppBar-navigation,.cw-SearchAppBar-actions{align-items:center;display:flex;flex:none}.cw-SearchAppBar-navigation{--_cw-SearchBar-icon-color: cw-var(--cw-SearchBar-appBar-navigationIconColor);color:var(--_cw-SearchBar-icon-color)}.cw-SearchAppBar-actions{--_cw-SearchBar-icon-color: cw-var(--cw-SearchBar-appBar-actionIconColor);color:var(--_cw-SearchBar-icon-color)}:is(.cw-SearchAppBar-navigation,.cw-SearchAppBar-actions):empty{display:none}.cw-SearchAppBar:not([data-cw-search-view])>.cw-SearchBar-container,.cw-SearchAppBar[data-cw-search-view]:after{flex:1 1 auto;inline-size:auto;margin-inline:8px;max-inline-size:720px;min-inline-size:0}.cw-SearchAppBar:not([data-cw-search-view])>.cw-SearchBar-container{background-color:cw-var(--cw-SearchBar-appBar-fieldColor)}.cw-SearchAppBar[data-cw-search-view]:after{content:""}.cw-SearchAppBar[data-cw-search-view]>.cw-SearchAppBar-actions{order:1}.cw-SearchAppBar[data-cw-app-bar-scrolled=true]:not([data-cw-search-view])>.cw-SearchBar-container{background-color:cw-var(--cw-SearchBar-appBar-scrolledFieldColor)}.cw-Scrollbar{--cw-Scrollbar-thumb-offset: 0px;--cw-Scrollbar-thumb-size: calc(100% - 4px) ;background-color:cw-var(--cw-Scrollbar-trackColor);border-radius:cw-var(--cw-Scrollbar-thumbShape);box-sizing:border-box;cursor:pointer;min-block-size:cw-var(--cw-Scrollbar-thickness);min-inline-size:cw-var(--cw-Scrollbar-thickness);outline:none;position:relative;touch-action:none}._cw-Scrollbar-horizontal{block-size:cw-var(--cw-Scrollbar-thickness);inline-size:100%}._cw-Scrollbar-vertical{block-size:100%;inline-size:cw-var(--cw-Scrollbar-thickness)}.cw-Scrollbar:after{--cw-Scrollbar-thumbColor: inherit;--cw-Scrollbar-thumbShape: inherit;background-color:cw-var(--cw-Scrollbar-thumbColor);border-radius:cw-var(--cw-Scrollbar-thumbShape);content:"";position:absolute}._cw-Scrollbar-horizontal:after{inline-size:var(--cw-Scrollbar-thumb-size);inset-block:2px;left:2px;right:auto;translate:var(--cw-Scrollbar-thumb-offset) 0}._cw-Scrollbar-vertical:after{block-size:var(--cw-Scrollbar-thumb-size);inset-block-start:2px;inset-inline:2px;translate:0 var(--cw-Scrollbar-thumb-offset)}.cw-Scrollbar:focus-visible{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-Scrollbar-disabled{cursor:default;opacity:.38;pointer-events:none}.cw-ScrollField{box-sizing:border-box;overflow:auto;position:relative}._cw-ScrollField-horizontal{overflow-x:auto;overflow-y:hidden}._cw-ScrollField-vertical{overflow-x:hidden;overflow-y:auto}}@property --cw-TopAppBar-color-fraction{syntax: "<number>"; inherits: false; initial-value: 0;}@property --cw-SearchAppBar-color-fraction{syntax: "<number>"; inherits: false; initial-value: 0;}@keyframes cw-TopAppBar-color-fraction{0%{--cw-TopAppBar-color-fraction: 0}to{--cw-TopAppBar-color-fraction: 1}}@keyframes cw-TopAppBar-fade-in{0%{opacity:0}to{opacity:1}}@layer cw-theme{.cw-FloatingToolbar ._cw-IconButton-standard:not(.cw-IconButton-disabled){--cw-Action-icon-color: var(--_cw-FloatingToolbar-content-color);--cw-Action-label-color: var(--_cw-FloatingToolbar-content-color);--cw-Action-selected-containerColor: var(--_cw-FloatingToolbar-selected-container-color);--cw-Action-selected-contentColor: var(--_cw-FloatingToolbar-selected-content-color);--cw-Action-unselected-contentColor: var(--_cw-FloatingToolbar-content-color)}.cw-FloatingToolbar ._cw-Button-filled.cw-Button-toggle{--cw-Action-disabled-containerOpacity: 0;--cw-Action-disabled-selectedContainerOpacity: 0;--cw-Action-selected-containerColor: var(--_cw-FloatingToolbar-selected-container-color);--cw-Action-selected-contentColor: var(--_cw-FloatingToolbar-selected-content-color);--cw-Action-unselected-containerColor: transparent;--cw-Action-unselected-contentColor: var(--_cw-FloatingToolbar-content-color)}:is(.cw-TopAppBar-navigation,.cw-TopAppBar-actions) ._cw-IconButton-standard:not(.cw-IconButton-disabled){--cw-Action-icon-color: var(--_cw-TopAppBar-icon-color);--cw-Action-label-color: var(--_cw-TopAppBar-icon-color);--cw-Action-unselected-contentColor: var(--_cw-TopAppBar-icon-color)}:is(.cw-SearchAppBar-navigation,.cw-SearchBar-back,.cw-SearchBar-leading,.cw-SearchBar-trailing,.cw-SearchAppBar-actions) ._cw-IconButton-standard:not(.cw-IconButton-disabled){--cw-Action-icon-color: var(--_cw-SearchBar-icon-color);--cw-Action-label-color: var(--_cw-SearchBar-icon-color);--cw-Action-unselected-contentColor: var(--_cw-SearchBar-icon-color)}}
@@ -0,0 +1,29 @@
1
+ import{createComponent as U,createContext as he,createMemo as X,untrack as H,useContext as ge}from"solid-js";import{isServer as O}from"solid-js/web";import{defineDomComponent as pe}from"..";import{DomController as ve}from"../dom/client";import{applySpringMotion as fe}from"../motion";import{FocusState as me,HoverState as Se,PressState as be,defineInteractableComponent as Ce}from"../state";import{InteractableController as Ee}from"../state/controller";import{DismissDrag as Ne,afterTransition as S,computedStyleOf as b,dedupeCallbacks as $,deferAfterDelegatedCancellation as G,isAlternateLinkActivation as K,isAnchorElement as F,isDisabledElement as x,isDismissedAt as Ae,isElementNode as Le,mutationObserverOf as Te,ownerWindow as Ie,preventDisabledLinkKey as ye,resolveNavigationSlots as Y,selectedValueOf as D,unreachableServerRender as z}from"./base";import"../container/elevation-shadow.css";import"./navigation.css";const q="data-cw-navigation-kind",P=`[${q}]`,v="cw-NavigationItem",j=`.${v}`,E="cw-NavigationItem-icon",N="cw-NavigationItem-label",A="cw-NavigationItem-badge",L="cw-NavigationItem-selected",Q="cw-NavigationItem-disabled",u="data-cw-navigation-value",T="data-cw-navigation-current",B="data-cw-navigation-current-authored",f="data-cw-navigation-selected",Me=["aria-current","aria-disabled",T,"disabled",u],J=me|Se|be,Z="data-cw-navigation-icon-placement",ee="_cw-Navigation-bar",te="_cw-Navigation-rail",g="_cw-Navigation-startIcons",ne="_cw-Navigation-selectedLabel",ie="data-cw-navigation-arrangement",ae="data-cw-navigation-expanded",se="data-cw-navigation-modal",p="data-cw-navigation-hide-collapsed",oe="cw-NavigationRail-content",re="cw-NavigationRail-modal",M="_cw-NavigationRail-modal-closing",V="_cw-NavigationRail-modal-dragging",R="_cw-NavigationRail-morphing",C="--_CW-NAVIGATION-RAIL_WIDTH",l="--_CW-NAVIGATION-MODAL_WIDTH",h="--_CW-NAVIGATION-MODAL_PROGRESS",Re=125,_e="--_CW-NAVIGATION-ITEM_COUNT",_=["inline-size","width"],le=he();function d(a){return a==="NavigationRail"||a==="WideNavigationRail"}function de(a,e){return d(a)&&(e??a==="WideNavigationRail")}function ue(a,e,t){return t==="start"||d(a)&&e&&t!=="top"}function ce(a,e,t){return d(a)?e==="center"?"center":"top":e==="centered"||e==="equalWeight"?e:t==="start"?"centered":"equalWeight"}function we(a){return Array.from(a.querySelectorAll(j)).filter(e=>e.closest(P)===a)}function De(a){return a.find(t=>!x(t)&&(t.getAttribute(f)==="true"||t.hasAttribute("aria-current")))?.getAttribute(u)??void 0}function w(a,e){e===null?a.removeAttribute("aria-current"):a.setAttribute("aria-current",e)}class He{#t;#o;#c;#u;#e;#n;#a;#l;#s;#i;#r;#d;constructor(e,t){this.#t=e,this.#o="value"in e||"selectedValue"in e,this.#c=t,this.#u=n=>this.#h(n),this.#e=null,this.#n=null,this.#a=0,this.#l=H(()=>D(e)),this.#s=new Set,this.#i=new WeakMap,this.#r=new WeakMap,this.#d=new WeakMap}attach(e){const t=this.#e,n=e===null?void 0:Te(e);t!==e&&(this.#a++,t!==null&&(this.#m(t),t.removeEventListener("click",this.#u)),this.#n?.disconnect(),this.#n=null,this.#e=e,e!==null&&(e.addEventListener("click",this.#u),n!==void 0&&(this.#n=new n(()=>this.sync()),this.#n.observe(e,{attributeFilter:Me,attributes:!0,childList:!0,subtree:!0}))))}update(){this.#o&&(this.#l=D(this.#t))}sync(){const e=this.#e;if(e===null)return;const t=we(e),n=new Set(t);for(const i of Array.from(this.#s))n.has(i)||this.#g(i);!this.#o&&this.#l===void 0&&(this.#l=De(t));for(const i of t){const s=this.#l!==void 0&&i.getAttribute(u)===this.#l,r=s?"true":"false",o=s?i.getAttribute(T)??"page":null;this.#v(i),i.classList.contains(L)!==s&&i.classList.toggle(L,s),this.#s.has(i)&&this.#f(i,o),i.getAttribute(f)!==r&&i.setAttribute(f,r)}this.#c?.(t),this.#n?.takeRecords()}dispose(){this.attach(null)}#v(e){const t=e.getAttribute("aria-current");if(this.#r.has(e)){this.#s.has(e)&&t!==this.#i.get(e)&&(this.#s.delete(e),this.#i.delete(e),this.#r.set(e,t));return}const n=e.hasAttribute(B)||this.#d.has(e)&&this.#d.get(e)!==t;this.#d.delete(e),this.#r.set(e,n?t:null),n||(this.#s.add(e),this.#i.set(e,t))}#f(e,t){this.#i.set(e,t),e.getAttribute("aria-current")!==t&&w(e,t)}#g(e){const t=e.getAttribute("aria-current");if(t===this.#i.get(e)){const n=this.#r.get(e)??null;w(e,n),this.#d.set(e,n),this.#r.delete(e)}else this.#r.set(e,t);this.#i.delete(e),this.#s.delete(e)}#m(e){for(const t of this.#s){const n=t.getAttribute("aria-current");e.contains(t)&&n===this.#i.get(t)&&w(t,this.#r.get(t)??null)}this.#s.clear(),this.#i=new WeakMap,this.#r=new WeakMap,this.#d=new WeakMap}#h(e){const t=this.#e,n=Le(e.target)?e.target.closest(j):null,i=this.#a;if(t===null||n===null||n.closest(P)!==t)return;if(x(n)){F(n)&&e.preventDefault();return}const s=n.getAttribute(u);s===null||K(e,n)||G(e,t,()=>{this.#a!==i||!t.isConnected||!t.contains(n)||(this.#o||(this.#l=s),this.sync(),$([this.#t.onChange,this.#t.onValueChange,this.#t.onSelectedChange],s,e))},!1)}}class Oe extends ve{#t;#o;#c;#u;#e;#n;#a;#l;#s;#i;#r;#d;constructor(e,t){super(e,{styleElementIsFunction:!0}),this.#t=t,this.#o=new He(e,n=>{d(t)||super.setStyle(_e,n.length)}),this.#c=new Ne({begin:n=>this.#E(n),update:n=>this.#S(n),end:(n,i,s)=>this.#N(n,i,s)}),this.#u=null,this.#e=null,this.#n=!1,this.#a=!1,this.#l=!1,this.#s=null,this.#i=null,this.#r=()=>{},this.#d=()=>{}}applyComponentProps(){const e=super.readProps(["alwaysShowLabel","arrangement","attr:aria-label","expanded","hideOnCollapse","itemIconPlacement","modal","selectedValue","value"]),t=de(this.#t,e.expanded),n=ue(this.#t,t&&e.modal!==!0,e.itemIconPlacement);e.itemIconPlacementChanged&&super.setAttribute(Z,e.itemIconPlacement),(e.arrangementChanged||e.itemIconPlacementChanged)&&super.setAttribute(ie,ce(this.#t,e.arrangement,e.itemIconPlacement)),(e.valueChanged||e.selectedValueChanged)&&this.#o.update(),d(this.#t)&&(e["attr:aria-labelChanged"]&&this.#C(e["attr:aria-label"]),this.#v(t,e.modal===!0,e.hideOnCollapse===!0)),super.setClass(g,n),super.setClass(ne,e.alwaysShowLabel===!1&&!n),this.#o.sync()}#v(e,t,n){const i=super.styleElement,s=this.#l,r=e&&!t,o=e&&t,c=s&&r!==this.#n&&i?.isConnected===!0?i.getBoundingClientRect().width:void 0;this.#l=!0,super.setAttribute(ae,e?"true":"false"),super.setAttribute(se,t?"true":void 0),super.setAttribute(p,n?"true":void 0),this.#n=r,c!==void 0&&this.#f(c),o!==this.#a&&(this.#a=o,o?this.#g(s):this.#m(s))}#f(e){const t=super.styleElement,n=Ie(t);if(this.#r(),super.setStyle(C,void 0),super.setClass(R,!1),t===null||n===void 0)return;const i=n.requestAnimationFrame(()=>{const s=t.getBoundingClientRect().width;s!==e&&(super.setStyle(C,`${e}px`),b(t).inlineSize,super.setStyle(C,`${s}px`),super.setClass(R,!0),this.#r=S(t,_,()=>{super.setStyle(C,void 0),super.setClass(R,!1)}))});this.#r=()=>n.cancelAnimationFrame(i)}#g(e){const t=super.styleElement,n=this.#e,i=this.#u;if(t===null||n===null||i===null)return;if(this.#d(),this.#i?.retarget(1),n.classList.remove(M),n.classList.add(g),!n.open){if(!n.isConnected){queueMicrotask(()=>{this.#a&&n.isConnected&&!n.open&&this.#g(!1)});return}n.append(i),n.showModal()}if(!e||t.hasAttribute(p))return;const s=t.getBoundingClientRect().width;n.style.removeProperty(l);const r=n.getBoundingClientRect().width;n.style.setProperty(l,`${s}px`),b(n).inlineSize,n.style.setProperty(l,`${r}px`),this.#d=S(n,_,()=>{n.style.removeProperty(l)})}#m(e){const t=super.styleElement,n=this.#e;if(this.#d(),t===null||n===null||this.#s!==null)return;if(!n.open||!e){this.#h();return}if(n.classList.add(M),n.classList.remove(g),t.hasAttribute(p)){this.#d=S(n,[h],()=>this.#h());return}const i=n.getBoundingClientRect().width;n.style.setProperty(l,`${i}px`),b(n).inlineSize,n.style.setProperty(l,`${t.getBoundingClientRect().width}px`),this.#d=S(n,_,()=>this.#h())}#h(){const e=super.styleElement,t=this.#e,n=this.#u;t!==null&&(t.classList.remove(M,g),t.style.removeProperty(l),t.open&&t.close(),e!==null&&n!==null&&n.parentElement!==e&&e.insertBefore(n,t))}#C(e){e===void 0?this.#e?.removeAttribute("aria-label"):this.#e?.setAttribute("aria-label",e)}#p(e){this.props.onExpandedChange?.(!1,e)}#E(e){const t=super.styleElement,n=this.#e;if(t===null||n===null||!this.#a||!n.open||!t.hasAttribute(p))return null;const i=n.getBoundingClientRect(),s=Number.parseFloat(b(n).getPropertyValue(h));return e.clientX<i.left||e.clientX>=i.right||e.clientY<i.top||e.clientY>=i.bottom?null:(this.#i?.cancel(),this.#i=null,this.#s=Number.isFinite(s)?s:1,n.classList.add(V),this.#S(0),i.width)}#S(e){const t=Math.min(1,Math.max(0,(this.#s??1)-e));return this.#e?.style.setProperty(h,String(t)),t}#N(e,t,n){const i=this.#e,s=this.#S(e),r=i?.getBoundingClientRect().width??0;if(i===null||r===0){this.#b();return}Ae(1-s,t,Re/r)&&this.#p(n);const o=fe(i,h,s,this.#a?1:0,{velocity:-t});this.#i=o,o.finished.then(()=>{this.#i===o&&this.#b()},()=>{})}#b(){const e=this.#e;this.#i?.cancel(),this.#i=null,this.#s=null,e?.style.removeProperty(h),e?.classList.remove(V),this.#a||this.#h()}#A(e){this.#e=e,this.#c.attach(e),e.addEventListener("cancel",t=>{t.preventDefault(),this.#p(t)}),e.addEventListener("click",t=>{const n=e.getBoundingClientRect();t.target===e&&(t.clientX<n.left||t.clientX>=n.right||t.clientY<n.top||t.clientY>=n.bottom)&&this.#p(t)}),e.addEventListener("close",t=>{!this.#a||e.open||(this.#a=!1,this.#h(),this.#p(t))})}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#o.attach(e)}onControllerCleanup(){this.#r(),this.#d(),this.#i?.cancel(),this.#c.attach(null),this.#a=!1,this.#h(),this.#o.dispose(),super.onControllerCleanup()}render(e){return d(this.#t)?this.#T(e):this.#L(e)}#L(e){return<nav class={`cw-${this.#t} ${ee}`}data-cw-navigation-kind={this.#t}role="navigation">{e}</nav>}#T(e){return<nav class={`cw-${this.#t} ${te}`}data-cw-navigation-kind={this.#t}role="navigation">
2
+ <div class={oe}ref={t=>{this.#u=t}}>
3
+ <div class="cw-NavigationRail-header">{this.props.header}</div>
4
+ {e}
5
+ </div>
6
+ <dialog class={`${re} cw-elevationShadow`}ref={t=>this.#A(t)}/>
7
+ </nav>}}function xe(a,e,t){const n=d(a),i=de(a,t.expanded),s=ue(a,i&&t.modal!==!0,t.itemIconPlacement),r={[ie]:ce(a,t.arrangement,t.itemIconPlacement),[ae]:n?String(i):void 0,[p]:n&&t.hideOnCollapse===!0?"true":void 0,[Z]:t.itemIconPlacement,[se]:n&&t.modal===!0?"true":void 0,[q]:a,role:"navigation"},o={[`cw-${a}`]:!0,[ee]:!n,[te]:n,[ne]:t.alwaysShowLabel===!1&&!s,[g]:s};return n?<nav{...e}{...r}classList={{...e.classList,...o}}>
8
+ <div class={oe}>
9
+ <div class="cw-NavigationRail-header">{t.header}</div>
10
+ {e.children}
11
+ </div>
12
+ <dialog aria-label={e["aria-label"]}class={`${re} cw-elevationShadow`}/>
13
+ </nav>:<nav{...e}{...r}classList={{...e.classList,...o}}>{e.children}</nav>}function I(a){const e=(n,i)=>xe(a,n,i),t=pe(O?()=>e:z,()=>class extends Oe{constructor(n){super(n,a)}});return n=>Pe(n,!0,()=>U(t,Y(n,void 0,["header"])))}function Pe(a,e,t){return U(le.Provider,{value:O&&e?{controlled:"value"in a||"selectedValue"in a,value:H(()=>D(a))}:void 0,get children(){return t()}})}const je=I("NavigationBar"),Be=I("ShortNavigationBar"),Qe=Be,Ze=I("NavigationRail"),et=I("WideNavigationRail");class ke extends Ee{#t;#o;#c;#u;#e;#n;constructor(e){super(e,{baseInteractionCssClassName:v,enabledInteractionStates:J,styleElementIsFunction:!1}),this.#t="attr:aria-current"in e,this.#o="selected"in e,this.#c=t=>this.#s(t),this.#u=t=>ye(t,super.functionElement),this.#e=H(()=>(this.#o?e.selected:e.defaultSelected)===!0),this.#n=!1}#a(){const e=super.functionElement;return e!==null&&e.closest(P)!==null}#l(){this.#a()||(super.setClass(L,this.#e),super.setAttribute(f,this.#e?"true":"false"),this.#t||super.setAttribute("aria-current",this.#e?this.props.current??"page":void 0))}#s(e){const t=super.functionElement;if(t!==null){if(this.#n||x(t)){F(t)&&e.preventDefault();return}this.#a()||K(e,t)||G(e,t,()=>{super.functionElement!==t||!t.isConnected||this.#n||(this.#o||(this.#e=!0),$([this.props.onChange,this.props.onSelect,this.props.onSelectedChange],!0,e),this.#l())},!1)}}applyComponentProps(){const e=super.readProps(["attr:id","attr:tabindex","current","disabled","href","id","selected","tabIndex","value"]),t=e.href!==void 0;e.disabledChanged&&(this.#n=e.disabled===!0,super.setClass(Q,this.#n),super.setEnabledInteractionStates(this.#n?0:J),super.setAttribute("aria-disabled",this.#n?"true":void 0)),super.setAttribute("disabled",!t&&this.#n),super.setAttribute("href",e.href),super.setAttribute("id",e.id??e["attr:id"]),super.setAttribute("tabindex",this.#n?-1:e.tabIndex??e["attr:tabindex"]),e.valueChanged&&super.setAttribute(u,e.value),e.currentChanged&&super.setAttribute(T,e.current),this.#t&&super.setAttribute(B,"true"),e.selectedChanged&&this.#o&&(this.#e=e.selected===!0),this.#l()}onFunctionElementChanged(e){const t=super.functionElement;super.onFunctionElementChanged(e),t?.removeEventListener("click",this.#c),t?.removeEventListener("keydown",this.#u),e?.addEventListener("click",this.#c),e?.addEventListener("keydown",this.#u)}render(e,t){const n=X(()=>this.props.href!==void 0),i=()=>this.props.icon===void 0?void 0:"true";return X(()=>n()?<a class={v}ref={t}>
14
+ <span aria-hidden={i()}class={E}>{this.props.icon}</span>
15
+ <span class={N}>{this.props.label??e}</span>
16
+ <span class={A}>{this.props.badge}</span>
17
+ </a>:<button class={v}ref={t}type="button">
18
+ <span aria-hidden={i()}class={E}>{this.props.icon}</span>
19
+ <span class={N}>{this.props.label??e}</span>
20
+ <span class={A}>{this.props.badge}</span>
21
+ </button>)}}function We(a,e){const t=ge(le),n=a,i=e.disabled===!0,s="aria-current"in a;let o=("selected"in e?e.selected:e.defaultSelected)===!0;t!==void 0&&(!t.controlled&&t.value===void 0&&o&&!i&&e.value!==void 0&&(t.value=e.value),o=t.value!==void 0&&e.value===t.value);const y=o?e.current??"page":void 0,c={"aria-disabled":i?"true":void 0,[B]:s?"true":void 0,[T]:e.current,[f]:o?"true":"false",[u]:e.value},k={[Q]:i,[v]:!0,[L]:o},W=e.icon===void 0?void 0:"true";return e.href===void 0?<button{...a}{...c}aria-current={s?n["aria-current"]:y}classList={{...a.classList,...k}}disabled={i}id={e.id??n.id}tabindex={i?-1:e.tabIndex??n.tabindex}type="button">
22
+ <span aria-hidden={W}class={E}>{e.icon}</span>
23
+ <span class={N}>{e.label??a.children}</span>
24
+ <span class={A}>{e.badge}</span>
25
+ </button>:<a{...a}{...c}aria-current={s?n["aria-current"]:y}classList={{...a.classList,...k}}href={e.href}id={e.id??n.id}tabindex={i?-1:e.tabIndex??n.tabindex}>
26
+ <span aria-hidden={W}class={E}>{e.icon}</span>
27
+ <span class={N}>{e.label??a.children}</span>
28
+ <span class={A}>{e.badge}</span>
29
+ </a>}const Xe=Ce(O?()=>We:z,()=>ke),m=a=>Xe(Y(a,void 0,["icon","label","badge"])),tt=m,nt=m,it=m,at=m,st=m;export{Qe as FlexibleNavigationBar,q as NAVIGATION_KIND_ATTRIBUTE,je as NavigationBar,nt as NavigationBarItem,Oe as NavigationController,tt as NavigationDrawerItem,m as NavigationItem,ke as NavigationItemController,Ze as NavigationRail,at as NavigationRailItem,He as NavigationSelection,Be as ShortNavigationBar,it as ShortNavigationBarItem,et as WideNavigationRail,st as WideNavigationRailItem,Pe as provideNavigationSelection};
@@ -0,0 +1 @@
1
+ import{runWithOwner as I,untrack as u}from"solid-js";import{insert as w}from"solid-js/web";import{defineDomComponent as O}from"..";import{DomController as x}from"../dom/client";import{VelocityTracker as k,applySpringMotion as _}from"../motion";import{computedStyleOf as H,dedupeCallbacks as z,deferAfterDelegatedCancellation as B,isElementNode as d,mutationObserverOf as T,ownerWindow as p}from"./base";import"./navigation.css";const v=2,V=24,S=100,g=10,y=1e-6,W=150,U=.01,X=40,M=.015*9.80665*39.37*160*.84,J=Math.log(.78)/(Math.log(.78)-Math.log(.9)),$=.35;function G(n){return n===0?0:Math.sign(n)*M*($*Math.abs(n)/M)**J}function K(n){return p(n)?.ResizeObserver??(typeof ResizeObserver>"u"?void 0:ResizeObserver)}function h(n,t){return n!==void 0&&Number.isFinite(n)?n:t}function C(n,t){return n!==void 0&&Number.isFinite(n)&&n>0?n:t}function c(n){return Math.min(1,Math.max(0,n))}function E(n){return typeof n=="object"&&n!==null&&(n.nodeType===9||n.nodeType===11)}function P(n,t){const e=n.getRootNode();if(!E(e))return null;const i=e.getElementById(t);return d(i)?i:null}const f=new WeakMap;function R(n,t){let e=f.get(n);if(e===void 0){const i=T(n);if(i===void 0)return()=>{};const s=new Set,o=new i(()=>{for(const r of Array.from(s))r()});e={observer:o,listeners:s},f.set(n,e),o.observe(n,{attributeFilter:["id"],attributes:!0,childList:!0,subtree:!0})}return e.listeners.add(t),()=>{const i=f.get(n);i!==void 0&&(i.listeners.delete(t),i.listeners.size===0&&(i.observer.disconnect(),f.delete(n)))}}function b(n,t){return Math.max(0,t==="horizontal"?n.scrollWidth-n.clientWidth:n.scrollHeight-n.clientHeight)}function L(n,t){return t==="horizontal"?n.clientWidth:n.clientHeight}class Y extends x{#h;#L;#T;#P;#E;#g;#M;#R;#b;#w;#e;#i;#s;#r;#n;#a;#t;#o;#d;#u;#m;#l;#c;#f;#p;#v;#S;#y;#I;#C;#D;#O;constructor(t){super(t,{styleElementIsFunction:!0}),this.#h="value"in t,this.#L="attr:aria-controls"in t,this.#T="attr:aria-label"in t,this.#P=e=>this.#Y(e),this.#E=e=>this.#j(e),this.#g=e=>this.#q(e),this.#M=e=>this.#Z(e),this.#R=e=>this.#K(e),this.#b=e=>this.#Q(e),this.#w=()=>this.#A(),this.#i=u(()=>h(t.min,0)),this.#s=u(()=>Math.max(this.#i,h(t.max,S))),this.#e=u(()=>this.#k(h(this.#h?t.value:t.defaultValue,0))),this.#r=u(()=>C(t.step,g)),this.#n=u(()=>t.orientation??"vertical"),this.#a=!1,this.#t=null,this.#o=null,this.#d=()=>{},this.#u=null,this.#m=null,this.#l=null,this.#c=0,this.#f=!1,this.#p=!1,this.#v=0,this.#S=0,this.#y=0,this.#I=[-1,-1,-1],this.#C=null,this.#D=null,this.#O=!1}#k(t){return Math.min(this.#s,Math.max(this.#i,t))}#_(t){return this.#s<=this.#i?0:c((t-this.#i)/(this.#s-this.#i))}#z(t){const e=b(t,this.#n),i=this.#n==="vertical"?t.scrollTop:this.#f?-t.scrollLeft:t.scrollLeft;return Math.min(e,Math.max(0,i))}#$(t,e){this.#n==="vertical"?t.scrollTo({behavior:"instant",top:e}):t.scrollTo({behavior:"instant",left:this.#f?-e:e})}#H(){const t=this.#t;if(t===null)return;const e=b(t,this.#n),i=this.#_(this.#e)*e;e>0&&Math.abs(this.#z(t)-i)>.01&&this.#$(t,i)}#x(t=!0){const e=this.functionElement;if(this.#O||!d(e))return;const i=this.#t,s=this.#n==="horizontal",o=s?e.clientWidth:e.clientHeight,r=i===null?0:L(i,this.#n),l=i===null?0:s?i.scrollWidth:i.scrollHeight,[a,N,A]=this.#I;if(!t&&this.#p&&o===a&&r===N&&l===A){this.#B();return}this.#f=s&&H(i??e).direction==="rtl";const m=Math.max(0,o-v*2),F=l>0?c(r/l):1;this.#v=Math.min(m,Math.max(m*F,Math.min(V,m))),this.#y=Math.max(0,m-this.#v),this.#I=[o,r,l],this.#p=!0,super.setStyle("--cw-Scrollbar-thumb-size",`${this.#v}px`),this.#S=-1,this.#B()}#B(){const t=this.#_(this.#e),e=this.#y*(this.#f?1-t:t);Math.abs(e-this.#S)<=.01||(this.#S=e,super.setStyle("--cw-Scrollbar-thumb-offset",`${e}px`))}#G(){this.#C!==null&&(this.#D?.cancelAnimationFrame(this.#C),this.#C=null,this.#D=null)}#V(){if(this.#O||this.#C!==null)return;const t=p(this.functionElement);if(t===void 0){this.#x();return}this.#D=t,this.#C=t.requestAnimationFrame(()=>{this.#C=null,this.#D=null,this.#x()})}#N(t,e,i){const s=this.#k(t);Math.abs(s-this.#e)<y||((!this.#h||i)&&(this.#e=s,super.setAttribute("aria-valuenow",s),i||this.#H(),this.#x(!1)),z([this.props.onValueChange,this.props.onChange],s,e))}#K(t){if(this.#a)return;this.#t===null&&this.#A();const e=this.#n==="horizontal",i=this.#f?"ArrowLeft":"ArrowRight",s=this.#f?"ArrowRight":"ArrowLeft",o=t.key===(e?i:"ArrowDown")?this.#e+this.#r:t.key===(e?s:"ArrowUp")?this.#e-this.#r:t.key==="PageDown"?this.#e+this.#W():t.key==="PageUp"?this.#e-this.#W():t.key==="Home"?this.#i:t.key==="End"?this.#s:void 0;if(o===void 0)return;const r=this.functionElement;B(t,r,()=>{!this.#O&&!this.#a&&this.functionElement===r&&this.#N(o,t,!1)})}#W(){const t=this.#t,e=this.#s-this.#i;if(t!==null){const i=b(t,this.#n),s=L(t,this.#n);if(i>0&&s>0)return s/i*e}return e/10}#U(t){const e=this.functionElement;if(!d(e))return 0;const i=this.#n==="horizontal",s=e.getBoundingClientRect(),o=i?t.clientX-s.left:t.clientY-s.top,r=(i?e.clientWidth:e.clientHeight)-v*2;return Math.min(Math.max(0,o-v),Math.max(0,r))}#X(t){const e=this.#y>0?Math.min(1,Math.max(0,t/this.#y)):0;return this.#i+(this.#f?1-e:e)*(this.#s-this.#i)}#Y(t){const e=this.functionElement;if(this.#a||!t.isPrimary||this.#l!==null||t.button!==0&&!(t.pointerType!=="mouse"&&t.button===-1)||!d(e))return;this.#t===null&&this.#A(),this.#p||this.#x();const i=this.#U(t),s=i>=this.#S&&i<=this.#S+this.#v;this.#c=s?i-this.#S:this.#v/2,!s&&this.#y>0&&this.#N(this.#X(i-this.#c),t,!1);try{e.setPointerCapture(t.pointerId)}catch{this.#c=0;return}this.#l=t.pointerId,t.preventDefault()}#j(t){this.#l!==t.pointerId||this.#a||this.#y<=0||(this.#N(this.#X(this.#U(t)-this.#c),t,!1),t.preventDefault())}#F(){const t=this.functionElement;if(this.#l!==null&&d(t))try{t.hasPointerCapture(this.#l)&&t.releasePointerCapture(this.#l)}catch{}this.#l=null,this.#c=0}#q(t){this.#l===t.pointerId&&this.#F()}#Z(t){this.#l===t.pointerId&&(this.#l=null,this.#c=0)}#Q(t){const e=this.#t;if(e===null)return;const i=b(e,this.#n),s=this.#z(e);if(i===0){this.#N(this.#i,t,!0);return}Math.abs(s-this.#_(this.#e)*i)<1||this.#N(this.#i+s/i*(this.#s-this.#i),t,!0)}#J(){this.#G(),this.#F(),this.#t?.removeEventListener("scroll",this.#b),this.#u?.disconnect(),this.#u=null,this.#m?.disconnect(),this.#m=null,this.#t=null,this.#p=!1}#A(){const t=this.functionElement;if(this.#O||!d(t))return;const e=t.getRootNode();e!==this.#o&&(this.#d(),this.#d=()=>{},this.#o=E(e)?e:null,this.#o!==null&&(this.#d=R(this.#o,this.#w)));const i=P(t,this.props.controls);if(i!==this.#t){if(this.#J(),this.#t=i,i!==null){i.addEventListener("scroll",this.#b,{passive:!0});const s=K(i);s!==void 0&&(this.#u=new s(()=>this.#V()),this.#u.observe(t),this.#u.observe(i));const o=T(i);o!==void 0&&(this.#m=new o(()=>this.#V()),this.#m.observe(i,{attributeFilter:["class","dir","style"],attributes:!0,characterData:!0,childList:!0,subtree:!0}))}this.#x(),this.#H()}}applyComponentProps(){const t=super.readProps(["controls","defaultValue","disabled","label","max","min","orientation","step","value"]);(t.minChanged||t.maxChanged)&&(this.#i=h(t.min,0),this.#s=Math.max(this.#i,h(t.max,S)),super.setAttribute("aria-valuemin",this.#i),super.setAttribute("aria-valuemax",this.#s)),t.stepChanged&&(this.#r=C(t.step,g)),t.orientationChanged&&(this.#F(),this.#n=t.orientation??"vertical",this.#p=!1,super.setClass("orientation",`_cw-Scrollbar-${this.#n}`),super.setAttribute("aria-orientation",this.#n)),t.disabledChanged&&(this.#a=t.disabled===!0,this.#a&&this.#F(),super.setClass("cw-Scrollbar-disabled",this.#a),super.setAttribute("aria-disabled",this.#a?"true":void 0),super.setAttribute("tabindex",this.#a?-1:0)),t.controlsChanged&&!this.#L&&super.setAttribute("aria-controls",t.controls),t.labelChanged&&!this.#T&&super.setAttribute("aria-label",t.label??"Scroll position"),t.valueChanged&&this.#h&&(this.#e=h(t.value,this.#i)),this.#e=this.#k(this.#e),super.setAttribute("aria-valuenow",this.#e),t.controlsChanged&&this.#A(),this.#H(),this.#x(t.orientationChanged||t.minChanged||t.maxChanged)}onStyleElementChanged(t){super.onStyleElementChanged(t),d(t)&&(t.addEventListener("keydown",this.#R),t.addEventListener("lostpointercapture",this.#M),t.addEventListener("pointercancel",this.#g),t.addEventListener("pointerdown",this.#P),t.addEventListener("pointermove",this.#E),t.addEventListener("pointerup",this.#g),queueMicrotask(()=>this.#A()))}onControllerCleanup(){this.#O=!0,this.#J(),this.#d(),this.#d=()=>{},this.#o=null,super.onControllerCleanup()}render(t){const e=<div class="cw-Scrollbar"role="scrollbar"/>;return w(e,t),e}}function j(n,t){const e=t.orientation??"vertical",i=h(t.min,0),s=Math.max(i,h(t.max,S)),o=Math.min(s,Math.max(i,h("value"in t?t.value:t.defaultValue,0))),r=t.disabled===!0;return<div aria-controls={t.controls}aria-label={t.label??"Scroll position"}{...n}aria-disabled={r?"true":void 0}aria-orientation={e}aria-valuemax={s}aria-valuemin={i}aria-valuenow={o}classList={{...n.classList,"cw-Scrollbar":!0,"cw-Scrollbar-disabled":r,[`_cw-Scrollbar-${e}`]:!0}}role="scrollbar"tabIndex={r?-1:0}/>}const D=O(()=>j,()=>Y);class q extends x{constructor(t){super(t,{styleElementIsFunction:!0})}applyComponentProps(){const[t,e]=super.readProp("orientation");e&&super.setClass("orientation",`_cw-ScrollField-${t??"vertical"}`)}render(t){const e=<div class="cw-ScrollField"/>;return w(e,t),e}}function Z(n,t){return<div{...n}classList={{...n.classList,"cw-ScrollField":!0,[`_cw-ScrollField-${t.orientation??"vertical"}`]:!0}}/>}const ot=O(()=>Z,()=>q),lt=D,at=n=><D{...n}orientation={n.orientation??"horizontal"}/>;class ht{#h;#L;#T;#P;#E;#g;#M;#R;#b;#w;#e;#i;#s;#r;#n;#a;#t;#o;#d;#u;#m;constructor(t,e){this.#h=t,this.#L=e.property,this.#T=e.spring,this.#P=e.onOverlapChange??(()=>{}),this.#E=e.onFractionChange??(()=>{}),this.#g=i=>this.#S(i.timeStamp),this.#M=i=>this.#y(i?.timeStamp),this.#R=()=>this.#c(),this.#b=void 0,this.#w=void 0,this.#e=null,this.#i=()=>{},this.#s=0,this.#r=0,this.#n=0,this.#a=!1,this.#t=void 0,this.#o=void 0,this.#d=new k,this.#u=-1/0,this.#m=!1}get fraction(){return this.#t?.playState==="running"?this.#t.value:this.#r}setRange(t){this.#s=Math.max(0,t),this.#e===null&&this.#b!==void 0&&!this.#m&&this.#c()}setFraction(t){this.#t?.cancel(),this.#t=void 0,this.#l(c(t))}animateFraction(t,e=0){const i=c(t),s=this.#t;if(s?.playState==="running"){s.retarget(i),this.#r=i,this.#E(i);return}if(Math.abs(i-this.#r)<y){this.#l(i);return}const o=this.#r,r=I(null,()=>_(this.#h,this.#L,o,i,{...this.#T,velocity:e}));r!==void 0&&(this.#t=r,this.#r=i,this.#E(i),r.finished.then(()=>{this.#t===r&&(this.#t=void 0)},()=>{}))}bind(t,e){this.#m||(this.#b=t,this.#w=e,this.#c(),t!==void 0&&!this.#h.isConnected&&queueMicrotask(()=>{this.#m||this.#c()}))}dispose(){this.#m=!0,this.#f(),this.#i(),this.#i=()=>{},this.#t?.cancel(),this.#t=void 0}#l(t){this.#r=t,this.#h.style.setProperty(this.#L,`${t}`),this.#E(t)}#c(){const t=this.#b,e=this.#w,i=p(this.#h),s=t===void 0||e===void 0?null:P(this.#h,e),o=t===void 0||i===void 0?null:e===void 0?i:s;if(this.#i(),this.#i=()=>{},t!==void 0&&e!==void 0){const r=this.#h.getRootNode();E(r)&&(this.#i=R(r,this.#R))}o!==this.#e&&(this.#f(),this.#e=o,o!==null&&(o.addEventListener("scroll",this.#g,{passive:!0}),o.addEventListener("scrollend",this.#M),this.#n=this.#p(o),this.#v(this.#n>0)))}#f(){this.#e?.removeEventListener("scroll",this.#g),this.#e?.removeEventListener("scrollend",this.#M),this.#e=null,this.#o!==void 0&&clearTimeout(this.#o),this.#o=void 0,this.#d.resetTracking(),this.#u=-1/0}#p(t){return Math.max(0,"scrollY"in t?t.scrollY:t.scrollTop)}#v(t){t!==this.#a&&(this.#a=t,this.#P(t))}#S(t){const e=this.#e,i=this.#b;if(e===null||i===void 0)return;const s=this.#p(e),o=this.#n,r=s-o;if(this.#n=s,this.#v(s>0),i==="pinned"||this.#s<=0||Math.abs(r)<y)return;const l=this.#t;l?.playState==="running"&&(l.cancel(),this.#r=l.value),this.#t=void 0;let a=-c(this.#r)*this.#s;(r>0||i!=="exitUntilCollapsed")&&(a=Math.min(0,Math.max(-this.#s,a-r))),r<0&&s<-a&&(a=s<=0?0:Math.max(a,a*s/o)),this.#l(-a/this.#s),this.#d.addDataPoint(t,-a),this.#u=t,"onscrollend"in e||(this.#o!==void 0&&clearTimeout(this.#o),this.#o=setTimeout(this.#M,W))}#y(t){const e=this.#b,i=this.#r,s=this.#s;if(this.#o=void 0,e===void 0||e==="pinned"||this.#e===null||this.#t?.playState==="running"||s<=0||i<U||i>=1)return;const r=(t??p(this.#h)?.performance.now()??this.#u)-this.#u>X?0:this.#d.calculateVelocity(),l=i+G(r)/s;this.#d.resetTracking(),this.animateFraction(l<.5?0:1,r/s)}}export{ht as BarScrollState,at as HorizontalScrollbar,ot as ScrollField,q as ScrollFieldController,D as Scrollbar,Y as ScrollbarController,lt as VerticalScrollbar,K as resizeObserverOf};
@@ -0,0 +1,29 @@
1
+ import{mergeProps as Q,onMount as z}from"solid-js";import{insert as v}from"solid-js/web";import{defineDomComponent as G}from"..";import{IconButton as U}from"../action/icon-button";import{DomController as W}from"../dom/client";import{Icon as Y}from"../icon";import{observeFormReset as Z}from"../input/base";import{applyMotion as S}from"../motion";import{computedStyleOf as y,dedupeCallbacks as D,deferAfterDelegatedCancellation as g,isDisabledElement as H,isElementNode as C,isTopModalLayer as R,isVisibleElement as F,mutationObserverOf as ee,registerModalLayer as te,resolveNavigationSlots as ne,uniqueId as q}from"./base";import{BarScrollState as se,resizeObserverOf as ie}from"./scroll";import"../container/elevation-shadow.css";import"./navigation.css";const re=["navigationIcon","leadingIcon","trailingIcon","avatar","actions","results"],ae="a[href], button, input, select, textarea, [tabindex]",oe=["aria-disabled","aria-hidden","class","data-value","disabled","hidden","id","inert","role","style"],le={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-accelerate",fill:"backwards",startDelay:"--cw-Motion-transition-duration-short-1"},de={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-decelerate",fill:"forwards"},ue={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-decelerate"},ce={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-accelerate",fill:"forwards"},B=["inset(0px round 0px)","0px 0px","1","0px","1"];function N(o,e){const t=o.getBoundingClientRect(),n=y(o);return n.direction==="rtl"?t.right-parseFloat(n.paddingRight)-e.right:t.left+parseFloat(n.paddingLeft)-e.left}function he(o,e){const t=o.getBoundingClientRect();return{bounds:t,text:N(e,t)}}function pe(o){const e=/^linear\((.*)\)$/u.exec(o)?.[1]?.split(","),t=[];let n=-1/0;if(e===void 0)return[o,1];e.forEach((d,c)=>{const h=d.trim().split(/\s+/u),f=Number(h.find(b=>!b.endsWith("%"))),x=h.filter(b=>b.endsWith("%"));for(const b of x)n=Math.max(n,parseFloat(b)/100),t.push([n,f]);x.length===0&&(t.push([c===0?0:c===e.length-1?Math.max(1,n):void 0,f]),c===0&&(n=0))});for(let d=1;d<t.length;d++){const c=t[d-1][0];let h=d;for(;t[h][0]===void 0;)h++;for(let f=d;f<h;f++)t[f][0]=c+(t[h][0]-c)*(f-d+1)/(h-d+1);d=h}const s=t.findIndex(([,d])=>d>=1);if(s<=0)return[o,1];const[i,a]=t[s-1],[r,l]=t[s],u=i+(r-i)*(1-a)/(l-a),p=t.slice(0,s).map(([d,c])=>`${c} ${d*100}%`);return u>=1?[o,1]:[`linear(${p.join(", ")}, 1 ${u*100}%, 1)`,u]}function _(o,e){const t=q("cw-search-input"),n=q("cw-search-results");return{generatedInputId:t,generatedResultsId:n,inputId:o??t,resultsId:e??n}}function P(o){return<U attr:aria-label={o}size="sm">
2
+ <Y autoMirror name="arrow_back"/>
3
+ </U>}function fe(o,e,t,n){const s=("query"in n?n.query:n.defaultQuery)??"",i=("expanded"in n?n.expanded:n.defaultExpanded)===!0,a=n.actionsPlacement==="inside",r=_(n.inputId,n.resultsId);return<search{...t}classList={{...t.classList,"cw-SearchBar":!0,[o]:!0,"cw-SearchBar-disabled":n.disabled===!0,"cw-SearchBar-expanded":i,"_cw-SearchBar-textCentered":n.textCentered===!0}}data-cw-app-bar-scrolled={n.scrolled===!0?"true":void 0}data-cw-search-design={n.design??"contained"}data-cw-search-expanded={i?"true":"false"}data-cw-search-expansion={n.expansion??e}role="search">
4
+ <span class="cw-SearchAppBar-navigation">{n.navigationIcon}</span>
5
+ <div class="cw-SearchBar-container cw-elevationShadow">
6
+ <div class="cw-SearchBar-header">
7
+ <span class="cw-SearchBar-back">{P(n.backLabel??"Close search")}</span>
8
+ <span class="cw-SearchBar-leading">{n.leadingIcon}</span>
9
+ <input aria-autocomplete="list"aria-controls={r.resultsId}aria-expanded={i?"true":"false"}aria-label={n.inputLabel??"Search"}autocomplete={n.inputAutoComplete}class="cw-SearchBar-input"disabled={n.disabled===!0}form={n.inputForm}id={r.inputId}name={n.inputName}placeholder={n.placeholder}readOnly={n.readOnly===!0}required={n.inputRequired===!0}role="combobox"type="search"value={s}/>
10
+ <span class="cw-SearchBar-trailing">{a?n.actions:n.trailingIcon}</span>
11
+ <span class="cw-SearchBar-avatar">{n.avatar}</span>
12
+ </div>
13
+ <div aria-label={n.resultsLabel??"Search results"}class="cw-SearchBar-results cw-elevationShadow"hidden={!i}id={r.resultsId}role="listbox">{n.results??t.children}</div>
14
+ </div>
15
+ <span class="cw-SearchAppBar-actions">{a?void 0:n.actions}</span>
16
+ </search>}class me extends W{#M;#F;#d;#v;#y;#u;#I;#i;#e;#E;#n;#t;#a;#f;#w;#T;#s;#m;#S;#r;#c;#h;#C;#B;#x;#L;#g;#O;#k;#D;#o;#q;#$;#N;#_;#P;#V;#A;#H;constructor(e,t,n){super(e,{styleElementIsFunction:!0}),this.#M=t,this.#F=n,this.#d="query"in e,this.#v="expanded"in e,this.#y={inputId:"",resultsId:""},this.#u="",this.#I=new WeakMap,this.#i=(this.#d?e.query:e.defaultQuery)??"",this.#e=(this.#v?e.expanded:e.defaultExpanded)===!0,this.#E=e.expansion??n,this.#n=null,this.#t=null,this.#a=null,this.#f=null,this.#w=null,this.#T=null,this.#s=null,this.#m=null,this.#S=()=>{},this.#r=null,this.#c=null,this.#h=[],this.#C=0,this.#B=null,this.#x=!1,this.#L=null,this.#g=null,this.#O=void 0,this.#k=!1,this.#D=!1,this.#o=!1,this.#q=s=>this.#ee(s),this.#$=s=>this.#te(s),this.#N=s=>this.#se(s),this.#_=s=>this.#ie(s),this.#P=s=>this.#re(s),this.#V=s=>s.preventDefault(),this.#A=s=>{const i=this.styleElement;this.#e&&i!==null&&!s.composedPath().includes(i)&&g(s,i,()=>this.#l(!1,s),!1)},this.#H=s=>{const i=this.#a;i!==null&&this.#r!==null&&R(i)&&!s.composedPath().includes(i)&&this.#t?.focus()},z(()=>{const s=this.#t;s!==null&&this.#U(s)})}#X(){const e=this.#s;return e===null?[]:Array.from(e.querySelectorAll("[role=option]")).filter(t=>t.closest("[role=listbox]")===e)}#p(e,t){return!H(e)&&e.getAttribute("aria-hidden")!=="true"&&F(e,t)}#j(){const e=new Map;return this.#X().filter(t=>this.#p(t,e))}#R(){const e=this.#t,t=this.#n;t!==null&&(!t.isConnected||!this.#p(t)||t.closest("[role=listbox]")!==this.#s)&&(this.#n=null),this.#X().forEach((n,s)=>{const i=this.#I.get(n),a=n===this.#n?"true":"false";if(n.id===""||n.id===i){const r=`${this.#u}-option-${s}`;n.id!==r&&(n.id=r),this.#I.set(n,r)}n.getAttribute("aria-selected")!==a&&n.setAttribute("aria-selected",a)}),e!==null&&(this.#n===null||!this.#e?e.removeAttribute("aria-activedescendant"):e.setAttribute("aria-activedescendant",this.#n.id))}#b(){const e=this.#t,t=this.#s;e===null||t===null||(super.setClass("cw-SearchBar-expanded",this.#e),super.setClass("cw-SearchBar-disabled",e.disabled),super.setAttribute("data-cw-search-expanded",this.#e?"true":"false"),e.setAttribute("aria-expanded",this.#e?"true":"false"),e.value!==this.#i&&(e.value=this.#i),t.hidden=!this.#e&&this.#c===null,this.#R(),this.#J())}#J(){const e=this.styleElement;if(!C(e)||!e.isConnected)return;const t=e.ownerDocument,n=this.#e&&this.#E==="fullscreen";this.#e?t.addEventListener("pointerdown",this.#A):t.removeEventListener("pointerdown",this.#A),n&&this.#r===null?this.#Z():!n&&this.#r!==null&&this.#z(!this.#e)}#Y(){const e=this.#B;this.#B=null,!(e?.isConnected!==!0||e===e.ownerDocument.activeElement)&&(this.#x=!0,e.focus(),this.#x=!1)}#K(){const e=this.#a,t=this.#f,n=this.#s,s=this.#t,i=this.#w,a=e===null||t===null||n===null||s===null||i===null||this.#h.every(r=>r.playState==="finished")?void 0:[y(e).clipPath.replace(/^none$/u,B[0]),y(t).translate.replace(/^none$/u,B[1]),y(n).opacity,y(s).translate.replace(/^none$/u,B[3]),y(i).opacity];for(const r of this.#h)r.cancel();return this.#h=[],super.setClass("_cw-SearchBar-morphing",!1),a}#Q(e,t){const n=this.#a,s=this.#f,i=this.#t,a=this.#w,r=this.#s;if(n===null||s===null||i===null||a===null||r===null)return Promise.resolve();const l=y(n),u=this.props.design!=="divided",p=u?"fast":t?"slow":"default",[d,c]=pe(l.getPropertyValue(`--cw-Motion-spring-spatial-${p}-easing`).trim()),h={duration:`--cw-Motion-spring-spatial-${p}-duration`,easing:d,fill:t?"none":"forwards",iterations:c},f=u?t?le:de:h,x=this.#T?.matches(":empty")===!1,b=this.#K(),{bounds:m}=e,L=n.getBoundingClientRect(),A=s.getBoundingClientRect(),T=i.getBoundingClientRect(),V=l.direction==="rtl"?m.right-A.right:m.left-A.left,X=`inset(${m.top-L.top}px ${L.right-m.right}px ${L.bottom-m.bottom}px ${m.left-L.left}px round ${m.height/2}px)`,J=`${V}px ${m.top+(m.height-T.height)/2-T.top}px`,O=[X,J,"0",`${e.text-N(i,A)}px`,x?"1":"0"],E=b??(t?O:B),w=t?B:O,k=S(s,[{translate:E[1]},{translate:w[1]}],h),M=[S(n,[{clipPath:E[0]},{clipPath:w[0]}],h),k,S(r,[{opacity:E[2]},{opacity:w[2]}],f),S(i,[{translate:E[3]},{translate:w[3]}],h),S(a,[{opacity:E[4]},{opacity:w[4]}],t?ue:ce)];return this.#h=M,super.setClass("_cw-SearchBar-morphing",!0),t&&k.finished.then(()=>{this.#h===M&&super.setClass("_cw-SearchBar-morphing",!1)},()=>{}),Promise.allSettled(M.map(K=>K.finished))}#Z(){const e=this.styleElement,t=this.#a,n=this.#t;if(!C(e)||t===null||n===null)return;const s=e.ownerDocument,i=this.#c??he(t,n);this.#C++,this.#c=i,this.#B??=s.activeElement,super.setAttribute("data-cw-search-view","true"),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),t.setAttribute("aria-label",this.props.inputLabel??"Search"),typeof t.showPopover=="function"&&(t.setAttribute("popover","manual"),t.showPopover()),this.#r=te(t),s.addEventListener("focusin",this.#H),n.focus(),this.#Q(i,!0)}#z(e){const t=this.#a,n=this.#s,s=this.#c,i=++this.#C;this.#r?.(),this.#r=null,this.styleElement?.ownerDocument.removeEventListener("focusin",this.#H);const a=()=>{i===this.#C&&(this.#K(),t?.hasAttribute("popover")===!0&&(t.hidePopover?.(),t.removeAttribute("popover")),t?.removeAttribute("role"),t?.removeAttribute("aria-modal"),t?.removeAttribute("aria-label"),super.setAttribute("data-cw-search-view",void 0),this.#c=null,n!==null&&(n.hidden=!this.#e),this.#Y())};e&&s!==null&&!this.#o?this.#Q(s,!1).then(a):a()}#l(e,t){this.#o||e===this.#e||(this.#v||(e||(this.#n=null),this.#e=e,this.#b()),this.props.onExpandedChange?.(e,t))}#ee(e){const t=this.#t;t===null||t.disabled||t.readOnly||(this.#n=null,this.#i=t.value,this.#l(!0,e),D([this.props.onQueryChange,this.props.onChange],this.#i,e),this.#d&&(this.#i=this.props.query??""),this.#b())}#te(e){if(e.isComposing||e.keyCode===229)return;const t=this.styleElement,n=this.#t,s=this.#a;if(t===null||n===null||n.disabled||this.#r!==null&&s!==null&&!R(s))return;if(e.key==="Escape"&&this.#e){g(e,t,()=>this.#l(!1,e));return}if(e.key==="Tab"&&this.#r!==null&&s!==null){const a=new Map,r=Array.from(s.querySelectorAll(ae)).filter(u=>u.tabIndex>=0&&!H(u)&&F(u,a)),l=r.indexOf(t.ownerDocument.activeElement);(e.shiftKey?l<=0:l===r.length-1)&&g(e,t,()=>r.at(e.shiftKey?-1:0)?.focus());return}if(e.target!==n)return;if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(this.#s?.querySelector("[role=option]")===null)return;g(e,t,()=>this.#ne(e,n));return}if(e.key!=="Enter")return;const i=this.#n;!n.readOnly&&this.#e&&i!==null&&this.#p(i)?g(e,t,()=>{!this.#o&&this.#p(i)&&this.#G(i,e)}):g(e,t,()=>{!this.#o&&this.#t===n&&this.props.onSearch?.(n.value,e)},!1)}#ne(e,t){if(this.#o||this.#t!==t||t.disabled||!this.#e&&(this.#l(!0,e),!this.#e))return;const n=this.#j();if(n.length===0)return;const s=this.#n===null?-1:n.indexOf(this.#n),i=n.length-1,a=s<0?e.key==="ArrowDown"?0:i:e.key==="ArrowDown"?(s+1)%n.length:(s+i)%n.length,r=n[a],l=this.#s,u=r.offsetTop,p=u+r.offsetHeight;this.#n=r,this.#R(),u<l.scrollTop?l.scrollTop=u:p>l.scrollTop+l.clientHeight&&(l.scrollTop=p-l.clientHeight)}#G(e,t){const n=this.#t;if(n===null||n.disabled||n.readOnly)return;const s=e.dataset.value??e.textContent?.trim()??"";this.#i=s,this.#n=null,D([this.props.onQueryChange,this.props.onChange],s,t),this.#d&&(this.#i=this.props.query??""),this.#b(),this.#l(!1,t),this.props.onSearch?.(s,t)}#se(e){const t=this.styleElement,n=e.target;if(t===null||!C(n))return;if(n.closest(".cw-SearchBar-back")!==null){g(e,t,()=>this.#l(!1,e));return}const s=n.closest("[role=option]");if(s!==null&&s.closest("[role=listbox]")===this.#s&&this.#p(s)){g(e,t,()=>{!this.#o&&this.#p(s)&&this.#G(s,e)});return}n===this.#t&&!this.#e&&!this.#t.disabled&&g(e,t,()=>this.#l(!0,e),!1)}#ie(e){!this.#x&&this.props.openOnFocus===!0&&!this.#e&&this.#l(!0,e)}#re(e){const t=this.styleElement,n=e.relatedTarget;t!==null&&this.#e&&this.#r===null&&C(n)&&!t.contains(n)&&this.#l(!1,e)}#U(e){this.#S(),this.#S=Z(e,()=>this.#ae())}#ae(){const e=this.#t;e!==null&&(this.#i=this.#d?this.props.query??"":e.defaultValue,this.#n=null,this.#b())}#W(){const e=this.#O??this.#k;super.setAttribute("data-cw-app-bar-scrolled",e?"true":void 0)}applyComponentProps(){const e=super.readProps(["actionsPlacement","backLabel","defaultExpanded","defaultQuery","design","disabled","expanded","expansion","inputAutoComplete","inputForm","inputId","inputLabel","inputName","inputRequired","placeholder","query","readOnly","resultsId","resultsLabel","scrollBehavior","scrollTarget","scrolled","textCentered"]),t=this.#t,n=this.#s;t===null||n===null||(e.designChanged&&super.setAttribute("data-cw-search-design",e.design??"contained"),e.textCenteredChanged&&super.setClass("_cw-SearchBar-textCentered",e.textCentered===!0),e.expansionChanged&&(this.#E=e.expansion??this.#F,super.setAttribute("data-cw-search-expansion",this.#E)),e.actionsPlacementChanged&&super.setAttribute("data-cw-actions-placement",e.actionsPlacement??"outside"),e.backLabelChanged&&this.#f?.querySelector(".cw-SearchBar-back button")?.setAttribute("aria-label",e.backLabel??"Close search"),e.queryChanged&&this.#d&&(this.#i=e.query??"",t.defaultValue=this.#i),e.expandedChanged&&this.#v&&(this.#e=e.expanded===!0,this.#e||(this.#n=null)),this.#D||(this.#D=!0,this.#d||(t.defaultValue=this.#i)),e.inputLabelChanged&&(t.setAttribute("aria-label",e.inputLabel??"Search"),this.#r!==null&&this.#a?.setAttribute("aria-label",e.inputLabel??"Search")),e.inputAutoCompleteChanged&&$(t,"autocomplete",e.inputAutoComplete),e.inputFormChanged&&$(t,"form",e.inputForm),e.inputNameChanged&&(t.name=e.inputName??""),e.inputRequiredChanged&&(t.required=e.inputRequired===!0),e.disabledChanged&&(t.disabled=e.disabled===!0),e.readOnlyChanged&&(t.readOnly=e.readOnly===!0),e.placeholderChanged&&(t.placeholder=e.placeholder??""),e.inputIdChanged&&(t.id=e.inputId??this.#y.inputId),e.resultsIdChanged&&(this.#u=e.resultsId??this.#y.resultsId,n.id=this.#u,t.setAttribute("aria-controls",this.#u)),e.resultsLabelChanged&&n.setAttribute("aria-label",e.resultsLabel??"Search results"),e.scrolledChanged&&(this.#O=e.scrolled,this.#W()),(e.scrollBehaviorChanged||e.scrollTargetChanged)&&this.#L?.bind(e.scrollBehavior,e.scrollTarget),this.#b())}onStyleElementChanged(e){super.onStyleElementChanged(e);const t=this.#t,n=this.#s;if(!C(e)||t===null||n===null)return;e.addEventListener("click",this.#N),e.addEventListener("focusout",this.#P),e.addEventListener("keydown",this.#$),t.addEventListener("focus",this.#_),t.addEventListener("input",this.#q),n.addEventListener("mousedown",this.#V),this.#U(t);const s=ee(n);if(s!==void 0&&(this.#m=new s(()=>this.#R()),this.#m.observe(n,{attributeFilter:oe,attributes:!0,childList:!0,subtree:!0})),this.#M==="cw-SearchAppBar"){const i=new se(e,{property:"--cw-SearchAppBar-scroll-progress",spring:{role:"effect",speed:"default"},onOverlapChange:r=>{this.#k=r,this.#W()}}),a=ie(e);this.#L=i,a!==void 0&&(this.#g=new a(r=>{for(const l of r)i.setRange(l.borderBoxSize[0]?.blockSize??l.contentRect.height)}),this.#g.observe(e))}queueMicrotask(()=>{this.#o||this.#J()})}onControllerCleanup(){this.#o=!0,this.#z(!1),this.styleElement?.ownerDocument.removeEventListener("pointerdown",this.#A),this.#m?.disconnect(),this.#m=null,this.#g?.disconnect(),this.#g=null,this.#L?.dispose(),this.#S(),super.onControllerCleanup()}render(e){let t,n,s,i,a,r,l,u,p,d;const c=_(this.props.inputId,this.props.resultsId),h=<search class={`cw-SearchBar ${this.#M}`}role="search">
17
+ <span class="cw-SearchAppBar-navigation"ref={t}/>
18
+ <div class="cw-SearchBar-container cw-elevationShadow"ref={n}>
19
+ <div class="cw-SearchBar-header"ref={s}>
20
+ <span class="cw-SearchBar-back"ref={i}/>
21
+ <span class="cw-SearchBar-leading"ref={a}/>
22
+ <input aria-autocomplete="list"class="cw-SearchBar-input"ref={r}role="combobox"type="search"/>
23
+ <span class="cw-SearchBar-trailing"ref={l}/>
24
+ <span class="cw-SearchBar-avatar"ref={u}/>
25
+ </div>
26
+ <div class="cw-SearchBar-results cw-elevationShadow"ref={p}role="listbox"/>
27
+ </div>
28
+ <span class="cw-SearchAppBar-actions"ref={d}/>
29
+ </search>;return this.#y={inputId:c.generatedInputId,resultsId:c.generatedResultsId},this.#u=c.resultsId,this.#t=r,this.#a=n,this.#f=s,this.#w=i,this.#T=a,this.#s=p,r.id=c.inputId,r.setAttribute("aria-controls",c.resultsId),p.id=c.resultsId,v(t,()=>this.props.navigationIcon),v(i,P(this.props.backLabel??"Close search")),v(a,()=>this.props.leadingIcon),v(l,()=>this.props.actionsPlacement==="inside"?this.props.actions:this.props.trailingIcon),v(u,()=>this.props.avatar),v(p,()=>this.props.results??e),v(d,()=>this.props.actionsPlacement==="inside"?void 0:this.props.actions),h}}function $(o,e,t){t===void 0?o.removeAttribute(e):o.setAttribute(e,t)}function I(o,e){const t=G(()=>(n,s)=>fe(o,e,n,s),()=>class extends me{constructor(n){super(n,o,e)}});return n=>t(ne(n,void 0,re))}const ge=I("cw-SearchBar","docked"),Ie=I("cw-DockedSearchBar","docked"),Te=o=>{const e=Q({expansion:"fullscreen"},o);return ge(e)},Oe=I("cw-SearchAppBar","fullscreen");export{Ie as DockedSearchBar,Oe as SearchAppBar,ge as SearchBar,me as SearchBarController,Te as SearchView};
@@ -0,0 +1,7 @@
1
+ import{createComponent as w,createContext as Y,createMemo as oe,mergeProps as G,splitProps as Q,untrack as f,useContext as h}from"solid-js";import{escape as de,isServer as g,ssr as X}from"solid-js/web";import{defineDomComponent as D}from"..";import{DomController as O}from"../dom/client";import{applySpringMotion as F}from"../motion";import{FocusState as ue,HoverState as ce,PressState as he,defineInteractableComponent as fe}from"../state";import{InteractableController as be}from"../state/controller";import{computedStyleOf as pe,dedupeCallbacks as Z,deferAfterDelegatedCancellation as V,isAnchorElement as H,isDisabledElement as L,isElementNode as $,isVisibleElement as ve,mutationObserverOf as ee,ownerWindow as me,preventDisabledLinkKey as Te,resolveNavigationSlots as ge,selectedValueOf as M,uniqueId as A,unreachableServerRender as I}from"./base";import"./navigation.css";const y="cw-TabList",P="[role=tab]",te="cw-Tab-selected",ne="cw-Tab-disabled",B="data-cw-tab-value",Ee="data-cw-tab-variant",K="data-cw-tab-scrollable",ye="data-cw-tab-icon-placement",x="data-cw-tabs-link",k="data-cw-tab-fallback",U=ue|ce|he,z="--_CW-TAB-INDICATOR_SHIFT",q="--_CW-TAB-INDICATOR_STRETCH",Se=new RegExp(["<!--[\\s\\S]*?-->",`<(script|style|textarea|title)\\b(?:[^>"']|"[^"]*"|'[^']*')*>[\\s\\S]*?<\\/\\1\\s*>`,`<(?:[^>"']|"[^"]*"|'[^']*')*>`].join("|"),"gi"),Ce=/^<(?:a|button|div)\s/i,N=/\s+([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;let Le=0;const p=Y(),S=Y();function ie(s){return`${s}-${++Le}`}function R(s,e){if(s===null||e===null||s===e)return 0;const t=s.compareDocumentPosition(e);return(t&1)!==0?0:(t&4)!==0?-1:(t&2)!==0?1:0}function j(s){const e=new Map;for(const t of s){const n=t.value(),i=n===void 0?void 0:e.get(n);i!==void 0?i.push(t):n!==void 0&&e.set(n,[t])}return e}function se(s,e){const t=new Map(s.map(o=>[o.id(),o])),n=new Map(e.map(o=>[o.id(),o])),i=new Map,l=new Set;for(const o of s){const r=n.get(o.explicitPanelId()??"");r!==void 0&&!l.has(r)&&(i.set(o,r),l.add(r))}for(const o of e){const r=t.get(o.explicitTabId()??"");r!==void 0&&!i.has(r)&&!l.has(o)&&(i.set(r,o),l.add(o))}const a=j(e.filter(o=>!l.has(o)));for(const[o,r]of j(s.filter(u=>!i.has(u))))r.forEach((u,d)=>{const c=a.get(o)?.[d];c!==void 0&&i.set(u,c)});return i}class C{#e;#n;#t;#s;#i;#d;#l;constructor(){this.#e=[],this.#n=[],this.#t=new Map,this.#s=null,this.#i=null,this.#d=!1,this.#l=!1}attach(e){const t=e===null?void 0:ee(e);this.#s?.disconnect(),this.#s=null,!(e===null||t===void 0)&&(this.#s=new t(()=>this.invalidate()),this.#s.observe(e,{childList:!0,subtree:!0}))}addTab(e){return this.#e.push(e),this.#a(),()=>{this.#e.splice(this.#e.indexOf(e),1),this.#t.delete(e),this.#i===e&&(this.#i=null),this.invalidate()}}addPanel(e){return this.#n.push(e),this.#a(),()=>{this.#n.splice(this.#n.indexOf(e),1),this.invalidate()}}select(e){if(this.#d&&e===this.#i)return;const t=this.#i===null?void 0:this.#u(this.#i),n=e===null?void 0:this.#u(e);if(this.#i=e,!this.#d){this.#d=!0;for(const i of this.#n)i.show(i===n);return}t!==n&&(t?.show(!1),n?.show(!0))}invalidate(){this.#l||(this.#l=!0,queueMicrotask(()=>{this.#l=!1,this.#r([...this.#e].sort((e,t)=>R(e.element(),t.element())),[...this.#n].sort((e,t)=>R(e.element(),t.element()))),this.#s?.takeRecords()}))}#u(e){const t=e.element()?.getAttribute("aria-controls");return this.#t.get(e)??(t==null?void 0:this.#n.find(n=>n.id()===t))}#a(){this.#r(this.#e,this.#n)}#r(e,t){const n=se(e,t),i=new Map(Array.from(n,([l,a])=>[a,l]));this.#t.clear();for(const l of e){const a=n.get(l);a!==void 0&&this.#t.set(l,a),l.link(a??null)}for(const l of t)l.link(i.get(l)??null);if(this.#d){const l=this.#i===null?void 0:this.#u(this.#i);for(const a of t)a.show(a===l)}}}class _{#e;#n;#t;#s;onChange;constructor(){this.#e=new Set,this.#n=new Map,this.#t=new Map,this.#s=!1,this.onChange=()=>{}}add(e){return this.#e.add(e),this.invalidate(),()=>{this.#e.delete(e),this.invalidate()}}invalidate(){this.#s=!0,this.onChange()}get(e){return this.#i(),this.#n.get(e)}withValue(e){return this.#i(),this.#t.get(e)??[]}#i(){if(this.#s){this.#s=!1,this.#n.clear(),this.#t.clear();for(const e of this.#e){const t=e.element(),n=e.value(),i=n===void 0?void 0:this.#t.get(n);t!==null&&this.#n.set(t,e),i!==void 0?i.push(e):n!==void 0&&this.#t.set(n,[e])}}}}class we extends O{#e;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(p);this.#e=t instanceof C?t:void 0}applyComponentProps(){}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#e?.attach(e)}onControllerCleanup(){this.#e?.attach(null),super.onControllerCleanup()}render(e){return<div class="cw-Tabs">{e}</div>}}function ae(s,e){const t=X(["",""],de(s)).t;return X(t.replace(Se,n=>Ce.test(n)?e(n):n))}function W(s,e){const t=e.replaceAll("&","&amp;").replaceAll('"',"&quot;").replaceAll("<","&lt;").replaceAll(">","&gt;");return e===""?` ${s}`:` ${s}="${t}"`}function le(s,e){const t=new Set,n=s.replace(N,(l,a)=>{const o=a.toLowerCase(),r=e[o];return t.add(o),r===void 0?l:r===null?"":W(a,r)}),i=Object.entries(e).filter(([l,a])=>typeof a=="string"&&!t.has(l)).map(([l,a])=>W(l,a)).join("");return i===""?n:n.replace(/\s*(\/?)>$/,`${i}$1>`)}function Ae(s,e){if(e.links.size===0)return s;const t=se(e.tabs,e.panels),n=new Map(Array.from(t,([a,o])=>[o,a])),i=e.selected,l=i===void 0?void 0:t.get(i)??e.panels.find(a=>a.id()===i.controls);return ae(s,a=>{const o=Array.from(a.matchAll(N)).find(d=>d[1]===x)?.[2],r=o===void 0?void 0:e.links.get(o);if(r===void 0)return a;const u={[x]:null};return r.panel?r.reference&&(u["aria-labelledby"]=n.get(r)?.id()??null):u["aria-controls"]=t.get(r)?.id()??null,r.panel&&e.selection!==void 0&&(u["aria-hidden"]=r===l?"false":"true",u.hidden=r===l?null:""),le(a,u)})}function Ie(s){const e=h(p),[t,n]=Q(s,["children","class","classList"]);return Ae(<div{...n}class={t.class}classList={{...t.classList,"cw-Tabs":!0}}>{t.children}</div>,e)}const Pe=D(g?()=>Ie:I,()=>we),Ye=s=>w(p.Provider,{value:g?{prefix:ie("cw-tabs"),tabs:[],panels:[],links:new Map,selection:void 0,selected:void 0}:new C,get children(){return w(Pe,s)}});class He extends O{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;#b;#f;#g;#p;#v;#T;#c;#S;#E;#y;#m;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(S),n=h(p);this.#e="value"in e||"selectedValue"in e,this.#n="attr:aria-orientation"in e,this.#t=t instanceof _?t:void 0,this.#s=n instanceof C?n:void 0,this.#i=i=>this.#_(i),this.#d=i=>this.#V(i),this.#l=i=>this.#J(i),this.#u=i=>this.#X(i),this.#a=null,this.#r=f(()=>M(e)),this.#h=!this.#e&&this.#r!==void 0,this.#o=null,this.#b=null,this.#f=null,this.#g="primary",this.#p="horizontal",this.#v="automatic",this.#T=null,this.#c=null,this.#S=!1,this.#E=!1,this.#y=!1,this.#m=null,this.#t!==void 0&&(this.#t.onChange=()=>this.#x())}#L(){const e=super.styleElement,t=this.#t;return e===null||t===void 0?[]:Array.from(e.querySelectorAll(P)).filter(n=>n.closest(`.${y}`)===e).map(n=>t.get(n)).filter(n=>n!==void 0)}#C(e){const t=super.styleElement,n=e.element();return t!==null&&n!==null&&t.contains(n)&&!L(n)}#I(e){const t=e.element()?.closest("[hidden], [inert]")??null;return this.#C(e)&&(t===null||t.contains(super.styleElement))}#x(){this.#E||(this.#E=!0,queueMicrotask(()=>{this.#E=!1,this.#P(!1)}))}#O(){const e=this.#o,t=this.#r;if(!this.#e&&e!==null&&e.value()===t&&this.#C(e))return e;if(t!==void 0){const n=(this.#t?.withValue(t)??[]).filter(i=>this.#C(i)).sort((i,l)=>R(i.element(),l.element()))[0];if(n!==void 0||this.#e||this.#h)return n??null}else if(this.#e)return null;return this.#L().find(n=>this.#C(n))??null}#P(e){const t=this.#O();t!==null&&(this.#h=!1,this.#e||(this.#r=t.value())),this.#k(t,e),this.#s?.select(t),this.#w(),this.#a?.takeRecords()}#k(e,t){const n=this.#o;if(n!==e){if(n?.select(!1),e?.select(!0),this.#o=e,this.#s?.select(e),!t){this.#A();return}this.#B(n,e),e!==null&&this.#N(e)}}#w(){const e=this.#f,t=this.#o,n=e!==null&&this.#I(e)?e:t!==null&&this.#I(t)?t:this.#L().find(i=>this.#I(i))??null;n!==this.#b&&(this.#b?.stop(!1),n?.stop(!0),this.#b=n)}#B(e,t){const n=this.#R(e),i=this.#R(t),l=t?.element()??null,a=this.#m,[o,r]=a!==null&&a.elem===e?.element()?a.springs:[null,null];if(this.#A(),n===null||i===null||l===null||!n.isConnected||!i.isConnected)return;const u=n.getBoundingClientRect(),d=i.getBoundingClientRect(),c=u.width/d.width;if(d.width===0)return;const b=[F(l,z,u.left+(o?.value??0)-d.left,0,{unit:"px",velocity:o?.velocity??0}),F(l,q,(r?.value??1)*c,1,{velocity:(r?.velocity??0)*c})],v={elem:l,springs:b};this.#m=v,Promise.all(b.map(m=>m.finished)).then(()=>{this.#m===v&&this.#A()},()=>{})}#R(e){return e===null?null:this.#g==="secondary"?e.element():e.content()}#A(){const e=this.#m;if(this.#m=null,e!==null){for(const t of e.springs)t.cancel();e.elem.style.removeProperty(z),e.elem.style.removeProperty(q)}}#N(e){const t=super.styleElement,n=e.element(),i=me(t);if(t===null||n===null||i===void 0||!t.hasAttribute(K)||!t.isConnected)return;const l=t.getBoundingClientRect(),a=n.getBoundingClientRect(),o=i.matchMedia("(prefers-reduced-motion: reduce)").matches,r=l.left+t.clientLeft+t.clientWidth/2;t.scrollBy({behavior:o?"instant":"smooth",left:a.left+a.width/2-r})}#D(e,t){const n=e.value();this.#C(e)&&(this.#e||(this.#r=n,this.#h=!1,this.#k(e,!0),this.#w()),n!==void 0&&Z([this.props.onChange,this.props.onValueChange,this.props.onSelectedChange],n,t))}#H(e,t,n){const i=super.styleElement,l=e.element();V(t,i,()=>{i!==null&&super.styleElement===i&&i.isConnected&&l!==null&&i.contains(l)&&this.#D(e,t)},n)}#M(e){const t=super.styleElement,n=$(e)?e.closest(P):null,i=n===null?void 0:this.#t?.get(n);return n===null||i===void 0||n.closest(`.${y}`)!==t?void 0:[n,i]}#_(e){const t=this.#M(e.target);if(t===void 0)return;const[n,i]=t,l=n===this.#c||this.#v==="automatic"&&n===this.#T;if(this.#c=null,this.#T=null,L(n)){H(n)&&e.preventDefault();return}l||this.#H(i,e,!1)}#J(e){const t=this.#M(e.target);if(t===void 0)return;const[n,i]=t;this.#f=i,this.#w(),this.#v==="automatic"&&!this.#S&&i!==this.#o&&(this.#T=n,this.#H(i,e,!1))}#X(e){const t=super.styleElement,n=e.relatedTarget;t!==null&&$(n)&&t.contains(n)||(this.#f=null,this.#w())}#F(e,t,n){const i=super.styleElement,l=this.#p==="horizontal",a=l&&i!==null&&pe(i).direction==="rtl",o=l?a?"ArrowLeft":"ArrowRight":"ArrowDown",r=l?a?"ArrowRight":"ArrowLeft":"ArrowUp",u=new Map,d=e.length,[c,b]=n==="Home"?[-1,1]:n==="End"?[d,-1]:n===o?[t,1]:n===r?[t,-1]:[0,0],v=n!=="Home"&&n!=="End";for(let m=1;b!==0&&m<=d;m++){const E=c+b*m,T=e[v?(E%d+d)%d:E];if(T===void 0)break;if(!L(T)&&ve(T,u))return e.indexOf(T)}return-1}#V(e){const t=super.styleElement,n=this.#M(e.target);if(t===null||n===void 0)return;const[i,l]=n;if(e.key==="Enter"||e.key===" "){if(this.#v!=="manual"||L(i))return;const d=H(i)&&e.key==="Enter";d&&(this.#c=i),this.#H(l,e,!d);return}const a=Array.from(t.querySelectorAll(P)).filter(d=>d.closest(`.${y}`)===t),o=this.#F(a,a.indexOf(i),e.key),r=a[o],u=r===void 0?void 0:this.#t?.get(r);r===void 0||u===void 0||V(e,t,()=>{if(!(super.styleElement!==t||!t.isConnected||!t.contains(r))){this.#S=!0;try{r.focus()}finally{this.#S=!1}this.#v==="automatic"&&this.#D(u,e)}})}applyComponentProps(){const e=super.readProps(["activation","activationMode","orientation","scrollable","selectedValue","value","variant"]);e.variantChanged&&(this.#g=e.variant??"primary",super.setAttribute(Ee,this.#g)),e.scrollableChanged&&super.setAttribute(K,e.scrollable===!0?"true":void 0),e.orientationChanged&&(this.#p=e.orientation??"horizontal",super.setClass("orientation",`_cw-TabList-${this.#p}`),this.#n||super.setAttribute("aria-orientation",this.#p==="vertical"?"vertical":void 0)),(e.activationModeChanged||e.activationChanged)&&(this.#v=e.activationMode??e.activation??"automatic"),(e.valueChanged||e.selectedValueChanged)&&this.#e?(this.#r=M(e),this.#P(this.#y)):this.#P(!1),this.#y=!0}onStyleElementChanged(e){const t=super.styleElement,n=e===null?void 0:ee(e);super.onStyleElementChanged(e),t?.removeEventListener("click",this.#i),t?.removeEventListener("keydown",this.#d),t?.removeEventListener("focusin",this.#l),t?.removeEventListener("focusout",this.#u),e?.addEventListener("click",this.#i),e?.addEventListener("keydown",this.#d),e?.addEventListener("focusin",this.#l),e?.addEventListener("focusout",this.#u),this.#a?.disconnect(),this.#a=null,e!==null&&n!==void 0&&(this.#a=new n(()=>this.#x()),this.#a.observe(e,{attributeFilter:["aria-disabled","disabled","hidden","inert"],attributes:!0,childList:!0,subtree:!0}))}onControllerCleanup(){this.#a?.disconnect(),this.#a=null,this.#A(),super.onControllerCleanup()}render(e){return<div class={y}role="tablist">{e}</div>}}function Me(s,e){return ae(s,t=>Array.from(t.matchAll(N)).some(i=>i[1]===k&&i[2]===e.fallback)?le(t,{[k]:null,tabindex:e.selected===void 0?"0":"-1"}):t)}function xe(s,e){const t=h(S),n=h(p),[i,l]=Q(s,["children","class","classList"]),a=e.orientation??"horizontal";return n!==void 0&&(n.selection??=t),Me(<div aria-orientation={a==="vertical"?"vertical":void 0}{...l}class={i.class}classList={{...i.classList,[`_cw-TabList-${a}`]:!0,[y]:!0}}data-cw-tab-scrollable={e.scrollable===!0?"true":void 0}data-cw-tab-variant={e.variant??"primary"}role="tablist">{i.children}</div>,t)}const ke=D(g?()=>xe:I,()=>He);function Re(s){return{value:f(()=>M(s)),controlled:"value"in s||"selectedValue"in s,selected:void 0,enabledSeen:!1,fallback:ie("cw-tablist")}}const J=s=>w(S.Provider,{value:g?Re(s):new _,get children(){return w(ke,s)}});class De extends be{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;#b;#f;#g;#p;#v;#T;#c;constructor(e){super(e,{baseInteractionCssClassName:"cw-Tab",enabledInteractionStates:U,styleElementIsFunction:!1});const t=h(S),n=h(p);this.#e=t instanceof _?t:void 0,this.#n=n instanceof C?n:void 0,this.#s=A("cw-tab"),this.#i="selected"in e,this.#d="attr:aria-controls"in e,this.#l="attr:aria-selected"in e,this.#u=a=>this.#L(a),this.#a=a=>Te(a,super.functionElement),this.#h=null,this.#o=f(()=>e.id??e["attr:id"]??this.#s),this.#b=f(()=>e.value),this.#f=f(()=>e.panelId??e.controls),this.#g=void 0,this.#p=f(()=>(this.#i?e.selected:e.defaultSelected)===!0),this.#v=!1,this.#T=!1,this.#c=!1,this.#t={element:()=>super.functionElement,content:()=>this.#h,value:()=>this.#b,id:()=>this.#o,explicitPanelId:()=>this.#f,link:a=>{this.#g=a?.id(),this.#E()},select:a=>{a!==this.#v&&(this.#v=a,this.#y())},stop:a=>{a!==this.#T&&(this.#T=a,this.#m())}};const i=this.#e?.add(this.#t),l=this.#n?.addTab(this.#t);this.#r=()=>{i?.(),l?.()}}#S(e){const t=e??this.#s;t!==this.#o&&(this.#o=t,this.#n?.invalidate()),super.setAttribute("id",t)}#E(){this.#d||super.setAttribute("aria-controls",this.#f??this.#g)}#y(){const e=this.#e!==void 0,t=e?this.#v:this.#p;super.setClass(te,t),(e||!this.#l)&&super.setAttribute("aria-selected",t?"true":"false")}#m(){const e=this.#e!==void 0?this.#T:this.#p;super.setAttribute("tabindex",this.#c?-1:this.props.tabIndex??(e?0:-1))}#L(e){const t=super.functionElement;if(this.#c){H(t)&&e.preventDefault();return}this.#e===void 0&&(this.#i||(this.#p=!0),Z([this.props.onChange,this.props.onSelect,this.props.onSelectedChange],!0,e),this.#y(),this.#m())}applyComponentProps(){super.applyComponentProps();const e=super.readProps(["attr:id","controls","disabled","href","id","panelId","selected","tabIndex","value"]);(e.disabledChanged||e.hrefChanged)&&(this.#c=e.disabled===!0,super.setClass(ne,this.#c),super.setEnabledInteractionStates(this.#c?0:U),super.setAttribute("aria-disabled",this.#c?"true":void 0),super.setAttribute("disabled",this.#c&&e.href===void 0)),e.hrefChanged&&super.setAttribute("href",e.href),this.#S(e.id??e["attr:id"]),e.valueChanged&&(this.#b=e.value,super.setAttribute(B,e.value),this.#n?.invalidate(),this.#e?.invalidate()),(e.panelIdChanged||e.controlsChanged)&&(this.#f=e.panelId??e.controls,this.#n?.invalidate()),e.selectedChanged&&this.#i&&(this.#p=e.selected===!0),this.#E(),this.#y(),this.#m()}onFunctionElementChanged(e){const t=super.functionElement;super.onFunctionElementChanged(e),t?.removeEventListener("click",this.#u),t?.removeEventListener("keydown",this.#a),e?.addEventListener("click",this.#u),e?.addEventListener("keydown",this.#a),this.#e?.invalidate()}onControllerCleanup(){this.#r(),super.onControllerCleanup()}render(e,t){const n=<span class="cw-Tab-content">
2
+ <span class="cw-Tab-icon">{this.props.icon}</span>
3
+ <span class="cw-Tab-label">{this.props.label??e}</span>
4
+ </span>,i=oe(()=>this.props.href!==void 0?<a class="cw-Tab"ref={t}role="tab">{n}</a>:<button class="cw-Tab"ref={t}role="tab"type="button">{n}</button>);return this.#h=n,i}}function Oe(s,e,t){const n=!t&&!s.enabledSeen,i=!t&&s.selected===void 0&&(s.value===void 0?!s.controlled&&n:e===s.value);return s.enabledSeen||=!t,i&&(s.selected=e),{selected:i,tabIndex:i?0:-1,fallback:n&&!i?s.fallback:void 0}}function re(s,e){const t=`${s.prefix}-${s.links.size}`;if(e.panel?s.panels.push(e):s.tabs.push(e),!(!e.reference&&!e.panel))return s.links.set(t,e),t}function Be(s,e){const t=h(S),n=h(p),i=A("cw-tab"),l=s,a=e.disabled===!0,o=e.id??l.id??i,r=e.panelId??e.controls,u="aria-controls"in s,d=u?l["aria-controls"]:r,c=t===void 0?void 0:Oe(t,e.value,a),b=c?.selected??("selected"in e?e.selected:e.defaultSelected)===!0,v={panel:!1,id:()=>o,value:()=>e.value,explicitPanelId:()=>r,controls:d,reference:!u&&r===void 0},m=n===void 0?void 0:re(n,v),E=<span class="cw-Tab-content">
5
+ <span class="cw-Tab-icon">{e.icon}</span>
6
+ <span class="cw-Tab-label">{e.label??s.children}</span>
7
+ </span>,T={"aria-controls":d,"aria-disabled":a?"true":void 0,"aria-selected":c===void 0&&"aria-selected"in s?l["aria-selected"]:b?"true":"false",classList:{...s.classList,[ne]:a,[te]:b,"cw-Tab":!0},[k]:e.tabIndex===void 0?c?.fallback:void 0,[x]:m,[B]:e.value,id:o,role:"tab",tabIndex:a?-1:e.tabIndex??c?.tabIndex??(b?0:-1)};return n!==void 0&&c?.selected===!0&&n.selection===t&&(n.selected=v),e.href===void 0?<button{...s}{...T}disabled={a}type="button">{E}</button>:<a{...s}{...T}href={e.href}>{E}</a>}const Ne=fe(g?()=>Be:I,()=>De),_e=s=>Ne(ge(s,void 0,["icon","label"])),Ge=s=>{const e=G(s,{[`attr:${ye}`]:"start"});return _e(e)};class Je extends O{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(p);this.#e=t instanceof C?t:void 0,this.#t=A("cw-tabpanel"),this.#s="active"in e,this.#i="attr:aria-labelledby"in e,this.#l=f(()=>e.id??e["attr:id"]??this.#t),this.#u=f(()=>e.value),this.#a=f(()=>e.tabId),this.#r=void 0,this.#h=f(()=>(this.#s?e.active:e.defaultActive)??!0),this.#o=void 0,this.#n={element:()=>super.functionElement,value:()=>this.#u,id:()=>this.#l,explicitTabId:()=>this.#a,link:n=>{this.#r=n?.id(),this.#b()},show:n=>{n!==this.#o&&(this.#o=n,this.#f())}},this.#d=this.#e?.addPanel(this.#n)??(()=>{})}#b(){this.#i||super.setAttribute("aria-labelledby",this.#a??this.#r)}#f(){const e=this.#o??this.#h;super.setAttribute("hidden",!e),super.setAttribute("aria-hidden",e?"false":"true")}applyComponentProps(){const e=super.readProps(["active","attr:id","id","tabId","value"]),t=e.id??e["attr:id"]??this.#t;t!==this.#l&&(this.#l=t,this.#e?.invalidate()),super.setAttribute("id",t),e.valueChanged&&(this.#u=e.value,super.setAttribute(B,e.value),this.#e?.invalidate()),e.tabIdChanged&&(this.#a=e.tabId,this.#e?.invalidate()),e.activeChanged&&this.#s&&(this.#h=e.active??!0),this.#b(),this.#f()}onControllerCleanup(){this.#d(),super.onControllerCleanup()}render(e){return<div class="cw-TabPanel"role="tabpanel"tabIndex={0}>{e}</div>}}function Xe(s,e){const t=h(p),n=A("cw-tabpanel"),i=s,l=e.id??i.id??n,a="aria-labelledby"in s,o=("active"in e?e.active:e.defaultActive)??!0,r=t===void 0?void 0:re(t,{panel:!0,id:()=>l,value:()=>e.value,explicitTabId:()=>e.tabId,reference:!a&&e.tabId===void 0});return<div{...s}aria-hidden={o?"false":"true"}aria-labelledby={a?i["aria-labelledby"]:e.tabId}classList={{...s.classList,"cw-TabPanel":!0}}data-cw-tab-value={e.value}data-cw-tabs-link={r}hidden={!o}id={l}role="tabpanel"tabIndex={0}>{s.children}</div>}const Qe=D(g?()=>Xe:I,()=>Je),Ze=J,et=s=>{const e=G({variant:"secondary"},s);return J(e)},tt=J;export{Ge as LeadingIconTab,Ze as PrimaryTabRow,et as SecondaryTabRow,_e as Tab,De as TabController,J as TabList,He as TabListController,Qe as TabPanel,Je as TabPanelController,tt as TabRow,Ye as Tabs,we as TabsController};
@@ -0,0 +1,23 @@
1
+ import{createComponent as C,createContext as S,mergeProps as A,untrack as g,useContext as v}from"solid-js";import{insert as b}from"solid-js/web";import{defineDomComponent as x}from"..";import{DomController as E}from"../dom/client";import{computedStyleOf as T,deferAfterDelegatedCancellation as L,directActionableChildren as I,isElementNode as d,isVisibleElement as D,mutationObserverOf as O,resolveNavigationSlots as F}from"./base";import{BarScrollState as k,resizeObserverOf as P}from"./scroll";import"../container/elevation-shadow.css";import"./navigation.css";const M={role:"effect",speed:"default"},B={role:"spatial",speed:"fast"},H=["aria-disabled","disabled","hidden","href","inert","role","tabindex"],f=S();function N(){let r=!1;return{claim(t,e){return t||e!==void 0&&e<-1||r?-1:(r=!0,0)}}}function p(r,t){r.inert!==t&&(r.inert=t)}function h(r,t){t==null?r.removeAttribute("tabindex"):r.setAttribute("tabindex",t)}function R(r,t){const e=t.disabled===!0,n=v(f)?.claim(e,t.tabIndex)??t.tabIndex??0;return<button{...r}classList={{...r.classList,"cw-FloatingToolbar-item":!0}}disabled={e}tabIndex={n}type="button"/>}class z extends E{#r;constructor(t){super(t,{styleElementIsFunction:!0});const e=v(f);this.#r=g(()=>e?.claim(t.disabled===!0,t.tabIndex)??t.tabIndex??0)}applyComponentProps(){const t=super.readProps(["disabled","tabIndex"]);t.disabledChanged&&super.setAttribute("disabled",t.disabled===!0),t.tabIndexChanged&&super.setAttribute("tabindex",t.tabIndex??this.#r)}render(t){const e=<button class="cw-FloatingToolbar-item"type="button"/>;return e.tabIndex=this.#r,b(e,t),e}}const X=x(()=>R,()=>z),Y=r=>X(F(r,void 0,[]));class J extends E{#r;#m;#g;#p;#a;#o;#c;#e;#s;#n;#t;#i;#b;#h;#l;#d;constructor(t,e="horizontal"){super(t,{styleElementIsFunction:!0}),this.#r=e,this.#m="attr:aria-orientation"in t,this.#g=n=>this.#F(n),this.#p=n=>this.#E(n),this.#a=g(()=>t.orientation??e),this.#o=!1,this.#c=!0,this.#e=null,this.#s=null,this.#n=new WeakMap,this.#t=new WeakMap,this.#i=new Set,this.#b=null,this.#h=[],this.#l=null,this.#d=null}#f(){const t=this.styleElement;if(!d(t))return[];const e=new Map;return I(t,!0).filter(n=>{if(!D(n,e))return!1;this.#n.has(n)||this.#n.set(n,n.getAttribute("tabindex"));const i=this.#n.get(n),o=i==null||Number(i)>=-1;return o?this.#i.add(n):(this.#t.has(n)&&(h(n,i),this.#t.delete(n)),this.#i.delete(n)),o})}#v(){for(const t of this.#i)t.getAttribute("tabindex")===this.#t.get(t)&&h(t,this.#n.get(t));this.#i=new Set,this.#n=new WeakMap,this.#t=new WeakMap,this.#e=null}#x(t){if(!d(t)||this.styleElement?.contains(t)===!0)return;const e=[t,...Array.from(t.querySelectorAll("button, a[href], input, select, textarea, [role=button], [tabindex]"))];for(const n of e)this.#t.has(n)&&(n.getAttribute("tabindex")===this.#t.get(n)&&h(n,this.#n.get(n)),this.#t.delete(n),this.#n.delete(n),this.#i.delete(n),this.#e===n&&(this.#e=null))}#u(){const t=this.styleElement,e=this.#f(),n=new Set(e);for(const o of this.#i)!n.has(o)&&t?.contains(o)===!0&&(this.#t.set(o,"-1"),o.getAttribute("tabindex")!=="-1"&&(o.tabIndex=-1));if(e.length===0)return;const i=this.#e!==null&&n.has(this.#e)?this.#e:e.find(o=>o.tabIndex===0)??e[0];for(const o of e){const a=o===i?"0":"-1";this.#t.set(o,a),o.getAttribute("tabindex")!==a&&o.setAttribute("tabindex",a)}}#E(t){!d(t.target)||!this.#f().includes(t.target)||(this.#e=t.target,this.#u())}#F(t){const e=this.styleElement,n=t.target;if(!d(e)||!d(n)||["input","select","textarea"].includes(n.localName))return;const i=this.#f(),o=i.indexOf(n);if(o<0)return;const a=this.#a==="horizontal",l=a&&T(e).direction==="rtl",s=a?l?"ArrowLeft":"ArrowRight":"ArrowDown",c=a?l?"ArrowRight":"ArrowLeft":"ArrowUp",m=t.key==="Home"?0:t.key==="End"?i.length-1:t.key===s?(o+1)%i.length:t.key===c?(o+i.length-1)%i.length:void 0,u=m===void 0?void 0:i[m];u!==void 0&&L(t,e,()=>{this.styleElement!==e||!e.isConnected||!e.contains(u)||(this.#e=u,this.#u(),u.focus())})}#T(){const t=this.styleElement?.querySelector(".cw-FloatingToolbar-fab:not(:empty)")??null,e=!this.#c&&!this.#o;for(const n of this.#h)p(n,e);this.#b!==null&&p(this.#b,e&&t!==null)}#w(t){const e=this.#l,n=P(t);e===null||n===void 0||(this.#d=new n(i=>{for(const o of i){const a=o.borderBoxSize[0],s=this.#o||["bottom","top"].includes(t.getAttribute("data-cw-exit-direction")??"bottom")?a?.blockSize??o.contentRect.height:a?.inlineSize??o.contentRect.width,c=this.#o?0:parseFloat(T(t).getPropertyValue("--cw-FloatingToolbar-floating-screenOffset"));e.setRange(s+(Number.isFinite(c)?c:0))}}),this.#d.observe(t))}applyComponentProps(){const t=super.readProps(["design","docked","exitDirection","expanded","floatingActionButtonPosition","orientation","scrollBehavior","scrollTarget"]);t.designChanged&&super.setAttribute("data-cw-toolbar-design",t.design??"standard"),t.dockedChanged&&(this.#o=t.docked===!0,super.setClass("cw-DockedToolbar",this.#o)),t.orientationChanged&&(this.#a=t.orientation??this.#r,super.setClass("orientation",`_cw-FloatingToolbar-${this.#a}`),this.#m||super.setAttribute("aria-orientation",this.#a)),t.expandedChanged&&(this.#c=t.expanded!==!1,super.setAttribute("data-cw-floating-toolbar-expanded",this.#c?"true":"false")),t.floatingActionButtonPositionChanged&&super.setAttribute("data-cw-fab-position",t.floatingActionButtonPosition??"end"),(t.exitDirectionChanged||t.orientationChanged||t.dockedChanged)&&super.setAttribute("data-cw-exit-direction",this.#o?"bottom":t.exitDirection??(this.#a==="vertical"?"end":"bottom")),(t.scrollBehaviorChanged||t.scrollTargetChanged||t.dockedChanged)&&this.#l?.bind(t.scrollBehavior,t.scrollTarget),g(()=>{this.#T(),this.#u()})}onStyleElementChanged(t){if(super.onStyleElementChanged(t),!d(t))return;t.addEventListener("focusin",this.#p),t.addEventListener("keydown",this.#g),this.#l=new k(t,{property:"--cw-FloatingToolbar-exit-progress",spring:g(()=>this.props.docked===!0)?B:M,onFractionChange:n=>p(t,n>0)}),this.#w(t);const e=O(t);e!==void 0&&(this.#s=new e(n=>{let i=!1;for(const o of n)if(o.type==="childList"){for(const a of Array.from(o.removedNodes))this.#x(a);i=!0}else if(o.attributeName!=="tabindex")i=!0;else if(d(o.target)){const a=o.target.getAttribute("tabindex");this.#t.get(o.target)!==a&&(this.#n.set(o.target,a),i=!0)}i&&(this.#T(),this.#u())}),this.#s.observe(t,{attributeFilter:H,attributes:!0,childList:!0,subtree:!0}))}onControllerCleanup(){const t=this.styleElement;this.#v(),t?.removeEventListener("focusin",this.#p),t?.removeEventListener("keydown",this.#g),this.#s?.disconnect(),this.#s=null,this.#d?.disconnect(),this.#d=null,this.#l?.dispose(),super.onControllerCleanup()}render(t){let e,n,i,o,a,l,s;const c=<div class="cw-FloatingToolbar"role="toolbar">
2
+ <div class="cw-FloatingToolbar-container cw-elevationShadow"ref={e}>
3
+ <span class="cw-FloatingToolbar-leading"ref={n}>
4
+ <span class="cw-FloatingToolbar-slot"ref={i}/>
5
+ </span>
6
+ <span class="cw-FloatingToolbar-content"ref={o}/>
7
+ <span class="cw-FloatingToolbar-trailing"ref={a}>
8
+ <span class="cw-FloatingToolbar-slot"ref={l}/>
9
+ </span>
10
+ </div>
11
+ <span class="cw-FloatingToolbar-fab"ref={s}/>
12
+ </div>;return this.#b=e,this.#h=[n,a],b(i,()=>this.props.leadingContent),b(o,t),b(l,()=>this.props.trailingContent),b(s,()=>this.props.floatingActionButton),c}}function _(r,t,e){const n=e.orientation??r,i=e.docked===!0,o=e.expanded!==!1,a=!o&&!i,l=i?"bottom":e.exitDirection??(n==="vertical"?"end":"bottom"),s=e.floatingActionButton;return<div aria-orientation={n}{...t}classList={{...t.classList,"cw-FloatingToolbar":!0,"cw-DockedToolbar":i,[`_cw-FloatingToolbar-${n}`]:!0}}data-cw-exit-direction={l}data-cw-fab-position={e.floatingActionButtonPosition??"end"}data-cw-floating-toolbar-expanded={o?"true":"false"}data-cw-toolbar-design={e.design??"standard"}role="toolbar">
13
+ <div class="cw-FloatingToolbar-container cw-elevationShadow"inert={a&&s!==void 0&&s!==null}>
14
+ <span class="cw-FloatingToolbar-leading"inert={a}>
15
+ <span class="cw-FloatingToolbar-slot">{e.leadingContent}</span>
16
+ </span>
17
+ <span class="cw-FloatingToolbar-content">{t.children}</span>
18
+ <span class="cw-FloatingToolbar-trailing"inert={a}>
19
+ <span class="cw-FloatingToolbar-slot">{e.trailingContent}</span>
20
+ </span>
21
+ </div>
22
+ <span class="cw-FloatingToolbar-fab">{s}</span>
23
+ </div>}function w(r){const t=x(()=>(e,n)=>_(r,e,n),()=>class extends J{constructor(e){super(e,r)}});return e=>C(f.Provider,{value:N(),get children(){return t(F(e,void 0,["leadingContent","trailingContent","floatingActionButton"]))}})}const y=w("horizontal"),Q=y,Z=w("vertical"),tt=r=>{const t=A({docked:!0},r);return y(t)};export{tt as DockedToolbar,y as FloatingToolbar,J as FloatingToolbarController,Y as FloatingToolbarItem,Q as HorizontalFloatingToolbar,Z as VerticalFloatingToolbar};
@@ -0,0 +1 @@
1
+ import{FocusState as m,HoverState as E,PressState as v}from"../state";const g=m|E|v,d=new WeakMap,p=new Set(["class","classList","style"]);function P(n){const e={},t={};for(const o of Object.keys(n)){const r=p.has(o)?e:t;o!=="children"&&Object.defineProperty(r,o,Object.getOwnPropertyDescriptor(n,o))}return[e,t]}function b(n,e,t){const o=new Set;for(const r of n)r!==void 0&&!o.has(r)&&(o.add(r),r(e,t))}function T(n,e,t){const o=e.disabled===!0;t("disabled",o),t("name",e.name),t("value",e.value),t("required",e.required===!0),"tabIndex"in e&&t("tabindex",e.tabIndex),n.disabled=o}function y(n){const e=n.getRootNode();return e.nodeType===Node.DOCUMENT_NODE||e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in e?e:void 0}function R(n,e){queueMicrotask(()=>{if(n.eventPhase===Event.NONE){n.defaultPrevented||e();return}setTimeout(()=>{n.defaultPrevented||e()},0)})}function N(n,e){const t=y(n);if(t===void 0)return()=>{};let o=d.get(t);if(o===void 0){const a=new Map,l=c=>{const s=[];for(const[i,f]of a)i.form!==null&&i.form===c.target&&s.push(f);s.length!==0&&R(c,()=>s.forEach(i=>i()))};o={controls:a,listener:l},d.set(t,o),t.addEventListener("reset",l,!0)}const{controls:r,listener:u}=o;return r.set(n,e),()=>{r.get(n)===e&&(r.delete(n),r.size===0&&(t.removeEventListener("reset",u,!0),d.delete(t)))}}export{g as SELECTION_INTERACTION_STATES,T as applyNativeSelectionAttributes,y as eventRootOf,b as notifySelectionChange,N as observeFormReset,P as splitContainerElementProps};