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,131 +0,0 @@
1
- <div class="splash">
2
- <div class="splash-start">
3
- <img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
4
-
5
- # <span hidden>Shoelace:</span> A forward-thinking library of web components.
6
-
7
- - Works with all frameworks 🧩
8
- - Works with CDNs 🚛
9
- - Fully customizable with CSS 🎨
10
- - Includes a dark theme 🌛
11
- - Built with accessibility in mind ♿️
12
- - First-class [React support](/frameworks/react) ⚛️
13
- - Built-in localization 💬
14
- - Open source 😸
15
-
16
- Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
17
- </div>
18
- <div class="splash-end">
19
- <img class="splash-image" src="/assets/images/undraw-content-team.svg" alt="Cartoon of people assembling components while standing on a giant laptop.">
20
- </div>
21
- </div>
22
-
23
- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@shoelace-style/shoelace/badge)](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace)
24
- [![npm](https://img.shields.io/npm/dw/@shoelace-style/shoelace?label=npm&style=flat-square)](https://www.npmjs.com/package/@shoelace-style/shoelace)
25
- [![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md)<br>
26
- [![Discord](https://img.shields.io/badge/Discord-Join%20the%20chat-5965f2.svg?style=flat-square&logo=discord&logoColor=white)](https://discord.gg/mg8f26C)
27
- [![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat-square&logo=twitter&logoColor=white)](https://twitter.com/shoelace_style)
28
- [![Sponsor](https://img.shields.io/badge/GitHub-Code-232323.svg?style=flat-square&logo=github&logoColor=white)](https://github.com/shoelace-style/shoelace)
29
-
30
- ## Quick Start
31
-
32
- Add the following code to your page.
33
-
34
- ```html
35
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
36
- <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
37
- ```
38
-
39
- Now you have access to all of Shoelace's components! Try adding a button:
40
-
41
- ```html preview expanded
42
- <sl-button>Click me</sl-button>
43
- ```
44
-
45
- ?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
46
-
47
-
48
- ## New to Web Components?
49
-
50
- **TL;DR** – we finally have a way to create [our own HTML elements](https://html.spec.whatwg.org/multipage/custom-elements.html) and use them in any framework we want!
51
-
52
- Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, development, and testing.
53
-
54
- Unfortunately, _framework-specific_ components fail us in a number of ways:
55
-
56
- - You can only use them in the framework they're designed for 🔒
57
- - Their lifespan is limited to that of the framework's ⏳
58
- - New frameworks/versions can lead to breaking changes, requiring substantial effort to update components 😭
59
-
60
- Web components solve these problems. They're [supported by all modern browsers](https://caniuse.com/#feat=custom-elementsv1), they're framework-agnostic, and they're [part of the standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so we know they'll be supported for many years to come.
61
-
62
- This is the technology that Shoelace is built on.
63
-
64
- ## What Problem Does This Solve?
65
-
66
- Shoelace provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
67
-
68
- With Shoelace, you can:
69
-
70
- - Start building things faster (no need to roll your own buttons)
71
- - Build multiple apps with different frameworks that all share the same UI components
72
- - Fully customize components to match your existing designs
73
- - Incrementally adopt components as needed (no need to ditch your framework)
74
- - Upgrade or switch frameworks without rebuilding foundational components
75
-
76
- If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
77
-
78
- Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
79
-
80
- <small>*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small>
81
-
82
- ## Browser Support
83
-
84
- Shoelace is tested in the latest two versions of the following browsers.
85
-
86
- <img src="/assets/images/chrome.png" alt="Chrome" width="64" height="64">
87
- <img src="/assets/images/edge.png" alt="Edge" width="64" height="64">
88
- <img src="/assets/images/firefox.png" alt="Firefox" width="64" height="64">
89
- <img src="/assets/images/opera.png" alt="Opera" width="64" height="64">
90
- <img src="/assets/images/safari.png" alt="Safari" width="64" height="64">
91
-
92
- Critical bug fixes in earlier versions will be addressed based on their severity and impact.
93
-
94
- If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Shoelace in such a browser, you're gonna have a bad time. ⛷
95
-
96
- ## License
97
-
98
- Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the MIT license.
99
-
100
- Designing, developing, and supporting this library requires a lot of time, effort, and skill. If you're using this software to make a profit, I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor.
101
-
102
- 👇 Your support is very much appreciated! 👇
103
-
104
- <sl-button class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
105
- <sl-icon slot="prefix" name="heart"></sl-icon> Become a sponsor
106
- </sl-button>
107
-
108
- <sl-button class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
109
- <sl-icon slot="prefix" name="github"></sl-icon> <span class="github-star-count">Star</span>
110
- </sl-button>
111
-
112
- <sl-button class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
113
- <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
114
- </sl-button>
115
-
116
- ## Attribution
117
-
118
- Special thanks to the following projects and individuals that help make Shoelace possible.
119
-
120
- - Components are built with [LitElement](https://lit-element.polymer-project.org/)
121
- - Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
122
- - Documentation is powered by [Docsify](https://docsify.js.org/)
123
- - CDN services are provided by [jsDelivr](https://www.jsdelivr.com/)
124
- - Color primitives are inspired by [Tailwind](https://tailwindcss.com/)
125
- - Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
126
- - The homepage illustration is courtesy of [unDraw](https://undraw.co/)
127
- - Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
128
- - Animations are courtesy of [animate.css](https://animate.style/)
129
- - QR codes are generated with [qr-creator](https://github.com/nimiq/qr-creator)
130
- - Search is powered by [Lunr](https://lunrjs.com/)
131
- - The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)
@@ -1,139 +0,0 @@
1
- # Themes
2
-
3
- Shoelace is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme. Alternatively, you can design your own theme.
4
-
5
- A theme is nothing more than a stylesheet that uses the Shoelace API to define design tokens and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
6
-
7
- ?> For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `dist/themes/*.styles.js`.
8
-
9
- ## Theme Basics
10
-
11
- All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
12
-
13
- All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
14
-
15
- ```css
16
- :host,
17
- .sl-theme-purple-power {
18
- /* ... */
19
- }
20
- ```
21
-
22
- ### Activating Themes
23
-
24
- To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the built-in dark theme.
25
-
26
- ```html
27
- <html class="sl-theme-dark">
28
- <head>
29
- <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css">
30
- </head>
31
-
32
- <body>
33
- ...
34
- </body>
35
- </html>
36
- ```
37
-
38
- ?> There is one exception to this rule — the light theme _does not_ need to be activated. For convenience, the light theme is scoped to `:root` and will be activated by default when imported.
39
-
40
- ### Using Multiple Themes
41
-
42
- You can activate themes on various containers throughout the page. This example uses the light theme with a dark-themed sidebar.
43
-
44
- ```html
45
- <html>
46
- <head>
47
- <link rel="stylesheet" href="path/to/shoelace/dist/themes/light.css">
48
- <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css">
49
- </head>
50
-
51
- <body>
52
- <nav class="sl-theme-dark">
53
- <!-- dark-themed sidebar -->
54
- </nav>
55
-
56
- <!-- light-themed content -->
57
- </body>
58
- </html>
59
- ```
60
-
61
- It's for this reason that themes must be scoped to specific classes.
62
-
63
- ## Creating Themes
64
-
65
- There are two ways to create themes. The easiest way is to customize a built-in theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to commit to.
66
-
67
- ### Customizing a Built-in Theme
68
-
69
- The easiest way to customize Shoelace is to override one of the built-in themes. You can do this by importing the light or dark theme as-is, then creating a separate stylesheet that overrides [design tokens](/getting-started/customizing#design-tokens) and adds [component styles](/getting-started/customizing#component-parts) to your liking. You must import your theme _after_ the built-in theme.
70
-
71
- If you're customizing the light theme, you should scope your styles to the following selectors.
72
-
73
- ```css
74
- :root,
75
- :host,
76
- .sl-theme-light {
77
- /* your custom styles here */
78
- }
79
- ```
80
-
81
- If you're customizing the dark theme, you should scope your styles to the following selectors.
82
-
83
- ```css
84
- :host,
85
- .sl-theme-dark {
86
- /* your custom styles here */
87
- }
88
- ```
89
-
90
- By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every design token required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Shoelace will be accounted for by the built-in theme.
91
-
92
- While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
93
-
94
- ### Creating a New Theme
95
-
96
- Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required design tokens. The easiest way to do this is by "forking" one of the built-in themes and modifying it from there.
97
-
98
- Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
99
-
100
- ```css
101
- :host,
102
- .sl-theme-purple-power {
103
- /* your custom styles here */
104
- }
105
- ```
106
-
107
- By creating a new theme, you won't be relying on a built-in theme as a foundation. Because the theme is decoupled from the built-ins, you can activate it independently as an alternative to the built-ins. This is the recommended approach if you're looking to open source your theme for others to use.
108
-
109
- You will, however, need to maintain your theme more carefully, as new versions of Shoelace may introduce new design tokens that your theme won't have accounted for. Because of this, it's recommended that you clearly specify which version(s) of Shoelace your theme is designed to work with and keep it up to date as new versions of Shoelace are released.
110
-
111
- ## Dark Theme
112
-
113
- The built-in dark theme uses an inverted color scale so, if you're using design tokens as intended, you'll get dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
114
-
115
- The dark theme works by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was fine-tuned to avoid true black, which is often undesirable in dark themes, and provide a richer experience. The result is a custom dark palette that complements the light theme and makes it easy to offer light and dark modes with minimal effort.
116
-
117
- To install the dark theme, add the following to the `<head>` section of your page.
118
-
119
- ```html
120
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css">
121
- ```
122
-
123
- To activate the theme, apply the `sl-theme-dark` class to the `<html>` element.
124
-
125
- ```html
126
- <html class="sl-theme-dark">
127
- ...
128
- </html>
129
- ```
130
-
131
- ### Detecting the User's Color Scheme Preference
132
-
133
- Shoelace doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:
134
-
135
- - Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
136
- - Allow the user to override the setting in your app
137
- - Remember the user's preference and restore it on subsequent logins
138
-
139
- Shoelace avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
@@ -1,173 +0,0 @@
1
- # Usage
2
-
3
- Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
4
-
5
- If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
6
-
7
- ## Properties
8
-
9
- Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
10
-
11
- ```html
12
- <sl-button size="small">Click me</sl-button>
13
- ```
14
-
15
- Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.
16
-
17
- ```html
18
- <sl-button disabled>Click me</sl-button>
19
- ```
20
-
21
- In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This can be done with JavaScript.
22
-
23
- ```html
24
- <sl-color-picker></sl-color-picker>
25
-
26
- <script>
27
- const colorPicker = document.querySelector('sl-color-picker');
28
- colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
29
- </script>
30
- ```
31
-
32
- Refer to a component's documentation for a complete list of its properties.
33
-
34
- ## Events
35
-
36
- You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl-` to prevent collisions with standard events and other libraries.
37
-
38
- ```html
39
- <sl-checkbox>Check me</sl-checkbox>
40
-
41
- <script>
42
- const checkbox = document.querySelector('sl-checkbox');
43
- checkbox.addEventListener('sl-change', event => {
44
- console.log(event.target.checked ? 'checked' : 'not checked');
45
- });
46
- </script>
47
- ```
48
-
49
- Refer to a component's documentation for a complete list of its custom events.
50
-
51
- ## Methods
52
-
53
- Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Shoelace input using the `focus()` method.
54
-
55
- ```html
56
- <sl-input></sl-input>
57
-
58
- <script>
59
- const input = document.querySelector('sl-input');
60
- input.focus();
61
- </script>
62
- ```
63
-
64
- Refer to a component's documentation for a complete list of its methods and their arguments.
65
-
66
- ## Slots
67
-
68
- Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
69
-
70
- For example, a button's default slot is used to populate its label.
71
-
72
- ```html
73
- <sl-button>Click me</sl-button>
74
- ```
75
-
76
- Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
77
-
78
- ```html
79
- <sl-button>
80
- <sl-icon slot="prefix" name="gear"></sl-icon>
81
- Settings
82
- </sl-button>
83
- ```
84
-
85
- The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
86
-
87
- Refer to a component's documentation for a complete list of available slots.
88
-
89
- ## Don't Use Self-closing Tags
90
-
91
- Custom elements cannot have self-closing tags. Similar to `<script>` and `<textarea>`, you must always include the full closing tag.
92
-
93
- ```html
94
- <!-- Don't do this -->
95
- <sl-input />
96
-
97
- <!-- Always do this -->
98
- <sl-input></sl-input>
99
- ```
100
-
101
- ## Differences from Native Elements
102
-
103
- You might expect similarly named elements to share the same API as native HTML elements. This is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts.
104
-
105
- For example, `<button>` and `<sl-button>` both have a `type` attribute, but it does different things. The former controls whether the button submits a form and the latter controls the button's appearance.
106
-
107
- ?> **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
108
-
109
- ## Waiting for Components to Load
110
-
111
- Web components are registered with JavaScript, so depending on how and when you load Shoelace, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
112
-
113
- One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.
114
-
115
- ```css
116
- :not(:defined) {
117
- visibility: hidden;
118
- }
119
- ```
120
-
121
- As soon as a custom element is registered, it will immediately appear with all of its styles, effectively eliminating FOUCE. Note the use of `visibility: hidden` instead of `display: none` to reduce shifting as elements are registered. The drawback to this approach is that custom elements can potentially appear one by one instead of all at the same time.
122
-
123
- Another option is to use [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined), which returns a promise that resolves when the specified element gets registered. You'll probably want to use it with [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) in case an element fails to load for some reason.
124
-
125
- A clever way to use this method is to hide the `<body>` with `opacity: 0` and add a class that fades it in as soon as all your custom elements are defined.
126
-
127
- ```html
128
- <style>
129
- body {
130
- opacity: 0;
131
- }
132
-
133
- body.ready {
134
- opacity: 1;
135
- transition: .25s opacity;
136
- }
137
- </style>
138
-
139
- <script type="module">
140
- await Promise.allSettled([
141
- customElements.whenDefined('sl-button'),
142
- customElements.whenDefined('sl-card'),
143
- customElements.whenDefined('sl-rating')
144
- ]);
145
-
146
- // Button, card, and rating are registered now! Add
147
- // the `ready` class so the UI fades in.
148
- document.body.classList.add('ready');
149
- </script>
150
- ```
151
-
152
- ## Code Completion
153
-
154
- ### VS Code
155
-
156
- Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe its components to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
157
-
158
- 1. [Install Shoelace locally](/getting-started/installation#local-installation)
159
- 2. Create a folder called `.vscode` at the root of your project
160
- 3. Create a file inside the folder called `settings.json`
161
- 4. Add the following to the file
162
-
163
- ```js
164
- {
165
- "html.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.html-custom-data.json"]
166
- }
167
- ```
168
-
169
- If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
170
-
171
- ### Other Editors
172
-
173
- Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!
@@ -1,98 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Shoelace: A forward-thinking library of web components.</title>
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7
- <meta
8
- name="description"
9
- content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
10
- />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <meta name="custom-elements-manifest" content="dist/custom-elements.json" />
13
- <meta property="og:title" content="Shoelace" />
14
- <meta
15
- property="og:description"
16
- content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
17
- />
18
- <meta property="og:type" content="website" />
19
- <meta property="og:url" content="https://shoelace.style/" />
20
- <meta property="og:image" content="https://shoelace.style/assets/images/og-image.png" />
21
- <meta name="twitter:card" content="summary_large_image" />
22
- <meta name="twitter:site" content="@shoelace_style" />
23
- <meta name="twitter:creator" content="@claviska" />
24
- <meta name="twitter:title" content="Shoelace" />
25
- <meta
26
- name="twitter:description"
27
- content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
28
- />
29
- <meta name="twitter:image" content="https://shoelace.style/assets/images/twitter-card.png" />
30
-
31
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
32
- <link rel="stylesheet" href="/assets/styles/docs.css" />
33
- <link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
34
- <link rel="stylesheet" href="/assets/plugins/search/search.css" />
35
- <link rel="stylesheet" href="/assets/plugins/theme-picker/theme-picker.css" />
36
- <link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
37
- <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />
38
-
39
- <!-- Import Shoelace -->
40
- <link rel="stylesheet" href="/dist/themes/light.css" />
41
- <link rel="stylesheet" href="/dist/themes/dark.css" />
42
- <script type="module" src="/dist/shoelace.js"></script>
43
- </head>
44
- <body data-shoelace="/dist">
45
- <div id="app"></div>
46
- <script>
47
- // Set the initial theme to prevent flashing
48
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
49
- const theme = localStorage.getItem('theme') || 'auto';
50
- document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
51
- </script>
52
- <script>
53
- window.$docsify = {
54
- alias: {
55
- '/.*/_sidebar.md': '/_sidebar.md'
56
- },
57
- auto2top: true,
58
- copyCode: {
59
- buttonText: 'Copy',
60
- errorText: 'Failed to copy',
61
- successText: 'Copied'
62
- },
63
- coverpage: false,
64
- executeScript: true,
65
- ga: 'UA-6412891-16',
66
- homepage: '/getting-started/overview.md',
67
- loadSidebar: true,
68
- logo: '/assets/images/wordmark.svg',
69
- maxLevel: 3,
70
- subMaxLevel: 2,
71
- name: 'Shoelace',
72
- nameLink: '/',
73
- notFoundPage: '404.md',
74
- pagination: {
75
- previousText: 'Previous',
76
- nextText: 'Next',
77
- crossChapter: true,
78
- crossChapterText: false
79
- },
80
- routerMode: 'history',
81
- themeColor: 'var(--sl-color-primary-500)'
82
- };
83
- </script>
84
- <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
85
- <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
86
- <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
87
- <script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
88
- <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-bash.min.js"></script>
89
- <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-jsx.min.js"></script>
90
- <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-tsx.min.js"></script>
91
- <script src="/assets/plugins/code-block/code-block.js"></script>
92
- <script src="/assets/plugins/metadata/metadata.js"></script>
93
- <script src="/assets/plugins/scroll-position/scroll-position.js"></script>
94
- <script src="/assets/plugins/search/lunr.min.js"></script>
95
- <script src="/assets/plugins/search/search.js"></script>
96
- <script src="/assets/plugins/theme-picker/theme-picker.js"></script>
97
- </body>
98
- </html>
@@ -1,18 +0,0 @@
1
- # Accessibility Commitment
2
-
3
- Shoelace recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.
4
-
5
- Oftentimes, people will ask “is Shoelace accessible?” I’m reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.
6
-
7
- Accessibility is something you have to continuously strive for. No individual contributor — or perhaps even an entire team — can claim their software is 100% accessible because of the sheer diversity of abilities, devices, assistive technologies, and individual use cases.
8
-
9
- Furthermore, accessibility doesn’t stop at the component level. Using accessible building blocks doesn’t magically make the rest of your webpage or application compliant. There is no library or overlay that will make your software “fully accessible” without putting in the effort. It’s also worth noting that web components are still somewhat bleeding edge, so browsers, assistive devices, and [even specifications](https://wicg.github.io/aom/spec/) are still evolving to help improve accessibility on the web platform.
10
-
11
- My commitment to Shoelace users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason.
12
-
13
- I’m fully aware that I may not get it right every time for every user, so I invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
14
-
15
- This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible.
16
-
17
- — Cory LaViska<br>
18
- _Creator of Shoelace_