use <sl-copy-button>

docs/_includes/component.njk

@@ -137,17 +137,15 @@
           <tr>
             <td>
               <code class="nowrap">{{ prop.name }}</code>
-              {% if prop.attribute | length > 0 %}
-                {% if prop.attribute != prop.name %}
-                  <br>
-                  <sl-tooltip content="This attribute is different from its property">
-                    <small>
-                      <code class="nowrap">
-                        {{ prop.attribute }}
-                      </code>
-                    </small>
-                  </sl-tooltip>
-                {% endif %}
+              {% if prop.attribute != prop.name %}
+                <br>
+                <sl-tooltip content="This attribute is different from its property">
+                  <small>
+                    <code class="nowrap">
+                      {{ prop.attribute }}
+                    </code>
+                  </small>
+                </sl-tooltip>
               {% endif %}
             </td>
             <td>
@@ -187,7 +185,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
   {% endif %}
 
   {# Events #}
@@ -307,7 +305,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
   {% endif %}
 
   {# Animations #}
@@ -331,7 +329,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
   {% endif %}
 
   {# Dependencies #}

docs/assets/scripts/search.js

@@ -373,12 +373,4 @@
       hide();
     }
   });
-
-  // We're using Turbo, so when a user searches for something, visits a result, and presses the back button, the search
-  // UI will still be visible but not interactive. This removes the search UI when Turbo renders a page so they don't
-  // get trapped.
-  window.addEventListener('turbo:render', () => {
-    document.body.classList.remove('search-visible');
-    document.querySelectorAll('.search__overlay, .search__dialog').forEach(el => el.remove());
-  });
 })();

docs/assets/styles/docs.css

@@ -534,7 +534,7 @@ pre .copy-code-button {
 }
 
 pre:hover .copy-code-button,
