diff --git a/docs/components/details.md b/docs/components/details.md index e88845c3a..f6c7654ae 100644 --- a/docs/components/details.md +++ b/docs/components/details.md @@ -26,7 +26,7 @@ Use the `disable` attribute to prevent the details from expanding. ### Grouping Details -Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `slShow` event. +Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event. ```html preview
diff --git a/docs/components/dialog.md b/docs/components/dialog.md index 08c0715ab..2b934813f 100644 --- a/docs/components/dialog.md +++ b/docs/components/dialog.md @@ -84,7 +84,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di ### Ignoring Clicks on the Overlay -By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `slOverlayDismiss` event. +By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `sl-overlay-dismiss` event. ```html preview diff --git a/docs/components/drawer.md b/docs/components/drawer.md index f23767d77..1ef69b23d 100644 --- a/docs/components/drawer.md +++ b/docs/components/drawer.md @@ -180,7 +180,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d ### Ignoring Clicks on the Overlay -By default, drawers are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `slOverlayDismiss` event. +By default, drawers are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `sl-overlay-dismiss` event. ```html preview diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index 493c3042c..5deb9379e 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -123,7 +123,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow ### Getting the Selected Item -When dropdowns are used with [menus](/components/menu.md), you can listen for the `slSelect` event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands. +When dropdowns are used with [menus](/components/menu.md), you can listen for the `sl-select` event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands. ```html preview
diff --git a/docs/components/form.md b/docs/components/form.md index 263253795..202c86d95 100644 --- a/docs/components/form.md +++ b/docs/components/form.md @@ -6,9 +6,9 @@ Forms collect data that can easily be processed and sent to a server. All Shoelace components make use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `
` elements will not recognize Shoelace form controls. -This component solves that problem by serializing _both_ Shoelace form controls and native form controls when the form is submitted. The resulting form data is exposed in the `slSubmit` event as a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object in `event.detail.formData`. You can also find an array of form controls in `event.detail.formControls`. +This component solves that problem by serializing _both_ Shoelace form controls and native form controls when the form is submitted. The resulting form data is exposed in the `sl-submit` event as a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object in `event.detail.formData`. You can also find an array of form controls in `event.detail.formControls`. -Shoelace forms don't make use of `action` and `method` attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example below and make an XHR request with the resulting form data. +Shoelace forms don't make use of `action` and `method` attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the `sl-submit` event as shown in the example below and make an XHR request with the resulting form data. ```html preview diff --git a/src/components.d.ts b/src/components.d.ts index 177d852ce..f74f7b36e 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -450,7 +450,7 @@ export namespace Components { */ "novalidate": boolean; /** - * Submits the form. If all controls are valid, the `slSubmit` event will be emitted and the promise will resolve with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted. + * Submits the form. If all controls are valid, the `sl-submit` event will be emitted and the promise will resolve with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted. */ "submit": () => Promise; } diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index ba0c4d3e6..d63475400 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -202,8 +202,8 @@ export class Form { } /** - * Submits the form. If all controls are valid, the `slSubmit` event will be emitted and the promise will resolve with - * `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted. + * Submits the form. If all controls are valid, the `sl-submit` event will be emitted and the promise will resolve + * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted. */ @Method() async submit() {