diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 76620f53..976fb269 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,4 +1,7 @@ contact_links: + - name: Feature Requests + url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas + about: All requests for new features should go here. - name: Help & Support url: https://github.com/shoelace-style/shoelace/discussions/categories/help about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index fe22e324..00000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: Feature Request -about: Suggest an idea for this project. -title: '' -labels: feature ---- - -### What issue are you having? -Provide a clear and concise description of the problem you're facing. - -### Describe the solution you'd like -How would you like to see the library solve it? - -### Describe alternatives you've considered -In what ways have you tried to solve this with the current version? diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index ff8b44e3..c74c0473 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -25,6 +25,6 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - run: npx playwright install-deps + - run: npx playwright install --with-deps - run: npm ci - run: npm run verify diff --git a/.gitignore b/.gitignore index 1cf47052..0cbf2038 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ _site .cache .DS_Store +package.json +package-lock.json cdn dist docs/assets/images/sprite.svg diff --git a/README.md b/README.md index 4c16605a..8e6eed96 100644 --- a/README.md +++ b/README.md @@ -77,16 +77,6 @@ Shoelace is an open source project and contributions are encouraged! If you're i ## License -Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license. - -Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income. - -**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising. - -👇 Your support is very much appreciated! 👇 - -- [Become a sponsor](https://github.com/sponsors/claviska) -- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers) -- [Follow on Twitter](https://twitter.com/shoelace_style) +Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license. Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾 diff --git a/cspell.json b/cspell.json index 028a6267..78a51f27 100644 --- a/cspell.json +++ b/cspell.json @@ -109,6 +109,7 @@ "novalidate", "npmdir", "Numberish", + "onscrollend", "outdir", "ParamagicDev", "peta", diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 8d3e7fe5..3e33bc02 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -205,6 +205,7 @@ export default { customElementJetBrainsPlugin({ outdir: './dist', excludeCss: true, + packageJson: false, referencesTemplate: (_, tag) => { return { name: 'Documentation', diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 7d1caaaa..989a2f39 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -235,7 +235,9 @@ code { kbd { background: var(--sl-color-neutral-100); border: solid 1px var(--sl-color-neutral-200); - box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200); + box-shadow: + inset 0 1px 0 0 var(--sl-color-neutral-0), + inset 0 -1px 0 0 var(--sl-color-neutral-200); font-family: var(--sl-font-mono); font-size: 0.9125em; border-radius: var(--docs-border-radius); @@ -511,7 +513,9 @@ pre .token.italic { right: 0; white-space: normal; color: var(--sl-color-neutral-800); - transition: 150ms opacity, 150ms scale; + transition: + 150ms opacity, + 150ms scale; } .copy-code-button::part(button) { @@ -659,6 +663,7 @@ pre:hover .copy-code-button, margin: -1rem; cursor: pointer; user-select: none; + -webkit-user-select: none; } .content details summary span { @@ -982,7 +987,9 @@ main { padding: 0.5rem; margin: 0; cursor: pointer; - transition: 250ms scale ease, 250ms rotate ease; + transition: + 250ms scale ease, + 250ms rotate ease; } @media screen and (max-width: 900px) { diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md index b1d61217..25d8e76f 100644 --- a/docs/pages/components/carousel.md +++ b/docs/pages/components/carousel.md @@ -803,7 +803,7 @@ const App = () => ( ### Aspect Ratio -Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport. +Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport from the default value of 16/9. ```html:preview @@ -1246,7 +1246,7 @@ const App = () => { {`Thumbnail handleThumbnailClick(i)} + onClick={() => handleThumbnailClick(i)} src={src} /> )} diff --git a/docs/pages/components/details.md b/docs/pages/components/details.md index 89d99732..dc052b63 100644 --- a/docs/pages/components/details.md +++ b/docs/pages/components/details.md @@ -123,7 +123,9 @@ Details are designed to function independently, but you can simulate a group or // Close all other details when one is shown container.addEventListener('sl-show', event => { - [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details)); + if (event.target.localName === 'sl-details') { + [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details)); + } }); diff --git a/docs/pages/components/tooltip.md b/docs/pages/components/tooltip.md index 6d0177b4..fe1f39cd 100644 --- a/docs/pages/components/tooltip.md +++ b/docs/pages/components/tooltip.md @@ -249,7 +249,7 @@ const App = () => ( ### Manual Trigger -Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown. +Tooltips can be controlled programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown. ```html:preview Toggle Manually diff --git a/docs/pages/frameworks/angular.md b/docs/pages/frameworks/angular.md index 9b0914f0..ec8e09a8 100644 --- a/docs/pages/frameworks/angular.md +++ b/docs/pages/frameworks/angular.md @@ -10,16 +10,41 @@ Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custo ## Installation +### Download the npm package + To add Shoelace to your Angular app, install the package from npm. ```bash npm install @shoelace-style/shoelace ``` -Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path. +### Update the Angular Configuration + +Next, [include a theme](/getting-started/themes). In this example, we'll import the light theme. + +Its also important to load the components by using a `