-.copy-code-button:focus-within {
+.copy-code-button:focus-visible {
   opacity: 1;
   scale: 1;
 }

docs/pages/components/file-input.md

@@ -1,42 +0,0 @@
----
-meta:
-  title: File Input
-  description: A description of the component goes here.
-layout: component
----
-
-```html:preview
-<form id="upload-form">
-  <sl-file-input label="Upload a file" help-text="Select some files" name="myfiles" multiple></sl-file-input>
-
-  <br />
-
-  <sl-button variant="primary" type="submit">Submit</sl-button>
-</form>
-
-<script>
-  const form = document.getElementById('upload-form');
-
-  form.addEventListener('submit', event => {
-    const formData = new FormData(form);
-
-    event.preventDefault();
-
-    for (const file of formData.values()) {
-      console.log(file);
-    }
-  });
-</script>
-```
-
-## Examples
-
-### First Example
-
-TODO
-
-### Second Example
-
-TODO
-
-[component-metadata:sl-file-input]

docs/pages/resources/changelog.md

@@ -14,21 +14,14 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
-- Fixed a bug in `<sl-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
-- Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
-
-## 2.8.0
-
-- Added `--isolatedModules` and `--verbatimModuleSyntax` to `tsconfig.json`. For anyone directly importing event types, they no longer provide a default export due to these options being enabled. For people using the `events/event.js` file directly, there is no change.
 - Added support for submenus in `<sl-menu-item>` [#1410]
 - Added the `--submenu-offset` custom property to `<sl-menu-item>` [#1410]
-- Fixed an issue with focus trapping elements like `<sl-dialog>` when wrapped by other elements not checking the assigned elements of `<slot>`s. [#1537]
 - Fixed type issues with the `ref` attribute in React Wrappers. [#1526]
 - Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
 - Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
 - Improved `<sl-menu-item>` so labels truncate properly instead of getting chopped and overflowing
 - Removed the extra `React.Component` around `@lit-labs/react` wrapper. [#1531]
-- Updated `@lit-labs/react` to v2.0.1. [#1531]
+- Upgrade `@lit-labs/react` to v2.0.1. [#1531]
 
 ## 2.7.0
 

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@shoelace-style/shoelace",
-  "version": "2.8.0",
+  "version": "2.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/shoelace",
-      "version": "2.8.0",
+      "version": "2.7.0",
       "license": "MIT",
       "dependencies": {
-        "@ctrl/tinycolor": "^4.0.1",
+        "@ctrl/tinycolor": "^3.5.0",
         "@floating-ui/dom": "^1.2.1",
         "@lit-labs/react": "^2.0.1",
         "@shoelace-style/animations": "^1.1.0",
@@ -833,11 +833,11 @@
       }
     },
     "node_modules/@ctrl/tinycolor": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.1.tgz",
-      "integrity": "sha512-dfimuE1mfaqL8P8jyQzdk9yFeFUWCyhjK5VyydXgDtQO0fezr6aWaGauHnlI07BZBIF45gahb0oxJjkUcylDwQ==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
+      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
       "engines": {
-        "node": ">=14"
+        "node": ">=10"
       }
     },
     "node_modules/@custom-elements-manifest/analyzer": {
@@ -17913,9 +17913,9 @@
       "dev": true
     },
     "@ctrl/tinycolor": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.1.tgz",
-      "integrity": "sha512-dfimuE1mfaqL8P8jyQzdk9yFeFUWCyhjK5VyydXgDtQO0fezr6aWaGauHnlI07BZBIF45gahb0oxJjkUcylDwQ=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
+      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
     },
     "@custom-elements-manifest/analyzer": {
       "version": "0.8.3",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "2.8.0",
+  "version": "2.7.0",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^4.0.1",
+    "@ctrl/tinycolor": "^3.5.0",
     "@floating-ui/dom": "^1.2.1",
     "@lit-labs/react": "^2.0.1",
     "@shoelace-style/animations": "^1.1.0",

scripts/build.js

@@ -53,10 +53,6 @@ async function buildTheDocs(watch = false) {
       output.push(data.toString());
     });
 
-    child.stderr.on('data', data => {
-      output.push(data.toString());
-    });
-
     if (watch) {
       // The process doesn't terminate in watch mode so, before resolving, we listen for a known signal in stdout that
       // tells us when the first build completes.

scripts/plop/templates/component/docs.hbs

@@ -5,7 +5,7 @@ meta:
 layout: component
 ---
 
-```html:preview
+```html preview
 <{{ tag }}></{{ tag }}>
 ```
 

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

@@ -20,8 +20,8 @@ import SlVisuallyHidden from '../visually-hidden/visually-hidden.component.js';
 import styles from './color-picker.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
-import type { SlChangeEvent } from '../../events/sl-change.js';
-import type { SlInputEvent } from '../../events/sl-input.js';
+import type SlChangeEvent from '../../events/sl-change.js';
+import type SlInputEvent from '../../events/sl-input.js';
 
 const hasEyeDropper = 'EyeDropper' in window;
 

src/components/details/details.test.ts

@@ -2,9 +2,9 @@ import '../../../dist/shoelace.js';
 // cspell:dictionaries lorem-ipsum
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type { SlHideEvent } from '../../events/sl-hide';
-import type { SlShowEvent } from '../../events/sl-show';
 import type SlDetails from './details';
+import type SlHideEvent from '../../events/sl-hide';
+import type SlShowEvent from '../../events/sl-show';
 
 describe('<sl-details>', () => {
   describe('accessibility', () => {

src/components/dropdown/dropdown.component.ts

@@ -11,10 +11,10 @@ import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlPopup from '../popup/popup.component.js';
 import styles from './dropdown.styles.js';
 import type { CSSResultGroup } from 'lit';
-import type { SlSelectEvent } from '../../events/sl-select.js';
 import type SlButton from '../button/button.js';
 import type SlIconButton from '../icon-button/icon-button.js';
 import type SlMenu from '../menu/menu.js';
+import type SlSelectEvent from '../../events/sl-select.js';
 
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.

src/components/file-input/file-input.component.ts

@@ -1,246 +0,0 @@
-import '../format-bytes/format-bytes.js';
-import '../icon-button/icon-button.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { defaultValue } from '../../internal/default-value.js';
-import { FormControlController } from '../../internal/form.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query, state } from 'lit/decorators.js';
-// import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element.js';
-import styles from './file-input.styles';
-import type { CSSResultGroup } from 'lit';
-import type { ShoelaceFormControl } from '../../internal/shoelace-element';
-
-//
-// TODO
-//
-//  - button-only version
-//  - drag and drop support
-//  - localization
-//
-
-/**
- * @summary Short summary of the component's intended use.
- * @documentation https://shoelace.style/components/file-input
- * @status experimental
- * @since 2.0
- *
- * @dependency sl-format-bytes
- * @dependency sl-icon-button
- *
- * @event sl-input - Emitted when the form control receives input.
- *
- * @slot label - The input's label. Alternatively, you can use the `label` attribute.
- * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-
- * @csspart base - The component's base wrapper.
- */
-export default class SlFileInput extends ShoelaceElement implements ShoelaceFormControl {
-  static styles: CSSResultGroup = styles;
-
-  private readonly formControlController = new FormControlController(this, {
-    value: (control: SlFileInput) => control.files,
-    assumeInteractionOn: ['sl-input']
-  });
-  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
-  private readonly localize = new LocalizeController(this);
-
-  @query('input[type="file"]') input: HTMLInputElement;
-
-  @state() private files: File[] = [];
-  @state() private hasFocus = false;
-
-  /** The name of the input, submitted as a name/value pair with form data. */
-  @property() name = '';
-
-  /** The current value of the input, submitted as a name/value pair with form data. */
-  @property() value = '';
-
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  @defaultValue() defaultValue = '';
-
-  /** The input's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /** Draws a filled input. */
-  @property({ type: Boolean, reflect: true }) filled = false;
-
-  /** Draws a pill-style input with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
-
-  /** The input's label. If you need to display HTML, use the `label` slot instead. */
-  @property() label = '';
-
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
-  /** Disables the input. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
-  @property() accept = false;
-
-  /** Allows more than one file to be selected. */
-  @property({ type: Boolean }) multiple = false;
-
-  /** Gets the validity state object */
-  get validity() {
-    return this.input.validity;
-  }
-
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-
-  private handleInput() {
-    // Append selected files
-    if (this.input.files) {
-      this.files = this.files.concat([...this.input.files]);
-    }
-
-    // Reset the input
-    this.input.value = '';
-
-    this.emit('sl-input');
-  }
-
-  private handleRemoveClick(_: MouseEvent, indexToRemove: number) {
-    this.files = this.files.filter((__, index) => index !== indexToRemove);
-  }
-
-  private isImage(file: File) {
-    return ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'].includes(file.type);
-  }
-
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-
-  /** Gets the associated form, if one exists. */
-  getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message: string) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-
-  render() {
-    const hasLabelSlot = this.hasSlotController.test('label');
-    const hasHelpTextSlot = this.hasSlotController.test('help-text');
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-
-    return html`
-      <div
-        part="form-control"
-        class=${classMap({
-          'form-control': true,
-          'form-control--small': this.size === 'small',
-          'form-control--medium': this.size === 'medium',
-          'form-control--large': this.size === 'large',
-          'form-control--has-label': hasLabel,
-          'form-control--has-help-text': hasHelpText
-        })}
-      >
-        <label
-          part="form-control-label"
-          class="form-control__label"
-          for="input"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <div
-            part="base"
-            class=${classMap({
-              input: true,
-
-              // Sizes
-              'input--small': this.size === 'small',
-              'input--medium': this.size === 'medium',
-              'input--large': this.size === 'large',
-
-              // States
-              'input--pill': this.pill,
-              'input--standard': !this.filled,
-              'input--filled': this.filled,
-              'input--disabled': this.disabled,
-              'input--focused': this.hasFocus,
-              'input--empty': !this.value
-            })}
-          >
-            <input
-              id="input"
-              class="input__control"
-              name=${this.name}
-              type="file"
-              aria-describedby="help-text"
-              ?multiple=${this.multiple}
-              @input=${this.handleInput}
-            />
-
-            <sl-button @click=${() => this.input.click()}>Choose Files</sl-button>
-
-            <div class="input__files">
-              ${this.files.map((file, index) => {
-                const isImage = this.isImage(file);
-
-                return html`
-                  <div class="input__file">
-                    <span class="input__file-preview">
-                      ${isImage
-                        ? html`<img
-                            class="input__file-preview-image input__file-preview--image"
-                            src=${URL.createObjectURL(file)}
-                            alt="${file.name}"
-                          />`
-                        : html``}
-                    </span>
-                    <span class="input__file-name">${file.name}</span>
-                    <span class="input__file-size">
-                      <sl-format-bytes
-                        value=${file.size}
-                        display="short"
-                        lang=${this.localize.lang()}
-                      ></sl-format-bytes>
-                    </span>
-                    <sl-icon-button
-                      class="input__file-remove"
-                      name="x-lg"
-                      library="system"
-                      label=${this.localize.term('remove')}
-                      @click=${(event: MouseEvent) => this.handleRemoveClick(event, index)}
-                    ></sl-icon-button>
-                  </div>
-                `;
-              })}
-            </div>
-          </div>
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? 'false' : 'true'}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
-  }
-}

src/components/file-input/file-input.styles.ts

@@ -1,62 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --preview-size: 4rem;
-
-    display: block;
-  }
-
-  .input__control {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    border: none;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: 0;
-  }
-
-  .input__files:not(:empty) {
-    margin-block-start: var(--sl-spacing-medium);
-  }
-
-  .input__file {
-    display: flex;
-    align-items: center;
-  }
-
-  .input__file-preview {
-    position: relative;
-    width: var(--preview-size);
-    height: var(--preview-size);
-    margin-inline-end: var(--sl-spacing-medium);
-  }
-
-  .input__file-preview-image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  .input__file-name {
-  }
-
-  .input__file-size {
-    font-size: var(--sl-font-size-small);
-    color: var(--sl-color-neutral-800);
-  }
-
-  .input__file-size::before {
-    content: '(';
-  }
-
-  .input__file-size::after {
-    content: ')';
-  }
-`;

src/components/file-input/file-input.test.ts

@@ -1,9 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
-describe('<sl-file-input>', () => {
-  it('should render a component', async () => {
-    const el = await fixture(html` <sl-file-input></sl-file-input> `);
-
-    expect(el).to.exist;
-  });
-});

src/components/file-input/file-input.ts

@@ -1,12 +0,0 @@
-import SlFileInput from './file-input.component.js';
-
-export * from './file-input.component.js';
-export default SlFileInput;
-
-SlFileInput.define('sl-file-input');
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-file-input': SlFileInput;
-  }
-}

src/components/icon/icon.test.ts

@@ -1,8 +1,8 @@
 import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { registerIconLibrary } from '../../../dist/shoelace.js';
-import type { SlErrorEvent } from '../../events/sl-error';
-import type { SlLoadEvent } from '../../events/sl-load';
+import type SlErrorEvent from '../../events/sl-error';
 import type SlIcon from './icon';
+import type SlLoadEvent from '../../events/sl-load';
 
 const testLibraryIcons = {
   'test-icon1': `

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

@@ -2,8 +2,8 @@ import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlSelectEvent } from '../../events/sl-select';
 import type SlMenuItem from './menu-item';
+import type SlSelectEvent from '../../events/sl-select';
 
 describe('<sl-menu-item>', () => {
   it('should pass accessibility tests', async () => {

src/components/menu/menu.test.ts

@@ -4,8 +4,8 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlSelectEvent } from '../../events/sl-select';
 import type SlMenu from './menu';
+import type SlSelectEvent from '../../events/sl-select';
 
 describe('<sl-menu>', () => {
   it('emits sl-select with the correct event detail when clicking an item', async () => {

src/components/radio-group/radio-group.test.ts

@@ -4,7 +4,7 @@ import { clickOnElement } from '../../internal/test.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlChangeEvent } from '../../events/sl-change.js';
+import type SlChangeEvent from '../../events/sl-change.js';
 import type SlRadio from '../radio/radio.js';
 import type SlRadioGroup from './radio-group.js';
 

src/components/select/select.component.ts

@@ -18,8 +18,8 @@ import SlTag from '../tag/tag.component.js';
 import styles from './select.styles.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
-import type { SlRemoveEvent } from '../../events/sl-remove.js';
 import type SlOption from '../option/option.component.js';
+import type SlRemoveEvent from '../../events/sl-remove.js';
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.

src/components/switch/switch.component.ts

@@ -215,9 +215,7 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
           <span part="thumb" class="switch__thumb"></span>
         </span>
 
-        <div part="label" class="switch__label">
-          <slot></slot>
-        </div>
+        <slot part="label" class="switch__label"></slot>
       </label>
     `;
   }

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

@@ -7,10 +7,10 @@ import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';
 import type { HTMLTemplateResult } from 'lit';
-import type { SlTabShowEvent } from '../../events/sl-tab-show.js';
 import type SlTab from '../tab/tab.js';
 import type SlTabGroup from './tab-group.js';
 import type SlTabPanel from '../tab-panel/tab-panel.js';
+import type SlTabShowEvent from '../../events/sl-tab-show.js';
 
 interface ClientRectangles {
   body?: DOMRect;

src/events/events.ts

@@ -1,35 +1,35 @@
-export type { SlAfterCollapseEvent } from './sl-after-collapse';
-export type { SlAfterExpandEvent } from './sl-after-expand';
-export type { SlAfterHideEvent } from './sl-after-hide';
-export type { SlAfterShowEvent } from './sl-after-show';
-export type { SlBlurEvent } from './sl-blur';
-export type { SlCancelEvent } from './sl-cancel';
-export type { SlChangeEvent } from './sl-change';
-export type { SlClearEvent } from './sl-clear';
-export type { SlCloseEvent } from './sl-close';
-export type { SlCollapseEvent } from './sl-collapse';
-export type { SlCopyEvent } from './sl-copy';
-export type { SlErrorEvent } from './sl-error';
-export type { SlExpandEvent } from './sl-expand';
-export type { SlFinishEvent } from './sl-finish';
-export type { SlFocusEvent } from './sl-focus';
-export type { SlHideEvent } from './sl-hide';
-export type { SlHoverEvent } from './sl-hover';
-export type { SlInitialFocusEvent } from './sl-initial-focus';
-export type { SlInputEvent } from './sl-input';
-export type { SlInvalidEvent } from './sl-invalid';
-export type { SlLazyChangeEvent } from './sl-lazy-change';
-export type { SlLazyLoadEvent } from './sl-lazy-load';
-export type { SlLoadEvent } from './sl-load';
-export type { SlMutationEvent } from './sl-mutation';
-export type { SlRemoveEvent } from './sl-remove';
-export type { SlRepositionEvent } from './sl-reposition';
-export type { SlRequestCloseEvent } from './sl-request-close';
-export type { SlResizeEvent } from './sl-resize';
-export type { SlSelectEvent } from './sl-select';
-export type { SlSelectionChangeEvent } from './sl-selection-change';
-export type { SlShowEvent } from './sl-show';
-export type { SlSlideChangeEvent } from './sl-slide-change';
-export type { SlStartEvent } from './sl-start';
-export type { SlTabHideEvent } from './sl-tab-hide';
-export type { SlTabShowEvent } from './sl-tab-show';
+export type { default as SlAfterCollapseEvent } from './sl-after-collapse';
+export type { default as SlAfterExpandEvent } from './sl-after-expand';
+export type { default as SlAfterHideEvent } from './sl-after-hide';
+export type { default as SlAfterShowEvent } from './sl-after-show';
+export type { default as SlBlurEvent } from './sl-blur';
+export type { default as SlCancelEvent } from './sl-cancel';
+export type { default as SlChangeEvent } from './sl-change';
+export type { default as SlClearEvent } from './sl-clear';
+export type { default as SlCloseEvent } from './sl-close';
+export type { default as SlCollapseEvent } from './sl-collapse';
+export type { default as SlCopyEvent } from './sl-copy';
+export type { default as SlErrorEvent } from './sl-error';
+export type { default as SlExpandEvent } from './sl-expand';
+export type { default as SlFinishEvent } from './sl-finish';
+export type { default as SlFocusEvent } from './sl-focus';
+export type { default as SlHideEvent } from './sl-hide';
+export type { default as SlHoverEvent } from './sl-hover';
+export type { default as SlInitialFocusEvent } from './sl-initial-focus';
+export type { default as SlInputEvent } from './sl-input';
+export type { default as SlInvalidEvent } from './sl-invalid';
+export type { default as SlLazyChangeEvent } from './sl-lazy-change';
+export type { default as SlLazyLoadEvent } from './sl-lazy-load';
+export type { default as SlLoadEvent } from './sl-load';
+export type { default as SlMutationEvent } from './sl-mutation';
+export type { default as SlRemoveEvent } from './sl-remove';
+export type { default as SlRepositionEvent } from './sl-reposition';
+export type { default as SlRequestCloseEvent } from './sl-request-close';
+export type { default as SlResizeEvent } from './sl-resize';
+export type { default as SlSelectEvent } from './sl-select';
+export type { default as SlSelectionChangeEvent } from './sl-selection-change';
+export type { default as SlShowEvent } from './sl-show';
+export type { default as SlSlideChangeEvent } from './sl-slide-change';
+export type { default as SlStartEvent } from './sl-start';
+export type { default as SlTabHideEvent } from './sl-tab-hide';
+export type { default as SlTabShowEvent } from './sl-tab-show';

src/events/sl-after-collapse.ts

@@ -1,7 +1,9 @@
-export type SlAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-collapse': SlAfterCollapseEvent;
   }
 }
+
+export default SlAfterCollapseEvent;

src/events/sl-after-expand.ts

@@ -1,7 +1,9 @@
-export type SlAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-expand': SlAfterExpandEvent;
   }
 }
+
+export default SlAfterExpandEvent;

src/events/sl-after-hide.ts

@@ -1,7 +1,9 @@
-export type SlAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-hide': SlAfterHideEvent;
   }
 }
