shoelace-rails-ui 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (346) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +49 -22
  4. data/Rakefile +5 -13
  5. data/app/assets/config/shoelace_rails_ui_manifest.js +1 -0
  6. data/app/assets/javascripts/shoelace.js +300 -0
  7. data/app/assets/stylesheets/sl_styles_light.css +455 -0
  8. data/app/controllers/shoelace/rails/ui/application_controller.rb +8 -0
  9. data/app/helpers/shoelace/rails/ui/application_helper.rb +11 -0
  10. data/app/helpers/shoelace/rails/ui/form_helper.rb +442 -0
  11. data/app/jobs/shoelace/rails/ui/application_job.rb +8 -0
  12. data/app/mailers/shoelace/rails/ui/application_mailer.rb +10 -0
  13. data/app/models/shoelace/rails/ui/application_record.rb +9 -0
  14. data/app/views/layouts/shoelace/rails/ui/application.html.erb +15 -0
  15. data/config/routes.rb +2 -0
  16. data/lib/shoelace/rails/ui/engine.rb +15 -0
  17. data/lib/shoelace/rails/ui/version.rb +1 -3
  18. data/lib/shoelace/rails/ui.rb +2 -4
  19. data/lib/tasks/shoelace/rails/ui_tasks.rake +4 -0
  20. metadata +36 -334
  21. data/.DS_Store +0 -0
  22. data/CHANGELOG.md +0 -5
  23. data/CODE_OF_CONDUCT.md +0 -84
  24. data/Gemfile +0 -12
  25. data/Gemfile.lock +0 -42
  26. data/LICENSE.txt +0 -21
  27. data/README-real.md +0 -24
  28. data/bin/console +0 -15
  29. data/bin/setup +0 -8
  30. data/regenerate.rb +0 -48
  31. data/remote-src/.DS_Store +0 -0
  32. data/remote-src/2.0.0.beta64/.DS_Store +0 -0
  33. data/remote-src/2.0.0.beta64/shoelace-next/.editorconfig +0 -15
  34. data/remote-src/2.0.0.beta64/shoelace-next/.github/CODE_OF_CONDUCT.md +0 -44
  35. data/remote-src/2.0.0.beta64/shoelace-next/.github/FUNDING.yml +0 -1
  36. data/remote-src/2.0.0.beta64/shoelace-next/.github/ISSUE_TEMPLATE/bug_report.md +0 -36
  37. data/remote-src/2.0.0.beta64/shoelace-next/.github/ISSUE_TEMPLATE/config.yml +0 -4
  38. data/remote-src/2.0.0.beta64/shoelace-next/.github/ISSUE_TEMPLATE/feature_request.md +0 -17
  39. data/remote-src/2.0.0.beta64/shoelace-next/.github/SECURITY.md +0 -7
  40. data/remote-src/2.0.0.beta64/shoelace-next/.github/workflows/node.js.yml +0 -30
  41. data/remote-src/2.0.0.beta64/shoelace-next/.github/workflows/release.yml +0 -17
  42. data/remote-src/2.0.0.beta64/shoelace-next/.gitignore +0 -8
  43. data/remote-src/2.0.0.beta64/shoelace-next/.husky/pre-commit +0 -4
  44. data/remote-src/2.0.0.beta64/shoelace-next/.prettierignore +0 -12
  45. data/remote-src/2.0.0.beta64/shoelace-next/.vscode/extensions.json +0 -9
  46. data/remote-src/2.0.0.beta64/shoelace-next/.vscode/settings.json +0 -4
  47. data/remote-src/2.0.0.beta64/shoelace-next/CONTRIBUTING.md +0 -5
  48. data/remote-src/2.0.0.beta64/shoelace-next/LICENSE.md +0 -7
  49. data/remote-src/2.0.0.beta64/shoelace-next/README.md +0 -94
  50. data/remote-src/2.0.0.beta64/shoelace-next/cspell.json +0 -110
  51. data/remote-src/2.0.0.beta64/shoelace-next/custom-elements-manifest.config.js +0 -104
  52. data/remote-src/2.0.0.beta64/shoelace-next/docs/404.md +0 -5
  53. data/remote-src/2.0.0.beta64/shoelace-next/docs/_sidebar.md +0 -89
  54. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/icons/sprite.svg +0 -1
  55. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/chrome.png +0 -0
  56. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/edge.png +0 -0
  57. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/firefox.png +0 -0
  58. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/logo.svg +0 -7
  59. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/og-image.png +0 -0
  60. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/opera.png +0 -0
  61. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/safari.png +0 -0
  62. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/shoe.svg +0 -134
  63. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/tie.webp +0 -0
  64. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/touch-icon.png +0 -0
  65. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/twitter-card.png +0 -0
  66. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/undraw-content-team.svg +0 -80
  67. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/undraw-not-found.svg +0 -1
  68. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/walk.gif +0 -0
  69. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/images/wordmark.svg +0 -7
  70. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/code-block/code-block.css +0 -228
  71. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/code-block/code-block.js +0 -376
  72. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/metadata/metadata.js +0 -537
  73. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/scroll-position/scroll-position.js +0 -24
  74. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/search/lunr.min.js +0 -1311
  75. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/search/search.css +0 -180
  76. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/search/search.js +0 -293
  77. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/theme-picker/theme-picker.css +0 -29
  78. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/theme-picker/theme-picker.js +0 -83
  79. data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/styles/docs.css +0 -642
  80. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/alert.md +0 -441
  81. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/animated-image.md +0 -128
  82. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/animation.md +0 -351
  83. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/avatar.md +0 -201
  84. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/badge.md +0 -191
  85. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/breadcrumb-item.md +0 -35
  86. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/breadcrumb.md +0 -266
  87. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/button-group.md +0 -470
  88. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/button.md +0 -453
  89. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/card.md +0 -311
  90. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/checkbox.md +0 -71
  91. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/color-picker.md +0 -101
  92. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/details.md +0 -89
  93. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/dialog.md +0 -265
  94. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/divider.md +0 -152
  95. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/drawer.md +0 -452
  96. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/dropdown.md +0 -389
  97. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/format-bytes.md +0 -126
  98. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/format-date.md +0 -120
  99. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/format-number.md +0 -124
  100. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/icon-button.md +0 -160
  101. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/icon.md +0 -711
  102. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/image-comparer.md +0 -51
  103. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/include.md +0 -47
  104. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/input.md +0 -283
  105. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu-item.md +0 -255
  106. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu-label.md +0 -52
  107. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu.md +0 -49
  108. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/mutation-observer.md +0 -196
  109. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/progress-bar.md +0 -144
  110. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/progress-ring.md +0 -178
  111. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/qr-code.md +0 -167
  112. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/radio-group.md +0 -52
  113. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/radio.md +0 -59
  114. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/range.md +0 -180
  115. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/rating.md +0 -153
  116. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/relative-time.md +0 -105
  117. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/resize-observer.md +0 -68
  118. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/responsive-media.md +0 -73
  119. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/select.md +0 -457
  120. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/skeleton.md +0 -439
  121. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/spinner.md +0 -86
  122. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/split-panel.md +0 -671
  123. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/switch.md +0 -77
  124. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tab-group.md +0 -359
  125. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tab-panel.md +0 -41
  126. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tab.md +0 -29
  127. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tag.md +0 -142
  128. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/textarea.md +0 -184
  129. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/tooltip.md +0 -410
  130. data/remote-src/2.0.0.beta64/shoelace-next/docs/components/visually-hidden.md +0 -47
  131. data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/angular.md +0 -46
  132. data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/react.md +0 -156
  133. data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/vue.md +0 -92
  134. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/customizing.md +0 -153
  135. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/form-controls.md +0 -336
  136. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/installation.md +0 -137
  137. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/localization.md +0 -140
  138. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/overview.md +0 -131
  139. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/themes.md +0 -139
  140. data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/usage.md +0 -173
  141. data/remote-src/2.0.0.beta64/shoelace-next/docs/index.html +0 -98
  142. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/accessibility.md +0 -18
  143. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/changelog.md +0 -925
  144. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/community.md +0 -53
  145. data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/contributing.md +0 -261
  146. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/border-radius.md +0 -12
  147. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/color.md +0 -439
  148. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/elevation.md +0 -11
  149. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/spacing.md +0 -16
  150. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/transition.md +0 -11
  151. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/typography.md +0 -58
  152. data/remote-src/2.0.0.beta64/shoelace-next/docs/tokens/z-index.md +0 -11
  153. data/remote-src/2.0.0.beta64/shoelace-next/docs/tutorials/integrating-with-laravel.md +0 -117
  154. data/remote-src/2.0.0.beta64/shoelace-next/docs/tutorials/integrating-with-nextjs.md +0 -137
  155. data/remote-src/2.0.0.beta64/shoelace-next/docs/tutorials/integrating-with-rails.md +0 -103
  156. data/remote-src/2.0.0.beta64/shoelace-next/lint-staged.config.js +0 -4
  157. data/remote-src/2.0.0.beta64/shoelace-next/package-lock.json +0 -9534
  158. data/remote-src/2.0.0.beta64/shoelace-next/package.json +0 -93
  159. data/remote-src/2.0.0.beta64/shoelace-next/prettier.config.cjs +0 -17
  160. data/remote-src/2.0.0.beta64/shoelace-next/scripts/build.js +0 -158
  161. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-css.js +0 -42
  162. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-icons.js +0 -71
  163. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-metadata.js +0 -11
  164. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-react.js +0 -63
  165. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-search.js +0 -100
  166. data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-vscode-data.js +0 -58
  167. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/plopfile.js +0 -67
  168. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/component.hbs +0 -44
  169. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/docs.hbs +0 -21
  170. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/styles.hbs +0 -10
  171. data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/tests.hbs +0 -13
  172. data/remote-src/2.0.0.beta64/shoelace-next/scripts/shared.js +0 -18
  173. data/remote-src/2.0.0.beta64/shoelace-next/src/components/alert/alert.styles.ts +0 -95
  174. data/remote-src/2.0.0.beta64/shoelace-next/src/components/alert/alert.test.ts +0 -93
  175. data/remote-src/2.0.0.beta64/shoelace-next/src/components/alert/alert.ts +0 -238
  176. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animated-image/animated-image.styles.ts +0 -52
  177. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animated-image/animated-image.test.ts +0 -13
  178. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animated-image/animated-image.ts +0 -120
  179. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animation.styles.ts +0 -10
  180. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animation.ts +0 -222
  181. data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animations.ts +0 -15
  182. data/remote-src/2.0.0.beta64/shoelace-next/src/components/avatar/avatar.styles.ts +0 -66
  183. data/remote-src/2.0.0.beta64/shoelace-next/src/components/avatar/avatar.test.ts +0 -111
  184. data/remote-src/2.0.0.beta64/shoelace-next/src/components/avatar/avatar.ts +0 -83
  185. data/remote-src/2.0.0.beta64/shoelace-next/src/components/badge/badge.styles.ts +0 -94
  186. data/remote-src/2.0.0.beta64/shoelace-next/src/components/badge/badge.test.ts +0 -77
  187. data/remote-src/2.0.0.beta64/shoelace-next/src/components/badge/badge.ts +0 -53
  188. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb/breadcrumb.styles.ts +0 -12
  189. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb/breadcrumb.test.ts +0 -104
  190. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb/breadcrumb.ts +0 -82
  191. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb-item/breadcrumb-item.styles.ts +0 -85
  192. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb-item/breadcrumb-item.test.ts +0 -160
  193. data/remote-src/2.0.0.beta64/shoelace-next/src/components/breadcrumb-item/breadcrumb-item.ts +0 -92
  194. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button/button.styles.ts +0 -637
  195. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button/button.ts +0 -209
  196. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button-group/button-group.styles.ts +0 -15
  197. data/remote-src/2.0.0.beta64/shoelace-next/src/components/button-group/button-group.ts +0 -84
  198. data/remote-src/2.0.0.beta64/shoelace-next/src/components/card/card.styles.ts +0 -62
  199. data/remote-src/2.0.0.beta64/shoelace-next/src/components/card/card.test.ts +0 -139
  200. data/remote-src/2.0.0.beta64/shoelace-next/src/components/card/card.ts +0 -68
  201. data/remote-src/2.0.0.beta64/shoelace-next/src/components/checkbox/checkbox.styles.ts +0 -108
  202. data/remote-src/2.0.0.beta64/shoelace-next/src/components/checkbox/checkbox.test.ts +0 -47
  203. data/remote-src/2.0.0.beta64/shoelace-next/src/components/checkbox/checkbox.ts +0 -203
  204. data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.styles.ts +0 -326
  205. data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.test.ts +0 -43
  206. data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.ts +0 -853
  207. data/remote-src/2.0.0.beta64/shoelace-next/src/components/details/details.styles.ts +0 -73
  208. data/remote-src/2.0.0.beta64/shoelace-next/src/components/details/details.test.ts +0 -153
  209. data/remote-src/2.0.0.beta64/shoelace-next/src/components/details/details.ts +0 -192
  210. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dialog/dialog.styles.ts +0 -106
  211. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dialog/dialog.test.ts +0 -135
  212. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dialog/dialog.ts +0 -296
  213. data/remote-src/2.0.0.beta64/shoelace-next/src/components/divider/divider.styles.ts +0 -25
  214. data/remote-src/2.0.0.beta64/shoelace-next/src/components/divider/divider.ts +0 -34
  215. data/remote-src/2.0.0.beta64/shoelace-next/src/components/drawer/drawer.styles.ts +0 -142
  216. data/remote-src/2.0.0.beta64/shoelace-next/src/components/drawer/drawer.test.ts +0 -135
  217. data/remote-src/2.0.0.beta64/shoelace-next/src/components/drawer/drawer.ts +0 -377
  218. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.styles.ts +0 -58
  219. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.test.ts +0 -147
  220. data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.ts +0 -459
  221. data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-bytes/format-bytes.ts +0 -35
  222. data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-date/format-date.ts +0 -81
  223. data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-number/format-number.ts +0 -69
  224. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/icon.styles.ts +0 -21
  225. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/icon.ts +0 -131
  226. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/library.default.ts +0 -9
  227. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/library.system.ts +0 -97
  228. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/library.ts +0 -49
  229. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/request.ts +0 -36
  230. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon-button/icon-button.styles.ts +0 -48
  231. data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon-button/icon-button.ts +0 -100
  232. data/remote-src/2.0.0.beta64/shoelace-next/src/components/image-comparer/image-comparer.styles.ts +0 -77
  233. data/remote-src/2.0.0.beta64/shoelace-next/src/components/image-comparer/image-comparer.ts +0 -147
  234. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/include.styles.ts +0 -10
  235. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/include.test.ts +0 -62
  236. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/include.ts +0 -80
  237. data/remote-src/2.0.0.beta64/shoelace-next/src/components/include/request.ts +0 -23
  238. data/remote-src/2.0.0.beta64/shoelace-next/src/components/input/input.styles.ts +0 -282
  239. data/remote-src/2.0.0.beta64/shoelace-next/src/components/input/input.test.ts +0 -35
  240. data/remote-src/2.0.0.beta64/shoelace-next/src/components/input/input.ts +0 -410
  241. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu/menu.styles.ts +0 -18
  242. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu/menu.ts +0 -205
  243. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-item/menu-item.styles.ts +0 -84
  244. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-item/menu-item.ts +0 -92
  245. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-label/menu-label.styles.ts +0 -21
  246. data/remote-src/2.0.0.beta64/shoelace-next/src/components/menu-label/menu-label.ts +0 -30
  247. data/remote-src/2.0.0.beta64/shoelace-next/src/components/mutation-observer/mutation-observer.styles.ts +0 -10
  248. data/remote-src/2.0.0.beta64/shoelace-next/src/components/mutation-observer/mutation-observer.test.ts +0 -13
  249. data/remote-src/2.0.0.beta64/shoelace-next/src/components/mutation-observer/mutation-observer.ts +0 -118
  250. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-bar/progress-bar.styles.ts +0 -57
  251. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-bar/progress-bar.test.ts +0 -89
  252. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-bar/progress-bar.ts +0 -74
  253. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-ring/progress-ring.styles.ts +0 -66
  254. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-ring/progress-ring.test.ts +0 -68
  255. data/remote-src/2.0.0.beta64/shoelace-next/src/components/progress-ring/progress-ring.ts +0 -84
  256. data/remote-src/2.0.0.beta64/shoelace-next/src/components/qr-code/qr-code.styles.ts +0 -22
  257. data/remote-src/2.0.0.beta64/shoelace-next/src/components/qr-code/qr-code.ts +0 -90
  258. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio/radio.styles.ts +0 -107
  259. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio/radio.test.ts +0 -65
  260. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio/radio.ts +0 -226
  261. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio-group/radio-group.styles.ts +0 -47
  262. data/remote-src/2.0.0.beta64/shoelace-next/src/components/radio-group/radio-group.ts +0 -66
  263. data/remote-src/2.0.0.beta64/shoelace-next/src/components/range/range.styles.ts +0 -192
  264. data/remote-src/2.0.0.beta64/shoelace-next/src/components/range/range.ts +0 -273
  265. data/remote-src/2.0.0.beta64/shoelace-next/src/components/rating/rating.styles.ts +0 -79
  266. data/remote-src/2.0.0.beta64/shoelace-next/src/components/rating/rating.ts +0 -249
  267. data/remote-src/2.0.0.beta64/shoelace-next/src/components/relative-time/relative-time.ts +0 -116
  268. data/remote-src/2.0.0.beta64/shoelace-next/src/components/resize-observer/resize-observer.styles.ts +0 -10
  269. data/remote-src/2.0.0.beta64/shoelace-next/src/components/resize-observer/resize-observer.ts +0 -87
  270. data/remote-src/2.0.0.beta64/shoelace-next/src/components/responsive-media/responsive-media.styles.ts +0 -36
  271. data/remote-src/2.0.0.beta64/shoelace-next/src/components/responsive-media/responsive-media.ts +0 -50
  272. data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.styles.ts +0 -331
  273. data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.test.ts +0 -56
  274. data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.ts +0 -560
  275. data/remote-src/2.0.0.beta64/shoelace-next/src/components/skeleton/skeleton.styles.ts +0 -60
  276. data/remote-src/2.0.0.beta64/shoelace-next/src/components/skeleton/skeleton.ts +0 -46
  277. data/remote-src/2.0.0.beta64/shoelace-next/src/components/spinner/spinner.styles.ts +0 -56
  278. data/remote-src/2.0.0.beta64/shoelace-next/src/components/spinner/spinner.test.ts +0 -24
  279. data/remote-src/2.0.0.beta64/shoelace-next/src/components/spinner/spinner.ts +0 -34
  280. data/remote-src/2.0.0.beta64/shoelace-next/src/components/split-panel/split-panel.styles.ts +0 -76
  281. data/remote-src/2.0.0.beta64/shoelace-next/src/components/split-panel/split-panel.test.ts +0 -13
  282. data/remote-src/2.0.0.beta64/shoelace-next/src/components/split-panel/split-panel.ts +0 -272
  283. data/remote-src/2.0.0.beta64/shoelace-next/src/components/switch/switch.styles.ts +0 -135
  284. data/remote-src/2.0.0.beta64/shoelace-next/src/components/switch/switch.test.ts +0 -64
  285. data/remote-src/2.0.0.beta64/shoelace-next/src/components/switch/switch.ts +0 -187
  286. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab/tab.styles.ts +0 -61
  287. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab/tab.ts +0 -104
  288. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-group/tab-group.styles.ts +0 -209
  289. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-group/tab-group.ts +0 -409
  290. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-panel/tab-panel.styles.ts +0 -17
  291. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-panel/tab-panel.ts +0 -49
  292. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tag/tag.styles.ts +0 -110
  293. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tag/tag.ts +0 -92
  294. data/remote-src/2.0.0.beta64/shoelace-next/src/components/textarea/textarea.styles.ts +0 -167
  295. data/remote-src/2.0.0.beta64/shoelace-next/src/components/textarea/textarea.test.ts +0 -35
  296. data/remote-src/2.0.0.beta64/shoelace-next/src/components/textarea/textarea.ts +0 -339
  297. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.styles.ts +0 -131
  298. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.test.ts +0 -117
  299. data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.ts +0 -355
  300. data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.styles.ts +0 -18
  301. data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.test.ts +0 -39
  302. data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.ts +0 -24
  303. data/remote-src/2.0.0.beta64/shoelace-next/src/declaration.d.ts +0 -8
  304. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/animate.ts +0 -70
  305. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/event.ts +0 -35
  306. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/focus-visible.ts +0 -26
  307. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/form-control.ts +0 -203
  308. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/formdata-event-polyfill.ts +0 -93
  309. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/math.ts +0 -8
  310. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/modal.ts +0 -53
  311. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/number.ts +0 -32
  312. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/offset.ts +0 -13
  313. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/scroll.ts +0 -57
  314. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/slot.ts +0 -91
  315. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/string.ts +0 -3
  316. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/support.ts +0 -15
  317. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/tabbable.ts +0 -81
  318. data/remote-src/2.0.0.beta64/shoelace-next/src/internal/watch.ts +0 -40
  319. data/remote-src/2.0.0.beta64/shoelace-next/src/shoelace.ts +0 -58
  320. data/remote-src/2.0.0.beta64/shoelace-next/src/styles/component.styles.ts +0 -23
  321. data/remote-src/2.0.0.beta64/shoelace-next/src/styles/form-control.styles.ts +0 -52
  322. data/remote-src/2.0.0.beta64/shoelace-next/src/styles/utility.styles.ts +0 -23
  323. data/remote-src/2.0.0.beta64/shoelace-next/src/themes/dark.styles.ts +0 -524
  324. data/remote-src/2.0.0.beta64/shoelace-next/src/themes/light.styles.ts +0 -524
  325. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/de-ch.ts +0 -21
  326. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/de.ts +0 -21
  327. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/en.ts +0 -21
  328. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/es.ts +0 -21
  329. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/fr.ts +0 -21
  330. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/he.ts +0 -21
  331. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/ja.ts +0 -21
  332. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/nl.ts +0 -21
  333. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/pl.ts +0 -21
  334. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/pt.ts +0 -21
  335. data/remote-src/2.0.0.beta64/shoelace-next/src/translations/ru.ts +0 -21
  336. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/animation-registry.ts +0 -59
  337. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/animation.ts +0 -1
  338. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/base-path.ts +0 -43
  339. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/form.ts +0 -22
  340. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/icon-library.ts +0 -1
  341. data/remote-src/2.0.0.beta64/shoelace-next/src/utilities/localize.ts +0 -5
  342. data/remote-src/2.0.0.beta64/shoelace-next/tsconfig.json +0 -35
  343. data/remote-src/2.0.0.beta64/shoelace-next/vercel.json +0 -4
  344. data/remote-src/2.0.0.beta64/shoelace-next/web-test-runner.config.js +0 -14
  345. data/shoelace-rails-ui.gemspec +0 -39
  346. data/shoelace-rails-ui.rb +0 -0
