shoelace-rails-ui 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (332) hide show
  1. checksums.yaml +7 -0
  2. data/.DS_Store +0 -0
  3. data/CHANGELOG.md +5 -0
  4. data/CODE_OF_CONDUCT.md +84 -0
  5. data/Gemfile +12 -0
  6. data/Gemfile.lock +42 -0
  7. data/LICENSE.txt +21 -0
  8. data/README-real.md +24 -0
  9. data/README.md +43 -0
  10. data/Rakefile +16 -0
  11. data/bin/console +15 -0
  12. data/bin/setup +8 -0
  13. data/lib/shoelace/rails/ui/version.rb +9 -0
  14. data/lib/shoelace/rails/ui.rb +12 -0
  15. data/regenerate.rb +48 -0
  16. data/remote-src/.DS_Store +0 -0
  17. data/remote-src/2.0.0.beta64/.DS_Store +0 -0
  18. data/remote-src/2.0.0.beta64/shoelace-next/.editorconfig +15 -0
  19. data/remote-src/2.0.0.beta64/shoelace-next/.github/CODE_OF_CONDUCT.md +44 -0
  20. data/remote-src/2.0.0.beta64/shoelace-next/.github/FUNDING.yml +1 -0
  21. data/remote-src/2.0.0.beta64/shoelace-next/.github/ISSUE_TEMPLATE/bug_report.md +36 -0
  22. data/remote-src/2.0.0.beta64/shoelace-next/.github/ISSUE_TEMPLATE/config.yml +4 -0
  23. data/remote-src/2.0.0.beta64/shoelace-next/.github/ISSUE_TEMPLATE/feature_request.md +17 -0
  24. data/remote-src/2.0.0.beta64/shoelace-next/.github/SECURITY.md +7 -0
  25. data/remote-src/2.0.0.beta64/shoelace-next/.github/workflows/node.js.yml +30 -0
  26. data/remote-src/2.0.0.beta64/shoelace-next/.github/workflows/release.yml +17 -0
  27. data/remote-src/2.0.0.beta64/shoelace-next/.gitignore +8 -0
  28. data/remote-src/2.0.0.beta64/shoelace-next/.husky/pre-commit +4 -0
  29. data/remote-src/2.0.0.beta64/shoelace-next/.prettierignore +12 -0
  30. data/remote-src/2.0.0.beta64/shoelace-next/.vscode/extensions.json +9 -0
  31. data/remote-src/2.0.0.beta64/shoelace-next/.vscode/settings.json +4 -0
  32. data/remote-src/2.0.0.beta64/shoelace-next/CONTRIBUTING.md +5 -0
  33. data/remote-src/2.0.0.beta64/shoelace-next/LICENSE.md +7 -0
  34. data/remote-src/2.0.0.beta64/shoelace-next/README.md +94 -0
  35. data/remote-src/2.0.0.beta64/shoelace-next/cspell.json +110 -0
  36. data/remote-src/2.0.0.beta64/shoelace-next/custom-elements-manifest.config.js +104 -0
  37. data/remote-src/2.0.0.beta64/shoelace-next/docs/404.md +5 -0
  38. data/remote-src/2.0.0.beta64/shoelace-next/docs/_sidebar.md +89 -0
  39. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/icons/sprite.svg +1 -0
  40. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/chrome.png +0 -0
  41. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/edge.png +0 -0
  42. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/firefox.png +0 -0
  43. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/logo.svg +7 -0
  44. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/og-image.png +0 -0
  45. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/opera.png +0 -0
  46. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/safari.png +0 -0
  47. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/shoe.svg +134 -0
  48. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/tie.webp +0 -0
  49. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/touch-icon.png +0 -0
  50. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/twitter-card.png +0 -0
  51. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/undraw-content-team.svg +80 -0
  52. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/undraw-not-found.svg +1 -0
  53. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/walk.gif +0 -0
  54. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/wordmark.svg +7 -0
  55. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/code-block/code-block.css +228 -0
  56. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/code-block/code-block.js +376 -0
  57. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/metadata/metadata.js +537 -0
  58. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/scroll-position/scroll-position.js +24 -0
  59. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/search/lunr.min.js +1311 -0
  60. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/search/search.css +180 -0
  61. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/search/search.js +293 -0
  62. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/theme-picker/theme-picker.css +29 -0
  63. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/theme-picker/theme-picker.js +83 -0
  64. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/styles/docs.css +642 -0
  65. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/alert.md +441 -0
  66. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/animated-image.md +128 -0
  67. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/animation.md +351 -0
  68. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/avatar.md +201 -0
  69. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/badge.md +191 -0
  70. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/breadcrumb-item.md +35 -0
  71. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/breadcrumb.md +266 -0
  72. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/button-group.md +470 -0
  73. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/button.md +453 -0
  74. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/card.md +311 -0
  75. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/checkbox.md +71 -0
  76. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/color-picker.md +101 -0
  77. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/details.md +89 -0
  78. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/dialog.md +265 -0
  79. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/divider.md +152 -0
  80. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/drawer.md +452 -0
  81. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/dropdown.md +389 -0
  82. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/format-bytes.md +126 -0
  83. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/format-date.md +120 -0
  84. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/format-number.md +124 -0
  85. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/icon-button.md +160 -0
  86. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/icon.md +711 -0
  87. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/image-comparer.md +51 -0
  88. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/include.md +47 -0
  89. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/input.md +283 -0
  90. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu-item.md +255 -0
  91. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu-label.md +52 -0
  92. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu.md +49 -0
  93. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/mutation-observer.md +196 -0
  94. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/progress-bar.md +144 -0
  95. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/progress-ring.md +178 -0
  96. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/qr-code.md +167 -0
  97. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/radio-group.md +52 -0
  98. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/radio.md +59 -0
  99. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/range.md +180 -0
  100. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/rating.md +153 -0
  101. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/relative-time.md +105 -0
  102. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/resize-observer.md +68 -0
  103. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/responsive-media.md +73 -0
  104. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/select.md +457 -0
  105. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/skeleton.md +439 -0
  106. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/spinner.md +86 -0
  107. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/split-panel.md +671 -0
  108. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/switch.md +77 -0
  109. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tab-group.md +359 -0
  110. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tab-panel.md +41 -0
  111. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tab.md +29 -0
  112. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tag.md +142 -0
  113. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/textarea.md +184 -0
  114. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tooltip.md +410 -0
  115. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/visually-hidden.md +47 -0
  116. data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/angular.md +46 -0
  117. data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/react.md +156 -0
  118. data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/vue.md +92 -0
  119. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/customizing.md +153 -0
  120. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/form-controls.md +336 -0
  121. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/installation.md +137 -0
  122. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/localization.md +140 -0
  123. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/overview.md +131 -0
  124. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/themes.md +139 -0
  125. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/usage.md +173 -0
  126. data/remote-src/2.0.0.beta64/shoelace-next/docs/index.html +98 -0
  127. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/accessibility.md +18 -0
  128. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/changelog.md +925 -0
  129. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/community.md +53 -0
  130. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/contributing.md +261 -0
  131. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/border-radius.md +12 -0
  132. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/color.md +439 -0
  133. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/elevation.md +11 -0
  134. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/spacing.md +16 -0
  135. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/transition.md +11 -0
  136. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/typography.md +58 -0
  137. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/z-index.md +11 -0
  138. data/remote-src/2.0.0.beta64/shoelace-next/docs/tutorials/integrating-with-laravel.md +117 -0
  139. data/remote-src/2.0.0.beta64/shoelace-next/docs/tutorials/integrating-with-nextjs.md +137 -0
  140. data/remote-src/2.0.0.beta64/shoelace-next/docs/tutorials/integrating-with-rails.md +103 -0
  141. data/remote-src/2.0.0.beta64/shoelace-next/lint-staged.config.js +4 -0
  142. data/remote-src/2.0.0.beta64/shoelace-next/package-lock.json +9534 -0
  143. data/remote-src/2.0.0.beta64/shoelace-next/package.json +93 -0
  144. data/remote-src/2.0.0.beta64/shoelace-next/prettier.config.cjs +17 -0
  145. data/remote-src/2.0.0.beta64/shoelace-next/scripts/build.js +158 -0
  146. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-css.js +42 -0
  147. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-icons.js +71 -0
  148. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-metadata.js +11 -0
  149. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-react.js +63 -0
  150. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-search.js +100 -0
  151. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-vscode-data.js +58 -0
  152. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/plopfile.js +67 -0
  153. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/component.hbs +44 -0
  154. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/docs.hbs +21 -0
  155. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/styles.hbs +10 -0
  156. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/tests.hbs +13 -0
  157. data/remote-src/2.0.0.beta64/shoelace-next/scripts/shared.js +18 -0
  158. data/remote-src/2.0.0.beta64/shoelace-next/src/components/alert/alert.styles.ts +95 -0
  159. data/remote-src/2.0.0.beta64/shoelace-next/src/components/alert/alert.test.ts +93 -0
  160. data/remote-src/2.0.0.beta64/shoelace-next/src/components/alert/alert.ts +238 -0
  161. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animated-image/animated-image.styles.ts +52 -0
  162. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animated-image/animated-image.test.ts +13 -0
  163. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animated-image/animated-image.ts +120 -0
  164. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animation.styles.ts +10 -0
  165. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animation.ts +222 -0
  166. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animations.ts +15 -0
  167. data/remote-src/2.0.0.beta64/shoelace-next/src/components/avatar/avatar.styles.ts +66 -0
  168. data/remote-src/2.0.0.beta64/shoelace-next/src/components/avatar/avatar.test.ts +111 -0
  169. data/remote-src/2.0.0.beta64/shoelace-next/src/components/avatar/avatar.ts +83 -0
  170. data/remote-src/2.0.0.beta64/shoelace-next/src/components/badge/badge.styles.ts +94 -0
  171. data/remote-src/2.0.0.beta64/shoelace-next/src/components/badge/badge.test.ts +77 -0
  172. data/remote-src/2.0.0.beta64/shoelace-next/src/components/badge/badge.ts +53 -0
  173. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb/breadcrumb.styles.ts +12 -0
  174. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb/breadcrumb.test.ts +104 -0
  175. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb/breadcrumb.ts +82 -0
  176. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb-item/breadcrumb-item.styles.ts +85 -0
  177. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb-item/breadcrumb-item.test.ts +160 -0
  178. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb-item/breadcrumb-item.ts +92 -0
  179. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button/button.styles.ts +637 -0
  180. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button/button.ts +209 -0
  181. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button-group/button-group.styles.ts +15 -0
  182. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button-group/button-group.ts +84 -0
  183. data/remote-src/2.0.0.beta64/shoelace-next/src/components/card/card.styles.ts +62 -0
  184. data/remote-src/2.0.0.beta64/shoelace-next/src/components/card/card.test.ts +139 -0
  185. data/remote-src/2.0.0.beta64/shoelace-next/src/components/card/card.ts +68 -0
  186. data/remote-src/2.0.0.beta64/shoelace-next/src/components/checkbox/checkbox.styles.ts +108 -0
  187. data/remote-src/2.0.0.beta64/shoelace-next/src/components/checkbox/checkbox.test.ts +47 -0
  188. data/remote-src/2.0.0.beta64/shoelace-next/src/components/checkbox/checkbox.ts +203 -0
  189. data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.styles.ts +326 -0
  190. data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.test.ts +43 -0
  191. data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.ts +853 -0
  192. data/remote-src/2.0.0.beta64/shoelace-next/src/components/details/details.styles.ts +73 -0
  193. data/remote-src/2.0.0.beta64/shoelace-next/src/components/details/details.test.ts +153 -0
  194. data/remote-src/2.0.0.beta64/shoelace-next/src/components/details/details.ts +192 -0
  195. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dialog/dialog.styles.ts +106 -0
  196. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dialog/dialog.test.ts +135 -0
  197. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dialog/dialog.ts +296 -0
  198. data/remote-src/2.0.0.beta64/shoelace-next/src/components/divider/divider.styles.ts +25 -0
  199. data/remote-src/2.0.0.beta64/shoelace-next/src/components/divider/divider.ts +34 -0
  200. data/remote-src/2.0.0.beta64/shoelace-next/src/components/drawer/drawer.styles.ts +142 -0
  201. data/remote-src/2.0.0.beta64/shoelace-next/src/components/drawer/drawer.test.ts +135 -0
  202. data/remote-src/2.0.0.beta64/shoelace-next/src/components/drawer/drawer.ts +377 -0
  203. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.styles.ts +58 -0
  204. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.test.ts +147 -0
  205. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.ts +459 -0
  206. data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-bytes/format-bytes.ts +35 -0
  207. data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-date/format-date.ts +81 -0
  208. data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-number/format-number.ts +69 -0
  209. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/icon.styles.ts +21 -0
  210. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/icon.ts +131 -0
  211. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/library.default.ts +9 -0
  212. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/library.system.ts +97 -0
  213. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/library.ts +49 -0
  214. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/request.ts +36 -0
  215. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon-button/icon-button.styles.ts +48 -0
  216. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon-button/icon-button.ts +100 -0
  217. data/remote-src/2.0.0.beta64/shoelace-next/src/components/image-comparer/image-comparer.styles.ts +77 -0
  218. data/remote-src/2.0.0.beta64/shoelace-next/src/components/image-comparer/image-comparer.ts +147 -0
  219. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/include.styles.ts +10 -0
  220. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/include.test.ts +62 -0
  221. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/include.ts +80 -0
  222. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/request.ts +23 -0
  223. data/remote-src/2.0.0.beta64/shoelace-next/src/components/input/input.styles.ts +282 -0
  224. data/remote-src/2.0.0.beta64/shoelace-next/src/components/input/input.test.ts +35 -0
  225. data/remote-src/2.0.0.beta64/shoelace-next/src/components/input/input.ts +410 -0
  226. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu/menu.styles.ts +18 -0
  227. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu/menu.ts +205 -0
  228. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-item/menu-item.styles.ts +84 -0
  229. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-item/menu-item.ts +92 -0
  230. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-label/menu-label.styles.ts +21 -0
  231. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-label/menu-label.ts +30 -0
  232. data/remote-src/2.0.0.beta64/shoelace-next/src/components/mutation-observer/mutation-observer.styles.ts +10 -0
  233. data/remote-src/2.0.0.beta64/shoelace-next/src/components/mutation-observer/mutation-observer.test.ts +13 -0
  234. data/remote-src/2.0.0.beta64/shoelace-next/src/components/mutation-observer/mutation-observer.ts +118 -0
  235. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-bar/progress-bar.styles.ts +57 -0
  236. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-bar/progress-bar.test.ts +89 -0
  237. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-bar/progress-bar.ts +74 -0
  238. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-ring/progress-ring.styles.ts +66 -0
  239. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-ring/progress-ring.test.ts +68 -0
  240. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-ring/progress-ring.ts +84 -0
  241. data/remote-src/2.0.0.beta64/shoelace-next/src/components/qr-code/qr-code.styles.ts +22 -0
  242. data/remote-src/2.0.0.beta64/shoelace-next/src/components/qr-code/qr-code.ts +90 -0
  243. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio/radio.styles.ts +107 -0
  244. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio/radio.test.ts +65 -0
  245. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio/radio.ts +226 -0
  246. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio-group/radio-group.styles.ts +47 -0
  247. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio-group/radio-group.ts +66 -0
  248. data/remote-src/2.0.0.beta64/shoelace-next/src/components/range/range.styles.ts +192 -0
  249. data/remote-src/2.0.0.beta64/shoelace-next/src/components/range/range.ts +273 -0
  250. data/remote-src/2.0.0.beta64/shoelace-next/src/components/rating/rating.styles.ts +79 -0
  251. data/remote-src/2.0.0.beta64/shoelace-next/src/components/rating/rating.ts +249 -0
  252. data/remote-src/2.0.0.beta64/shoelace-next/src/components/relative-time/relative-time.ts +116 -0
  253. data/remote-src/2.0.0.beta64/shoelace-next/src/components/resize-observer/resize-observer.styles.ts +10 -0
  254. data/remote-src/2.0.0.beta64/shoelace-next/src/components/resize-observer/resize-observer.ts +87 -0
  255. data/remote-src/2.0.0.beta64/shoelace-next/src/components/responsive-media/responsive-media.styles.ts +36 -0
  256. data/remote-src/2.0.0.beta64/shoelace-next/src/components/responsive-media/responsive-media.ts +50 -0
  257. data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.styles.ts +331 -0
  258. data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.test.ts +56 -0
  259. data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.ts +560 -0
  260. data/remote-src/2.0.0.beta64/shoelace-next/src/components/skeleton/skeleton.styles.ts +60 -0
  261. data/remote-src/2.0.0.beta64/shoelace-next/src/components/skeleton/skeleton.ts +46 -0
  262. data/remote-src/2.0.0.beta64/shoelace-next/src/components/spinner/spinner.styles.ts +56 -0
  263. data/remote-src/2.0.0.beta64/shoelace-next/src/components/spinner/spinner.test.ts +24 -0
  264. data/remote-src/2.0.0.beta64/shoelace-next/src/components/spinner/spinner.ts +34 -0
  265. data/remote-src/2.0.0.beta64/shoelace-next/src/components/split-panel/split-panel.styles.ts +76 -0
  266. data/remote-src/2.0.0.beta64/shoelace-next/src/components/split-panel/split-panel.test.ts +13 -0
  267. data/remote-src/2.0.0.beta64/shoelace-next/src/components/split-panel/split-panel.ts +272 -0
  268. data/remote-src/2.0.0.beta64/shoelace-next/src/components/switch/switch.styles.ts +135 -0
  269. data/remote-src/2.0.0.beta64/shoelace-next/src/components/switch/switch.test.ts +64 -0
  270. data/remote-src/2.0.0.beta64/shoelace-next/src/components/switch/switch.ts +187 -0
  271. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab/tab.styles.ts +61 -0
  272. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab/tab.ts +104 -0
  273. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-group/tab-group.styles.ts +209 -0
  274. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-group/tab-group.ts +409 -0
  275. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-panel/tab-panel.styles.ts +17 -0
  276. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-panel/tab-panel.ts +49 -0
  277. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tag/tag.styles.ts +110 -0
  278. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tag/tag.ts +92 -0
  279. data/remote-src/2.0.0.beta64/shoelace-next/src/components/textarea/textarea.styles.ts +167 -0
  280. data/remote-src/2.0.0.beta64/shoelace-next/src/components/textarea/textarea.test.ts +35 -0
  281. data/remote-src/2.0.0.beta64/shoelace-next/src/components/textarea/textarea.ts +339 -0
  282. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.styles.ts +131 -0
  283. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.test.ts +117 -0
  284. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.ts +355 -0
  285. data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.styles.ts +18 -0
  286. data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.test.ts +39 -0
  287. data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.ts +24 -0
  288. data/remote-src/2.0.0.beta64/shoelace-next/src/declaration.d.ts +8 -0
  289. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/animate.ts +70 -0
  290. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/event.ts +35 -0
  291. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/focus-visible.ts +26 -0
  292. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/form-control.ts +203 -0
  293. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/formdata-event-polyfill.ts +93 -0
  294. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/math.ts +8 -0
  295. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/modal.ts +53 -0
  296. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/number.ts +32 -0
  297. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/offset.ts +13 -0
  298. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/scroll.ts +57 -0
  299. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/slot.ts +91 -0
  300. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/string.ts +3 -0
  301. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/support.ts +15 -0
  302. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/tabbable.ts +81 -0
  303. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/watch.ts +40 -0
  304. data/remote-src/2.0.0.beta64/shoelace-next/src/shoelace.ts +58 -0
  305. data/remote-src/2.0.0.beta64/shoelace-next/src/styles/component.styles.ts +23 -0
  306. data/remote-src/2.0.0.beta64/shoelace-next/src/styles/form-control.styles.ts +52 -0
  307. data/remote-src/2.0.0.beta64/shoelace-next/src/styles/utility.styles.ts +23 -0
  308. data/remote-src/2.0.0.beta64/shoelace-next/src/themes/dark.styles.ts +524 -0
  309. data/remote-src/2.0.0.beta64/shoelace-next/src/themes/light.styles.ts +524 -0
  310. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/de-ch.ts +21 -0
  311. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/de.ts +21 -0
  312. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/en.ts +21 -0
  313. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/es.ts +21 -0
  314. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/fr.ts +21 -0
  315. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/he.ts +21 -0
  316. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/ja.ts +21 -0
  317. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/nl.ts +21 -0
  318. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/pl.ts +21 -0
  319. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/pt.ts +21 -0
  320. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/ru.ts +21 -0
  321. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/animation-registry.ts +59 -0
  322. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/animation.ts +1 -0
  323. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/base-path.ts +43 -0
  324. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/form.ts +22 -0
  325. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/icon-library.ts +1 -0
  326. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/localize.ts +5 -0
  327. data/remote-src/2.0.0.beta64/shoelace-next/tsconfig.json +35 -0
  328. data/remote-src/2.0.0.beta64/shoelace-next/vercel.json +4 -0
  329. data/remote-src/2.0.0.beta64/shoelace-next/web-test-runner.config.js +14 -0
  330. data/shoelace-rails-ui.gemspec +39 -0
  331. data/shoelace-rails-ui.rb +0 -0
  332. metadata +377 -0