+
+export default SlAfterHideEvent;

src/events/sl-after-show.ts

@@ -1,7 +1,9 @@
-export type SlAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-show': SlAfterShowEvent;
   }
 }
+
+export default SlAfterShowEvent;

src/events/sl-blur.ts

@@ -1,7 +1,9 @@
-export type SlBlurEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlBlurEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-blur': SlBlurEvent;
   }
 }
+
+export default SlBlurEvent;

src/events/sl-cancel.ts

@@ -1,7 +1,9 @@
-export type SlCancelEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlCancelEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-cancel': SlCancelEvent;
   }
 }
+
+export default SlCancelEvent;

src/events/sl-change.ts

@@ -1,7 +1,9 @@
-export type SlChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlChangeEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-change': SlChangeEvent;
   }
 }
+
+export default SlChangeEvent;

src/events/sl-clear.ts

@@ -1,7 +1,9 @@
-export type SlClearEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlClearEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-clear': SlClearEvent;
   }
 }
+
+export default SlClearEvent;

src/events/sl-close.ts

@@ -1,7 +1,9 @@
-export type SlCloseEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlCloseEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-close': SlCloseEvent;
   }
 }
+
+export default SlCloseEvent;

src/events/sl-collapse.ts

@@ -1,7 +1,9 @@
-export type SlCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-collapse': SlCollapseEvent;
   }
 }
