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,441 @@
1
+ # Alert
2
+
3
+ [component-header:sl-alert]
4
+
5
+ Alerts are used to display important messages inline or as toast notifications.
6
+
7
+ ```html preview
8
+ <sl-alert open>
9
+ <sl-icon slot="icon" name="info-circle"></sl-icon>
10
+ This is a standard alert. You can customize its content and even the icon.
11
+ </sl-alert>
12
+ ```
13
+
14
+ ```jsx react
15
+ import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
16
+
17
+ const App = () => (
18
+ <SlAlert open>
19
+ <SlIcon slot="icon" name="info-circle" />
20
+ This is a standard alert. You can customize its content and even the icon.
21
+ </SlAlert>
22
+ );
23
+ ```
24
+
25
+ ?> Alerts will not be visible if the `open` attribute is not present.
26
+
27
+ ## Examples
28
+
29
+ ### Variants
30
+
31
+ Set the `variant` attribute to change the alert's variant.
32
+
33
+ ```html preview
34
+ <sl-alert variant="primary" open>
35
+ <sl-icon slot="icon" name="info-circle"></sl-icon>
36
+ <strong>This is super informative</strong><br>
37
+ You can tell by how pretty the alert is.
38
+ </sl-alert>
39
+
40
+ <br>
41
+
42
+ <sl-alert variant="success" open>
43
+ <sl-icon slot="icon" name="check2-circle"></sl-icon>
44
+ <strong>Your changes have been saved</strong><br>
45
+ You can safely exit the app now.
46
+ </sl-alert>
47
+
48
+ <br>
49
+
50
+ <sl-alert variant="neutral" open>
51
+ <sl-icon slot="icon" name="gear"></sl-icon>
52
+ <strong>Your settings have been updated</strong><br>
53
+ Settings will take affect on next login.
54
+ </sl-alert>
55
+
56
+ <br>
57
+
58
+ <sl-alert variant="warning" open>
59
+ <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
60
+ <strong>Your session has ended</strong><br>
61
+ Please login again to continue.
62
+ </sl-alert>
63
+
64
+ <br>
65
+
66
+ <sl-alert variant="danger" open>
67
+ <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
68
+ <strong>Your account has been deleted</strong><br>
69
+ We're very sorry to see you go!
70
+ </sl-alert>
71
+ ```
72
+
73
+ ```jsx react
74
+ import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
75
+
76
+ const App = () => (
77
+ <>
78
+ <SlAlert variant="primary" open>
79
+ <SlIcon slot="icon" name="info-circle" />
80
+ <strong>This is super informative</strong><br />
81
+ You can tell by how pretty the alert is.
82
+ </SlAlert>
83
+
84
+ <br />
85
+
86
+ <SlAlert variant="success" open>
87
+ <SlIcon slot="icon" name="check2-circle" />
88
+ <strong>Your changes have been saved</strong><br />
89
+ You can safely exit the app now.
90
+ </SlAlert>
91
+
92
+ <br />
93
+
94
+ <SlAlert variant="neutral" open>
95
+ <SlIcon slot="icon" name="gear" />
96
+ <strong>Your settings have been updated</strong><br />
97
+ Settings will take affect on next login.
98
+ </SlAlert>
99
+
100
+ <br />
101
+
102
+ <SlAlert variant="warning" open>
103
+ <SlIcon slot="icon" name="exclamation-triangle" />
104
+ <strong>Your session has ended</strong><br />
105
+ Please login again to continue.
106
+ </SlAlert>
107
+
108
+ <br />
109
+
110
+ <SlAlert variant="danger" open>
111
+ <SlIcon slot="icon" name="exclamation-octagon" />
112
+ <strong>Your account has been deleted</strong><br />
113
+ We're very sorry to see you go!
114
+ </SlAlert>
115
+ </>
116
+ );
117
+ ```
118
+
119
+ ### Closable
120
+
121
+ Add the `closable` attribute to show a close button that will hide the alert.
122
+
123
+ ```html preview
124
+ <sl-alert variant="primary" open closable class="alert-closable">
125
+ <sl-icon slot="icon" name="info-circle"></sl-icon>
126
+ You can close this alert any time!
127
+ </sl-alert>
128
+
129
+ <script>
130
+ const alert = document.querySelector('.alert-closable');
131
+ alert.addEventListener('sl-after-hide', () => {
132
+ setTimeout(() => alert.open = true, 2000);
133
+ });
134
+ </script>
135
+ ```
136
+
137
+ ```jsx react
138
+ import { useState } from 'react';
139
+ import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
140
+
141
+ const App = () => {
142
+ const [open, setOpen] = useState(true);
143
+
144
+ function handleHide() {
145
+ setOpen(false);
146
+ setTimeout(() => setOpen(true), 2000);
147
+ }
148
+
149
+ return (
150
+ <SlAlert
151
+ open={open}
152
+ closable
153
+ onSlAfterHide={handleHide}
154
+ >
155
+ <SlIcon slot="icon" name="info-circle" />
156
+ You can close this alert any time!
157
+ </SlAlert>
158
+ );
159
+ };
160
+ ```
161
+
162
+ ### Without Icons
163
+
164
+ Icons are optional. Simply omit the `icon` slot if you don't want them.
165
+
166
+ ```html preview
167
+ <sl-alert variant="primary" open>
168
+ Nothing fancy here, just a simple alert.
169
+ </sl-alert>
170
+ ```
171
+
172
+ ```jsx react
173
+ import { SlAlert } from '@shoelace-style/shoelace/dist/react';
174
+
175
+ const App = () => (
176
+ <SlAlert variant="primary" open>
177
+ Nothing fancy here, just a simple alert.
178
+ </SlAlert>
179
+ );
180
+ ```
181
+
182
+ ### Duration
183
+
184
+ Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
185
+
186
+ ```html preview
187
+ <div class="alert-duration">
188
+ <sl-button variant="primary">Show Alert</sl-button>
189
+
190
+ <sl-alert variant="primary" duration="3000" closable>
191
+ <sl-icon slot="icon" name="info-circle"></sl-icon>
192
+ This alert will automatically hide itself after three seconds, unless you interact with it.
193
+ </sl-alert>
194
+ </div>
195
+
196
+ <script>
197
+ const container = document.querySelector('.alert-duration');
198
+ const button = container.querySelector('sl-button');
199
+ const alert = container.querySelector('sl-alert');
200
+
201
+ button.addEventListener('click', () => alert.show());
202
+ </script>
203
+
204
+ <style>
205
+ .alert-duration sl-alert {
206
+ margin-top: var(--sl-spacing-medium);
207
+ }
208
+ </style>
209
+ ```
210
+
211
+ ```jsx react
212
+ import { useState } from 'react';
213
+ import {
214
+ SlAlert,
215
+ SlButton,
216
+ SlIcon
217
+ } from '@shoelace-style/shoelace/dist/react';
218
+
219
+ const css = `
220
+ .alert-duration sl-alert {
221
+ margin-top: var(--sl-spacing-medium);
222
+ }
223
+ `;
224
+
225
+ const App = () => {
226
+ const [open, setOpen] = useState(false);
227
+
228
+ return (
229
+ <>
230
+ <div className="alert-duration">
231
+ <SlButton variant="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
232
+
233
+ <SlAlert
234
+ variant="primary"
235
+ duration="3000"
236
+ open={open}
237
+ closable
238
+ onSlAfterHide={() => setOpen(false)}
239
+ >
240
+ <SlIcon slot="icon" name="info-circle" />
241
+ This alert will automatically hide itself after three seconds, unless you interact with it.
242
+ </SlAlert>
243
+ </div>
244
+
245
+ <style>{css}</style>
246
+ </>
247
+ );
248
+ };
249
+ ```
250
+
251
+ ### Toast Notifications
252
+
253
+ To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.
254
+
255
+ You should always use the `closable` attribute so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement.
256
+
257
+ ```html preview
258
+ <div class="alert-toast">
259
+ <sl-button variant="primary">Primary</sl-button>
260
+ <sl-button variant="success">Success</sl-button>
261
+ <sl-button variant="neutral">Neutral</sl-button>
262
+ <sl-button variant="warning">Warning</sl-button>
263
+ <sl-button variant="danger">Danger</sl-button>
264
+
265
+ <sl-alert variant="primary" duration="3000" closable>
266
+ <sl-icon slot="icon" name="info-circle"></sl-icon>
267
+ <strong>This is super informative</strong><br>
268
+ You can tell by how pretty the alert is.
269
+ </sl-alert>
270
+
271
+ <sl-alert variant="success" duration="3000" closable>
272
+ <sl-icon slot="icon" name="check2-circle"></sl-icon>
273
+ <strong>Your changes have been saved</strong><br>
274
+ You can safely exit the app now.
275
+ </sl-alert>
276
+
277
+ <sl-alert variant="neutral" duration="3000" closable>
278
+ <sl-icon slot="icon" name="gear"></sl-icon>
279
+ <strong>Your settings have been updated</strong><br>
280
+ Settings will take affect on next login.
281
+ </sl-alert>
282
+
283
+ <sl-alert variant="warning" duration="3000" closable>
284
+ <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
285
+ <strong>Your session has ended</strong><br>
286
+ Please login again to continue.
287
+ </sl-alert>
288
+
289
+ <sl-alert variant="danger" duration="3000" closable>
290
+ <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
291
+ <strong>Your account has been deleted</strong><br>
292
+ We're very sorry to see you go!
293
+ </sl-alert>
294
+ </div>
295
+
296
+ <script>
297
+ const container = document.querySelector('.alert-toast');
298
+
299
+ ['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
300
+ const button = container.querySelector(`sl-button[variant="${variant}"]`);
301
+ const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
302
+
303
+ button.addEventListener('click', () => alert.toast());
304
+ });
305
+ </script>
306
+ ```
307
+
308
+ ```jsx react
309
+ import { useRef } from 'react';
310
+ import {
311
+ SlAlert,
312
+ SlButton,
313
+ SlIcon
314
+ } from '@shoelace-style/shoelace/dist/react';
315
+
316
+ function showToast(alert) {
317
+ alert.toast();
318
+ }
319
+
320
+ const App = () => {
321
+ const primary = useRef(null);
322
+ const success = useRef(null);
323
+ const neutral = useRef(null);
324
+ const warning = useRef(null);
325
+ const danger = useRef(null);
326
+
327
+ return (
328
+ <>
329
+ <SlButton variant="primary" onClick={() => primary.current.toast()}>
330
+ Primary
331
+ </SlButton>
332
+
333
+ <SlButton variant="success" onClick={() => success.current.toast()}>
334
+ Success
335
+ </SlButton>
336
+
337
+ <SlButton variant="neutral" onClick={() => neutral.current.toast()}>
338
+ Neutral
339
+ </SlButton>
340
+
341
+ <SlButton variant="warning" onClick={() => warning.current.toast()}>
342
+ Warning
343
+ </SlButton>
344
+
345
+ <SlButton variant="danger" onClick={() => danger.current.toast()}>
346
+ Danger
347
+ </SlButton>
348
+
349
+ <SlAlert ref={primary} variant="primary" duration="3000" closable>
350
+ <SlIcon slot="icon" name="info-circle" />
351
+ <strong>This is super informative</strong><br />
352
+ You can tell by how pretty the alert is.
353
+ </SlAlert>
354
+
355
+ <SlAlert ref={success} variant="success" duration="3000" closable>
356
+ <SlIcon slot="icon" name="check2-circle" />
357
+ <strong>Your changes have been saved</strong><br />
358
+ You can safely exit the app now.
359
+ </SlAlert>
360
+
361
+ <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
362
+ <SlIcon slot="icon" name="gear" />
363
+ <strong>Your settings have been updated</strong><br />
364
+ Settings will take affect on next login.
365
+ </SlAlert>
366
+
367
+ <SlAlert ref={warning} variant="warning" duration="3000" closable>
368
+ <SlIcon slot="icon" name="exclamation-triangle" />
369
+ <strong>Your session has ended</strong><br />
370
+ Please login again to continue.
371
+ </SlAlert>
372
+
373
+ <SlAlert ref={danger} variant="danger" duration="3000" closable>
374
+ <SlIcon slot="icon" name="exclamation-octagon" />
375
+ <strong>Your account has been deleted</strong><br />
376
+ We're very sorry to see you go!
377
+ </SlAlert>
378
+ </>
379
+ );
380
+ };
381
+ ```
382
+
383
+ ### Creating Toasts Imperatively
384
+
385
+ For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the `toast()` method as shown in the example below.
386
+
387
+ ```html preview
388
+ <div class="alert-toast-wrapper">
389
+ <sl-button variant="primary">Create Toast</sl-button>
390
+ </div>
391
+
392
+ <script>
393
+ const container = document.querySelector('.alert-toast-wrapper');
394
+ const button = container.querySelector('sl-button');
395
+ let count = 0;
396
+
397
+ // Always escape HTML for text arguments!
398
+ function escapeHtml(html) {
399
+ const div = document.createElement('div');
400
+ div.textContent = html;
401
+ return div.innerHTML;
402
+ }
403
+
404
+ // Custom function to emit toast notifications
405
+ function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
406
+ const alert = Object.assign(document.createElement('sl-alert'), {
407
+ variant,
408
+ closable: true,
409
+ duration: duration,
410
+ innerHTML: `
411
+ <sl-icon name="${icon}" slot="icon"></sl-icon>
412
+ ${escapeHtml(message)}
413
+ `
414
+ });
415
+
416
+ document.body.append(alert);
417
+ return alert.toast();
418
+ }
419
+
420
+ button.addEventListener('click', () => {
421
+ notify(`This is custom toast #${++count}`);
422
+ });
423
+ </script>
424
+ ```
425
+
426
+ ### The Toast Stack
427
+
428
+ The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.
429
+
430
+ By default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting `.sl-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.
431
+
432
+ ```css
433
+ .sl-toast-stack {
434
+ left: 0;
435
+ right: auto;
436
+ }
437
+ ```
438
+
439
+ ?> By design, it is not possible to show toasts in more than one stack simultaneously. Such behavior is confusing and makes for a poor user experience.
440
+
441
+ [component-metadata:sl-alert]
@@ -0,0 +1,128 @@
1
+ # Animated Image
2
+
3
+ [component-header:sl-animated-image]
4
+
5
+ A component for displaying animated GIFs and WEBPs that play and pause on interaction.
6
+
7
+ ```html preview
8
+ <sl-animated-image
9
+ src="https://shoelace.style/assets/images/walk.gif"
10
+ alt="Animation of untied shoes walking on pavement"
11
+ ></sl-animated-image>
12
+ ```
13
+
14
+ ```jsx react
15
+ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
16
+
17
+ const App = () => (
18
+ <SlAnimatedImage
19
+ src="https://shoelace.style/assets/images/walk.gif"
20
+ alt="Animation of untied shoes walking on pavement"
21
+ />
22
+ );
23
+ ```
24
+
25
+ ?> This component uses `<canvas>` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
26
+
27
+ ## Examples
28
+
29
+ ### WEBP Images
30
+
31
+ Both GIF and WEBP images are supported.
32
+
33
+ ```html preview
34
+ <sl-animated-image
35
+ src="https://shoelace.style/assets/images/tie.webp"
36
+ alt="Animation of a shoe being tied"
37
+ ></sl-animated-image>
38
+ ```
39
+
40
+ ```jsx react
41
+ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
42
+
43
+ const App = () => (
44
+ <SlAnimatedImage
45
+ src="https://shoelace.style/assets/images/tie.webp"
46
+ alt="Animation of a shoe being tied"
47
+ />
48
+ );
49
+ ```
50
+
51
+ ### Setting a Width and Height
52
+
53
+ To set a custom size, apply a width and/or height to the host element.
54
+
55
+ ```html preview
56
+ <sl-animated-image
57
+ src="https://shoelace.style/assets/images/walk.gif"
58
+ alt="Animation of untied shoes walking on pavement"
59
+ style="width: 150px; height: 200px;"
60
+ >
61
+ </sl-animated-image>
62
+ ```
63
+
64
+ ```jsx react
65
+ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
66
+
67
+ const App = () => (
68
+ <SlAnimatedImage
69
+ src="https://shoelace.style/assets/images/walk.gif"
70
+ alt="Animation of untied shoes walking on pavement"
71
+ style={{ width: '150px', height: '200px' }}
72
+ />
73
+ );
74
+ ```
75
+
76
+ ### Customizing the Control Box
77
+
78
+ You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
79
+
80
+ ```html preview
81
+ <sl-animated-image
82
+ src="https://shoelace.style/assets/images/walk.gif"
83
+ alt="Animation of untied shoes walking on pavement"
84
+ class="animated-image-custom-control-box"
85
+ ></sl-animated-image>
86
+
87
+ <style>
88
+ .animated-image-custom-control-box::part(control-box) {
89
+ top: auto;
90
+ right: auto;
91
+ bottom: 1rem;
92
+ left: 1rem;
93
+ background-color: deeppink;
94
+ border: none;
95
+ color: pink;
96
+ }
97
+ </style>
98
+ ```
99
+
100
+ ```jsx react
101
+ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
102
+
103
+ const css = `
104
+ .animated-image-custom-control-box::part(control-box) {
105
+ top: auto;
106
+ right: auto;
107
+ bottom: 1rem;
108
+ left: 1rem;
109
+ background-color: deeppink;
110
+ border: none;
111
+ color: pink;
112
+ }
113
+ `;
114
+
115
+ const App = () => (
116
+ <>
117
+ <SlAnimatedImage
118
+ className="animated-image-custom-control-box"
119
+ src="https://shoelace.style/assets/images/walk.gif"
120
+ alt="Animation of untied shoes walking on pavement"
121
+ />
122
+
123
+ <style>{css}</style>
124
+ </>
125
+ );
126
+ ```
127
+
128
+ [component-metadata:sl-animated-image]