@@ -0,0 +1,925 @@
1
+ # Changelog
2
+
3
+ Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge variant="primary" pill>Stable</sl-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
4
+
5
+ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
6
+
7
+ _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
8
+
9
+ ## 2.0.0-beta.64
10
+
11
+ - 🚨 BREAKING: removed `<sl-form>` because all form components submit with `<form>` now ([learn more](/getting-started/form-controls))
12
+ - 🚨 BREAKING: changed `submit` attribute to `type="submit"` on `<sl-button>`
13
+ - 🚨 BREAKING: changed the `alt` attribute to `label` in `<sl-avatar>` for consistency with other components
14
+ - Added `role="status"` to `<sl-spinner>`
15
+ - Added `valueAsDate` and `valueAsNumber` properties to `<sl-input>` [#570](https://github.com/shoelace-style/shoelace/issues/570)
16
+ - Added `start`, `end`, and `panel` parts to `<sl-split-panel>` [#639](https://github.com/shoelace-style/shoelace/issues/639)
17
+ - Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633)
18
+ - Fixed an a11y bug in `<sl-tooltip>` where `aria-describedby` referenced an id in the shadow root
19
+ - Fixed a bug in `<sl-radio>` where tabbing didn't work properly in Firefox [#596](https://github.com/shoelace-style/shoelace/issues/596)
20
+ - Fixed a bug in `<sl-input>` where clicking the left/right edge of the control wouldn't focus it
21
+ - Fixed a bug in `<sl-input>` where autofill had strange styles [#644](https://github.com/shoelace-style/shoelace/pull/644)
22
+ - Improved `<sl-spinner>` track color when used on various backgrounds
23
+ - Improved a11y in `<sl-radio>` so VoiceOver announces radios properly in a radio group
24
+ - Improved the API for the experimental `<sl-split-panel>` component by making `position` accept a percentage and adding the `position-in-pixels` attribute
25
+ - Refactored `<sl-breadcrumb-item>`, `<sl-button>`, `<sl-card>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` to use a Reactive Controller for slot detection
26
+ - Refactored internal id usage in `<sl-details>`, `<sl-dialog>`, `<sl-drawer>`, and `<sl-dropdown>`
27
+ - Removed `position: relative` from the common component stylesheet
28
+ - Updated Lit to 2.1.0
29
+ - Updated all other dependencies to latest versions
30
+
31
+ ## 2.0.0-beta.63
32
+
33
+ - 🚨 BREAKING: changed the `type` attribute to `variant` in `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` since it's more appropriate and to disambiguate from other `type` attributes
34
+ - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
35
+ - Added experimental `<sl-split-panel>` component
36
+ - Added `focus()` and `blur()` methods to `<sl-select>` [#625](https://github.com/shoelace-style/shoelace/pull/625)
37
+ - Fixed a bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
38
+ - Fixed a bug where clicking on a slotted icon in `<sl-button>` wouldn't submit forms [#626](https://github.com/shoelace-style/shoelace/issues/626)
39
+ - Added the `sl-` prefix to generated ids for `<sl-tab>` and `<sl-tab-panel>`
40
+ - Refactored `<sl-button>` to use Lit's static expressions to reduce code
41
+ - Simplified `<sl-spinner>` animation
42
+
43
+ ## 2.0.0-beta.62
44
+
45
+ - 🚨 BREAKING: changed the `locale` attribute to `lang` in `<sl-format-bytes>`, `<sl-format-date>`, `<sl-format-number>`, and `<sl-relative-time>` to be consistent with how localization is handled
46
+ - Added localization support including translations for English, German, German (Switzerland), Spanish, French, Hebrew, Japanese, Dutch, Polish, Portuguese, and Russian translations [#419](https://github.com/shoelace-style/shoelace/issues/419)
47
+ - CodePen examples will now open in light or dark depending on your current preference
48
+ - Fixed a bug where tag names weren't being generated in `vscode.html-custom-data.json` [#593](https://github.com/shoelace-style/shoelace/pull/593)
49
+ - Fixed a bug in `<sl-tooltip>` where the tooltip wouldn't reposition when content changed
50
+ - Fixed a bug in `<sl-select>` where focusing on a filled control showed the wrong focus ring
51
+ - Fixed a bug where setting `value` initially on `<sl-color-picker>` didn't work in React [#602](https://github.com/shoelace-style/shoelace/issues/602)
52
+ - Updated filled inputs to have the same appearance when focused
53
+ - Updated `color` dependency from 3.1.3 to 4.0.2
54
+ - Updated `<sl-format-bytes>`, `<sl-format-date>`, `<sl-format-number>`, and `<sl-relative-time>` to work like other localized components
55
+ - Upgraded the status of `<sl-qr-code>` from experimental to stable
56
+ - Updated to Bootstrap Icons to 1.7.2
57
+ - Upgraded color to 4.1.0
58
+
59
+ ## 2.0.0-beta.61
60
+
61
+ This release improves the dark theme by shifting luminance in both directions, slightly condensing the spectrum. This results in richer colors in dark mode. It also reduces theme stylesheet sizes by eliminating superfluous gray palette variations.
62
+
63
+ In [beta.48](#_200-beta48), I introduced a change to color tokens that allowed you to access alpha values at the expense of a verbose, non-standard syntax. After considering feedback from the community, I've decided to revert this change so the `rgb()` function is no longer required. Many users reported never using it for alpha, and even more reported having trouble remembering to use `rgb()` and that it was causing more harm than good.
64
+
65
+ Furthermore, both Safari and Firefox have implemented [`color-mix()`](<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()>) behind a flag, so access to alpha channels and other capabilities are coming to the browser soon.
66
+
67
+ If you're using color tokens in your own stylesheet, simply remove the `rgb()` to update to this version.
68
+
69
+ ```css
70
+ .your-styles {
71
+ /* change this */
72
+ color: rgb(var(--sl-color-primary-500));
73
+
74
+ /* to this */
75
+ color: var(--sl-color-primary-500);
76
+ }
77
+ ```
78
+
79
+ Thank you for your help and patience with testing Shoelace. I promise, we're not far from a stable release!
80
+
81
+ - 🚨 BREAKING: removed blue gray, cool gray, true gray, and warm gray color palettes
82
+ - 🚨 BREAKING: removed `--sl-focus-ring-color`, and `--sl-focus-ring-alpha` (use `--sl-focus-ring` instead)
83
+ - 🚨 BREAKING: removed `--sl-surface-base` and `--sl-surface-base-alt` tokens (use the neutral palette instead)
84
+ - Added experimental `<sl-visually-hidden>` component
85
+ - Added `clear-icon` slot to `<sl-select>` [#591](https://github.com/shoelace-style/shoelace/issues/591)
86
+ - Fixed a bug in `<sl-progress-bar>` where the label would show in the default slot
87
+ - Improved the dark theme palette so colors are bolder and don't appear washed out
88
+ - Improved a11y of `<sl-avatar>` by representing it as an image with an `alt` [#579](https://github.com/shoelace-style/shoelace/issues/579)
89
+ - Improved a11y of the scroll buttons in `<sl-tab-group>`
90
+ - Improved a11y of the close button in `<sl-tab>`
91
+ - Improved a11y of `<sl-tab-panel>` by removing an invalid `aria-selected` attribute [#579](https://github.com/shoelace-style/shoelace/issues/579)
92
+ - Improved a11y of `<sl-icon>` by not using a variation of the `name` attribute for labels (use the `label` prop instead)
93
+ - Moved `role` from the shadow root to the host element in `<sl-menu>`
94
+ - Removed redundant `role="menu"` in `<sl-dropdown>`
95
+ - Slightly faster animations for showing and hiding `<sl-dropdown>`
96
+ - Updated to Bootstrap Icons to 1.7.1
97
+ - Upgraded the status of `<sl-mutation-observer>` from experimental to stable
98
+
99
+ ## 2.0.0-beta.60
100
+
101
+ - Added React examples and CodePen links to all components
102
+ - Changed the `attr` in experimental `<sl-mutation-observer>` to require `"*"` instead of `""` to target all attributes
103
+ - Fixed a bug in `<sl-progress-bar>` where the `label` attribute didn't set the label
104
+ - Fixed a bug in `<sl-rating>` that caused disabled and readonly controls to transition on hover
105
+ - The `panel` property of `<sl-tab>` is now reflected
106
+ - The `name` property of `<sl-tab-panel>` is now reflected
107
+
108
+ ## 2.0.0-beta.59
109
+
110
+ - Added React wrappers as first-class citizens
111
+ - Added eye dropper to `<sl-color-picker>` when the browser supports the [EyeDropper API](https://wicg.github.io/eyedropper-api/)
112
+ - Fixed a bug in `<sl-button-group>` where buttons groups with only one button would have an incorrect border radius
113
+ - Improved the `<sl-color-picker>` trigger's border in dark mode
114
+ - Switched clearable icon from `x-circle` to `x-circle-fill` to make it easier to recognize
115
+ - Updated to Bootstrap Icons to 1.7.0
116
+ - Updated to Lit 2.0.2
117
+
118
+ ## 2.0.0-beta.58
119
+
120
+ This version once again restores the bundled distribution because the unbundled + CDN approach is currently confusing and [not working properly](https://github.com/shoelace-style/shoelace/issues/559#issuecomment-949662331). Unbundling the few dependencies Shoelace has is still a goal of the project, but [this jsDelivr bug](https://github.com/jsdelivr/jsdelivr/issues/18337) needs to be resolved before we can achieve it.
121
+
122
+ I sincerely apologize for the instability of the last few beta releases as a result of this effort.
123
+
124
+ - Added experimental `<sl-animated-image>` component
125
+ - Added `label` attribute to `<sl-progress-bar>` and `<sl-progress-ring>` to improve a11y
126
+ - Fixed a bug where the tooltip would show briefly when clicking a disabled `<sl-range>`
127
+ - Fixed a bug that caused a console error when `<sl-range>` was used
128
+ - Fixed a bug where the `nav` part in `<sl-tab-group>` was on the incorrect element [#563](https://github.com/shoelace-style/shoelace/pull/563)
129
+ - Fixed a bug where non-integer aspect ratios were calculated incorrectly in `<sl-responsive-media>`
130
+ - Fixed a bug in `<sl-range>` where setting `value` wouldn't update the active and inactive portion of the track [#572](https://github.com/shoelace-style/shoelace/pull/572)
131
+ - Reverted to publishing the bundled dist and removed `/+esm` links from the docs
132
+ - Updated to Bootstrap Icons to 1.6.1
133
+
134
+ ## 2.0.0-beta.57
135
+
136
+ - Fix CodePen links and CDN links
137
+
138
+ ## 2.0.0-beta.56
139
+
140
+ This release is the second attempt at unbundling dependencies. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected, but note the URLs for modules on the CDN must have the `/+esm` now.
141
+
142
+ - Added the `hoist` attribute to `<sl-tooltip>` [#564](https://github.com/shoelace-style/shoelace/issues/564)
143
+ - Unbundled dependencies and configured external imports to be packaged with bare module specifiers
144
+
145
+ ## 2.0.0-beta.55
146
+
147
+ - Revert unbundling due to issues with the CDN not handling bare module specifiers as expected
148
+
149
+ ## 2.0.0-beta.54
150
+
151
+ Shoelace doesn't have a lot of dependencies, but this release unbundles most of them so you can potentially save some extra kilobytes. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected.
152
+
153
+ - 🚨 BREAKING: renamed the `sl-clear` event to `sl-remove`, the `clear-button` part to `remove-button`, and the `clearable` property to `removable` in `<sl-tag>`
154
+ - Added the `disabled` prop to `<sl-resize-observer>`
155
+ - Fixed a bug in `<sl-mutation-observer>` where setting `disabled` initially didn't work
156
+ - Unbundled dependencies and configured external imports to be packaged with bare module specifiers
157
+
158
+ ## 2.0.0-beta.53
159
+
160
+ - 🚨 BREAKING: removed `<sl-menu-divider>` (use `<sl-divider>` instead)
161
+ - 🚨 BREAKING: removed `percentage` attribute from `<sl-progress-bar>` and `<sl-progress-ring>` (use `value` instead)
162
+ - 🚨 BREAKING: switched the default `type` of `<sl-tag>` from `primary` to `neutral`
163
+ - Added the experimental `<sl-mutation-observer>` component
164
+ - Added the `<sl-divider>` component
165
+ - Added `--sl-color-neutral-0` and `--sl-color-neutral-50` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
166
+ - Added the `--sl-panel-border-width` design token
167
+ - Added missing background color to `<sl-details>`
168
+ - Added the `--padding` custom property to `<sl-tab-panel>`
169
+ - Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
170
+ - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
171
+ - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
172
+ - Added a border to `<sl-badge>` to improve contrast when drawn on various background colors
173
+ - Added `--track-color-active` and `--track-color-inactive` custom properties to `<sl-range>` [#550](https://github.com/shoelace-style/shoelace/issues/550)
174
+ - Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on `<sl-range>`
175
+ - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
176
+ - Fixed a bug where `<sl-select>` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544)
177
+ - Fixed a bug where `<sl-progress-ring>` wouldn't animate in Safari
178
+ - Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth
179
+ - Removed the `lit-html` dependency and moved corresponding imports to `lit` [#546](https://github.com/shoelace-style/shoelace/issues/546)
180
+
181
+ ## 2.0.0-beta.52
182
+
183
+ - 🚨 BREAKING: changed the `--stroke-width` custom property of `<sl-spinner>` to `--track-width` for consistency
184
+ - 🚨 BREAKING: removed the `size` and `stroke-width` attributes from `<sl-progress-ring>` so it's fully customizable with CSS (use the `--size` and `--track-width` custom properties instead)
185
+ - Added the `--speed` custom property to `<sl-spinner>`
186
+ - Added the `--size` and `--track-width` custom properties to `<sl-progress-ring>`
187
+ - Added tests for `<sl-badge>` [#530](https://github.com/shoelace-style/shoelace/pull/530)
188
+ - Fixed a bug where `<sl-tab>` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523)
189
+ - Fixed a bug in the Remix Icons example where some icons would 404 [#528](https://github.com/shoelace-style/shoelace/issues/528)
190
+ - Updated `<sl-progress-ring>` to use only CSS for styling
191
+ - Updated `<sl-spinner>` to use an SVG and improved the indicator animation
192
+ - Updated to Lit 2.0 and lit-html 2.0 🔥
193
+
194
+ ## 2.0.0-beta.51
195
+
196
+ A number of users had trouble counting characters that repeat, so this release improves design token patterns so that "t-shirt sizes" are more accessible. For example, `--sl-font-size-xxx-large` has become `--sl-font-size-3x-large`. This change applies to all design tokens that use this scale.
197
+
198
+ - 🚨 BREAKING: all t-shirt size design tokens now use `2x`, `3x`, `4x` instead of `xx`, `xxx`, `xxxx`
199
+ - Added missing `--sl-focus-ring-*` tokens to dark theme
200
+ - Added an "Importing" section to all components with copy/paste code to make cherry picking easier
201
+ - Improved the documentation search with a custom plugin powered by [Lunr](https://lunrjs.com/)
202
+ - Improved the `--sl-shadow-x-small` elevation
203
+ - Improved visibility of elevations and overlays in dark theme
204
+ - Reduced the size of `<sl-color-picker>` slightly to better accommodate mobile devices
205
+ - Removed `<sl-icon>` dependency from `<sl-color-picker>` and improved the copy animation
206
+
207
+ ## 2.0.0-beta.50
208
+
209
+ - Added `<sl-breadcrumb>` and `<sl-breadcrumb-item>` components
210
+ - Added `--sl-letter-spacing-denser`, `--sl-letter-spacing-looser`, `--sl-line-height-denser`, and `--sl-line-height-looser` design tokens
211
+ - Fixed a bug where form controls would error out when the value was set to `undefined` [#513](https://github.com/shoelace-style/shoelace/pull/513)
212
+
213
+ ## 2.0.0-beta.49
214
+
215
+ This release changes the way focus states are applied to elements. In browsers that support [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible), it will be used. In unsupportive browsers ([currently only Safari](https://caniuse.com/mdn-css_selectors_focus-visible)), `:focus` will be used instead. This means the browser will determine whether a focus ring should be shown based on how the user interacts with the page.
216
+
217
+ This release also fixes a critical bug in the color scale where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were reversed.
218
+
219
+ - 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
220
+ - 🚨 BREAKING: removed the `no-fieldset` property from `<sl-radio-group>` (fieldsets are now hidden by default; use `fieldset` to show them)
221
+ - 🚨 BREAKING: removed `--focus-ring` custom property from `<sl-input>`, `<sl-select>`, `<sl-tab>` for consistency with other form controls
222
+ - Added `--swatch-size` custom property to `<sl-color-picker>`
223
+ - Added `date` to `<sl-input>` as a supported `type`
224
+ - Added the `--sl-focus-ring` design token for a more convenient way to apply focus ring styles
225
+ - Adjusted elevation tokens to use neutral in light mode and black in dark mode
226
+ - Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray
227
+ - Fixed a bug in `<sl-color-picker>` where the opacity slider wasn't showing the current color
228
+ - Fixed a bug where Edge in Windows would show the native password toggle next to the custom password toggle [#508](https://github.com/shoelace-style/shoelace/issues/508)
229
+ - Fixed a bug where pressing up/down in `<sl-tab-group>` didn't select the next/previous tab in vertical placements
230
+ - Improved size of `<sl-color-picker>`
231
+ - Improved icon contrast in `<sl-input>`
232
+ - Improved contrast of `<sl-switch>`
233
+ - Improved `:focus-visible` behavior in many components
234
+ - Removed elevation from `<sl-color-picker>` when rendered inline
235
+ - Removed custom `:focus-visible` logic in favor of a directive that outputs `:focus-visible` or `:focus` depending on browser support
236
+ - Updated to Lit 2.0.0-rc.3
237
+ - Updated to lit-html 2.0.0-rc.4
238
+
239
+ ## 2.0.0-beta.48
240
+
241
+ This release improves theming by offering both light and dark themes that can be used autonomously. It also improves contrast in most components, adds a variety of new color primitives, and changes the way color tokens are consumed.
242
+
243
+ Previously, color tokens were in hexadecimal format. Now, Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
244
+
245
+ ```css
246
+ .example {
247
+ /* rgb() is required now */
248
+ color: var(--sl-color-neutral-500);
249
+ }
250
+ ```
251
+
252
+ This is more verbose than previous versions, but it has the advantage of letting you set the alpha channel of any color token.
253
+
254
+ ```css
255
+ .example-with-alpha {
256
+ /* easily adjust opacity for any color token */
257
+ color: rgb(var(--sl-color-neutral-500) / 50%);
258
+ }
259
+ ```
260
+
261
+ This change applies to all design tokens that implement a color. Refer to the [color tokens](/tokens/color) page for more details.
262
+
263
+ - 🚨 BREAKING: all design tokens that implement colors have been converted to `R G B` and must be used with the `rgb()` function
264
+ - 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-neutral-0|1000` instead)
265
+ - 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors instead)
266
+ - 🚨 BREAKING: removed `info` variant from `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` (use `neutral` instead)
267
+ - 🚨 BREAKING: removed `--sl-color-info-*` design token (use `--sl-color-neutral-*` instead)
268
+ - 🚨 BREAKING: renamed `dist/themes/base.css` to `dist/themes/light.css`
269
+ - 🚨 BREAKING: removed `--sl-focus-ring-color-primary` tokens (use color tokens and `--sl-focus-ring-width|alpha` instead)
270
+ - 🚨 BREAKING: removed `--tabs-border-color` from `<sl-tab-group>` (use `--track-color` instead)
271
+ - 🚨 BREAKING: changed the default value for `effect` to `none` in `<sl-skeleton>` (use `sheen` to restore the original behavior)
272
+ - Added new color primitives to the base set of design tokens
273
+ - Added `--sl-color-*-950` swatches to all color palettes
274
+ - Added a console error that appears when menu items have duplicate values in `<sl-select>`
275
+ - Added CodePen link to code examples
276
+ - Added `prefix` and `suffix` slots to `<sl-select>` [#501](https://github.com/shoelace-style/shoelace/pull/501)
277
+ - Added `--indicator-color` custom property to `<sl-tab-group>`
278
+ - Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
279
+ - Fixed a bug in `<sl-menu>` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
280
+ - Fixed a bug in `<sl-radio-group>` where clicking a radio button would cause the wrong control to be focused
281
+ - Fixed a bug in `<sl-button>` and `<sl-icon-button>` where an unintended `ref` attribute was present
282
+ - Fixed a bug in the focus-visible utility that failed to respond to mouseup events
283
+ - Fixed a bug where clicking on a menu item would persist its hover/focus state
284
+ - Fixed a bug in `<sl-select>` where it would erroneously intercept important keyboard shortcuts [#504](https://github.com/shoelace-style/shoelace/issues/504)
285
+ - Improved contrast throughout all components [#128](https://github.com/shoelace-style/shoelace/issues/128)
286
+ - Refactored thumb position logic in `<sl-switch>` [#490](https://github.com/shoelace-style/shoelace/pull/490)
287
+ - Reworked the dark theme to use an inverted + shifted design token approach instead of component-specific selectors
288
+
289
+ ## 2.0.0-beta.47
290
+
291
+ This release improves how component dependencies are imported. If you've been cherry picking, you no longer need to import component dependencies manually. This significantly improves developer experience, making Shoelace even easier to use. For transparency, component dependencies will continue to be listed in the docs.
292
+
293
+ - Added "Reflects" column to the properties table
294
+ - Dependencies are now automatically imported for all components
295
+ - Fixed a bug where tabbing into `<sl-radio-group>` would not always focus the checked radio
296
+ - Fixed a bug in component styles that prevented the box sizing reset from being applied
297
+ - Fixed a regression in `<sl-color-picker>` where dragging the grid handle wasn't smooth
298
+ - Fixed a bug where slot detection could incorrectly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
299
+ - Fixed a bug in `<sl-input>` where focus would move to the end of the input when typing in Safari [#480](https://github.com/shoelace-style/shoelace/issues/480)
300
+ - Improved base path utility logic
301
+
302
+ ## 2.0.0-beta.46
303
+
304
+ This release improves the developer experience of `<sl-animation>`. Previously, an animation was assumed to be playing unless the `pause` attribute was set. This behavior has been reversed and `pause` has been removed. Now, animations will not play until the new `play` attribute is applied.
305
+
306
+ This is a lot more intuitive and makes it easier to activate animations imperatively. In addition, the `play` attribute is automatically removed automatically when the animation finishes or cancels, making it easier to restart finite animations. Lastly, the animation's timing is now accessible through the new `currentTime` property instead of `getCurrentTime()` and `setCurrentTime()`.
307
+
308
+ In addition, Shoelace no longer uses Sass. Component styles now use Lit's template literal styles and theme files use pure CSS.
309
+
310
+ - 🚨 BREAKING: removed the `pause` attribute from `<sl-animation>` (use `play` to start and stop the animation instead)
311
+ - 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `<sl-animation>` (use the `currentTime` property instead)
312
+ - 🚨 BREAKING: removed the `close-on-select` attribute from `<sl-dropdown>` (use `stay-open-on-select` instead)
313
+ - Added the `currentTime` property to `<sl-animation>` to control the current time without methods
314
+ - Fixed a bug in `<sl-range>` where the tooltip wasn't showing in Safari [#477](https://github.com/shoelace-style/shoelace/issues/477)
315
+ - Fixed a bug in `<sl-menu>` where pressing <kbd>Enter</kbd> in a menu didn't work with click handlers
316
+ - Reworked `<sl-menu>` and `<sl-menu-item>` to use a roving tab index and improve keyboard accessibility
317
+ - Reworked tabbable logic to be more performant [#466](https://github.com/shoelace-style/shoelace/issues/466)
318
+ - Switched component stylesheets from Sass to Lit's template literal styles
319
+ - Switched theme stylesheets from Sass to CSS
320
+
321
+ ## 2.0.0-beta.45
322
+
323
+ This release changes the way component metadata is generated. Previously, the project used TypeDoc to analyze components and generate a very large file with type data. The data was then parsed and converted to an easier-to-consume file called `metadata.json`. Alas, TypeDoc is expensive to run and the metadata format wasn't standard.
324
+
325
+ Thanks to an amazing effort by [Pascal Schilp](https://twitter.com/passle_), the world has a simpler, faster way to gather metadata using the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest). Not only is this tool faster, but the data follows the evolving `custom-elements.json` format. This is exciting because a standard format for custom elements opens the door for many potential uses, including documentation generation, framework adapters, IDE integrations, third-party uses, and more. [Check out Pascal's great article](https://dev.to/open-wc/introducing-custom-elements-manifest-gkk) for more info about `custom-elements.json` and the new analyzer.
326
+
327
+ The docs have been updated to use the new `custom-elements.json` file. If you're relying on the old `metadata.json` file for any purpose, this will be a breaking change for you.
328
+
329
+ - 🚨 BREAKING: removed the `sl-overlay-click` event from `<sl-dialog>` and `<sl-drawer>` (use `sl-request-close` instead) [#471](https://github.com/shoelace-style/shoelace/discussions/471)
330
+ - 🚨 BREAKING: removed `metadata.json` (use `custom-elements.json` instead)
331
+ - Added `custom-elements.json` for component metadata
332
+ - Added `sl-request-close` event to `<sl-dialog>` and `<sl-drawer>`
333
+ - Added `dialog.denyClose` and `drawer.denyClose` animations
334
+ - Fixed a bug in `<sl-color-picker>` where setting `value` immediately wouldn't trigger an update
335
+ - Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting `open` initially didn't set a focus trap
336
+ - Fixed a bug that resulted in form controls having incorrect validity when `disabled` was initially set [#473](https://github.com/shoelace-style/shoelace/issues/473)
337
+ - Fixed a bug in the docs that caused the metadata file to be requested twice
338
+ - Fixed a bug where tabbing out of a modal would cause the browser to lag [#466](https://github.com/shoelace-style/shoelace/issues/466)
339
+ - Updated the docs to use the new `custom-elements.json` for component metadata
340
+
341
+ ## 2.0.0-beta.44
342
+
343
+ - 🚨 BREAKING: all `invalid` props on form controls now reflect validity before interaction [#455](https://github.com/shoelace-style/shoelace/issues/455)
344
+ - Allow `null` to be passed to disable animations in `setDefaultAnimation()` and `setAnimation()`
345
+ - Converted build scripts to ESM
346
+ - Fixed a bug in `<sl-checkbox>` where `invalid` did not update properly
347
+ - Fixed a bug in `<sl-dropdown>` where a `keydown` listener wasn't cleaned up properly
348
+ - Fixed a bug in `<sl-select>` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
349
+ - Fixed a bug in `<sl-select>` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457)
350
+ - Fixed a bug in `<sl-select>` where `sl-change` was emitted immediately after connecting to the DOM [#458](https://github.com/shoelace-style/shoelace/issues/458)
351
+ - Fixed a bug in `<sl-select>` where non-printable keys would cause the menu to open
352
+ - Fixed a bug in `<sl-select>` where `invalid` was not always updated properly
353
+ - Reworked the `@watch` decorator to use `update` instead of `updated` resulting in better performance and flexibility
354
+
355
+ ## 2.0.0-beta.43
356
+
357
+ - Added `?` to optional arguments in methods tables in the docs
358
+ - Added the `scrollPosition()` method to `<sl-textarea>` to get/set scroll position
359
+ - Added initial tests for `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
360
+ - Fixed a bug in `<sl-tab-group>` where scrollable tab icons were not displaying correctly
361
+ - Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where preventing clicks on the overlay no longer worked as described [#452](https://github.com/shoelace-style/shoelace/issues/452)
362
+ - Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting initial focus no longer worked as described [#453](https://github.com/shoelace-style/shoelace/issues/453)
363
+ - Fixed a bug in `<sl-card>` where the `slotchange` listener wasn't attached correctly [#454](https://github.com/shoelace-style/shoelace/issues/454)
364
+ - Fixed lifecycle bugs in a number of components [#451](https://github.com/shoelace-style/shoelace/issues/451)
365
+ - Removed `fill: both` from internal animate utility so styles won't "stick" by default [#450](https://github.com/shoelace-style/shoelace/issues/450)
366
+
367
+ ## 2.0.0-beta.42
368
+
369
+ This release addresses an issue with the `open` attribute no longer working in a number of components, as a result of the changes in beta.41. It also removes a small but controversial feature that complicated show/hide logic and led to a poor experience for developers and end users.
370
+
371
+ There are two ways to show/hide affected components: by calling `show() | hide()` and by toggling the `open` prop. Previously, it was possible to call `event.preventDefault()` in an `sl-show | sl-hide ` handler to stop the component from showing/hiding. The problem becomes obvious when you set `el.open = false`, the event gets canceled, and in the next cycle `el.open` has reverted to `true`. Not only is this unexpected, but it also doesn't play nicely with frameworks. Additionally, this made it impossible to await `show() | hide()` since there was a chance they'd never resolve.
372
+
373
+ Technical reasons aside, canceling these events seldom led to a good user experience, so the decision was made to no longer allow `sl-show | sl-hide` to be cancelable.
374
+
375
+ - 🚨 BREAKING: `sl-show` and `sl-hide` events are no longer cancelable
376
+ - Added Iconoir example to the icon docs
377
+ - Added Web Test Runner
378
+ - Added initial tests for `<sl-alert>` and `<sl-details>`
379
+ - Changed the `cancelable` default to `false` for the internal `@event` decorator
380
+ - Fixed a bug where toggling `open` stopped working in `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
381
+ - Fixed a bug in `<sl-range>` where setting a value outside the default `min` or `max` would clamp the value [#448](https://github.com/shoelace-style/shoelace/issues/448)
382
+ - Fixed a bug in `<sl-dropdown>` where placement wouldn't adjust properly when shown [#447](https://github.com/shoelace-style/shoelace/issues/447)
383
+ - Fixed a bug in the internal `shimKeyframesHeightAuto` utility that caused `<sl-details>` to measure heights incorrectly [#445](https://github.com/shoelace-style/shoelace/issues/445)
384
+ - Fixed a number of imports that should have been type imports
385
+ - Updated Lit to 2.0.0-rc.2
386
+ - Updated esbuild to 0.12.4
387
+
388
+ ## 2.0.0-beta.41
389
+
390
+ This release changes how components animate. In previous versions, CSS transitions were used for most show/hide animations. Transitions are problematic due to the way `transitionend` works. This event fires once _per transition_, and it's impossible to know which transition to look for when users can customize any possible CSS property. Because of this, components previously required the `opacity` property to transition. If a user were to prevent `opacity` from transitioning, the component wouldn't hide properly and the `sl-after-show|hide` events would never emit.
391
+
392
+ CSS animations, on the other hand, have a more reliable `animationend` event. Alas, `@keyframes` don't cascade and can't be injected into a shadow DOM via CSS, so there would be no good way to customize them.
393
+
394
+ The most elegant solution I found was to use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offers more control over animations at the expense of customizations being done in JavaScript. Fortunately, through the [Animation Registry](/getting-started/customizing#animations), you can customize animations globally and/or per component with a minimal amount of code.
395
+
396
+ - 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `<sl-drawer>`
397
+ - 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `<sl-tab-group>`
398
+ - 🚨 BREAKING: removed `--hide-duration`, `--hide-timing-function`, `--show-duration`, and `--show-timing-function` custom properties from `<sl-tooltip>` (use the Animation Registry instead)
399
+ - Added the Animation Registry
400
+ - Fixed a bug where removing `<sl-dropdown>` from the DOM and adding it back destroyed the popover reference [#443](https://github.com/shoelace-style/shoelace/issues/443)
401
+ - Updated animations for `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>` to use the Animation Registry instead of CSS transitions
402
+ - Improved a11y by respecting `prefers-reduced-motion` for all show/hide animations
403
+ - Improved `--show-delay` and `--hide-delay` behavior in `<sl-tooltip>` so they only apply on hover
404
+ - Removed the internal popover utility
405
+
406
+ ## 2.0.0-beta.40
407
+
408
+ - 🚨 BREAKING: renamed `<sl-responsive-embed>` to `<sl-responsive-media>` and added support for images and videos [#436](https://github.com/shoelace-style/shoelace/issues/436)
409
+ - Fixed a bug where setting properties before an element was defined would render incorrectly [#425](https://github.com/shoelace-style/shoelace/issues/425)
410
+ - Fixed a bug that caused all modules to be imported when cherry picking certain components [#439](https://github.com/shoelace-style/shoelace/issues/439)
411
+ - Fixed a bug where the scrollbar would reposition `<sl-dialog>` on hide causing it to jump [#424](https://github.com/shoelace-style/shoelace/issues/424)
412
+ - Fixed a bug that prevented the project from being built in a Windows environment
413
+ - Improved a11y in `<sl-progress-ring>`
414
+ - Removed `src/utilities/index.ts` to prevent tree-shaking confusion (please import utilities directly from their respective modules)
415
+ - Removed global `[hidden]` styles so they don't affect anything outside of components
416
+ - Updated to Bootstrap Icons 1.5.0
417
+ - Updated React docs to use [`@shoelace-style/react`](https://github.com/shoelace-style/react)
418
+ - Updated NextJS docs [#434](https://github.com/shoelace-style/shoelace/pull/434)
419
+ - Updated TypeScript to 4.2.4
420
+
421
+ ## 2.0.0-beta.39
422
+
423
+ - Added experimental `<sl-qr-code>` component
424
+ - Added `system` icon library and updated all components to use this instead of the default icon library [#420](https://github.com/shoelace-style/shoelace/issues/420)
425
+ - Updated to esbuild 0.8.57
426
+ - Updated to Lit 2.0.0-rc.1 and lit-html 2.0.0-rc.2
427
+
428
+ ## 2.0.0-beta.38
429
+
430
+ - 🚨 BREAKING: `<sl-radio>` components must be located inside an `<sl-radio-group>` for proper accessibility [#218](https://github.com/shoelace-style/shoelace/issues/218)
431
+ - Added `<sl-radio-group>` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
432
+ - Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `<sl-drawer>` and `<sl-dialog>` [#409](https://github.com/shoelace-style/shoelace/issues/409)
433
+ - Fixed a bug where `<sl-menu-item>` prefix and suffix slots wouldn't always receive the correct spacing
434
+ - Fixed a bug where `<sl-badge>` used `--sl-color-white` instead of the correct design tokens [#407](https://github.com/shoelace-style/shoelace/issues/407)
435
+ - Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where the escape key would cause parent components to close
436
+ - Fixed a race condition bug in `<sl-icon>` [#410](https://github.com/shoelace-style/shoelace/issues/410)
437
+ - Improved focus trap behavior in `<sl-dialog>` and `<sl-drawer>`
438
+ - Improved a11y in `<sl-dialog>` and `<sl-drawer>` by restoring focus to trigger on close
439
+ - Improved a11y in `<sl-radio>` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
440
+ - Improved a11y in `<sl-select>` by preventing the chevron icon from being announced
441
+ - Internal: removed the `options` argument from the modal utility as focus trapping is now handled internally
442
+
443
+ ## 2.0.0-beta.37
444
+
445
+ - Added `click()` method to `<sl-checkbox>`, `<sl-radio>`, and `<sl-switch>`
446
+ - Added the `activation` attribute to `<sl-tab-group>` to allow for automatic and manual tab activation
447
+ - Added `npm run create <tag>` script to scaffold new components faster
448
+ - Fixed a bug in `<sl-tooltip>` where events weren't properly cleaned up on disconnect
449
+ - Fixed a bug in `<sl-tooltip>` where they wouldn't display after toggling `disabled` off and on again [#391](https://github.com/shoelace-style/shoelace/issues/391)
450
+ - Fixed a bug in `<sl-details>` where `show()` and `hide()` would toggle the control when disabled
451
+ - Fixed a bug in `<sl-color-picker>` where setting `value` wouldn't update the control
452
+ - Fixed a bug in `<sl-tab-group>` where tabs that are initially disabled wouldn't receive the indicator on activation [#403](https://github.com/shoelace-style/shoelace/issues/403)
453
+ - Fixed incorrect event names for `sl-after-show` and `sl-after-hide` in `<sl-details>`
454
+ - Improved a11y for disabled buttons that are rendered as links
455
+ - Improved a11y for `<sl-button-group>` by adding the correct `role` attribute
456
+ - Improved a11y for `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` so labels and helper text are read properly by screen readers
457
+ - Removed `sl-show`, `sl-hide`, `sl-after-show`, `sl-after-hide` events from `<sl-color-picker>` (the color picker's visibility cannot be controlled programmatically so these shouldn't have been exposed; the dropdown events now bubble up so you can listen for those instead)
458
+ - Reworked `<sl-button-group>` so it doesn't require light DOM styles
459
+
460
+ ## 2.0.0-beta.36
461
+
462
+ - 🚨 BREAKING: renamed `setFocus()` to `focus()` in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab
463
+ - 🚨 BREAKING: renamed `removeFocus()` to `blur()` in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab
464
+ - Added `click()` method to `<sl-button>`
465
+ - Fixed a bug where toggling `open` on `<sl-drawer>` would skip the transition
466
+ - Fixed a bug where `<sl-color-picker>` could be opened when disabled
467
+ - Fixed a bug in `<sl-color-picker>` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
468
+ - Fixed a bug where `<sl-details>` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
469
+ - Renamed `components.json` to `metadata.json`
470
+ - Updated to the prerelease versions of LitElement and lit-html
471
+ - Updated to Bootstrap Icons 1.4.1
472
+
473
+ ## 2.0.0-beta.35
474
+
475
+ - Fixed a bug in `<sl-animation>` where `sl-cancel` and `sl-finish` events would never fire
476
+ - Fixed a bug where `<sl-alert>` wouldn't always transition properly
477
+ - Fixed a bug where using `<sl-menu>` inside a shadow root would break keyboard selections [#382](https://github.com/shoelace-style/shoelace/issues/382)
478
+ - Fixed a bug where toggling `multiple` in `<sl-select>` would lead to a stale display label
479
+ - Fixed a bug in `<sl-tab-group>` where changing `placement` could result in the active tab indicator being drawn a few pixels off
480
+ - Fixed a bug in `<sl-button>` where link buttons threw an error on focus, blur, and click
481
+ - Improved `@watch` decorator to run after update instead of during
482
+ - Updated `<sl-menu-item>` checked icon to `check` instead of `check2`
483
+ - Upgraded the status of `<sl-resize-observer>` from experimental to stable
484
+
485
+ ## 2.0.0-beta.34
486
+
487
+ This release changes the way components are registered if you're [cherry picking](/getting-started/installation?id=cherry-picking) or [using a bundler](/getting-started/installation?id=bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component.
488
+
489
+ From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@shoelace-style/shoelace`, so the recommendation is to import components and utilities from their corresponding files instead.
490
+
491
+ - 🚨 BREAKING: removed `all.shoelace.js` (use `shoelace.js` instead)
492
+ - 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@shoelace-style/shoelace` (see the [installation page](/getting-started/installation?id=bundling) for more details and how to update)
493
+ - Added `sl-clear` event to `<sl-select>`
494
+ - Fixed a bug where dynamically changing menu items in `<sl-select>` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
495
+ - Fixed a bug where setting the `value` attribute or property on `<sl-input>` and `<sl-textarea>` would trigger validation too soon
496
+ - Fixed the margin in `<sl-menu-label>` to align with menu items
497
+ - Fixed `autofocus` attributes in `<sl-input>` and `<sl-textarea>`
498
+ - Improved types for `autocapitalize` in `<sl-input>` and `<sl-textarea>`
499
+ - Reverted the custom `@tag` decorator in favor of `@customElement` to enable auto-registration
500
+
501
+ ## 2.0.0-beta.33
502
+
503
+ - Fixed a bug where link buttons could have incorrect `target`, `download`, and `rel` props
504
+ - Fixed `aria-label` and `aria-labelledby` props in `<sl-dialog>` and `<sl-drawer>`
505
+ - Fixed `tabindex` attribute in `<sl-menu>`
506
+ - Fixed a bug in `<sl-select>` where tags would always render as pills
507
+ - Fixed a bug in `<sl-button>` where calling `setFocus()` would throw an error
508
+
509
+ ## 2.0.0-beta.32
510
+
511
+ - Added tag name maps so TypeScript can identify Shoelace elements [#371](https://github.com/shoelace-style/shoelace/pull/371)
512
+ - Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with `flex-end` [#355](https://github.com/shoelace-style/shoelace/issues/355)
513
+ - Fixed a bug where `sl-change` wasn't emitted by `<sl-checkbox>` or `<sl-switch>` [#370](https://github.com/shoelace-style/shoelace/issues/370)
514
+ - Fixed a bug where some props weren't being watched correctly in `<sl-alert>` and `<sl-color-picker>`
515
+ - Improved `@watch` decorator so watch handlers don't run before the first render
516
+ - Removed guards that were added due to previous watch handler behavior
517
+
518
+ ## 2.0.0-beta.31
519
+
520
+ - Add touch support to `<sl-rating>` [#362](https://github.com/shoelace-style/shoelace/pull/362)
521
+ - Fixed a bug where the `open` attribute on `<sl-details>` would prevent it from opening [#357](https://github.com/shoelace-style/shoelace/issues/357)
522
+ - Fixed event detail type parsing so component class names are shown instead of `default`
523
+
524
+ ## 2.0.0-beta.30
525
+
526
+ - Fix default exports for all components so cherry picking works again [#365](https://github.com/shoelace-style/shoelace/issues/365)
527
+ - Revert FOUC base style because it interferes with some framework and custom element use cases
528
+
529
+ ## 2.0.0-beta.29
530
+
531
+ **This release migrates component implementations from Shoemaker to LitElement.** Due to feedback from the community, Shoelace will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.
532
+
533
+ - 🚨 BREAKING: removed the `symbol` property from `<sl-rating>` and reverted to `getSymbol` for optimal flexibility
534
+ - Added `vscode.html-custom-data.json` to the build to support IntelliSense (see [the usage section](/getting-started/usage#code-completion) for details)
535
+ - Added a base style to prevent FOUC before components are defined
536
+ - Fixed bug where TypeScript types weren't being generated [#364](https://github.com/shoelace-style/shoelace/pull/364)
537
+ - Improved vertical padding in `<sl-tooltip>`
538
+ - Moved chunk files into a separate folder
539
+ - Reverted menu item active styles
540
+ - Updated esbuild to 0.8.54
541
+
542
+ ## 2.0.0-beta.28
543
+
544
+ **This release includes a major under the hood overhaul of the library and how it's distributed.** Until now, Shoelace was developed with Stencil. This release moves to a lightweight tool called Shoemaker, a homegrown utility that provides declarative templating and data binding while reducing the boilerplate required for said features.
545
+
546
+ This change in tooling addresses a number of longstanding bugs and limitations. It also gives us more control over the library and build process while streamlining development and maintenance. Instead of two different distributions, Shoelace now offers a single, standards-compliant collection of ES modules. This may affect how you install and use the library, so please refer to the [installation page](/getting-started/installation) for details.
547
+
548
+ !> Due to the large number of internal changes, I would consider this update to be less stable than previous ones. If you're using Shoelace in a production app, consider holding off until the next beta to allow for more exhaustive testing from the community. Please report any bugs you find on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).
549
+
550
+ The component API remains the same except for the changes noted below. Thanks for your patience as I work diligently to make Shoelace more stable and future-proof. 🙌
551
+
552
+ - 🚨 BREAKING: removed the custom elements bundle (you can import ES modules directly)
553
+ - 🚨 BREAKING: removed `getAnimationNames()` and `getEasingNames()` methods from `<sl-animation>` (you can import them from `utilities/animation.js` instead)
554
+ - 🚨 BREAKING: removed the `<sl-icon-library>` component since it required imperative initialization (you can import the `registerIconLibrary()` function from `utilities/icon-library.js` instead)
555
+ - 🚨 BREAKING: removed the experimental `<sl-theme>` component due to technical limitations (you should set the `sl-theme-{name}` class on the `<body>` instead)
556
+ - 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
557
+ - 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
558
+ - 🚨 BREAKING: changed `getSymbol` property in `<sl-rating>` to `symbol` (it now accepts a string or a function that returns an icon name)
559
+ - 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-shoelace` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
560
+ - Fixed `min` and `max` types in `<sl-input>` to allow numbers and strings [#330](https://github.com/shoelace-style/shoelace/issues/330)
561
+ - Fixed a bug where `<sl-checkbox>`, `<sl-radio>`, and `<sl-switch>` controls would shrink with long labels [#325](https://github.com/shoelace-style/shoelace/issues/325)
562
+ - Fixed a bug in `<sl-select>` where the dropdown menu wouldn't reposition when the box resized [#340](https://github.com/shoelace-style/shoelace/issues/340)
563
+ - Fixed a bug where ignoring clicks and clicking the overlay would prevent the escape key from closing the dialog/drawer [#344](https://github.com/shoelace-style/shoelace/pull/344)
564
+ - Removed the lazy loading dist (importing `shoelace.js` will load and register all components now)
565
+ - Switched from Stencil to Shoemaker
566
+ - Switched to a custom build powered by [esbuild](https://esbuild.github.io/)
567
+ - Updated to Bootstrap Icons 1.4.0
568
+
569
+ ## 2.0.0-beta.27
570
+
571
+ - Added `handle-icon` slot to `<sl-image-comparer>` [#311](https://github.com/shoelace-style/shoelace/issues/311)
572
+ - Added `label` and `helpText` props and slots to `<sl-range>` [#318](https://github.com/shoelace-style/shoelace/issues/318)
573
+ - Added "Integrating with NextJS" tutorial to the docs, courtesy of [crutchcorn](https://github.com/crutchcorn)
574
+ - Added `content` slot to `<sl-tooltip>` [#322](https://github.com/shoelace-style/shoelace/pull/322)
575
+ - Fixed a bug in `<sl-select>` where removing a tag would toggle the dropdown
576
+ - Fixed a bug in `<sl-input>` and `<sl-textarea>` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
577
+ - Fixed a bug in `<sl-details>` where hidden elements would receive focus when tabbing [#323](https://github.com/shoelace-style/shoelace/issues/323)
578
+ - Fixed a bug in `<sl-icon>` where `sl-error` would only be emitted for network failures [#326](https://github.com/shoelace-style/shoelace/pull/326)
579
+ - Reduced the default line-height for `<sl-tooltip>`
580
+ - Updated `<sl-menu-item>` focus styles
581
+ - Updated `<sl-select>` so tags will wrap when `multiple` is true
582
+ - Updated to Stencil 2.4.0
583
+
584
+ ## 2.0.0-beta.26
585
+
586
+ - 🚨 BREAKING: Fixed animations bloat
587
+ - Removed ~400 baked-in Animista animations because they were causing ~200KB of bloat (they can still be used with custom keyframes)
588
+ - Reworked animations into a separate module ([`@shoelace-style/animations`](https://github.com/shoelace-style/animations)) so it's more maintainable and animations are sync with the latest version of animate.css
589
+ - Animation and easing names are now camelCase (e.g. `easeInOut` instead of `ease-in-out`)
590
+ - Added initial E2E tests [#169](https://github.com/shoelace-style/shoelace/pull/169)
591
+ - Added the `FocusOptions` argument to all components that have a `setFocus()` method
592
+ - Added `sl-initial-focus` event to `<sl-dialog>` and `<sl-drawer>` so focus can be customized to a specific element
593
+ - Added `close-button` part to `<sl-tab>` so the close button can be customized
594
+ - Added `scroll-button` part to `<sl-tab-group>` so the scroll buttons can be customized
595
+ - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
596
+ - Fixed a bug in `<sl-color-picker>` where the toggle button was smaller than the preview button in Safari
597
+ - Fixed a bug in `<sl-tab-group>` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
598
+ - Fixed a bug in `<sl-tab-group>` where removing tabs would throw an error
599
+ - Fixed a bug in `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-select>`, and `<sl-tag>` where the close button's base wasn't exported so it couldn't be styled
600
+ - Removed `text` type from `<sl-badge>` as it was erroneously copied and never had styles
601
+ - Updated `<sl-tab-group>` so the `active` property is reflected to its attribute
602
+ - Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
603
+ - Updated to Bootstrap Icons 1.3.0
604
+
605
+ ## 2.0.0-beta.25
606
+
607
+ - 🚨 BREAKING: Reworked color tokens
608
+ - Theme colors are now inspired by Tailwind's professionally-designed color palette
609
+ - Color token variations now range from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
610
+ - Color token variations were inverted, e.g. 50 is lightest and 950 is darkest
611
+ - All component styles were adapted to use the new color tokens, but visual changes are subtle
612
+ - The dark theme was adapted use the new color tokens
613
+ - HSL is no longer used because it is not perceptually uniform (this may be revisited when all browsers support [LCH colors](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/))
614
+ - 🚨 BREAKING: Refactored `<sl-select>` to improve accessibility [#216](https://github.com/shoelace-style/shoelace/issues/216)
615
+ - Removed the internal `<sl-input>` because it was causing problems with a11y and virtual keyboards
616
+ - Removed `input`, `prefix` and `suffix` parts
617
+ - 🚨 BREAKING: Removed `copy-button` part from `<sl-color-picker>` since copying is now done by clicking the preview
618
+ - Added `getFormattedValue()` method to `<sl-color-picker>` so you can retrieve the current value in any format
619
+ - Added visual separators between solid buttons in `<sl-button-group>`
620
+ - Added `help-text` attribute to `<sl-input>`, `<sl-textarea>`, and `<sl-select>`
621
+ - Fixed a bug where moving the mouse while `<sl-dropdown>` is closing would remove focus from the trigger
622
+ - Fixed a bug where `<sl-menu-item>` didn't set a default color in the dark theme
623
+ - Fixed a bug where `<sl-color-picker>` preview wouldn't update in Safari
624
+ - Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/285)
625
+ - Fixed a bug where disabled link buttons didn't appear disabled
626
+ - Improved button spacings and added split button example
627
+ - Improved elevation tokens in dark theme
628
+ - Improved accessibility in `<sl-tooltip>` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
629
+ - Improved slot detection in `<sl-card>`, `<sl-dialog>`, and `<sl-drawer>`
630
+ - Made `@types/resize-observer-browser` a dependency so users don't have to install it manually
631
+ - Refactored internal label + help text logic into a functional component used by `<sl-input>`, `<sl-textarea>`, and `<sl-select>`
632
+ - Removed `sl-blur` and `sl-focus` events from `<sl-menu>` since menus can't have focus as of 2.0.0-beta.22
633
+ - Updated `<sl-spinner>` so the indicator is more obvious
634
+ - Updated to Bootstrap Icons 1.2.2
635
+
636
+ ## 2.0.0-beta.24
637
+
638
+ - Added `<sl-format-date>` component
639
+ - Added `indeterminate` state to `<sl-progress-bar>` [#274](https://github.com/shoelace-style/shoelace/issues/274)
640
+ - Added `--track-color`, `--indicator-color`, and `--label-color` to `<sl-progress-bar>` [#276](https://github.com/shoelace-style/shoelace/issues/276)
641
+ - Added `allow-scripts` attribute to `<sl-include>` [#280](https://github.com/shoelace-style/shoelace/issues/280)
642
+ - Fixed a bug where `<sl-menu-item>` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
643
+ - Fixed a bug where `<sl-dialog>` and `<sl-drawer>` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
644
+ - Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `<sl-form>` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
645
+ - Fixed drag handle orientation in `<sl-image-comparer>`
646
+ - Restyled `<sl-spinner>` so the track is visible and the indicator is smaller.
647
+ - Removed `resize-observer-polyfill` in favor of `@types/resize-observer-browser` since all target browsers support `ResizeObserver`
648
+ - Upgraded the status of `<sl-form>`, `<sl-image-comparer>`, and `<sl-include>` from experimental to stable
649
+
650
+ ## 2.0.0-beta.23
651
+
652
+ - Added `<sl-format-number>` component
653
+ - Added `<sl-relative-time>` component
654
+ - Added `closable` attribute to `<sl-tab>`
655
+ - Added experimental `<sl-resize-observer>` utility
656
+ - Added experimental `<sl-theme>` utility and updated theming documentation
657
+ - Fixed a bug where `<sl-menu-item>` wouldn't render properly in the dark theme
658
+ - Fixed a bug where `<sl-select>` would show an autocomplete menu
659
+ - Improved placeholder contrast in dark theme
660
+ - Updated to Bootstrap Icons 1.1.0
661
+ - Updated to Stencil 2.3.0
662
+
663
+ ## 2.0.0-beta.22
664
+
665
+ - 🚨 BREAKING: Refactored `<sl-menu>` and `<sl-menu-item>` to improve accessibility by using proper focus states [#217](https://github.com/shoelace-style/shoelace/issues/217)
666
+ - Moved `tabindex` from `<sl-menu>` to `<sl-menu-item>`
667
+ - Removed the `active` attribute from `<sl-menu-item>` because synthetic focus states are bad for accessibility
668
+ - Removed the `sl-activate` and `sl-deactivate` events from `<sl-menu-item>` (listen for `focus` and `blur` instead)
669
+ - Updated `<sl-select>` so keyboard navigation still works
670
+ - Added `no-scroll-controls` attribute to `<sl-tab-group>` [#253](https://github.com/shoelace-style/shoelace/issues/253)
671
+ - Fixed a bug where setting `open` initially wouldn't show `<sl-dialog>` or `<sl-drawer>` [#255](https://github.com/shoelace-style/shoelace/issues/255)
672
+ - Fixed a bug where `disabled` could be set when buttons are rendered as links
673
+ - Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside `<sl-dialog>` [#252](https://github.com/shoelace-style/shoelace/issues/252)
674
+ - Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
675
+ - Fixed a bug where `aria-describedby` was never set on tooltip targets in `<sl-tooltip>`
676
+ - Fixed a bug where setting `position` on `<sl-image-comparer>` wouldn't update the divider's position
677
+ - Fixed a bug where the check icon was announced to screen readers in `<sl-menu-item>`
678
+ - Improved `<sl-icon-button>` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers [#220](https://github.com/shoelace-style/shoelace/issues/220)
679
+ - Improved `<sl-dropdown>` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
680
+ - Refactored position logic to remove an unnecessary state variable in `<sl-image-comparer>`
681
+ - Refactored design tokens to use `rem` instead of `px` for input height and spacing [#221](https://github.com/shoelace-style/shoelace/issues/221)
682
+ - Removed `console.log` from modal utility
683
+ - Updated to Stencil 2.2.0
684
+
685
+ ## 2.0.0-beta.21
686
+
687
+ - Added `label` slot to `<sl-input>`, `<sl-select>`, and `<sl-textarea>` [#248](https://github.com/shoelace-style/shoelace/issues/248)
688
+ - Added `label` slot to `<sl-dialog>` and `<sl-drawer>`
689
+ - Added experimental `<sl-include>` component
690
+ - Added status code to the `sl-error` event in `<sl-icon>`
691
+ - Fixed a bug where initial transitions didn't show in `<sl-dialog>` and `<sl-drawer>` [#247](https://github.com/shoelace-style/shoelace/issues/247)
692
+ - Fixed a bug where indeterminate checkboxes would maintain the indeterminate state when toggled
693
+ - Fixed a bug where concurrent active modals (i.e. dialog, drawer) would try to steal focus from each other
694
+ - Improved `<sl-color-picker>` grid and slider handles [#246](https://github.com/shoelace-style/shoelace/issues/246)
695
+ - Refactored `<sl-icon>` request logic and removed unused cache map
696
+ - Reworked show/hide logic in `<sl-alert>`, `<sl-dialog>`, and `<sl-drawer>` to not use reflow hacks and the `hidden` attribute
697
+ - Reworked slot logic in `<sl-card>`, `<sl-dialog>`, and `<sl-drawer>`
698
+ - Updated to Popper 2.5.3 to address a fixed position bug in Firefox
699
+
700
+ ## 2.0.0-beta.20
701
+
702
+ - 🚨 BREAKING: Transformed all Shoelace events to lowercase ([details](#why-did-event-names-change))
703
+ - Added support for dropdowns and non-icon elements to `<sl-input>`
704
+ - Added `spellcheck` attribute to `<sl-input>`
705
+ - Added `<sl-icon-library>` to allow custom icon library registration
706
+ - Added `library` attribute to `<sl-icon>` and `<sl-icon-button>`
707
+ - Added "Integrating with Rails" tutorial to the docs, courtesy of [ParamagicDev](https://github.com/ParamagicDev)
708
+ - Fixed a bug where `<sl-progress-ring>` rendered incorrectly when zoomed in Safari [#227](https://github.com/shoelace-style/shoelace/issues/227>)
709
+ - Fixed a bug where tabbing into slotted elements closes `<sl-dropdown>` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
710
+ - Fixed a bug where scroll anchoring caused undesirable scrolling when `<sl-details>` are grouped
711
+
712
+ ### Why did event names change?
713
+
714
+ Shoelace events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as `slChange` and `slAfterShow`, you'll need to use `sl-change` and `sl-after-show` now.
715
+
716
+ This change was necessary to address a critical issue in frameworks that use DOM templates with declarative event bindings such as `<sl-button @slChange="handler">`. Due to HTML's case-insensitivity, browsers translate attribute names to lowercase, turning `@slChange` into `@slchange`, making it impossible to listen to `slChange`.
717
+
718
+ While declarative event binding is a non-standard feature, not supporting it would make Shoelace much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Shoelace is still in beta.
719
+
720
+ The following pages demonstrate why this change was necessary.
721
+
722
+ - [This Polymer FAQ from Custom Elements Everywhere](https://custom-elements-everywhere.com/#faq-polymer)
723
+ - [Vue's Event Names documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names)
724
+
725
+ ## 2.0.0-beta.19
726
+
727
+ - Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `<sl-select>` to make the input customizable
728
+ - Added toast notifications through the `toast()` method on `<sl-alert>`
729
+ - Fixed a bug where mouse events would bubble up when `<sl-button>` was disabled, causing tooltips to erroneously appear
730
+ - Fixed a bug where pressing space would open and immediately close `<sl-dropdown>` panels in Firefox
731
+ - Fixed a bug where `<sl-tooltip>` would throw an error on init
732
+ - Fixed a bug in custom keyframes animation example
733
+ - Refactored clear logic in `<sl-input>`
734
+
735
+ ## 2.0.0-beta.18
736
+
737
+ - Added `name` and `invalid` attribute to `<sl-color-picker>`
738
+ - Added support for form submission and validation to `<sl-color-picker>`
739
+ - Added touch support to demo resizers in the docs
740
+ - Added `<sl-responsive-embed>` component
741
+ - Fixed a bug where swapping an animated element wouldn't restart the animation in `<sl-animation>`
742
+ - Fixed a bug where the cursor was incorrect when `<sl-select>` was disabled
743
+ - Fixed a bug where `slblur` and `slfocus` were emitted twice in `<sl-select>`
744
+ - Fixed a bug where clicking on `<sl-menu>` wouldn't focus it
745
+ - Fixed a bug in the popover utility where `onAfterShow` would fire too soon
746
+ - Fixed a bug where `bottom` and `right` placements didn't render properly in `<sl-tab-group>`
747
+ - Improved keyboard logic in `<sl-dropdown>`, `<sl-menu>`, and `<sl-select>`
748
+ - Updated `<sl-animation>` to stable
749
+ - Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)
750
+ - Updated entry points in `package.json` to reflect new filenames generated by Stencil 2
751
+
752
+ ## 2.0.0-beta.17
753
+
754
+ - Added `minlength` and `spellcheck` attributes to `<sl-textarea>`
755
+ - Fixed a bug where clicking a tag in `<sl-select>` wouldn't toggle the menu
756
+ - Fixed a bug where options where `<sl-select>` options weren't always visible or scrollable
757
+ - Fixed a bug where setting `null` on `<sl-input>`, `<sl-textarea>`, or `<sl-select>` would throw an error
758
+ - Fixed a bug where `role` was on the wrong element and aria attribute weren't explicit in `<sl-checkbox>`, `<sl-switch>`, and `<sl-radio>`
759
+ - Fixed a bug where dynamically adding/removing a slot wouldn't work as expected in `<sl-card>`, `<sl-dialog>`, and `<sl-drawer>`
760
+ - Fixed a bug where the value wasn't updated and events weren't emitted when using `setRangeText` in `<sl-input>` and `<sl-textarea>`
761
+ - Optimized `hasSlot` utility by using a simpler selector
762
+ - Updated Bootstrap Icons to 1.0.0 with many icons redrawn and improved
763
+ - Updated contribution guidelines
764
+
765
+ **Form validation has been reworked and is much more powerful now!**
766
+
767
+ - The `invalid` attribute now reflects the control's validity as determined by the browser's constraint validation API
768
+ - Added `required` to `<sl-checkbox>`, `<sl-select>`, and `<sl-switch>`
769
+ - Added `reportValidity()` and `setCustomValidity()` methods to all form controls
770
+ - Added validation checking for custom and native form controls to `<sl-form>`
771
+ - Added `novalidate` attribute to `<sl-form>` to disable validation
772
+ - Removed the `valid` attribute from all form controls
773
+ - Removed valid and invalid design tokens and related styles (you can use your own custom styles to achieve this)
774
+
775
+ ## 2.0.0-beta.16
776
+
777
+ - Added `hoist` attribute to `<sl-color-picker>`, `<sl-dropdown>`, and `<sl-select>` to work around panel clipping
778
+ - Added `<sl-format-bytes>` utility component
779
+ - Added `clearable` and `required` props to `<sl-select>`
780
+ - Added `slclear` event to `<sl-input>`
781
+ - Added keyboard support to the preview resizer in the docs
782
+ - Fixed a bug where the `aria-selected` state was incorrect in `<sl-menu-item>`
783
+ - Fixed a bug where custom properties applied to `<sl-tooltip>` didn't affect show/hide transitions
784
+ - Fixed a bug where `--sl-input-color-*` custom properties had no effect on `<sl-input>` and `<sl-textarea>`
785
+ - Refactored `<sl-dropdown>` and `<sl-tooltip>` to use positioner elements so panels/tooltips can be customized easier
786
+
787
+ ## 2.0.0-beta.15
788
+
789
+ - Added `image-comparer` component
790
+ - Added `--width`, `--height`, and `--thumb-size` custom props to `<sl-switch>`
791
+ - Fixed an `aria-labelledby` attribute typo in a number of components
792
+ - Fixed a bug where the `change` event wasn't updating the value in `<sl-input>`
793
+ - Fixed a bug where `<sl-color-picker>` had the wrong border color in the dark theme
794
+ - Fixed a bug where `<sl-menu-item>` had the wrong color in dark mode when disabled
795
+ - Fixed a bug where WebKit's autocomplete styles made inputs looks broken
796
+ - Fixed a bug where aria labels were wrong in `<sl-select>`
797
+ - Fixed a bug where clicking the label wouldn't focus the control in `<sl-select>`
798
+
799
+ ## 2.0.0-beta.14
800
+
801
+ - Added dark theme
802
+ - Added `--sl-panel-background-color` and `--sl-panel-border-color` tokens
803
+ - Added `--tabs-border-color` custom property to `<sl-tab-group>`
804
+ - Added `--track-color` custom property to `<sl-range>`
805
+ - Added `tag` part to `<sl-select>`
806
+ - Updated `package.json` so custom elements imports can be consumed from the root
807
+ - Fixed a bug where scrolling dialogs didn't resize properly in Safari
808
+ - Fixed a bug where `slshow` and `slhide` would be emitted twice in some components
809
+ - Fixed a bug where `custom-elements/index.d.ts` was broken due to an unclosed comment (fixed in Stencil 1.17.3)
810
+ - Fixed bug where inputs were not using border radius tokens
811
+ - Fixed a bug where the text color was being erroneously set in `<sl-progress-ring>`
812
+ - Fixed a bug where `<sl-progress-bar>` used the wrong part name internally for `indicator`
813
+ - Removed background color from `<sl-menu>`
814
+ - Updated to Stencil 1.17.3
815
+
816
+ ## 2.0.0-beta.13
817
+
818
+ - Added `slactivate` and `sldeactivate` events to `<sl-menu-item>`
819
+ - Added experimental `<sl-animation>` component
820
+ - Added shields to documentation
821
+ - Fixed a bug where link buttons would have `type="button"`
822
+ - Fixed a bug where button groups with tooltips experienced an odd spacing issue in Safari
823
+ - Fixed a bug where scrolling in dropdowns/selects didn't work properly on Windows (special thanks to [Trendy](http://github.com/trendy) for helping troubleshoot!)
824
+ - Fixed a bug where selecting a menu item in a dropdown would cause Safari to scroll
825
+ - Fixed a bug where type to select wouldn't accept symbols
826
+ - Moved scrolling logic from `<sl-menu>` to `<sl-dropdown>`
827
+
828
+ ## 2.0.0-beta.12
829
+
830
+ - Added support for `href`, `target`, and `download` to buttons
831
+ - Fixed a bug where buttons would have horizontal spacing in Safari
832
+ - Fixed a bug that caused an import resolution error when using Shoelace in a Stencil app
833
+
834
+ ## 2.0.0-beta.11
835
+
836
+ - Added button group component
837
+ - Fixed icon button alignment
838
+ - Fixed a bug where focus visible observer wasn't removed from `<sl-details>`
839
+ - Replaced the deprecated `componentDidUnload` lifecycle method with `disconnectedCallback` to prevent issues with frameworks
840
+
841
+ ## 2.0.0-beta.10
842
+
843
+ - Added community page to the docs
844
+ - Fixed a bug where many components would erroneously receive an `id` when using the custom elements bundle
845
+ - Fixed a bug where tab groups weren't scrollable with the mouse
846
+
847
+ ## 2.0.0-beta.9
848
+
849
+ - Added the icon button component
850
+ - Added the skeleton component
851
+ - Added the `typeToSelect` method to menu so type-to-select behavior can be controlled externally
852
+ - Added the `pulse` attribute to badge
853
+ - Fixed a bug where hovering over select showed the wrong cursor
854
+ - Fixed a bug where tabbing into a select control would highlight the label
855
+ - Fixed a bug where tabbing out of a select control wouldn't close it
856
+ - Fixed a bug where closing dropdowns wouldn't give focus back to the trigger
857
+ - Fixed a bug where type-to-select wasn't working after the first letter
858
+ - Fixed a bug where clicking on menu items and dividers would steal focus from the menu
859
+ - Fixed a bug where the color picker wouldn't parse uppercase values
860
+ - Removed the `no-footer` attribute from dialog and drawer (slot detection is automatic, so the attribute is not required)
861
+ - Removed `close-icon` slot from alert
862
+ - Replaced make-shift icon buttons with `<sl-icon-button>` in alert, dialog, drawer, and tag
863
+ - Updated Stencil to 1.17.1
864
+ - Switched to jsDelivr for better CDN performance
865
+
866
+ ## 2.0.0-beta.8
867
+
868
+ - Added the card component
869
+ - Added `--focus-ring` custom property to tab
870
+ - Fixed a bug where range tooltips didn't appear on iOS
871
+ - Fixed constructor bindings so they don't break the custom elements bundle
872
+ - Fixed tag color contrast to be AA compliant
873
+ - Fixed a bug that made it difficult to vertically align rating
874
+ - Fixed a bug where dropdowns would always close on mousedown when inside a shadow root
875
+ - Made tag text colors AA compliant
876
+ - Promoted badge to stable
877
+ - Refactored `:host` variables and moved non-display props to base elements
878
+ - Refactored event handler bindings to occur in `connectedCallback` instead of the constructor
879
+ - Refactored scroll locking logic to use `Set` instead of an array
880
+ - Updated the custom elements bundle documentation and added bundler examples
881
+ - Upgraded Stencil to 1.17.0-0 (next) to fix custom elements bundle
882
+
883
+ ## 2.0.0-beta.7
884
+
885
+ - Added links to version 1 resources to the docs
886
+ - Added rating component
887
+ - Fixed a bug where some build files were missing
888
+ - Fixed clearable tags demo
889
+ - Fixed touch icon size in docs
890
+
891
+ ## 2.0.0-beta.6
892
+
893
+ - Enabled the `dist-custom-elements-bundle` output target
894
+ - Fixed a bug where nested form controls were ignored in `<sl-form>`
895
+
896
+ ## 2.0.0-beta.5
897
+
898
+ - Fixed bug where `npm install` would fail due to postinstall script
899
+ - Removed unused dependency
900
+
901
+ ## 2.0.0-beta.4
902
+
903
+ - Added `pill` variation to badges
904
+ - Fixed a bug where all badges had `pointer-events: none`
905
+ - Fixed `@since` props to show 2.0 instead of 1.0
906
+ - Fixed giant cursors in inputs in Safari
907
+ - Fixed color picker input width in Safari
908
+ - Fixed initial transitions for drawer, dialog, and popover consumers
909
+ - Fixed a bug where dialog, dropdown, and drawer would sometimes not transition in on the first open
910
+ - Fixed various documentation typos
911
+
912
+ ## 2.0.0-beta.3
913
+
914
+ - Fix version in docs
915
+ - Remove custom elements bundle
916
+
917
+ ## 2.0.0-beta.2
918
+
919
+ - Fix quick start and installation URLs
920
+ - Switch Docsify theme
921
+ - Update line heights tokens
922
+
923
+ ## 2.0.0-beta.1
924
+
925
+ - Initial release