+
+export default SlCollapseEvent;

src/events/sl-copy.ts

@@ -1,7 +1,9 @@
-export type SlCopyEvent = CustomEvent<{ value: string }>;
+type SlCopyEvent = CustomEvent<{ value: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-copy': SlCopyEvent;
   }
 }
+
+export default SlCopyEvent;

src/events/sl-error.ts

@@ -1,7 +1,9 @@
-export type SlErrorEvent = CustomEvent<{ status?: number }>;
+type SlErrorEvent = CustomEvent<{ status?: number }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-error': SlErrorEvent;
   }
 }
+
+export default SlErrorEvent;

src/events/sl-expand.ts

@@ -1,7 +1,9 @@
-export type SlExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlExpandEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-expand': SlExpandEvent;
   }
 }
+
+export default SlExpandEvent;

src/events/sl-finish.ts

@@ -1,7 +1,9 @@
-export type SlFinishEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlFinishEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-finish': SlFinishEvent;
   }
 }
+
+export default SlFinishEvent;

src/events/sl-focus.ts

@@ -1,7 +1,9 @@
-export type SlFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlFocusEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-focus': SlFocusEvent;
   }
 }
+
+export default SlFocusEvent;

src/events/sl-hide.ts

@@ -1,7 +1,9 @@
-export type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-hide': SlHideEvent;
   }
 }