@@ -1,336 +0,0 @@
1
- # Form Controls
2
-
3
- Every Shoelace component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
4
-
5
- Shoelace solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Shoelace form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Shoelace form controls.
6
-
7
- ?> If you're using an older browser that doesn't support the `formdata` event, a lightweight polyfill will be automatically applied to ensure forms submit as expected.
8
-
9
- ## Form Serialization
10
-
11
- Serialization is just a fancy word for collecting form data. If you're relying on standard form submissions, e.g. `<form action="...">`, you can probably skip this section. However, most modern apps use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) or a library such as [axios](https://github.com/axios/axios) to submit forms using JavaScript.
12
-
13
- The [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) interface offers a standard way to serialize forms in the browser. You can create a `FormData` object from any `<form>` element like this.
14
-
15
- ```js
16
- const form = document.querySelector('form');
17
- const data = new FormData(form);
18
-
19
- // All form control data is available in a FormData object
20
- ```
21
-
22
- However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Shoelace offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
23
-
24
- ```js
25
- import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';
26
-
27
- const form = document.querySelector('form');
28
- const data = serialize(form);
29
-
30
- // All form control data is available in a plain object
31
- ```
32
-
33
- This results in an object with name/value pairs that map to each form control. If more than one form control shares the same name, the values will be passed as an array, e.g. `{ name: ['value1', 'value2'] }`.
34
-
35
- ## Form Control Validation
36
-
37
- Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Shoelace form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, and `maxlength`. Shoelace implements many of the same attributes as native form controls, but check each form control's documentation for a list of all supported properties.
38
-
39
- As the user interacts with a form control, its `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined. When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the surrounding `<form>` element.
40
-
41
- All form controls support validation, but not all validation props are available for every component. Refer to a component's documentation to see which validation props it supports.
42
-
43
- !> Client-side validation can be used to improve the UX of forms, but it is not a replacement for server-side validation. **You should always validate and sanitize user input on the server!**
44
-
45
- ### Required Fields
46
-
47
- To make a field required, use the `required` prop. The form will not be submitted if a required form control is empty.
48
-
49
- ```html preview
50
- <form class="input-validation-required">
51
- <sl-input name="name" label="Name" required></sl-input>
52
- <br>
53
- <sl-select label="Favorite Animal" clearable required>
54
- <sl-menu-item value="birds">Birds</sl-menu-item>
55
- <sl-menu-item value="cats">Cats</sl-menu-item>
56
- <sl-menu-item value="dogs">Dogs</sl-menu-item>
57
- <sl-menu-item value="other">Other</sl-menu-item>
58
- </sl-select>
59
- <br>
60
- <sl-textarea name="comment" label="Comment" required></sl-textarea>
61
- <br>
62
- <sl-checkbox required>Check me before submitting</sl-checkbox>
63
- <br><br>
64
- <sl-button type="submit" variant="primary">Submit</sl-button>
65
- </form>
66
-
67
- <script>
68
- const form = document.querySelector('.input-validation-required');
69
- form.addEventListener('submit', event => {
70
- event.preventDefault();
71
- alert('All fields are valid!')
72
- });
73
- </script>
74
- ```
75
-
76
- ```jsx react
77
- import {
78
- SlButton,
79
- SlCheckbox,
80
- SlInput,
81
- SlMenuItem,
82
- SlSelect,
83
- SlTextarea
84
- } from '@shoelace-style/shoelace/dist/react';
85
-
86
- const App = () => {
87
- function handleSubmit(event) {
88
- event.preventDefault();
89
- alert('All fields are valid!');
90
- }
91
-
92
- return (
93
- <form onSubmit={handleSubmit}>
94
- <SlInput name="name" label="Name" required />
95
- <br />
96
- <SlSelect label="Favorite Animal" clearable required>
97
- <SlMenuItem value="birds">Birds</SlMenuItem>
98
- <SlMenuItem value="cats">Cats</SlMenuItem>
99
- <SlMenuItem value="dogs">Dogs</SlMenuItem>
100
- <SlMenuItem value="other">Other</SlMenuItem>
101
- </SlSelect>
102
- <br />
103
- <SlTextarea name="comment" label="Comment" required></SlTextarea>
104
- <br />
105
- <SlCheckbox required>Check me before submitting</SlCheckbox>
106
- <br /><br />
107
- <SlButton type="submit" variant="primary">Submit</SlButton>
108
- </form>
109
- );
110
- };
111
- ```
112
-
113
- ### Input Patterns
114
-
115
- To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern), use the `pattern` attribute. This example only allows the letters A-Z, so the form will not submit if a number or symbol is entered. This only works with `<sl-input>` elements.
116
-
117
- ```html preview
118
- <form class="input-validation-pattern">
119
- <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
120
- <br>
121
- <sl-button type="submit" variant="primary">Submit</sl-button>
122
- </form>
123
-
124
- <script>
125
- const form = document.querySelector('.input-validation-pattern');
126
- form.addEventListener('submit', event => {
127
- event.preventDefault();
128
- alert('All fields are valid!')
129
- });
130
- </script>
131
- ```
132
-
133
- ```jsx react
134
- import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react';
135
-
136
- const App = () => {
137
- function handleSubmit(event) {
138
- event.preventDefault();
139
- alert('All fields are valid!');
140
- }
141
-
142
- return (
143
- <form onSubmit={handleSubmit}>
144
- <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
145
- <br />
146
- <SlButton type="submit" variant="primary">Submit</SlButton>
147
- </form>
148
- );
149
- };
150
- ```
151
-
152
- ### Input Types
153
-
154
- Some input types will automatically trigger constraints, such as `email` and `url`.
155
-
156
- ```html preview
157
- <form class="input-validation-type">
158
- <sl-input variant="email" label="Email" placeholder="you@example.com" required></sl-input>
159
- <br>
160
- <sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input>
161
- <br>
162
- <sl-button type="submit" variant="primary">Submit</sl-button>
163
- </form>
164
-
165
- <script>
166
- const form = document.querySelector('.input-validation-type');
167
- form.addEventListener('submit', event => {
168
- event.preventDefault();
169
- alert('All fields are valid!')
170
- });
171
- </script>
172
- ```
173
-
174
- ```jsx react
175
- import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react';
176
-
177
- const App = () => {
178
- function handleSubmit(event) {
179
- event.preventDefault();
180
- alert('All fields are valid!');
181
- }
182
-
183
- return (
184
- <form onSubmit={handleSubmit}>
185
- <SlInput variant="email" label="Email" placeholder="you@example.com" required />
186
- <br />
187
- <SlInput variant="url" label="URL" placeholder="https://example.com/" required />
188
- <br />
189
- <SlButton type="submit" variant="primary">Submit</SlButton>
190
- </form>
191
- );
192
- };
193
- ```
194
-
195
- ### Custom Validation
196
-
197
- To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument.
198
-
199
- ```html preview
200
- <form class="input-validation-custom">
201
- <sl-input label="Type 'shoelace'" required></sl-input>
202
- <br>
203
- <sl-button type="submit" variant="primary">Submit</sl-button>
204
- </form>
205
-
206
- <script>
207
- const form = document.querySelector('.input-validation-custom');
208
- const input = form.querySelector('sl-input');
209
-
210
- form.addEventListener('submit', event => {
211
- event.preventDefault();
212
- alert('All fields are valid!')
213
- });
214
-
215
- input.addEventListener('sl-input', () => {
216
- if (input.value === 'shoelace') {
217
- input.setCustomValidity('');
218
- } else {
219
- input.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!');
220
- }
221
- });
222
- </script>
223
- ```
224
-
225
- ```jsx react
226
- import { useRef, useState } from 'react';
227
- import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react';
228
-
229
- const App = () => {
230
- const input = useRef(null);
231
- const [value, setValue] = useState('');
232
-
233
- function handleInput(event) {
234
- setValue(event.target.value);
235
-
236
- if (event.target.value === 'shoelace') {
237
- input.current.setCustomValidity('');
238
- } else {
239
- input.current.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!');
240
- }
241
- }
242
-
243
- function handleSubmit(event) {
244
- event.preventDefault();
245
- alert('All fields are valid!');
246
- }
247
-
248
- return (
249
- <form onSubmit={handleSubmit}>
250
- <SlInput
251
- ref={input}
252
- label="Type 'shoelace'"
253
- required
254
- value={value}
255
- onSlInput={handleInput}
256
- />
257
- <br />
258
- <SlButton type="submit" variant="primary">Submit</SlButton>
259
- </form>
260
- );
261
- };
262
- ```
263
-
264
- ### Custom Validation Styles
265
-
266
- The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this.
267
-
268
- ```html preview
269
- <sl-input class="custom-input" required pattern="shoelace">
270
- <small slot="help-text">Please enter "shoelace" to continue</small>
271
- </sl-input>
272
-
273
- <style>
274
- .custom-input[invalid]:not([disabled])::part(label),
275
- .custom-input[invalid]:not([disabled])::part(help-text) {
276
- color: var(--sl-color-danger-600);
277
- }
278
-
279
- .custom-input[invalid]:not([disabled])::part(base) {
280
- border-color: var(--sl-color-danger-500);
281
- }
282
-
283
- .custom-input[invalid]:focus-within::part(base) {
284
- box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
285
- }
286
- </style>
287
- ```
288
-
289
- ```jsx react
290
- import { SlInput } from '@shoelace-style/shoelace/dist/react';
291
-
292
- const css = `
293
- .custom-input[invalid]:not([disabled])::part(label),
294
- .custom-input[invalid]:not([disabled])::part(help-text) {
295
- color: var(--sl-color-danger-600);
296
- }
297
-
298
- .custom-input[invalid]:not([disabled])::part(base) {
299
- border-color: var(--sl-color-danger-500);
300
- }
301
-
302
- .custom-input[invalid]:focus-within::part(base) {
303
- box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
304
- }
305
- `;
306
-
307
- const App = () => (
308
- <>
309
- <SlInput className="custom-input" required pattern="shoelace">
310
- <small slot="help-text">Please enter "shoelace" to continue</small>
311
- </SlInput>
312
-
313
- <style>{css}</style>
314
- </>
315
- );
316
- ```
317
-
318
- ### Third-party Validation
319
-
320
- To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.
321
-
322
- Remember that the `invalid` attribute on form controls reflects validity as defined by the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` attribute will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
323
-
324
- Instead, toggle a class and target it in your stylesheet as shown below.
325
-
326
- ```html
327
- <form novalidate>
328
- <sl-input class="invalid"></sl-input>
329
- </form>
330
-
331
- <style>
332
- sl-input.invalid {
333
- ...
334
- }
335
- </style>
336
- ```
@@ -1,137 +0,0 @@
1
- # Installation
2
-
3
- You can use Shoelace via CDN or by installing it locally. You can also [cherry pick](#cherry-picking) individual components for faster load times.
4
-
5
- If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular).
6
-
7
- ## CDN Installation (Easiest)
8
-
9
- The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme.
10
-
11
- ```html
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
13
- <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
14
- ```
15
-
16
- ?> If you're only using a handful of components, it will be more efficient to [cherry pick](#cherry-picking) the ones you need.
17
-
18
- ### Dark Theme
19
-
20
- If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instead, use this code and add `<html class="sl-theme-dark">` to the page.
21
-
22
- ```html
23
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css">
24
- <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
25
- ```
26
-
27
- ### Light & Dark Theme
28
-
29
- If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use this. The `media` attributes ensure that only the user's preferred theme stylesheet loads and the `onload` attribute sets the appropriate [theme class](/getting-started/themes) on the `<html>` element.
30
-
31
- ```html
32
- <link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
33
- <link rel="stylesheet" media="(prefers-color-scheme:dark)"
34
- href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css"
35
- onload="document.documentElement.classList.add('sl-theme-dark');">
36
- <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
37
- ```
38
-
39
- Now you can [start using Shoelace!](/getting-started/usage)
40
-
41
- ## Local Installation
42
-
43
- If you don't want to use the CDN, you can install Shoelace locally with the following command.
44
-
45
- ```bash
46
- npm install @shoelace-style/shoelace
47
- ```
48
-
49
- It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/shoelace` that serves static files from `node_modules/@shoelace-style/shoelace`.
50
-
51
- Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
52
-
53
- ```html
54
- <link rel="stylesheet" href="/shoelace/dist/themes/light.css">
55
- <script type="module" src="/shoelace/dist/shoelace.js"></script>
56
- ```
57
-
58
- Alternatively, [you can use a bundler](#bundling).
59
-
60
- ?> For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
61
-
62
- ## Setting the Base Path
63
-
64
- Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users.
65
-
66
- However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways.
67
-
68
- ```html
69
- <!-- Option 1: the data-shoelace attribute -->
70
- <script src="bundle.js" data-shoelace="/path/to/shoelace/dist"></script>
71
-
72
- <!-- Option 2: the setBasePath() method -->
73
- <script src="bundle.js"></script>
74
- <script type="module">
75
- import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
76
- setBasePath('/path/to/shoelace/dist');
77
- </script>
78
- ```
79
-
80
- ?> The library also exports a `getBasePath()` method you can use to reference assets.
81
-
82
- ## Cherry Picking
83
-
84
- The previous approach is the _easiest_ way to load Shoelace, but easy isn't always efficient. You'll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping or if you're using most of the components, but it may result in longer load times in production. To improve this, you can cherry pick the components you need.
85
-
86
- Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load component manually.
87
-
88
- Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
89
-
90
- ```html
91
- <link rel="stylesheet" href="/path/to/shoelace/dist/themes/light.css">
92
-
93
- <script type="module" data-shoelace="/path/to/shoelace/dist">
94
- import '@shoelace-style/shoelace/dist/components/button/button.js';
95
-
96
- // <sl-button> is ready to use!
97
- </script>
98
- ```
99
-
100
- You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
101
-
102
- !> Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
103
-
104
- !> You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
105
-
106
- ## Bundling
107
-
108
- Shoelace is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
109
-
110
- To use Shoelace with a bundler, first install Shoelace along with your bundler of choice.
111
-
112
- ```bash
113
- npm install @shoelace-style/shoelace
114
- ```
115
-
116
- Now it's time to configure your bundler. Configurations vary for each tool, but here are some examples to help you get started.
117
-
118
- - [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
119
- - [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)
120
-
121
- Once your bundler is configured, you'll be able to import Shoelace components and utilities.
122
-
123
- ```js
124
- import '@shoelace-style/shoelace/dist/themes/light.css';
125
- import '@shoelace-style/shoelace/dist/components/button/button.js';
126
- import '@shoelace-style/shoelace/dist/components/icon/icon.js';
127
- import '@shoelace-style/shoelace/dist/components/input/input.js';
128
- import '@shoelace-style/shoelace/dist/components/rating/rating.js';
129
- import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
130
-
131
- // Set the base path to the folder you copied Shoelace's assets to
132
- setBasePath('/path/to/shoelace/dist');
133
-
134
- // <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
135
- ```
136
-
137
- !> Component modules include side effects for registration purposes. Because of this, importing directly from `@shoelace-style/shoelace` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.
@@ -1,140 +0,0 @@
1
- # Localization
2
-
3
- Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element. Here's an example that renders Shoelace components in Spanish.
4
-
5
- ```html
6
- <html lang="es">
7
- <head>
8
- <script type="module" src="/path/to/shoelace/dist/translations/es.js"></script>
9
- </head>
10
-
11
- <body>
12
- ...
13
- </body>
14
- </html>
15
- ```
16
-
17
- Through the magic of a mutation observer, changing the `lang` attribute will automatically update all localized components to use the new locale.
18
-
19
- ?> Shoelace provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
20
-
21
- ## Available Translations
22
-
23
- Shoelace ships with the following translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation.
24
-
25
- - `en` - English (US)
26
- - `de-CH` - German (Switzerland)
27
- - `de` - German
28
- - `es` - Spanish (Latin America)
29
- - `fr` - French
30
- - `he` - Hebrew
31
- - `ja` - Japanese
32
- - `nl` - Dutch
33
- - `pl` - Polish
34
- - `pt` - Portuguese
35
- - `ru` - Russian
36
-
37
- The location of translations depends on how you're consuming Shoelace.
38
-
39
- - If you're using the CDN, [import them from the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace?path=dist%2Ftranslations)
40
- - If you're using a bundler, import them from `@shoelace-style/shoelace/dist/translations/[lang].js`
41
-
42
- You do not need to load translations up front. You can import them dynamically even after updating the `lang` attribute. Once a translation is registered, localized components will update automatically.
43
-
44
- ```js
45
- // Same as setting <html lang="de">
46
- document.documentElement.lang = 'de';
47
-
48
- // Import the translation
49
- import('/path/to/shoelace/dist/translations/de.js');
50
- ```
51
-
52
- ### Translation Resolution
53
-
54
- The locale set by `<html lang="...">` is the default locale for the document. If a country code is provided, e.g. `es-PE` for Peruvian Spanish, the localization library will resolve it like this:
55
-
56
- 1. Look for `es-PE`
57
- 2. Look for `es`
58
- 3. Fall back to `en`
59
-
60
- Shoelace uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
61
-
62
- ### Submitting New Translations or Improvements
63
-
64
- To contribute new translations or improvements to existing translations, please submit a pull request on GitHub. Translations are located in [`src/translations`](https://github.com/shoelace-style/shoelace/blob/next/src/translations) and can be edited directly on GitHub if you don't want to clone the repo locally.
65
-
66
- Regional translations are welcome! For example, if a German translation (`de`) exists it's perfectly acceptable to submit a German (Switzerland) (`de-CH`) translation.
67
-
68
- If you have any questions, please start a [discussion](https://github.com/shoelace-style/shoelace/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
69
-
70
- ## Multiple Locales Per Page
71
-
72
- You can use a different locale for an individual component by setting its `lang` attribute. Here's a contrived example to demonstrate.
73
-
74
- ```html
75
- <html lang="es">
76
- ...
77
-
78
- <body>
79
- <sl-button><!-- Spanish --></sl-button>
80
- <sl-button lang="ru"><!-- Russian --></sl-button>
81
- </body>
82
- </html>
83
- ```
84
-
85
- For performance reasons, the `lang` attribute must be on the component itself, not on an ancestor element.
86
-
87
- ```html
88
- <html lang="es">
89
- ...
90
-
91
- <body>
92
- <div lang="ru">
93
- <sl-button><!-- still in Spanish --></sl-button>
94
- </div>
95
- </body>
96
- </html>
97
- ```
98
-
99
- This limitation exists because there's no efficient way to determine the current locale of a given element in a DOM tree. I consider this a gap in the platform and [I've proposed a couple properties](https://github.com/whatwg/html/issues/7039) to make this possible.
100
-
101
- ## Creating Your Own Translations
102
-
103
- You can provide your own translations if you have specific needs or if you don't want to wait for a translation to land upstream. The easiest way to do this is to copy `src/translations/en.ts` into your own project and translate the terms inside. When your translation is done, you can import it and use it just like a built-in translation.
104
-
105
- Let's create a Spanish translation as an example. The following assumes you're using TypeScript, but you can also create translations with regular JavaScript.
106
-
107
- ```js
108
- import { registerTranslation } from '@shoelace-style/shoelace/dist/utilities/localize';
109
- import type { Translation } from '@shoelace-style/shoelace/dist/utilities/localize';
110
-
111
- const translation: Translation = {
112
- $code: 'es',
113
- $name: 'Español',
114
- $dir: 'ltr',
115
-
116
- term1: '...',
117
- term2: '...',
118
- ...
119
- };
120
-
121
- registerTranslation(translation);
122
-
123
- export default translation;
124
- ```
125
-
126
- Once your translation has been compiled to JavaScript, import it and activate it like this.
127
-
128
- ```html
129
- <html lang="es">
130
- <head>
131
- <script type="module" src="/path/to/es.js"></script>
132
- </head>
133
-
134
- <body>
135
- ...
136
- </body>
137
- </html>
138
- ```
139
-
140
- ?> If your translation isn't working, make sure you're using the same localize module when importing `registerTranslation`. If you're using a different module, your translation won't be recognized.