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,53 +0,0 @@
1
- # Community
2
-
3
- Shoelace has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!
4
-
5
- Please be respectful of other users and remember that Shoelace is an open source project. We'll try to help when we can, but there's no guarantee we'll be able solve your problem. Please manage your expectations and don't forget to contribute back to the conversation when you can!
6
-
7
- ## Discussion Forum
8
-
9
- The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is open to anyone with a GitHub account. This is the best place to:
10
-
11
- - Ask for help
12
- - Share ideas and get feedback
13
- - Show the community what you're working on
14
- - Learn more about the project, its values, and its roadmap
15
-
16
- <sl-button variant="primary" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
17
- <sl-icon name="github" slot="prefix"></sl-icon>
18
- Join the Discussion
19
- </sl-button>
20
-
21
- ## Community Chat
22
-
23
- The [community chat](https://discord.gg/mg8f26C) is open to the public and powered by [Discord](https://discord.com/). This is a good place to:
24
-
25
- - Ask for help
26
- - Share ideas and get feedback
27
- - Show the community what you're working on
28
- - Chat live with other designers, developers, and Shoelace fans
29
-
30
- <sl-button variant="primary" href="https://discord.gg/mg8f26C" target="_blank">
31
- <sl-icon name="discord" slot="prefix"></sl-icon>
32
- Join the Chat
33
- </sl-button>
34
-
35
- ## Stack Overflow
36
-
37
- You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Shoelace author.
38
-
39
- <sl-button variant="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
40
- <sl-icon name="stack-overflow" slot="prefix"></sl-icon>
41
- Ask for Help
42
- </sl-button>
43
-
44
- ## Twitter
45
-
46
- Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Shoelace. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.
47
-
48
- **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
49
-
50
- <sl-button variant="primary" href="https://twitter.com/shoelace_style" target="_blank">
51
- <sl-icon name="twitter" slot="prefix"></sl-icon>
52
- Follow on Twitter
53
- </sl-button>
@@ -1,261 +0,0 @@
1
- # Contributing
2
-
3
- Shoelace is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Shoelace.
4
-
5
- The easiest way to get started contributing is to join the [community chat](https://discord.gg/mg8f26C). This is where we hang out, discuss new ideas, ask for feedback, and more!
6
-
7
- A common misconception about contributing to an open source project is that you need to know how to code. This simply isn't true. In fact, there are _many_ ways to contribute, and some of the most important contributions come from those who never write a single line of code. Here's a list of ways you can make a meaningful contribution to the project:
8
-
9
- - Submitting well-written bug reports
10
- - Submitting feature requests that are within the scope of the project
11
- - Improving the documentation
12
- - Responding to users that need help in the community chat or discussion forum
13
- - Triaging issues on GitHub
14
- - Being a developer advocate for the project
15
- - Sponsoring the project financially
16
- - Writing tests
17
- - Sharing ideas
18
- - And, of course, contributing code!
19
-
20
- Please take a moment to review these guidelines to make the contribution process as easy as possible for both yourself and the project's maintainers.
21
-
22
- ## Using the Issue Tracker
23
-
24
- The [issue tracker](https://github.com/shoelace-style/shoelace/issues) is for bug reports, feature requests, and pull requests.
25
-
26
- - Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/help) instead.
27
- - Please **do not** derail, hijack, or troll issues. Keep the discussion on topic and be respectful of others.
28
- - Please **do not** post comments with "+1" or "👍". Use [reactions](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead.
29
- - Please **do** use the issue tracker for feature requests, bug reports, and pull requests.
30
-
31
- Issues that do not follow these guidelines are subject to closure. There simply aren't enough resources for the author and contributors to troubleshoot personal support requests.
32
-
33
- ### Feature Requests
34
-
35
- Feature requests can be added using the issue tracker.
36
-
37
- - Please **do** search for an existing request before suggesting a new feature.
38
- - Please **do** use the "👍" reaction to vote for a feature.
39
- - Please **do** share substantial use cases and perspective that support new features if they haven't already been mentioned.
40
- - Please **do not** bump, spam, or ping contributors to prioritize your own feature.
41
-
42
- If you would like your feature prioritized, please consider [sponsoring the project](https://github.com/sponsors/claviska).
43
-
44
- ### Bug Reports
45
-
46
- A bug is _a demonstrable problem_ caused by code in the library. Bug reports are an important contribution to the quality of the project. When submitting a bug report, there are a few steps you can take to make sure your issues gets attention quickly.
47
-
48
- - Please **do not** paste in large blocks of irrelevant code
49
- - Please **do** search for an existing issue before creating a new one
50
- - Please **do** explain the bug clearly
51
- - Please **do** provide a minimal test case that demonstrates the bug (e.g. [jsfiddle.net](https://jsfiddle.net/) or [CodePen](https://codepen.io/))
52
- - Please **do** provide additional information, when necessary, to replicate the bug
53
-
54
- **A minimal test case is critical to a successful bug report.** It demonstrates that the bug exists in the library and not in surrounding code. Contributors should be able to understand the bug without studying your code, otherwise they'll probably move on to another bug.
55
-
56
- If you would like your bug prioritized, please consider [sponsoring the project](https://github.com/sponsors/claviska).
57
-
58
- ### Pull Requests
59
-
60
- To keep the project on track, please consider the following guidelines before submitting a PR.
61
-
62
- - Please **do not** submit a PR without opening an issue first, especially for non-trivial changes. This may prevent you from doing work that won't be accepted for various reasons (e.g. someone is already working on it, it's not a good fit for the project, it needs additional planning, etc.)
63
- - Please **do** make sure your PR clearly defines what you're changing. Even if you feel your changes are obvious, please explain them so other contributors can more easily review your works. PRs without detailed descriptions are subject to closure pending more details.
64
- - Please **do** open your PR against the `next` branch.
65
- - Please **do not** edit anything in `dist/`. These files are generated automatically, so you need to edit the source files instead.
66
-
67
- The author reserves the right to reject any PR that's outside the scope of the project or doesn't meet code quality standards.
68
-
69
- ### Branches
70
-
71
- `current` - This branch reflects the latest release and powers [shoelace.style](https://shoelace.style/).
72
-
73
- `next` - This is the branch you should submit pull requests against. It reflects what's coming in the _next_ release, which can be previewed at [next.shoelace.style](https://next.shoelace.style/).
74
-
75
- ## Developing
76
-
77
- To set up a local dev environment, [fork the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, clone it locally, and install its dependencies.
78
-
79
- ```bash
80
- git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
81
- cd shoelace
82
- npm install
83
- ```
84
-
85
- Once you've cloned the repo, run the following command to spin up the Shoelace dev server.
86
-
87
- ```bash
88
- npm start
89
- ```
90
-
91
- After the initial build, a browser will open automatically to a local version of the docs. The documentation is powered by Docsify, which uses raw markdown files to generate pages on the fly.
92
-
93
- ### Creating New Components
94
-
95
- To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
96
-
97
- ```bash
98
- npm run create sl-tag-name
99
- ```
100
-
101
- This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
102
-
103
- ### Dev Sandbox
104
-
105
- Component development occurs _within_ the local docs site. I've found that offering common variations _in the docs_ is more beneficial for users than segmenting demos and code examples into separate tools such as Storybook. This encourages more thorough documentation, streamlines development for maintainers, and simplifies how the project is built. It also reduces installation and startup times significantly.
106
-
107
- There is currently no hot module reloading (HMR), as browsers don't provide a way to unregister custom elements. However, most changes to the source will reload the browser automatically.
108
-
109
- For more information about running and building the project locally, refer to `README.md` in the project's root.
110
-
111
- ### Testing
112
-
113
- Shoelace uses [Web Test Runner](https://modern-web.dev/guides/test-runner/getting-started/) for testing. To launch the test runner during development, open a terminal and launch the dev server.
114
-
115
- ```bash
116
- npm start
117
- ```
118
-
119
- In a second terminal window, launch the test runner.
120
-
121
- ```bash
122
- npm run test:watch
123
- ```
124
-
125
- Follow the on-screen instructions to work with the test runner. Tests will automatically re-run as you make changes.
126
-
127
- To run tests only once, make sure to build the project first.
128
-
129
- ```bash
130
- npm run build
131
- npm run test
132
- ```
133
-
134
- ## Best Practices
135
-
136
- The following is a non-exhaustive list of conventions, patterns, and best practices we try to follow. As a contributor, we ask that you make a good faith effort to follow them as well. This ensures consistency and maintainability throughout the project.
137
-
138
- If in doubt, use your best judgment and the maintainers will be happy to guide you during the code review process. If you'd like clarification on something before submitting a PR, feel free to reach out on the [community chat](https://discord.gg/mg8f26C).
139
-
140
- ?> This section can be a lot to digest in one sitting, so don't feel like you need to take it all in right now. Most contributors will be better off skimming this section and reviewing the relevant content as needed.
141
-
142
- ### Accessibility
143
-
144
- Shoelace is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Shoelace an accessible foundation from which applications and websites can be built.
145
-
146
- We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).
147
-
148
- It's important to remember that, although accessibility starts with foundational components, it doesn't end with them. It everyone's responsibility to encourage best practices and ensure we're providing an optimal experience for all of our users.
149
-
150
- ### Documentation
151
-
152
- Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and makes the project less appealing to users. Fortunately, writing documentation for Shoelace is fast and easy!
153
-
154
- Most of Shoelace's technical documentation is generated with JSDoc comments and TypeScript metadata from the source code. Every property, method, event, etc. is documented this way. In-code comments encourage contributors to keep the documentation up to date as changes occur so the docs are less likely to become stale. Refer to an existing component to see how JSDoc comments are used in Shoelace.
155
-
156
- Instructions, code examples, and interactive demos are hand-curated to give users the best possible experience. Typically, the most relevant information is shown first and less common examples are shown towards the bottom. Edge cases and gotchas should be called out in context with tips or warnings.
157
-
158
- The docs are powered by [Docsify](https://docsify.now.sh/). Check out `docs/_sidebar.md` and `docs/components/` to get an idea of how pages are structured and formatted. If you're creating a new component, it may help to use an existing component's markdown file as a template.
159
-
160
- If you need help with documentation, feel free to reach out on the [community chat](https://discord.gg/mg8f26C).
161
-
162
- ### Code Formatting
163
-
164
- Most code formatting is handled automatically by [Prettier](https://prettier.io/) via commit hooks. However, for the best experience, you should [install it in your editor](https://prettier.io/docs/en/editors.html) and enable format on save.
165
-
166
- Please do not make any changes to `prettier.config.cjs` without consulting the maintainers.
167
-
168
- ### Composability
169
-
170
- Components should be composable, meaning you can easily reuse them with and within other components. This reduces the overall size of the library, expedites feature development, and maintains a consistent user experience.
171
-
172
- The `<sl-select>` component, for example, makes use of the dropdown, input, menu, and menu item components. Because it's offloading most of its functionality and styles to lower-level components, the select component remains lightweight and its appearance is consistent with other form controls and menus.
173
-
174
- ### Component Structure
175
-
176
- All components have a host element, which is a reference to the `<sl-*>` element itself. Make sure to always set the host element's `display` property to the appropriate value depending on your needs, as the default is `inline` per the custom element spec.
177
-
178
- ```css
179
- :host {
180
- display: block;
181
- }
182
- ```
183
-
184
- Aside from `display`, avoid setting styles on the host element when possible. The reason for this is that styles applied to the host element are not encapsulated. Instead, create a base element that wraps the component's internals and style that instead. This convention also makes it easier to use BEM in components, as the base element can serve as the "block" entity.
185
-
186
- ### Class Names
187
-
188
- All components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so styles are completely encapsulated from the rest of the document. As a result, class names used _inside_ a component won't conflict with class names _outside_ the component, so we're free to name them anything we want.
189
-
190
- Internally, each component uses the [BEM methodology](http://getbem.com/) for class names. There is no technical requirement to do this — it's purely the preference of the author to enforce consistency and clarity throughout components. As such, all contributions are expected to follow this pattern.
191
-
192
- ### Boolean Props
193
-
194
- Boolean props should _always_ default to `false`, otherwise there's no way for the user to unset the, without JavaScript. To keep the API as friendly and consistent as possible, use a name like `noHeader` with a default value of `false` instead of `header` with a default value of `true`.
195
-
196
- ### Conditional Slots
197
-
198
- When a component relies on the presence of slotted content to do something, don't assume its initial state is permanent. Slotted content can be added or removed any time and components must be aware of this. A good practice to manage this is:
199
-
200
- - Add `@slotchange={this.handleSlotChange}` to the slots you want to watch
201
- - Add a `handleSlotChange` method and use the `hasSlot` utility to update state variables for the the respective slot(s)
202
- - Never conditionally render `<slot>` elements in a component — always use `hidden` so the slot remains in the DOM and the `slotchange` event can be captured
203
-
204
- See the source of card, dialog, or drawer for examples.
205
-
206
- ### Custom Events
207
-
208
- Components must only emit custom events, and all custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `sl-change` instead of `slChange`.
209
-
210
- This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.
211
-
212
- ### CSS Custom Properties
213
-
214
- To expose custom properties as part of a component's API, scope them to the `:host` block.
215
-
216
- ```css
217
- :host {
218
- --color: var(--sl-color-primary-500);
219
- --background-color: var(--sl-color-neutral-100);
220
- }
221
- ```
222
-
223
- Then use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope.
224
-
225
- ```js
226
- /**
227
- * @cssproperty --color: The component's text color.
228
- * @cssproperty --background-color: The component's background color.
229
- */
230
- @customElement('sl-example')
231
- export default class SlExample {
232
- // ...
233
- }
234
- ```
235
-
236
- ### When to use a property vs. a CSS custom property
237
-
238
- When designing a component's API, standard properties are generally used to change the _behavior_ of a component, whereas CSS custom properties ("CSS variables") are used to change the _appearance_ of a component. Remember that properties can't respond to media queries, but CSS variables can.
239
-
240
- There are some exceptions to this (e.g. when it significantly improves developer experience), but a good rule of thumbs is "will this need to change based on screen size?" If so, you probably want to use a CSS variable.
241
-
242
- ### When to use a CSS custom property vs. a CSS part
243
-
244
- There are two ways to enable customizations for components. One way is with CSS custom properties ("CSS variables"), the other is with CSS parts ("parts").
245
-
246
- CSS variables are scoped to the host element and can be reused throughout the component. A good example of a CSS variable would be `--border-width`, which might get reused throughout a component to ensure borders share the same width for all internal elements.
247
-
248
- Parts let you target a specific element inside the component's shadow DOM but, by design, you can't target a part's children or siblings. You can _only_ customize the part itself. Use a part when you need to allow a single element inside the component to accept styles.
249
-
250
- This convention can be relaxed when the developer experience is greatly improved by not following these suggestions.
251
-
252
- ### Form Controls
253
-
254
- Form controls should support submission and validation through the following conventions:
255
-
256
- - All form controls must use `name`, `value`, and `disabled` properties in the same manner as `HTMLInputElement`
257
- - All form controls must have a `setCustomValidity()` method so the user can set a custom validation message
258
- - All form controls must have a `reportValidity()` method that report their validity during form submission
259
- - All form controls must have an `invalid` property that reflects their validity
260
- - All form controls should mirror their native validation attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when possible
261
- - All form controls must be tested to work with the standard `<form>` element
@@ -1,12 +0,0 @@
1
- # Border Radius Tokens
2
-
3
- Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
4
-
5
- | Token | Value | Example |
6
- | ---------------------------- | -------------- | -------------------------------------------------------------------------------------------------------- |
7
- | `--sl-border-radius-small` | 0.125rem (2px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-small);"></div> |
8
- | `--sl-border-radius-medium` | 0.25rem (4px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-medium);"></div> |
9
- | `--sl-border-radius-large` | 0.5rem (8px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-large);"></div> |
10
- | `--sl-border-radius-x-large` | 1rem (16px) | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-x-large);"></div> |
11
- | `--sl-border-radius-circle` | 50% | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-circle);"></div> |
12
- | `--sl-border-radius-pill` | 9999px | <div class="border-radius-demo" style="border-radius: var(--sl-border-radius-pill); width: 6rem;"></div> |