+
+export default SlHideEvent;

src/events/sl-hover.ts

@@ -1,4 +1,4 @@
-export type SlHoverEvent = CustomEvent<{
+type SlHoverEvent = CustomEvent<{
   phase: 'start' | 'move' | 'end';
   value: number;
 }>;
@@ -8,3 +8,5 @@ declare global {
     'sl-hover': SlHoverEvent;
   }
 }
+
+export default SlHoverEvent;

src/events/sl-initial-focus.ts

@@ -1,7 +1,9 @@
-export type SlInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-initial-focus': SlInitialFocusEvent;
   }
 }
+
+export default SlInitialFocusEvent;

src/events/sl-input.ts

@@ -1,7 +1,9 @@
-export type SlInputEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlInputEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-input': SlInputEvent;
   }
 }
+
+export default SlInputEvent;

src/events/sl-invalid.ts

@@ -1,7 +1,9 @@
-export type SlInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-invalid': SlInvalidEvent;
   }
 }
+
+export default SlInvalidEvent;

src/events/sl-lazy-change.ts

@@ -1,7 +1,9 @@
-export type SlLazyChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlLazyChangeEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-lazy-change': SlLazyChangeEvent;
   }
 }
+
+export default SlLazyChangeEvent;

src/events/sl-lazy-load.ts

