add @documentation tag

custom-elements-manifest.config.js

@@ -45,7 +45,7 @@ export default {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
             const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['title', 'animation', 'dependency', 'since', 'status'];
+            const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
             let customComments = '/**';
 
             node.jsDoc?.forEach(jsDoc => {
@@ -81,6 +81,7 @@ export default {
                   break;
 
                 // Value-only metadata tags
+                case 'documentation':
                 case 'since':
                 case 'status':
                 case 'title':

docs/components/qr-code.md

@@ -2,8 +2,6 @@
 
 [component-header:sl-qr-code]
 
-Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
-
 QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.
 
 ```html preview

docs/resources/changelog.md

@@ -13,6 +13,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Added support for the `inert` attribute on `<sl-menu-item>` to allow hidden menu items to not accept focus [#1107](https://github.com/shoelace-style/shoelace/issues/1107)
 - Added the `tag` part to `<sl-select>`
 - Added `sl-hover` event to `<sl-rating>` [#1125](https://github.com/shoelace-style/shoelace/issues/1125)
+- Added the `@documentation` tag with a link to the docs for each component
 - Fixed a bug in `<sl-select>` that prevented placeholders from showing when `multiple` was used [#1109](https://github.com/shoelace-style/shoelace/issues/1109)
 - Fixed a bug in `<sl-select>` that caused tags to not be rounded when using the `pill` attribute [#1117](https://github.com/shoelace-style/shoelace/issues/1117)
 - Fixed a bug in `<sl-select>` where the `sl-change` and `sl-input` events didn't weren't emitted when removing tags [#1119](https://github.com/shoelace-style/shoelace/issues/1119)

scripts/plop/templates/component/component.hbs

@@ -8,9 +8,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Short summary of the component's intended use.
- *
+ * @documentation https://shoelace.style/components/{{ tagWithoutPrefix tag }}
- * @since 2.0
  * @status experimental
+ * @since 2.0
  *
  * @dependency sl-example
  *

src/components/alert/alert.ts

@@ -16,9 +16,9 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
 
 /**
  * @summary Alerts are used to display important messages inline or as toast notifications.
- *
+ * @documentation https://shoelace.style/components/alert
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon-button
  *

src/components/animated-image/animated-image.ts

@@ -8,9 +8,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
- *
+ * @documentation https://shoelace.style/components/animated-image
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/animation/animation.ts

@@ -8,9 +8,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
- *
+ * @documentation https://shoelace.style/components/animation
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event sl-cancel - Emitted when the animation is canceled.
  * @event sl-finish - Emitted when the animation finishes.

src/components/avatar/avatar.ts

@@ -9,9 +9,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Avatars are used to represent a person or object.
- *
+ * @documentation https://shoelace.style/components/avatar
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/badge/badge.ts

@@ -7,9 +7,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
- *
+ * @documentation https://shoelace.style/components/badge
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The badge's content.
  *

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -9,9 +9,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
- *
+ * @documentation https://shoelace.style/components/breadcrumb-item
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

src/components/breadcrumb/breadcrumb.ts

@@ -9,9 +9,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- *
+ * @documentation https://shoelace.style/components/breadcrumb
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<sl-icon>`.

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

@@ -6,9 +6,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
- *
+ * @documentation https://shoelace.style/components/button-group
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - One or more `<sl-button>` elements to display in the button group.
  *

src/components/button/button.ts

@@ -15,9 +15,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Buttons represent actions that are available to the user.
- *
+ * @documentation https://shoelace.style/components/button
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  * @dependency sl-spinner

src/components/card/card.ts

@@ -8,9 +8,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Cards can be used to group related subjects in a container.
- *
+ * @documentation https://shoelace.style/components/card
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

src/components/checkbox/checkbox.ts

@@ -14,9 +14,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
- *
+ * @documentation https://shoelace.style/components/checkbox
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

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

@@ -37,9 +37,9 @@ declare const EyeDropper: EyeDropperConstructor;
 
 /**
  * @summary Color pickers allow the user to select a color.
- *
+ * @documentation https://shoelace.style/components/color-picker
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-button
  * @dependency sl-button-group

src/components/details/details.ts

@@ -13,9 +13,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Details show a brief summary and expand to show additional content.
- *
+ * @documentation https://shoelace.style/components/details
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/dialog/dialog.ts

@@ -17,9 +17,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
- *
+ * @documentation https://shoelace.style/components/dialog
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon-button
  *

src/components/divider/divider.ts

@@ -6,9 +6,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Dividers are used to visually separate or group elements.
- *
+ * @documentation https://shoelace.style/components/divider
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @cssproperty --color - The color of the divider.
  * @cssproperty --width - The width of the divider.

src/components/drawer/drawer.ts

@@ -18,9 +18,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Drawers slide in from a container to expose additional options and information.
- *
+ * @documentation https://shoelace.style/components/drawer
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon-button
  *

src/components/dropdown/dropdown.ts

@@ -20,9 +20,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.
- *
+ * @documentation https://shoelace.style/components/dropdown
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-popup
  *

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

@@ -4,9 +4,9 @@ import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @summary Formats a number as a human readable bytes value.
- *
+ * @documentation https://shoelace.style/components/format-bytes
- * @since 2.0
  * @status stable
+ * @since 2.0
  */
 @customElement('sl-format-bytes')
 export default class SlFormatBytes extends ShoelaceElement {

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

@@ -5,9 +5,9 @@ import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @summary Formats a date/time using the specified locale and options.
- *
+ * @documentation https://shoelace.style/components/format-date
- * @since 2.0
  * @status stable
+ * @since 2.0
  */
 @customElement('sl-format-date')
 export default class SlFormatDate extends ShoelaceElement {

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

@@ -4,9 +4,9 @@ import { LocalizeController } from '../../utilities/localize';
 
 /**
  * @summary Formats a number using the specified locale and options.
- *
+ * @documentation https://shoelace.style/components/format-number
- * @since 2.0
  * @status stable
+ * @since 2.0
  */
 @customElement('sl-format-number')
 export default class SlFormatNumber extends ShoelaceElement {

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

@@ -9,9 +9,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
- *
+ * @documentation https://shoelace.style/components/icon-button
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/icon/icon.ts

@@ -12,9 +12,9 @@ let parser: DOMParser;
 
 /**
  * @summary Icons are symbols that can be used to represent various options within an application.
- *
+ * @documentation https://shoelace.style/components/icon
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event sl-load - Emitted when the icon has loaded.
  * @event sl-error - Emitted when the icon fails to load due to an error.

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

@@ -13,9 +13,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Compare visual differences between similar photos with a sliding panel.
- *
+ * @documentation https://shoelace.style/components/image-comparer
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/include/include.ts

@@ -8,9 +8,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Includes give you the power to embed external HTML files into the page.
- *
+ * @documentation https://shoelace.style/components/include
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event sl-load - Emitted when the included file is loaded.
  * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error.

src/components/input/input.ts

@@ -28,9 +28,9 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
 
 /**
  * @summary Inputs collect data from the user.
- *
+ * @documentation https://shoelace.style/components/input
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

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

@@ -10,9 +10,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Menu items provide options for the user to pick from in a menu.
- *
+ * @documentation https://shoelace.style/components/menu-item
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

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

@@ -6,9 +6,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Menu labels are used to describe a group of menu items.
- *
+ * @documentation https://shoelace.style/components/menu-label
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The menu label's content.
  *

src/components/menu/menu.ts

@@ -10,9 +10,9 @@ export interface MenuSelectEventDetail {
 
 /**
  * @summary Menus provide a list of options for the user to choose from.
- *
+ * @documentation https://shoelace.style/components/menu
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The menu's content, including menu items, menu labels, and dividers.
  *

src/components/mutation-observer/mutation-observer.ts

@@ -7,9 +7,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
- *
+ * @documentation https://shoelace.style/components/mutation-observer
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event {{ mutationList: MutationRecord[] }} sl-mutation - Emitted when a mutation occurs.
  *

src/components/option/option.ts

@@ -10,9 +10,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Options define the selectable items within various form controls such as [select](/components/select).
- *
+ * @documentation https://shoelace.style/components/option
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/popup/popup.ts

@@ -8,9 +8,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
- *
+ * @documentation https://shoelace.style/components/popup
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event sl-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
  *  operations in your listener or consider debouncing it.

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

@@ -10,9 +10,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Progress bars are used to show the status of an ongoing operation.
- *
+ * @documentation https://shoelace.style/components/progress-bar
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - A label to show inside the progress indicator.
  *

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

@@ -7,9 +7,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
- *
+ * @documentation https://shoelace.style/components/progress-ring
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - A label to show inside the ring.
  *

src/components/qr-code/qr-code.ts

@@ -8,8 +8,10 @@ import styles from './qr-code.styles';
 import type { CSSResultGroup } from 'lit';
 
 /**
- * @since 2.0
+ * @summary Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+ * @documentation https://shoelace.style/components/qr-code
  * @status stable
+ * @since 2.0
  *
  * @csspart base - The component's base wrapper.
  */

src/components/radio-button/radio-button.ts

@@ -10,9 +10,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
- *
+ * @documentation https://shoelace.style/components/radio-button
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The radio button's label.
  * @slot prefix - A presentational prefix icon or similar element.

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

@@ -14,9 +14,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
- *
+ * @documentation https://shoelace.style/components/radio-group
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-button-group
  *

src/components/radio/radio.ts

@@ -9,9 +9,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Radios allow the user to select a single option from a group.
- *
+ * @documentation https://shoelace.style/components/radio
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

src/components/range/range.ts

@@ -15,9 +15,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Ranges allow the user to select a single value within a given range using a slider.
- *
+ * @documentation https://shoelace.style/components/range
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot label - The range'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.

src/components/rating/rating.ts

@@ -13,9 +13,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Ratings give users a way to quickly view and provide feedback.
- *
+ * @documentation https://shoelace.style/components/rating
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  *

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

@@ -20,9 +20,9 @@ const availableUnits: UnitConfig[] = [
 
 /**
  * @summary Outputs a localized time phrase relative to the current date and time.
- *
+ * @documentation https://shoelace.style/components/relative-time
- * @since 2.0
  * @status stable
+ * @since 2.0
  */
 @customElement('sl-relative-time')
 export default class SlRelativeTime extends ShoelaceElement {

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

@@ -7,9 +7,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
- *
+ * @documentation https://shoelace.style/components/resize-observer
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - One or more elements to watch for resizing.
  *

src/components/select/select.ts

@@ -22,9 +22,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
- *
+ * @documentation https://shoelace.style/components/select
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon
  * @dependency sl-popup

src/components/skeleton/skeleton.ts

@@ -6,10 +6,10 @@ import styles from './skeleton.styles';
 import type { CSSResultGroup } from 'lit';
 
 /**
- * @summary Skeletons are used to show where content will eventually be drawn.
+ * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.
- *
+ * @documentation https://shoelace.style/components/skeleton
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @csspart base - The component's base wrapper.
  * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.

src/components/spinner/spinner.ts

@@ -7,9 +7,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Spinners are used to show the progress of an indeterminate operation.
- *
+ * @documentation https://shoelace.style/components/spinner
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @csspart base - The component's base wrapper.
  *

src/components/split-panel/split-panel.ts

@@ -11,9 +11,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Split panels display two adjacent panels, allowing the user to reposition them.
- *
+ * @documentation https://shoelace.style/components/split-panel
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event sl-reposition - Emitted when the divider's position changes.
  *

src/components/switch/switch.ts

@@ -13,9 +13,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Switches allow the user to toggle an option on or off.
- *
+ * @documentation https://shoelace.style/components/switch
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The switch's label.
  *

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

@@ -13,9 +13,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
- *
+ * @documentation https://shoelace.style/components/tab-group
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon-button
  *

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

@@ -10,9 +10,9 @@ let id = 0;
 
 /**
  * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
- *
+ * @documentation https://shoelace.style/components/tab-panel
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The tab panel's content.
  *

src/components/tab/tab.ts

@@ -12,9 +12,9 @@ let id = 0;
 
 /**
  * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
- *
+ * @documentation https://shoelace.style/components/tab
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon-button
  *

src/components/tag/tag.ts

@@ -9,9 +9,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Tags are used as labels to organize things or to indicate a selection.
- *
+ * @documentation https://shoelace.style/components/tag
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-icon-button
  *

src/components/textarea/textarea.ts

@@ -14,9 +14,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
- *
+ * @documentation https://shoelace.style/components/textarea
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot label - The textarea'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.

src/components/tooltip/tooltip.ts

@@ -14,9 +14,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Tooltips display additional information based on a specific action.
- *
+ * @documentation https://shoelace.style/components/tooltip
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-popup
  *

src/components/tree-item/tree-item.ts

@@ -16,9 +16,9 @@ import type { CSSResultGroup, PropertyValueMap } from 'lit';
 
 /**
  * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
- *
+ * @documentation https://shoelace.style/components/tree-item
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @dependency sl-checkbox
  * @dependency sl-icon

src/components/tree/tree.ts

@@ -50,9 +50,9 @@ function syncCheckboxes(changedTreeItem: SlTreeItem, initialSync = false) {
 
 /**
  * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
- *
+ * @documentation https://shoelace.style/components/tree
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @event {{ selection: TreeItem[] }} sl-selection-change - Emitted when a tree item is selected or deselected.
  *

src/components/visually-hidden/visually-hidden.ts

@@ -6,9 +6,9 @@ import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
- *
+ * @documentation https://shoelace.style/components/visually-hidden
- * @since 2.0
  * @status stable
+ * @since 2.0
  *
  * @slot - The content to be visually hidden.
  */