fix default exports for all components

docs/getting-started/changelog.md

@@ -6,6 +6,11 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## 2.0.0-beta.30
+
+- Fix default exports for all components [#365](https://github.com/shoelace-style/shoelace/issues/365)
+- Revert FOUC base style because it interferes with some framework and custom element use cases
+
 ## 2.0.0-beta.29
 
 **This release migrates component implementations from Shoemaker to LitElement.** Due to feedback from the community, Shoelace will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.

src/components/alert/alert.ts

@@ -20,7 +20,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
  * @part close-button - The close button.
  */
 @tag('sl-alert')
-export class SlAlert extends LitElement {
+export default class SlAlert extends LitElement {
   static styles = unsafeCSS(styles);
 
   private autoHideTimeout: any;

src/components/animation/animation.ts

@@ -10,7 +10,7 @@ import { animations } from './animations';
  * @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container.
  */
 @tag('sl-animation')
-export class SlAnimation extends LitElement {
+export default class SlAnimation extends LitElement {
   static styles = unsafeCSS(styles);
 
   private animation: Animation;

src/components/avatar/avatar.ts

@@ -17,7 +17,7 @@ import styles from 'sass:./avatar.scss';
  * @part image - The avatar image.
  */
 @tag('sl-avatar')
-export class SlAvatar extends LitElement {
+export default class SlAvatar extends LitElement {
   static styles = unsafeCSS(styles);
 
   @internalProperty() private hasError = false;

src/components/badge/badge.ts

@@ -12,7 +12,7 @@ import styles from 'sass:./badge.scss';
  * @part base - The base wrapper
  */
 @tag('sl-badge')
-export class SlBadge extends LitElement {
+export default class SlBadge extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** The badge's type. */

src/components/button-group/button-group.ts

@@ -11,7 +11,7 @@ import styles from 'sass:./button-group.scss';
  * @part base - The component's base wrapper.
  */
 @tag('sl-button-group')
-export class SlButtonGroup extends LitElement {
+export default class SlButtonGroup extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** A label to use for the button group's `aria-label` attribute. */

src/components/button/button.ts

@@ -22,7 +22,7 @@ import { hasSlot } from '../../internal/slot';
  * @part caret - The button's caret.
  */
 @tag('sl-button')
-export class SlButton extends LitElement {
+export default class SlButton extends LitElement {
   static styles = unsafeCSS(styles);
 
   button: HTMLButtonElement | HTMLLinkElement;

src/components/card/card.ts

@@ -20,7 +20,7 @@ import { hasSlot } from '../../internal/slot';
  * @part footer - The card's footer, if present.
  */
 @tag('sl-card')
-export class SlCard extends LitElement {
+export default class SlCard extends LitElement {
   static styles = unsafeCSS(styles);
 
   @internalProperty() private hasFooter = false;

src/components/checkbox/checkbox.ts

@@ -18,7 +18,7 @@ let id = 0;
  * @part label - The checkbox label.
  */
 @tag('sl-checkbox')
-export class SlCheckbox extends LitElement {
+export default class SlCheckbox extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('input[type="checkbox"]') input: HTMLInputElement;

src/components/color-picker/color-picker.ts

@@ -31,7 +31,7 @@ import { clamp } from '../../internal/math';
  * @part format-button - The toggle format button's base.
  */
 @tag('sl-color-picker')
-export class SlColorPicker extends LitElement {
+export default class SlColorPicker extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('[part="input"]') input: SlInput;

src/components/details/details.ts

@@ -22,7 +22,7 @@ let id = 0;
  * @part content - The details content.
  */
 @tag('sl-details')
-export class SlDetails extends LitElement {
+export default class SlDetails extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.details') details: HTMLElement;

src/components/dialog/dialog.ts

@@ -31,7 +31,7 @@ let id = 0;
  * @part footer - The dialog footer.
  */
 @tag('sl-dialog')
-export class SlDialog extends LitElement {
+export default class SlDialog extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.dialog') dialog: HTMLElement;

src/components/drawer/drawer.ts

@@ -31,7 +31,7 @@ let id = 0;
  * @part footer - The drawer footer.
  */
 @tag('sl-drawer')
-export class SlDrawer extends LitElement {
+export default class SlDrawer extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.drawer') drawer: HTMLElement;

src/components/dropdown/dropdown.ts

@@ -21,7 +21,7 @@ let id = 0;
  * @part panel - The panel that gets shown when the dropdown is open.
  */
 @tag('sl-dropdown')
-export class SlDropdown extends LitElement {
+export default class SlDropdown extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.dropdown__trigger') trigger: HTMLElement;

src/components/form/form.ts

@@ -29,7 +29,7 @@ interface FormControl {
  * @part base - The component's base wrapper.
  */
 @tag('sl-form')
-export class SlForm extends LitElement {
+export default class SlForm extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.form') form: HTMLElement;

src/components/format-bytes/format-bytes.ts

@@ -7,7 +7,7 @@ import { formatBytes } from '../../internal/number';
  * @status stable
  */
 @tag('sl-format-bytes')
-export class SlFormatBytes extends LitElement {
+export default class SlFormatBytes extends LitElement {
   /** The number to format in bytes. */
   @property({ type: Number }) value = 0;
 

src/components/format-date/format-date.ts

@@ -6,7 +6,7 @@ import { tag } from '../../internal/decorators';
  * @status stable
  */
 @tag('sl-format-date')
-export class SlFormatDate extends LitElement {
+export default class SlFormatDate extends LitElement {
   /** The date/time to format. If not set, the current date and time will be used. */
   @property() date: Date | string = new Date();
 

src/components/format-number/format-number.ts

@@ -6,7 +6,7 @@ import { tag } from '../../internal/decorators';
  * @status stable
  */
 @tag('sl-format-number')
-export class SlFormatNumber extends LitElement {
+export default class SlFormatNumber extends LitElement {
   /** The number to format. */
   @property({ type: Number }) value = 0;
 

src/components/icon-button/icon-button.ts

@@ -14,7 +14,7 @@ import { focusVisible } from '../../internal/focus-visible';
  * @part base - The component's base wrapper.
  */
 @tag('sl-icon-button')
-export class SlIconButton extends LitElement {
+export default class SlIconButton extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('button') button: HTMLButtonElement;

src/components/icon/icon.ts

@@ -14,7 +14,7 @@ const parser = new DOMParser();
  * @part base - The component's base wrapper.
  */
 @tag('sl-icon')
-export class SlIcon extends LitElement {
+export default class SlIcon extends LitElement {
   static styles = unsafeCSS(styles);
 
   @internalProperty() private svg = '';

src/components/icon/library.ts

@@ -1,4 +1,4 @@
-import { SlIcon } from './icon';
+import { SlIcon } from '../../shoelace';
 import { getBasePath } from '../../utilities/base-path';
 
 export type IconLibraryResolver = (name: string) => string;

src/components/image-comparer/image-comparer.ts

@@ -21,7 +21,7 @@ import { clamp } from '../../internal/math';
  * @part handle - The handle that the user drags to expose the after image.
  */
 @tag('sl-image-comparer')
-export class SlImageComparer extends LitElement {
+export default class SlImageComparer extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.image-comparer') base: HTMLElement;

src/components/include/include.ts

@@ -8,7 +8,7 @@ import { requestInclude } from './request';
  * @status stable
  */
 @tag('sl-include')
-export class SlInclude extends LitElement {
+export default class SlInclude extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** The location of the HTML file to include. */

src/components/input/input.ts

@@ -33,7 +33,7 @@ let id = 0;
  * @part help-text - The input help text.
  */
 @tag('sl-input')
-export class SlInput extends LitElement {
+export default class SlInput extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.input__control') input: HTMLInputElement;

src/components/menu-divider/menu-divider.ts

@@ -11,7 +11,7 @@ import styles from 'sass:./menu-divider.scss';
  * @part base - The component's base wrapper.
  */
 @tag('sl-menu-divider')
-export class SlMenuDivider extends LitElement {
+export default class SlMenuDivider extends LitElement {
   static styles = unsafeCSS(styles);
 
   render() {

src/components/menu-item/menu-item.ts

@@ -20,7 +20,7 @@ import styles from 'sass:./menu-item.scss';
  * @part suffix - The suffix container.
  */
 @tag('sl-menu-item')
-export class SlMenuItem extends LitElement {
+export default class SlMenuItem extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.menu-item') menuItem: HTMLElement;

src/components/menu-label/menu-label.ts

@@ -13,7 +13,7 @@ import styles from 'sass:./menu-label.scss';
  * @part base - The component's base wrapper.
  */
 @tag('sl-menu-label')
-export class SlMenuLabel extends LitElement {
+export default class SlMenuLabel extends LitElement {
   static styles = unsafeCSS(styles);
 
   render() {

src/components/menu/menu.ts

@@ -13,7 +13,7 @@ import { getTextContent } from '../../internal/slot';
  * @part base - The component's base wrapper.
  */
 @tag('sl-menu')
-export class SlMenu extends LitElement {
+export default class SlMenu extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.menu') menu: HTMLElement;

src/components/progress-bar/progress-bar.ts

@@ -15,7 +15,7 @@ import styles from 'sass:./progress-bar.scss';
  * @part label - The progress bar label.
  */
 @tag('sl-progress-bar')
-export class SlProgressBar extends LitElement {
+export default class SlProgressBar extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** The progress bar's percentage, 0 to 100. */

src/components/progress-ring/progress-ring.ts

@@ -12,7 +12,7 @@ import styles from 'sass:./progress-ring.scss';
  * @part label - The progress ring label.
  */
 @tag('sl-progress-ring')
-export class SlProgressRing extends LitElement {
+export default class SlProgressRing extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.progress-ring__indicator') indicator: SVGCircleElement;

src/components/radio/radio.ts

@@ -17,7 +17,7 @@ let id = 0;
  * @part label - The radio label.
  */
 @tag('sl-radio')
-export class SlRadio extends LitElement {
+export default class SlRadio extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('input[type="radio"]') input: HTMLInputElement;

src/components/range/range.ts

@@ -20,7 +20,7 @@ let id = 0;
  * @part tooltip - The range tooltip.
  */
 @tag('sl-range')
-export class SlRange extends LitElement {
+export default class SlRange extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.range__control') input: HTMLInputElement;

src/components/rating/rating.ts

@@ -16,7 +16,7 @@ import { clamp } from '../../internal/math';
  * @part base - The component's base wrapper.
  */
 @tag('sl-rating')
-export class SlRating extends LitElement {
+export default class SlRating extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.rating') rating: HTMLElement;

src/components/relative-time/relative-time.ts

@@ -6,7 +6,7 @@ import { tag, watch } from '../../internal/decorators';
  * @status stable
  */
 @tag('sl-relative-time')
-export class SlRelativeTime extends LitElement {
+export default class SlRelativeTime extends LitElement {
   private updateTimeout: any;
 
   @internalProperty() private isoTime = '';

src/components/resize-observer/resize-observer.ts

@@ -7,7 +7,7 @@ import styles from 'sass:./resize-observer.scss';
  * @status experimental
  */
 @tag('sl-resize-observer')
-export class SlResizeObserver extends LitElement {
+export default class SlResizeObserver extends LitElement {
   static styles = unsafeCSS(styles);
 
   private resizeObserver: ResizeObserver;

src/components/responsive-embed/responsive-embed.ts

@@ -9,7 +9,7 @@ import { tag, watch } from '../../internal/decorators';
  * @part base - The component's base wrapper.
  */
 @tag('sl-responsive-embed')
-export class SlResponsiveEmbed extends LitElement {
+export default class SlResponsiveEmbed extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.responsive-embed') base: HTMLElement;

src/components/select/select.ts

@@ -34,7 +34,7 @@ let id = 0;
  * @part tags - The container in which multiselect options are rendered.
  */
 @tag('sl-select')
-export class SlSelect extends LitElement {
+export default class SlSelect extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.select') dropdown: SlDropdown;

src/components/skeleton/skeleton.ts

@@ -11,7 +11,7 @@ import styles from 'sass:./skeleton.scss';
  * @part indicator - The skeleton's indicator which is responsible for its color and animation.
  */
 @tag('sl-skeleton')
-export class SlSkeleton extends LitElement {
+export default class SlSkeleton extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** Determines which effect the skeleton will use. */

src/components/spinner/spinner.ts

@@ -9,7 +9,7 @@ import styles from 'sass:./spinner.scss';
  * @part base - The component's base wrapper.
  */
 @tag('sl-spinner')
-export class SlSpinner extends LitElement {
+export default class SlSpinner extends LitElement {
   static styles = unsafeCSS(styles);
 
   render() {

src/components/switch/switch.ts

@@ -17,7 +17,7 @@ let id = 0;
  * @part label - The switch label.
  */
 @tag('sl-switch')
-export class SlSwitch extends LitElement {
+export default class SlSwitch extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('input[type="checkbox"]') input: HTMLInputElement;

src/components/tab-group/tab-group.ts

@@ -24,7 +24,7 @@ import { focusVisible } from '../../internal/focus-visible';
  * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
  */
 @tag('sl-tab-group')
-export class SlTabGroup extends LitElement {
+export default class SlTabGroup extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.tab-group') tabGroup: HTMLElement;

src/components/tab-panel/tab-panel.ts

@@ -13,7 +13,7 @@ let id = 0;
  * @part base - The component's base wrapper.
  */
 @tag('sl-tab-panel')
-export class SlTabPanel extends LitElement {
+export default class SlTabPanel extends LitElement {
   static styles = unsafeCSS(styles);
 
   private componentId = `tab-panel-${++id}`;

src/components/tab/tab.ts

@@ -17,7 +17,7 @@ let id = 0;
  * @part close-button - The close button, which is the icon button's base wrapper.
  */
 @tag('sl-tab')
-export class SlTab extends LitElement {
+export default class SlTab extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.tab') tab: HTMLElement;

src/components/tag/tag.ts

@@ -16,7 +16,7 @@ import styles from 'sass:./tag.scss';
  * @part clear-button - The clear button.
  */
 @tag('sl-tag')
-export class SlTag extends LitElement {
+export default class SlTag extends LitElement {
   static styles = unsafeCSS(styles);
 
   /** The tag's type. */

src/components/textarea/textarea.ts

@@ -22,7 +22,7 @@ let id = 0;
  * @part help-text - The textarea help text.
  */
 @tag('sl-textarea')
-export class SlTextarea extends LitElement {
+export default class SlTextarea extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.textarea__control') input: HTMLTextAreaElement;

src/components/tooltip/tooltip.ts

@@ -16,7 +16,7 @@ let id = 0;
  * @part base - The component's base wrapper.
  */
 @tag('sl-tooltip')
-export class SlTooltip extends LitElement {
+export default class SlTooltip extends LitElement {
   static styles = unsafeCSS(styles);
 
   @query('.tooltip-positioner') positioner: HTMLElement;

src/shoelace.ts

@@ -1,46 +1,46 @@
 export * from './utilities';
 
-export { SlAlert } from './components/alert/alert';
-export { SlAnimation } from './components/animation/animation';
-export { SlAvatar } from './components/avatar/avatar';
-export { SlBadge } from './components/badge/badge';
-export { SlButton } from './components/button/button';
-export { SlButtonGroup } from './components/button-group/button-group';
-export { SlCard } from './components/card/card';
-export { SlCheckbox } from './components/checkbox/checkbox';
-export { SlColorPicker } from './components/color-picker/color-picker';
-export { SlDetails } from './components/details/details';
-export { SlDialog } from './components/dialog/dialog';
-export { SlDrawer } from './components/drawer/drawer';
-export { SlDropdown } from './components/dropdown/dropdown';
-export { SlForm } from './components/form/form';
-export { SlFormatBytes } from './components/format-bytes/format-bytes';
-export { SlFormatDate } from './components/format-date/format-date';
-export { SlFormatNumber } from './components/format-number/format-number';
-export { SlIcon } from './components/icon/icon';
-export { SlIconButton } from './components/icon-button/icon-button';
-export { SlImageComparer } from './components/image-comparer/image-comparer';
-export { SlInclude } from './components/include/include';
-export { SlInput } from './components/input/input';
-export { SlMenu } from './components/menu/menu';
-export { SlMenuDivider } from './components/menu-divider/menu-divider';
-export { SlMenuItem } from './components/menu-item/menu-item';
-export { SlMenuLabel } from './components/menu-label/menu-label';
-export { SlProgressBar } from './components/progress-bar/progress-bar';
-export { SlProgressRing } from './components/progress-ring/progress-ring';
-export { SlRadio } from './components/radio/radio';
-export { SlRange } from './components/range/range';
-export { SlRating } from './components/rating/rating';
-export { SlRelativeTime } from './components/relative-time/relative-time';
-export { SlResizeObserver } from './components/resize-observer/resize-observer';
-export { SlResponsiveEmbed } from './components/responsive-embed/responsive-embed';
-export { SlSelect } from './components/select/select';
-export { SlSkeleton } from './components/skeleton/skeleton';
-export { SlSpinner } from './components/spinner/spinner';
-export { SlSwitch } from './components/switch/switch';
-export { SlTab } from './components/tab/tab';
-export { SlTabGroup } from './components/tab-group/tab-group';
-export { SlTabPanel } from './components/tab-panel/tab-panel';
-export { SlTag } from './components/tag/tag';
-export { SlTextarea } from './components/textarea/textarea';
-export { SlTooltip } from './components/tooltip/tooltip';
+export { default as SlAlert } from './components/alert/alert';
+export { default as SlAnimation } from './components/animation/animation';
+export { default as SlAvatar } from './components/avatar/avatar';
+export { default as SlBadge } from './components/badge/badge';
+export { default as SlButton } from './components/button/button';
+export { default as SlButtonGroup } from './components/button-group/button-group';
+export { default as SlCard } from './components/card/card';
+export { default as SlCheckbox } from './components/checkbox/checkbox';
+export { default as SlColorPicker } from './components/color-picker/color-picker';
+export { default as SlDetails } from './components/details/details';
+export { default as SlDialog } from './components/dialog/dialog';
+export { default as SlDrawer } from './components/drawer/drawer';
+export { default as SlDropdown } from './components/dropdown/dropdown';
+export { default as SlForm } from './components/form/form';
+export { default as SlFormatBytes } from './components/format-bytes/format-bytes';
+export { default as SlFormatDate } from './components/format-date/format-date';
+export { default as SlFormatNumber } from './components/format-number/format-number';
+export { default as SlIcon } from './components/icon/icon';
+export { default as SlIconButton } from './components/icon-button/icon-button';
+export { default as SlImageComparer } from './components/image-comparer/image-comparer';
+export { default as SlInclude } from './components/include/include';
+export { default as SlInput } from './components/input/input';
+export { default as SlMenu } from './components/menu/menu';
+export { default as SlMenuDivider } from './components/menu-divider/menu-divider';
+export { default as SlMenuItem } from './components/menu-item/menu-item';
+export { default as SlMenuLabel } from './components/menu-label/menu-label';
+export { default as SlProgressBar } from './components/progress-bar/progress-bar';
+export { default as SlProgressRing } from './components/progress-ring/progress-ring';
+export { default as SlRadio } from './components/radio/radio';
+export { default as SlRange } from './components/range/range';
+export { default as SlRating } from './components/rating/rating';
+export { default as SlRelativeTime } from './components/relative-time/relative-time';
+export { default as SlResizeObserver } from './components/resize-observer/resize-observer';
+export { default as SlResponsiveEmbed } from './components/responsive-embed/responsive-embed';
+export { default as SlSelect } from './components/select/select';
+export { default as SlSkeleton } from './components/skeleton/skeleton';
+export { default as SlSpinner } from './components/spinner/spinner';
+export { default as SlSwitch } from './components/switch/switch';
+export { default as SlTab } from './components/tab/tab';
+export { default as SlTabGroup } from './components/tab-group/tab-group';
+export { default as SlTabPanel } from './components/tab-panel/tab-panel';
+export { default as SlTag } from './components/tag/tag';
+export { default as SlTextarea } from './components/textarea/textarea';
+export { default as SlTooltip } from './components/tooltip/tooltip';