@@ -1,7 +1,9 @@
-export type SlLazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlLazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-lazy-load': SlLazyLoadEvent;
   }
 }
+
+export default SlLazyLoadEvent;

src/events/sl-load.ts

@@ -1,7 +1,9 @@
-export type SlLoadEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlLoadEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-load': SlLoadEvent;
   }
 }
+
+export default SlLoadEvent;

src/events/sl-mutation.ts

@@ -1,7 +1,9 @@
-export type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>;
+type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-mutation': SlMutationEvent;
   }
 }
+
+export default SlMutationEvent;

src/events/sl-remove.ts

@@ -1,7 +1,9 @@
-export type SlRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-remove': SlRemoveEvent;
   }
 }
+
+export default SlRemoveEvent;

src/events/sl-reposition.ts

@@ -1,7 +1,9 @@
-export type SlRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-reposition': SlRepositionEvent;
   }
 }
+
+export default SlRepositionEvent;

src/events/sl-request-close.ts

@@ -1,7 +1,9 @@
-export type SlRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;
+type SlRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-request-close': SlRequestCloseEvent;
   }
 }
+
+export default SlRequestCloseEvent;

src/events/sl-resize.ts

@@ -1,7 +1,9 @@
-export type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;
+type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-resize': SlResizeEvent;
   }
 }
+
+export default SlResizeEvent;

src/events/sl-select.ts

@@ -1,9 +1,11 @@
 import type SlMenuItem from '../components/menu-item/menu-item';
 
-export type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;
+type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-select': SlSelectEvent;
   }
 }
+
+export default SlSelectEvent;

src/events/sl-selection-change.ts

@@ -1,9 +1,11 @@
 import type SlTreeItem from '../components/tree-item/tree-item';
 
-export type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;
+type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-selection-change': SlSelectionChangeEvent;
   }
 }
+
+export default SlSelectionChangeEvent;

src/events/sl-show.ts

@@ -1,7 +1,9 @@
-export type SlShowEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlShowEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-show': SlShowEvent;
   }
 }
+
+export default SlShowEvent;

src/events/sl-slide-change.ts

@@ -1,9 +1,11 @@
 import type SlCarouselItem from '../components/carousel-item/carousel-item';
 
-export type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;
+type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-slide-change': SlSlideChangeEvent;
   }
 }
