React import paths (#1507)

* fix react imports in examples

* move types to definition files

* update changelog

* update changelog

docs/pages/components/alert.md

@@ -13,8 +13,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlAlert open>
@@ -75,8 +75,8 @@ Set the `variant` attribute to change the alert's variant.
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -146,8 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 ```jsx:react
 import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => {
   const [open, setOpen] = useState(true);
@@ -175,7 +175,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
 
 const App = () => (
   <SlAlert variant="primary" open>
@@ -215,9 +215,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
 
 ```jsx:react
 import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .alert-duration sl-alert {
@@ -306,9 +306,9 @@ You should always use the `closable` attribute so users can dismiss the notifica
 
 ```jsx:react
 import { useRef } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 function showToast(alert) {
   alert.toast();

docs/pages/components/animated-image.md

@@ -13,7 +13,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -41,7 +41,7 @@ Both GIF and WEBP images are supported.
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
@@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element.
 {% raw %}
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -102,7 +102,7 @@ You can change the appearance and location of the control box by targeting the `
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const css = `
   .animated-image-custom-control-box::part(control-box) {

docs/pages/components/animation.md

@@ -27,7 +27,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
 ```
 
 ```jsx:react
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-overview .box {
@@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ```jsx:react
 import { useEffect, useRef, useState } from 'react';
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-scroll {
@@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
 ```
 
 ```jsx:react
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-keyframes .box {
@@ -329,8 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init
 
 ```jsx:react
 import { useState } from 'react';
-import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => {
   const [play, setPlay] = useState(false);

docs/pages/components/avatar.md

@@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => <SlAvatar label="User avatar" />;
 ```
@@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => (
   <SlAvatar
@@ -61,7 +61,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
 ```
@@ -85,8 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -116,8 +116,8 @@ Avatars can be shaped using the `shape` attribute.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -167,8 +167,8 @@ You can group avatars with a few lines of CSS.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .avatar-group sl-avatar:not(:first-of-type) {

docs/pages/components/badge.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const App = () => <SlBadge>Badge</SlBadge>;
 ```
@@ -30,7 +30,7 @@ Set the `variant` attribute to change the badge's variant.
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const App = () => (
   <>
@@ -56,7 +56,7 @@ Use the `pill` attribute to give badges rounded edges.
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const App = () => (
   <>
@@ -100,7 +100,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
 
 const css = `
   .badge-pulse sl-badge:not(:last-of-type) {
@@ -157,8 +157,8 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => (
   <>
@@ -201,11 +201,11 @@ When including badges in menu items, use the `suffix` slot to make sure they're
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
-import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
+import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
 
 const App = () => (
   <SlMenu

docs/pages/components/breadcrumb-item.md

@@ -17,9 +17,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>

docs/pages/components/breadcrumb.md

@@ -17,8 +17,8 @@ Breadcrumbs are usually placed before a page's main content with the current pag
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
 
 const App = () => (
   <SlBreadcrumb>
@@ -51,8 +51,8 @@ For websites, you'll probably want to use links instead. You can make any breadc
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
 
 const App = () => (
   <SlBreadcrumb>
@@ -100,8 +100,8 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 
 ```jsx:react
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
 
 const App = () => (
   <>
@@ -149,9 +149,9 @@ Use the `prefix` slot to add content before any breadcrumb item.
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>
@@ -181,9 +181,9 @@ Use the `suffix` slot to add content after any breadcrumb item.
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>