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,457 +0,0 @@
1
- # Select
2
-
3
- [component-header:sl-select]
4
-
5
- Selects allow you to choose one or more items from a dropdown menu.
6
-
7
- ```html preview
8
- <sl-select>
9
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
10
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
11
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
12
- <sl-divider></sl-divider>
13
- <sl-menu-item value="option-4">Option 4</sl-menu-item>
14
- <sl-menu-item value="option-5">Option 5</sl-menu-item>
15
- <sl-menu-item value="option-6">Option 6</sl-menu-item>
16
- </sl-select>
17
- ```
18
-
19
- ```jsx react
20
- import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
21
-
22
- const App = () => (
23
- <SlSelect>
24
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
25
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
26
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
27
- <SlDivider />
28
- <SlMenuItem value="option-4">Option 4</SlMenuItem>
29
- <SlMenuItem value="option-5">Option 5</SlMenuItem>
30
- <SlMenuItem value="option-6">Option 6</SlMenuItem>
31
- </SlSelect>
32
- );
33
- ```
34
-
35
- ?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
36
-
37
- ## Examples
38
-
39
- ### Placeholders
40
-
41
- Use the `placeholder` attribute to add a placeholder.
42
-
43
- ```html preview
44
- <sl-select placeholder="Select one">
45
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
46
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
47
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
48
- </sl-select>
49
- ```
50
-
51
- ```jsx react
52
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
53
-
54
- const App = () => (
55
- <SlSelect placeholder="Select one">
56
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
57
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
58
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
59
- </SlSelect>
60
- );
61
- ```
62
-
63
- ### Clearable
64
-
65
- Use the `clearable` attribute to make the control clearable.
66
-
67
- ```html preview
68
- <sl-select placeholder="Clearable" clearable>
69
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
70
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
71
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
72
- </sl-select>
73
- ```
74
-
75
- ```jsx react
76
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
77
-
78
- const App = () => (
79
- <SlSelect placeholder="Clearable" clearable>
80
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
81
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
82
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
83
- </SlSelect>
84
- );
85
- ```
86
-
87
- ### Filled Selects
88
-
89
- Add the `filled` attribute to draw a filled select.
90
-
91
- ```html preview
92
- <sl-select filled>
93
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
94
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
95
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
96
- </sl-select>
97
- ```
98
-
99
- ```jsx react
100
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
101
-
102
- const App = () => (
103
- <SlSelect filled>
104
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
105
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
106
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
107
- </SlSelect>
108
- );
109
- ```
110
-
111
- ### Pill
112
-
113
- Use the `pill` attribute to give selects rounded edges.
114
-
115
- ```html preview
116
- <sl-select pill>
117
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
118
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
119
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
120
- </sl-select>
121
- ```
122
-
123
- ```jsx react
124
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
125
-
126
- const App = () => (
127
- <SlSelect pill>
128
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
129
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
130
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
131
- </SlSelect>
132
- );
133
- ```
134
-
135
- ### Disabled
136
-
137
- Use the `disabled` attribute to disable a select.
138
-
139
- ```html preview
140
- <sl-select placeholder="Disabled" disabled>
141
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
142
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
143
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
144
- </sl-select>
145
- ```
146
-
147
- ```jsx react
148
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
149
-
150
- const App = () => (
151
- <SlSelect placeholder="Disabled" disabled>
152
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
153
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
154
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
155
- </SlSelect>
156
- );
157
- ```
158
-
159
- ### Multiple
160
-
161
- To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. When using this option, `value` will be an array instead of a string.
162
-
163
- ```html preview
164
- <sl-select placeholder="Select a few" multiple clearable>
165
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
166
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
167
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
168
- <sl-divider></sl-divider>
169
- <sl-menu-item value="option-4">Option 4</sl-menu-item>
170
- <sl-menu-item value="option-5">Option 5</sl-menu-item>
171
- <sl-menu-item value="option-6">Option 6</sl-menu-item>
172
- </sl-select>
173
- ```
174
-
175
- ```jsx react
176
- import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
177
-
178
- const App = () => (
179
- <SlSelect placeholder="Select a few" multiple clearable>
180
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
181
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
182
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
183
- <SlDivider />
184
- <SlMenuItem value="option-4">Option 4</SlMenuItem>
185
- <SlMenuItem value="option-5">Option 5</SlMenuItem>
186
- <SlMenuItem value="option-6">Option 6</SlMenuItem>
187
- </SlSelect>
188
- );
189
- ```
190
-
191
- ### Grouping Options
192
-
193
- Options can be grouped visually using menu labels and dividers.
194
-
195
- ```html preview
196
- <sl-select placeholder="Select one">
197
- <sl-menu-label>Group 1</sl-menu-label>
198
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
199
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
200
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
201
- <sl-divider></sl-divider>
202
- <sl-menu-label>Group 2</sl-menu-label>
203
- <sl-menu-item value="option-4">Option 4</sl-menu-item>
204
- <sl-menu-item value="option-5">Option 5</sl-menu-item>
205
- <sl-menu-item value="option-6">Option 6</sl-menu-item>
206
- </sl-select>
207
- ```
208
-
209
- ```jsx react
210
- import { SlDivider, SlMenuItem, SlMenuLabel, SlSelect } from '@shoelace-style/shoelace/dist/react';
211
-
212
- const App = () => (
213
- <SlSelect placeholder="Select one">
214
- <SlMenuLabel>Group 1</SlMenuLabel>
215
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
216
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
217
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
218
- <SlDivider></SlDivider>
219
- <SlMenuLabel>Group 2</SlMenuLabel>
220
- <SlMenuItem value="option-4">Option 4</SlMenuItem>
221
- <SlMenuItem value="option-5">Option 5</SlMenuItem>
222
- <SlMenuItem value="option-6">Option 6</SlMenuItem>
223
- </SlSelect>
224
- );
225
- ```
226
-
227
- ### Sizes
228
-
229
- Use the `size` attribute to change a select's size.
230
-
231
- ```html preview
232
- <sl-select placeholder="Small" size="small" multiple>
233
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
234
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
235
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
236
- </sl-select>
237
-
238
- <br>
239
-
240
- <sl-select placeholder="Medium" size="medium" multiple>
241
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
242
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
243
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
244
- </sl-select>
245
-
246
- <br>
247
-
248
- <sl-select placeholder="Large" size="large" multiple>
249
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
250
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
251
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
252
- </sl-select>
253
- ```
254
-
255
- ```jsx react
256
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
257
-
258
- const App = () => (
259
- <>
260
- <SlSelect placeholder="Small" size="small" multiple>
261
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
262
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
263
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
264
- </SlSelect>
265
-
266
- <br />
267
-
268
- <SlSelect placeholder="Medium" size="medium" multiple>
269
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
270
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
271
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
272
- </SlSelect>
273
-
274
- <br />
275
-
276
- <SlSelect placeholder="Large" size="large" multiple>
277
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
278
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
279
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
280
- </SlSelect>
281
- </>
282
- );
283
- ```
284
-
285
- ### Selecting Options Programmatically
286
-
287
- The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
288
-
289
- ```html preview
290
- <div class="selecting-example">
291
- <sl-select>
292
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
293
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
294
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
295
- </sl-select>
296
-
297
- <br>
298
-
299
- <sl-button data-option="option-1">Set 1</sl-button>
300
- <sl-button data-option="option-2">Set 2</sl-button>
301
- <sl-button data-option="option-3">Set 3</sl-button>
302
- </div>
303
-
304
- <script>
305
- const container = document.querySelector('.selecting-example');
306
- const select = container.querySelector('sl-select');
307
-
308
- [...container.querySelectorAll('sl-button')].map(button => {
309
- button.addEventListener('click', () => {
310
- select.value = button.dataset.option;
311
- });
312
- });
313
- </script>
314
- ```
315
-
316
- ```jsx react
317
- import { useState } from 'react';
318
- import { SlButton, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
319
-
320
- const App = () => {
321
- const [value, setValue] = useState('option-1');
322
-
323
- return (
324
- <>
325
- <SlSelect value={value} onSlChange={event => setValue(event.target.value)}>
326
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
327
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
328
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
329
- </SlSelect>
330
-
331
- <br />
332
-
333
- <SlButton onClick={() => setValue('option-1')}>Set 1</SlButton>
334
- <SlButton onClick={() => setValue('option-2')}>Set 2</SlButton>
335
- <SlButton onClick={() => setValue('option-3')}>Set 3</SlButton>
336
- </>
337
- );
338
- };
339
- ```
340
-
341
- ### Labels
342
-
343
- Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead.
344
-
345
- ```html preview
346
- <sl-select label="Select one">
347
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
348
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
349
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
350
- </sl-select>
351
- ```
352
-
353
- ```jsx react
354
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
355
-
356
- const App = () => (
357
- <SlSelect label="Select one">
358
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
359
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
360
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
361
- </SlSelect>
362
- );
363
- ```
364
-
365
- ### Help Text
366
-
367
- Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
368
-
369
- ```html preview
370
- <sl-select
371
- label="Experience"
372
- help-text="Please tell us your skill level."
373
- >
374
- <sl-menu-item value="1">Novice</sl-menu-item>
375
- <sl-menu-item value="2">Intermediate</sl-menu-item>
376
- <sl-menu-item value="3">Advanced</sl-menu-item>
377
- </sl-select>
378
- ```
379
-
380
- ```jsx react
381
- import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
382
-
383
- const App = () => (
384
- <SlSelect
385
- label="Experience"
386
- help-text="Please tell us your skill level."
387
- >
388
- <SlMenuItem value="1">Novice</SlMenuItem>
389
- <SlMenuItem value="2">Intermediate</SlMenuItem>
390
- <SlMenuItem value="3">Advanced</SlMenuItem>
391
- </SlSelect>
392
- );
393
- ```
394
-
395
- ### Prefix & Suffix Icons
396
-
397
- Use the `prefix` and `suffix` slots to add icons.
398
-
399
- ```html preview
400
- <sl-select placeholder="Small" size="small">
401
- <sl-icon name="house" slot="prefix"></sl-icon>
402
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
403
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
404
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
405
- <sl-icon name="chat" slot="suffix"></sl-icon>
406
- </sl-select>
407
- <br>
408
- <sl-select placeholder="Medium" size="medium">
409
- <sl-icon name="house" slot="prefix"></sl-icon>
410
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
411
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
412
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
413
- <sl-icon name="chat" slot="suffix"></sl-icon>
414
- </sl-select>
415
- <br>
416
- <sl-select placeholder="Large" size="large">
417
- <sl-icon name="house" slot="prefix"></sl-icon>
418
- <sl-menu-item value="option-1">Option 1</sl-menu-item>
419
- <sl-menu-item value="option-2">Option 2</sl-menu-item>
420
- <sl-menu-item value="option-3">Option 3</sl-menu-item>
421
- <sl-icon name="chat" slot="suffix"></sl-icon>
422
- </sl-select>
423
- ```
424
-
425
- ```jsx react
426
- import { SlIcon, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
427
-
428
- const App = () => (
429
- <>
430
- <SlSelect placeholder="Small" size="small">
431
- <SlIcon name="house" slot="prefix"></SlIcon>
432
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
433
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
434
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
435
- <SlIcon name="chat" slot="suffix"></SlIcon>
436
- </SlSelect>
437
- <br />
438
- <SlSelect placeholder="Medium" size="medium">
439
- <SlIcon name="house" slot="prefix"></SlIcon>
440
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
441
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
442
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
443
- <SlIcon name="chat" slot="suffix"></SlIcon>
444
- </SlSelect>
445
- <br />
446
- <SlSelect placeholder="Large" size="large">
447
- <SlIcon name="house" slot="prefix"></SlIcon>
448
- <SlMenuItem value="option-1">Option 1</SlMenuItem>
449
- <SlMenuItem value="option-2">Option 2</SlMenuItem>
450
- <SlMenuItem value="option-3">Option 3</SlMenuItem>
451
- <SlIcon name="chat" slot="suffix"></SlIcon>
452
- </SlSelect>
453
- </>
454
- );
455
- ```
456
-
457
- [component-metadata:sl-select]