+
+export default SlSlideChangeEvent;

src/events/sl-start.ts

@@ -1,7 +1,9 @@
-export type SlStartEvent = CustomEvent<Record<PropertyKey, never>>;
+type SlStartEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-start': SlStartEvent;
   }
 }
+
+export default SlStartEvent;

src/events/sl-tab-hide.ts

@@ -1,7 +1,9 @@
-export type SlTabHideEvent = CustomEvent<{ name: string }>;
+type SlTabHideEvent = CustomEvent<{ name: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-tab-hide': SlTabHideEvent;
   }
 }
+
+export default SlTabHideEvent;

src/events/sl-tab-show.ts

@@ -1,7 +1,9 @@
-export type SlTabShowEvent = CustomEvent<{ name: string }>;
+type SlTabShowEvent = CustomEvent<{ name: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-tab-show': SlTabShowEvent;
   }
 }
+
+export default SlTabShowEvent;

src/internal/active-elements.ts

@@ -1,22 +0,0 @@
-/**
- * Use a generator so we can iterate and possibly break early.
- * @example
- *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
- *   const allActiveElements = [...activeElements()]
- *
- *   // Early return
- *   for (const activeElement of activeElements()) {
- *     if (<cond>) {
- *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
- *     }
- *   }
- */
-export function* activeElements(activeElement: Element | null = document.activeElement): Generator<Element> {
-  if (activeElement === null || activeElement === undefined) return;
-
-  yield activeElement;
-
-  if ('shadowRoot' in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== 'closed') {
-    yield* activeElements(activeElement.shadowRoot.activeElement);
-  }
-}

src/internal/form.ts

@@ -182,11 +182,7 @@ export class FormControlController implements ReactiveController {
     if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
       if (Array.isArray(value)) {
         (value as unknown[]).forEach(val => {
-          if (val instanceof File) {
-            event.formData.append(name, val, val.name);
-          } else {
-            event.formData.append(name, (val as string | number | boolean).toString());
-          }
+          event.formData.append(name, (val as string | number | boolean).toString());
         });
       } else {
         event.formData.append(name, (value as string | number | boolean).toString());

src/internal/modal.ts

@@ -1,4 +1,3 @@
-import { activeElements } from './active-elements.js';
 import { getTabbableElements } from './tabbable.js';
 
 let activeModals: HTMLElement[] = [];
@@ -56,20 +55,6 @@ export default class Modal {
     return getTabbableElements(this.element).findIndex(el => el === this.currentFocus);
   }
 
-  /**
-   * Checks if the `startElement` is already focused. This is important if the modal already
-   * has an existing focus prior to the first tab key.
-   */
-  startElementAlreadyFocused(startElement: HTMLElement) {
-    for (const activeElement of activeElements()) {
-      if (startElement === activeElement) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
   handleKeyDown = (event: KeyboardEvent) => {
     if (event.key !== 'Tab') return;
 
@@ -83,10 +68,7 @@ export default class Modal {
 
     const tabbableElements = getTabbableElements(this.element);
     const start = tabbableElements[0];
-
-    // Sometimes we programmatically focus the first element in a modal.
-    // Lets make sure the start element isn't already focused.
-    let focusIndex = this.startElementAlreadyFocused(start) ? 0 : this.currentFocusIndex;
+    let focusIndex = this.currentFocusIndex;
 
     if (focusIndex === -1) {
       this.currentFocus = start;

src/internal/tabbable.test.ts

@@ -1,147 +0,0 @@
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
-
-import '../../dist/shoelace.js';
-import { activeElements } from './active-elements.js';
-import { html } from 'lit';
-import { sendKeys } from '@web/test-runner-commands';
-
-async function holdShiftKey(callback: () => Promise<void>) {
-  await sendKeys({ down: 'Shift' });
-  await callback();
-  await sendKeys({ up: 'Shift' });
-}
-
-const tabKey =
-  navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('HeadlessChrome') ? 'Alt+Tab' : 'Tab';
-
-// Simple helper to turn the activeElements generator into an array
-function activeElementsArray() {
-  return [...activeElements()];
-}
-
-function getDeepestActiveElement() {
-  return activeElementsArray().pop();
-}
-
-window.customElements.define(
-  'tab-test-1',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-      this.shadowRoot!.innerHTML = `
-      <sl-drawer>
-        <slot name="label" slot="label"></slot>
-
-        <slot></slot>
-
-        <slot name="footer" slot="footer"></slot>
-      </sl-drawer>
-    `;
-    }
-  }
-);
-
-it('Should allow tabbing to slotted elements', async () => {
-  const el = await fixture(html`
-    <tab-test-1>
-      <div slot="label">
-        <sl-button id="focus-1">Focus 1</sl-button>
-      </div>
-
-      <div>
-        <!-- Focus 2 lives as the close-button from <sl-drawer> -->
-        <sl-button id="focus-3">Focus 3</sl-button>
-        <button id="focus-4">Focus 4</sl-button>
-        <input id="focus-5" value="Focus 5">
-      </div>
-
-      <div slot="footer">
-        <div id="focus-6" tabindex="0">Focus 6</div>
-        <button tabindex="-1">No Focus</button>
-      </div>
-    </tab-test-1>
-  `);
-
-  const drawer = el.shadowRoot?.querySelector('sl-drawer');
-
-  if (drawer === null || drawer === undefined) throw Error('Could not find drawer inside of the test element');
-
-  await drawer.show();
-
-  await elementUpdated(drawer);
-
-  const focusZero = drawer.shadowRoot?.querySelector("[role='dialog']");
-
-  if (focusZero === null || focusZero === undefined) throw Error('Could not find dialog panel inside <sl-drawer>');
-
-  const focusOne = el.querySelector('#focus-1');
-  const focusTwo = drawer.shadowRoot?.querySelector("[part~='close-button']");
-
-  if (focusTwo === null || focusTwo === undefined) throw Error('Could not find close button inside <sl-drawer>');
-
-  const focusThree = el.querySelector('#focus-3');
-  const focusFour = el.querySelector('#focus-4');
-  const focusFive = el.querySelector('#focus-5');
-  const focusSix = el.querySelector('#focus-6');
-
-  // When we open drawer, we should be focused on the panel to start.
-  expect(getDeepestActiveElement()).to.equal(focusZero);
-
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusOne);
-
-  // When we hit the <Tab> key we should go to the "close button" on the drawer
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusTwo);
-
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusThree);
-
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusFour);
-
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusFive);
-
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusSix);
-
-  // Now we should loop back to #panel
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusZero);
-
-  // Now we should loop back to #panel
-  await sendKeys({ press: tabKey });
-  expect(activeElementsArray()).to.include(focusOne);
-
-  // Let's reset and try from starting point 0 and go backwards.
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusZero);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusSix);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusFive);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusFour);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusThree);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusTwo);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusOne);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusZero);
-
-  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
-  expect(activeElementsArray()).to.include(focusSix);
-});

