Merge branch 'next' into calendar

* fix: internal logic for tabbable checks slotted elements

* prettier

* add better note for generators

* prettier

* fix tests

* prettier

* prettier

* fix tabbable test for safari

* prettier

* Update src/internal/tabbable.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

* Update src/internal/modal.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

* Update src/internal/tabbable.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

docs/_includes/component.njk

@@ -137,15 +137,17 @@
           <tr>
             <td>
               <code class="nowrap">{{ prop.name }}</code>
-              {% 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>
+              {% 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 %}
               {% endif %}
             </td>
             <td>
@@ -185,7 +187,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em></p>
   {% endif %}
 
   {# Events #}
@@ -305,7 +307,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em></p>
   {% endif %}
 
   {# Animations #}
@@ -329,7 +331,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em></p>
   {% endif %}
 
   {# Dependencies #}

docs/_utilities/copy-code-buttons.cjs

@@ -1,3 +1,5 @@
+let codeBlockId = 0;
+
 /**
  * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
  * document will be returned with the appropriate DOM manipulations.
@@ -5,19 +7,14 @@
 module.exports = function (doc) {
   doc.querySelectorAll('pre > code').forEach(code => {
     const pre = code.closest('pre');
-    const button = doc.createElement('button');
-    button.setAttribute('type', 'button');
-    button.classList.add('copy-code-button');
-    button.setAttribute('aria-label', 'Copy');
-    button.innerHTML = `
-      <svg class="copy-code-button__copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
-        <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
-      </svg>
+    const button = doc.createElement('sl-copy-button');
 
-      <svg class="copy-code-button__copied-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" part="svg">
-        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
-      </svg>
-    `;
+    if (!code.id) {
+      code.id = `code-block-${++codeBlockId}`;
+    }
+
+    button.classList.add('copy-code-button');
+    button.setAttribute('from', code.id);
 
     pre.append(button);
   });

docs/assets/scripts/docs.js

@@ -163,32 +163,6 @@
   });
 })();
 
-//
-// Copy code buttons
-//
-(() => {
-  document.addEventListener('click', event => {
-    const button = event.target.closest('.copy-code-button');
-    const pre = button?.closest('pre');
-    const code = pre?.querySelector('code');
-    const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
-    const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
-
-    if (button && code) {
-      navigator.clipboard.writeText(code.innerText);
-      copyIcon.style.display = 'none';
-      copiedIcon.style.display = 'inline';
-      button.classList.add('copy-code-button--copied');
-
-      setTimeout(() => {
-        copyIcon.style.display = 'inline';
-        copiedIcon.style.display = 'none';
-        button.classList.remove('copy-code-button--copied');
-      }, 1000);
-    }
-  });
-})();
-
 //
 // Smooth links
 //

docs/assets/scripts/search.js

@@ -373,4 +373,12 @@
       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

@@ -506,46 +506,39 @@ pre .token.italic {
 
 /* Copy code button */
 .copy-code-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background: var(--sl-color-neutral-0);
-  border-radius: calc(var(--docs-border-radius) * 0.875);
-  border: solid 1px var(--sl-color-neutral-200);
+  top: 0;
+  right: 0;
+  white-space: normal;
   color: var(--sl-color-neutral-800);
-  text-transform: uppercase;
-  padding: 0.5rem;
-  margin: 0;
-  cursor: pointer;
-  transition: 100ms opacity, 100ms scale;
+  transition: 150ms opacity, 150ms scale;
 }
 
-.copy-code-button svg {
-  width: 1rem;
-  height: 1rem;
+.copy-code-button::part(button) {
+  background-color: var(--sl-color-neutral-50);
+  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+  padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
+}
+
+.copy-code-button::part(button):active {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
 }
 
 pre .copy-code-button {
   opacity: 0;
-  scale: 0.9;
+  scale: 0.75;
 }
 
 pre:hover .copy-code-button,
-.copy-code-button:focus-visible {
+.copy-code-button:focus-within {
   opacity: 1;
   scale: 1;
 }
 
-pre:hover .copy-code-button:hover,
-pre:hover .copy-code-button--copied {
-  background: var(--sl-color-neutral-200);
-  border-color: var(--sl-color-neutral-300);
-  color: var(--sl-color-neutral-900);
-}
-
 /* Callouts */
 .callout {
   position: relative;

docs/pages/components/calendar.md

@@ -0,0 +1,67 @@
+---
+meta:
+  title: Calendar
+  description: Calendar shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates.
+layout: component
+---
+
+```html:preview
+<sl-calendar></sl-calendar>
+```
+
+## Examples
+
+### Month & Day Labels
+
+Month and day labels can be customized using the `month-labels` and `day-labels` attributes. Note that month names are localized automatically based on the component's `lang` attribute, falling back to the document language.
+
+```html:preview
+<sl-calendar month-labels="short" day-labels="narrow"></sl-calendar>
+```
+
+### Showing Adjacent Dates
+
+By default, only dates in the target month are shown. You can fill the grid with adjacent dates using the `show-adjacent-dates` attribute.
+
+```html:preview
+<sl-calendar show-adjacent-dates></sl-calendar>
+```
+
+### Date Selection
+
+One or more dates can be selected by setting the `selectedDates` property. An array of dates is accepted and the selection does not have to be continuous.
+
+```html:preview
+<sl-calendar class="calendar-selection"></sl-calendar>
+
+<script>
+  const calendar = document.querySelector('.calendar-selection');
+  const today = new Date();
+
+  // Set the selected date range from the 12-15 of the current month
+  calendar.selectedDates = [
+    new Date(today.getFullYear(), today.getMonth(), 12),
+    new Date(today.getFullYear(), today.getMonth(), 13),
+    new Date(today.getFullYear(), today.getMonth(), 14),
+    new Date(today.getFullYear(), today.getMonth(), 15)
+  ];
+</script>
+```
+
+### With Borders
+
+To add a border, set the `--border-width` custom property. You can further customize the border with `--border-color` and `--border-radius`.
+
+```html:preview
+<sl-calendar style="--border-width: 1px;"></sl-calendar>
+```
+
+### Localizing the Calendar
+
+By default, the calendar will use the document's locale. You can use the `lang` attribute to change this.
+
+```html:preview
+<sl-calendar lang="es"></sl-calendar>
+```
+
+[component-metadata:sl-calendar]

docs/pages/resources/changelog.md

@@ -14,14 +14,21 @@ 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]
-- Upgrade `@lit-labs/react` to v2.0.1. [#1531]
+- Updated `@lit-labs/react` to v2.0.1. [#1531]
 
 ## 2.7.0
 

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@shoelace-style/shoelace",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/shoelace",
-      "version": "2.7.0",
+      "version": "2.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ctrl/tinycolor": "^3.5.0",
+        "@ctrl/tinycolor": "^4.0.1",
         "@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": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.1.tgz",
+      "integrity": "sha512-dfimuE1mfaqL8P8jyQzdk9yFeFUWCyhjK5VyydXgDtQO0fezr6aWaGauHnlI07BZBIF45gahb0oxJjkUcylDwQ==",
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
       }
     },
     "node_modules/@custom-elements-manifest/analyzer": {
@@ -17913,9 +17913,9 @@
       "dev": true
     },
     "@ctrl/tinycolor": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.1.tgz",
+      "integrity": "sha512-dfimuE1mfaqL8P8jyQzdk9yFeFUWCyhjK5VyydXgDtQO0fezr6aWaGauHnlI07BZBIF45gahb0oxJjkUcylDwQ=="
     },
     "@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.7.0",
+  "version": "2.8.0",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^3.5.0",
+    "@ctrl/tinycolor": "^4.0.1",
     "@floating-ui/dom": "^1.2.1",
     "@lit-labs/react": "^2.0.1",
     "@shoelace-style/animations": "^1.1.0",

scripts/build.js

@@ -53,6 +53,10 @@ 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/calendar/calendar.component.ts

@@ -0,0 +1,204 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { generateCalendarGrid, getAllDayNames, getMonthName, isSameDay } from '../../internal/calendar.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { partMap } from '../../internal/part-map.js';
+import { property } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './calendar.styles';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+
+export interface RenderDayOptions {
+  disabled?: boolean;
+  content: string | TemplateResult;
+}
+
+/**
+ * @summary A calendar prototype for Shoelace.
+ * @documentation https://shoelace.style/components/calendar
+ *
+ * @since 2.0
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-change - Emitted when the date changes.
+ *
+ * @slot footer - Optional content to place in the calendar's footer.
+ *
+ * @csspart day - Targets day cells.
+ * @csspart day-label - Targets the day labels (the name of the days in the grid).
+ * @csspart day-weekend - Targets days that fall on weekends.
+ * @csspart day-weekday - Targets weekdays.
+ * @csspart day-current-month - Targets days in the current month.
+ * @csspart day-previous-month - Targets days in the previous month.
+ * @csspart day-next-month - Targets days in the next month.
+ * @csspart day-today - Targets today.
+ * @csspart day-selected - Targets selected days.
+ * @csspart day-selection-start - Targets days that begin a selection.
+ * @csspart day-selection-end - Targets days that end a selection.
+ *
+ * @cssproperty --border-color - The calendar's border color.
+ * @cssproperty --border-width - The calendar's border width.
+ * @cssproperty --border-radius - The border radius of the calendar.
+ */
+export default class SlCalendar extends ShoelaceElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly localize = new LocalizeController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
+
+  /** The month to render, 1-12/ */
+  @property({ type: Number, reflect: true }) month: number = new Date().getMonth() + 1;
+
+  /** The year to render. */
+  @property({ type: Number, reflect: true }) year: number = new Date().getFullYear();
+
+  /** Determines how day labels are shown, e.g. "M", "Mon", or "Monday". */
+  @property({ attribute: 'day-labels' }) dayLabels: 'narrow' | 'short' | 'long' = 'short';
+
+  /** Determines how month labels are shown, e.g. "J", "Jan", or "January". */
+  @property({ attribute: 'month-labels' }) monthLabels: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' = 'long';
+
+  /** When true, dates from the previous and next month will also be shown to fill out the grid. */
+  @property({ attribute: 'show-adjacent-dates', type: Boolean }) showAdjacentDates = false;
+
+  /** Draws the target dates as a selection in the calendar. */
+  @property({ type: Array }) selectedDates: Date[] = [];
+
+  /** Moves the calendar to the current month and year. */
+  goToToday() {
+    this.month = new Date().getMonth() + 1;
+    this.year = new Date().getFullYear();
+  }
+
+  /** Moves the calendar to the previous month. */
+  goToPreviousMonth() {
+    if (this.month === 1) {
+      this.month = 12;
+      this.year--;
+    } else {
+      this.month--;
+    }
+  }
+
+  /** Moves the calendar to the next month. */
+  goToNextMonth() {
+    if (this.month === 12) {
+      this.month = 1;
+      this.year++;
+    } else {
+      this.month++;
+    }
+  }
+
+  @watch('month')
+  @watch('year')
+  handleMonthChange() {
+    this.emit('sl-change');
+  }
+
+  render() {
+    if (this.month < 1 || this.month > 12) {
+      throw new Error(`The value "${this.month}" is not a valid month.`);
+    }
+
+    const lang = this.lang || document.documentElement.lang;
+    const month = new Date(this.year, this.month - 1, 1);
+    const dayGrid = generateCalendarGrid(this.year, this.month);
+    const dayNames = getAllDayNames(lang, this.dayLabels);
+
+    //
+    // TODO - December is not showing a label because the month is calculated as Sat Jan 01 2022 00:00:00 GMT-0500
+    //
+
+    return html`
+      <div
+        class=${classMap({
+          calendar: true,
+          'calendar--has-footer': this.hasSlotController.test('footer'),
+          'calendar--show-adjacent-dates': this.showAdjacentDates
+        })}
+      >
+        <header class="calendar__header">
+          <sl-icon-button
+            name="chevron-left"
+            label=${this.localize.term('previousMonth')}
+            @click=${this.goToPreviousMonth}
+          ></sl-icon-button>
+
+          <span class="calendar__label">
+            <span class="calendar__month-label">${getMonthName(month, lang, this.monthLabels)}</span>
+            <span class="calendar__year-label">${month.getFullYear()}</span>
+          </span>
+
+          <sl-icon-button
+            name="chevron-right"
+            label=${this.localize.term('nextMonth')}
+            @click=${this.goToNextMonth}
+          ></sl-icon-button>
+        </header>
+
+        <div class="calendar__days">
+          ${[0, 1, 2, 3, 4, 5, 6].map(day => {
+            return html`
+              <span
+                part=${partMap({
+                  day: true,
+                  'day-label': true,
+                  'day-weekday': day > 0 && day < 6,
+                  'day-weekend': day === 0 || day === 6
+                })}
+                class="calendar__day"
+              >
+                ${dayNames[day]}
+              </span>
+            `;
+          })}
+          ${dayGrid.map((day, index) => {
+            if (day.isCurrentMonth || this.showAdjacentDates) {
+              const isSelected = Array.isArray(this.selectedDates)
+                ? this.selectedDates.some(d => isSameDay(d, day.date))
+                : false;
+              const previousDay = index > 0 ? dayGrid[index - 1] : null;
+              const nextDay = index < dayGrid.length - 1 ? dayGrid[index + 1] : null;
+              const isSelectionStart =
+                isSelected && previousDay ? !this.selectedDates.some(d => isSameDay(d, previousDay.date)) : false;
+              const isSelectionEnd =
+                isSelected && nextDay ? !this.selectedDates.some(d => isSameDay(d, nextDay.date)) : false;
+
+              return html`
+                <button
+                  type="button"
+                  part=${partMap({
+                    day: true,
+                    'day-current-month': day.isCurrentMonth,
+                    'day-previous-month': day.isPreviousMonth,
+                    'day-next-month': day.isNextMonth,
+                    'day-today': day.isToday,
+                    'day-weekday': day.isWeekday,
+                    'day-weekend': day.isWeekend,
+                    'day-selected': isSelected,
+                    'day-selection-start': isSelectionStart,
+                    'day-selection-end': isSelectionEnd
+                  })}
+                  class="calendar__day"
+                >
+                  ${day.date.getDate()}
+                </button>
+              `;
+            }
+
+            return html` <div class="calendar__day calendar__day--empty"></div> `;
+          })}
+        </div>
+
+        <footer class="calendar__footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+  }
+}

src/components/calendar/calendar.styles.ts

@@ -0,0 +1,119 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --border-color: var(--sl-color-neutral-200);
+    --border-radius: var(--sl-border-radius-medium);
+    --border-width: 0;
+
+    display: block;
+  }
+
+  .calendar__header {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+
+  .calendar__header sl-icon-button {
+    flex: 0 0 auto;
+  }
+
+  .calendar__label {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+
+  .calendar__days {
+    isolation: isolate;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .calendar__day {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: solid var(--border-width) var(--border-color);
+    border-bottom: none;
+    background: none;
+    background-color: var(--sl-color-neutral-0);
+    font: inherit;
+    color: var(--sl-color-neutral-900);
+    min-height: 3rem;
+    padding: 0;
+    margin: 0;
+  }
+
+  .calendar__day:nth-child(1) {
+    border-top-left-radius: var(--border-radius);
+  }
+
+  .calendar__day:nth-child(7) {
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .calendar__day:nth-last-child(1) {
+    border-bottom-right-radius: var(--border-radius);
+  }
+
+  .calendar__day:nth-last-child(7) {
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  .calendar__day:not(:nth-child(7n)) {
+    border-right: none;
+  }
+
+  .calendar__day:nth-last-child(1),
+  .calendar__day:nth-last-child(2),
+  .calendar__day:nth-last-child(3),
+  .calendar__day:nth-last-child(4),
+  .calendar__day:nth-last-child(5),
+  .calendar__day:nth-last-child(6),
+  .calendar__day:nth-last-child(7) {
+    border-bottom: solid var(--border-width) var(--border-color);
+  }
+
+  .calendar__day:focus-visible {
+    outline: solid 2px var(--sl-color-primary-600);
+    z-index: 1;
+  }
+
+  .calendar__day[part~='day-weekend'] {
+    color: var(--sl-color-rose-600);
+  }
+
+  .calendar__day[part~='day-today'] {
+    font-weight: var(--sl-font-weight-bold);
+  }
+
+  .calendar__day[part~='day-selected'] {
+    background-color: var(--sl-color-primary-100);
+  }
+
+  .calendar__day[part~='day-selection-start'] {
+    border-top-left-radius: var(--sl-border-radius-pill);
+    border-bottom-left-radius: var(--sl-border-radius-pill);
+  }
+
+  .calendar__day[part~='day-selection-end'] {
+    border-top-right-radius: var(--sl-border-radius-pill);
+    border-bottom-right-radius: var(--sl-border-radius-pill);
+  }
+
+  .calendar__day .calendar__day[part~='day-previous-month'],
+  .calendar__day[part~='day-next-month'] {
+    color: var(--sl-color-neutral-400);
+  }
+
+  .calendar__day[part~='day-previous-month'][part~='day-weekend'],
+  .calendar__day[part~='day-next-month'][part~='day-weekend'] {
+    color: var(--sl-color-rose-400);
+  }
+`;

src/components/calendar/calendar.test.ts

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

src/components/calendar/calendar.ts

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

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/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 { SlErrorEvent } from '../../events/sl-error';
+import type { SlLoadEvent } from '../../events/sl-load';
 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,7 +215,9 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
           <span part="thumb" class="switch__thumb"></span>
         </span>
 
-        <slot part="label" class="switch__label"></slot>
+        <div part="label" class="switch__label">
+          <slot></slot>
+        </div>
       </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 { 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';
+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';

src/events/sl-after-collapse.ts

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

src/events/sl-after-expand.ts

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

src/events/sl-after-hide.ts

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

src/events/sl-after-show.ts

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

src/events/sl-blur.ts

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

src/events/sl-cancel.ts

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

src/events/sl-change.ts

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

src/events/sl-clear.ts

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

src/events/sl-close.ts

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

src/events/sl-collapse.ts

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

src/events/sl-copy.ts

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

src/events/sl-error.ts

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

src/events/sl-expand.ts

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

src/events/sl-finish.ts

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

src/events/sl-focus.ts

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

src/events/sl-hide.ts

@@ -1,9 +1,7 @@
-type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;
+export 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 @@
-type SlHoverEvent = CustomEvent<{
+export type SlHoverEvent = CustomEvent<{
   phase: 'start' | 'move' | 'end';
   value: number;
 }>;
@@ -8,5 +8,3 @@ declare global {
     'sl-hover': SlHoverEvent;
   }
 }
-
-export default SlHoverEvent;

src/events/sl-initial-focus.ts

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

src/events/sl-input.ts

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

src/events/sl-invalid.ts

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

src/events/sl-lazy-change.ts

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

src/events/sl-lazy-load.ts

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

src/events/sl-load.ts

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

src/events/sl-mutation.ts

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

src/events/sl-remove.ts

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

src/events/sl-reposition.ts

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

src/events/sl-request-close.ts

@@ -1,9 +1,7 @@
-type SlRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;
+export 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,9 +1,7 @@
-type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;
+export type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-resize': SlResizeEvent;
   }
 }
-
-export default SlResizeEvent;

src/events/sl-select.ts

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

src/events/sl-selection-change.ts

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

src/events/sl-show.ts

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

src/events/sl-slide-change.ts

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

src/events/sl-start.ts

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

src/events/sl-tab-hide.ts

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

src/events/sl-tab-show.ts

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

src/internal/active-elements.ts

@@ -0,0 +1,22 @@
+/**
+ * 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/calendar.ts

@@ -0,0 +1,141 @@
+export interface CalendarDay {
+  date: Date;
+  isToday: boolean;
+  isWeekday: boolean;
+  isWeekend: boolean;
+  isCurrentMonth: boolean;
+  isPreviousMonth: boolean;
+  isNextMonth: boolean;
+}
+
+export interface CalendarGridOptions {
+  weekStartsWith: 'sunday' | 'monday';
+}
+
+/** Generates a calendar grid. Month should be 1-12, not 0-11. */
+export function generateCalendarGrid(year: number, month: number, options?: Partial<CalendarGridOptions>) {
+  const weekStartsWith = options?.weekStartsWith || 'sunday';
+  const today = new Date();
+  const dayThisMonthStartsWith = new Date(year, month - 1, 1).getDay();
+  const lastDayOfMonth = new Date(year, month, 0).getDate();
+  const lastDayOfPreviousMonth =
+    month === 1 ? new Date(year - 1, 1, 0).getDate() : new Date(year, month - 1, 0).getDate();
+  const dayGrid: CalendarDay[] = [];
+  let day = 1;
+
+  do {
+    const date = new Date(year, month - 1, day);
+    let dayOfWeek = new Date(year, month - 1, day).getDay();
+
+    if (weekStartsWith === 'sunday') {
+      //
+      // TODO
+      //
+    }
+
+    // Days in the previous month
+    if (day === 1) {
+      let lastMonthDay = lastDayOfPreviousMonth - dayThisMonthStartsWith + 1;
+      for (let i = 0; i < dayThisMonthStartsWith; i++) {
+        const dayOfLastMonth = new Date(year, month - 2, lastMonthDay);
+
+        dayGrid.push({
+          date: dayOfLastMonth,
+          isToday: isSameDay(dayOfLastMonth, today),
+          isWeekday: isWeekday(dayOfLastMonth),
+          isWeekend: isWeekend(dayOfLastMonth),
+          isCurrentMonth: false,
+          isPreviousMonth: true,
+          isNextMonth: false
+        });
+
+        lastMonthDay++;
+      }
+    }
+
+    dayGrid.push({
+      date,
+      isToday: isSameDay(date, today),
+      isWeekday: isWeekday(date),
+      isWeekend: isWeekend(date),
+      isCurrentMonth: true,
+      isPreviousMonth: false,
+      isNextMonth: false
+    });
+
+    // Days in the next month
+    if (day === lastDayOfMonth) {
+      let nextMonthDay = 1;
+      for (dayOfWeek; dayOfWeek < 6; dayOfWeek++) {
+        const dayOfNextMonth = new Date(year, month, nextMonthDay);
+
+        dayGrid.push({
+          date: dayOfNextMonth,
+          isToday: isSameDay(dayOfNextMonth, today),
+          isWeekday: isWeekday(dayOfNextMonth),
+          isWeekend: isWeekend(dayOfNextMonth),
+          isCurrentMonth: false,
+          isPreviousMonth: false,
+          isNextMonth: true
+        });
+
+        nextMonthDay++;
+      }
+    }
+
+    day++;
+  } while (day <= lastDayOfMonth);
+
+  return dayGrid;
+}
+
+/** Generates a localized array of day names. */
+export function getAllDayNames(locale = 'en', format: Intl.DateTimeFormatOptions['weekday'] = 'long') {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: format, timeZone: 'UTC' });
+  const days = [1, 2, 3, 4, 5, 6, 7].map(day => {
+    const dd = day < 10 ? `0${day}` : day;
+    return new Date(`2017-01-${dd}T00:00:00+00:00`);
+  });
+  return days.map(date => formatter.format(date));
+}
+
+/** Generates a localized array of month names. */
+export function getAllMonthNames(locale = 'en', format: Intl.DateTimeFormatOptions['month'] = 'long') {
+  const formatter = new Intl.DateTimeFormat(locale, { month: format, timeZone: 'UTC' });
+  const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(month => {
+    const mm = month < 10 ? `0${month}` : month;
+    return new Date(`2017-${mm}-01T00:00:00+00:00`);
+  });
+  return months.map(date => formatter.format(date));
+}
+
+/** Determines if two dates are the same day. */
+export function isSameDay(date1: Date, date2: Date) {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+/** Determines if the date is a weekend. */
+export function isWeekend(date: Date) {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+}
+
+/** Determines if the date is a weekday. */
+export function isWeekday(date: Date) {
+  const day = date.getDay();
+  return day > 0 && day < 6;
+}
+
+/** Returns a localized, human-readable day name. */
+export function getDayName(date: Date, locale = 'en', format: Intl.DateTimeFormatOptions['weekday'] = 'long') {
+  return getAllDayNames(locale, format)[date.getDate() - 1];
+}
+
+/** Returns a localized, human-readable month name. */
+export function getMonthName(date: Date, locale = 'en', format: Intl.DateTimeFormatOptions['month'] = 'long') {
+  return getAllMonthNames(locale, format)[date.getMonth()];
+}

src/internal/modal.ts

@@ -1,3 +1,4 @@
+import { activeElements } from './active-elements.js';
 import { getTabbableElements } from './tabbable.js';
 
 let activeModals: HTMLElement[] = [];
@@ -55,6 +56,20 @@ 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;
 
@@ -68,7 +83,10 @@ export default class Modal {
 
     const tabbableElements = getTabbableElements(this.element);
     const start = tabbableElements[0];
-    let focusIndex = this.currentFocusIndex;
+
+    // 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;
 
     if (focusIndex === -1) {
       this.currentFocus = start;

src/internal/part-map.ts

@@ -0,0 +1,11 @@
+export function partMap(map: { [partName: string]: boolean }) {
+  const parts = [];
+
+  for (const [key, value] of Object.entries(map)) {
+    if (value) {
+      parts.push(key);
+    }
+  }
+
+  return parts.join(' ');
+}

src/internal/tabbable.test.ts

@@ -0,0 +1,147 @@
+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,11 +69,32 @@ export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
 }
 
 export function getTabbableElements(root: HTMLElement | ShadowRoot) {
-  const allElements: HTMLElement[] = [];
+  const tabbableElements: HTMLElement[] = [];
 
   function walk(el: HTMLElement | ShadowRoot) {
     if (el instanceof Element) {
-      allElements.push(el);
+      // 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);
+        });
+      }
 
       if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
         walk(el.shadowRoot);
@@ -86,10 +107,14 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
   // Collect all elements including the root
   walk(root);
 
-  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;
-  });
+  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;
+  // });
 }

src/shoelace.ts

@@ -8,6 +8,7 @@ export { default as SlBreadcrumb } from './components/breadcrumb/breadcrumb.js';
 export { default as SlBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.js';
 export { default as SlButton } from './components/button/button.js';
 export { default as SlButtonGroup } from './components/button-group/button-group.js';
+export { default as SlCalendar } from './components/calendar/calendar.js';
 export { default as SlCard } from './components/card/card.js';
 export { default as SlCarousel } from './components/carousel/carousel.js';
 export { default as SlCarouselItem } from './components/carousel-item/carousel-item.js';

src/translations/en.ts

@@ -16,12 +16,14 @@ const translation: Translation = {
   goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
   hidePassword: 'Hide password',
   loading: 'Loading',
+  nextMonth: 'Next month',
   nextSlide: 'Next slide',
   numOptionsSelected: num => {
     if (num === 0) return 'No options selected';
     if (num === 1) return '1 option selected';
     return `${num} options selected`;
   },
+  previousMonth: 'Previous month',
   previousSlide: 'Previous slide',
   progress: 'Progress',
   remove: 'Remove',

src/utilities/localize.ts

@@ -23,8 +23,10 @@ export interface Translation extends DefaultTranslation {
   goToSlide: (slide: number, count: number) => string;
   hidePassword: string;
   loading: string;
+  nextMonth?: string; // TODO - add to other language packs and remove optional ? flag
   nextSlide: string;
   numOptionsSelected: (num: number) => string;
+  previousMonth?: string; // TODO - add to other language packs and remove optional ? flag
   previousSlide: string;
   progress: string;
   remove: string;

tsconfig.json

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