src/internal/tabbable.ts

@@ -69,32 +69,11 @@ export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
 }
 
 export function getTabbableElements(root: HTMLElement | ShadowRoot) {
-  const tabbableElements: HTMLElement[] = [];
+  const allElements: HTMLElement[] = [];
 
   function walk(el: HTMLElement | ShadowRoot) {
     if (el instanceof Element) {
-      // if the element has "inert" we can just no-op it.
-      if (el.hasAttribute('inert')) {
-        return;
-      }
-
-      if (!tabbableElements.includes(el) && isTabbable(el)) {
-        tabbableElements.push(el);
-      }
-
-      /**
-       * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
-       * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
-       * This fixes that fun edge case.
-       */
-      const slotChildrenOutsideRootElement = (slotElement: HTMLSlotElement) =>
-        (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;
-
-      if (el instanceof HTMLSlotElement && slotChildrenOutsideRootElement(el)) {
-        el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {
-          walk(assignedEl);
-        });
-      }
+      allElements.push(el);
 
       if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
         walk(el.shadowRoot);
@@ -107,14 +86,10 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
   // Collect all elements including the root
   walk(root);
 
-  return tabbableElements;
-
-  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
-  // So is it worth being right? Or fast?
-  // return tabbableElements.filter(isTabbable).sort((a, b) => {
-  //   // Make sure we sort by tabindex.
-  //   const aTabindex = Number(a.getAttribute('tabindex')) || 0;
-  //   const bTabindex = Number(b.getAttribute('tabindex')) || 0;
-  //   return bTabindex - aTabindex;
-  // });
+  return allElements.filter(isTabbable).sort((a, b) => {
+    // Make sure we sort by tabindex.
+    const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+    const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+    return bTabindex - aTabindex;
+  });
 }

src/shoelace.ts

@@ -19,7 +19,6 @@ export { default as SlDialog } from './components/dialog/dialog.js';
 export { default as SlDivider } from './components/divider/divider.js';
 export { default as SlDrawer } from './components/drawer/drawer.js';
 export { default as SlDropdown } from './components/dropdown/dropdown.js';
-export { default as SlFileInput } from './components/file-input/file-input.js';
 export { default as SlFormatBytes } from './components/format-bytes/format-bytes.js';
 export { default as SlFormatDate } from './components/format-date/format-date.js';
 export { default as SlFormatNumber } from './components/format-number/format-number.js';

tsconfig.json

@@ -28,8 +28,6 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "useUnknownInCatchVariables": true,
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
     "types": [
       "mocha",
       "user-agent-data-types"