docs

ui/stories/1. Storybook Intro/1-Introduction.mdx

@@ -24,7 +24,7 @@ Just plain vanilla code. 😜
 - The CSS is authored with as little code as necessary, making full use of the CSS cascade and inheritance.
 - [View source code on Github](https://github.com/basher/Web-UI-Boilerplate).
 
-### Web Components (custom elements)
+### Web Components (or custom elements)
 - The JavaScript-enhanced components have been authored as [HTML Web Components](/docs/web-components-or-custom-elements-using-web-components--docs).
 
 ### Accessibility testing

ui/stories/4. Forms/Form/Form.mdx

@@ -25,10 +25,10 @@ import * as FormNoArgs from './FormNoArgs.stories';
 <Controls of={Form.Form} />
 
 ## Server-side validation
-- Uses the [`<webui-notify>`](/docs/web-components-or-custom-elements-webui-notify--docs) custom element to add an additional error summary block at the top of the form.
+- Uses the [`<webui-notify>`](/docs/web-components-or-custom-elements-webui-notify--docs) Web Component to add an additional error summary block at the top of the form.
 - List all the form errors, with anchors to each form field that has an error.
 
 <Canvas of={FormNoArgs.FormServerValidation} />
 
 ## `<webui-form-validate>` JavaScript validation
-- See the [`<webui-form-validate>`](/docs/web-components-or-custom-elements-webui-form-validate--docs) custom element.
+- See the [`<webui-form-validate>`](/docs/web-components-or-custom-elements-webui-form-validate--docs) Web Component.

ui/stories/4. Forms/Form/FormNoArgs.stories.js

@@ -19,7 +19,7 @@ export const WebUIFormValidate = {
         <p>
             See the
             <code>&lt;webui-form-validate&gt;</code>
-            Web Component / custom element.
+            Web Component.
         </p>
     `
 };

ui/stories/5. Components/Carousel/Carousel.mdx

@@ -22,4 +22,4 @@ import * as Carousel from './Carousel.stories';
 <Canvas of={Carousel.CarouselClickableSlides} />
 
 ## JavaScript-enhanced carousel
-- See the [`<webui-carousel>`](/docs/web-components-or-custom-elements-webui-carousel--docs) custom element.
+- See the [`<webui-carousel>`](/docs/web-components-or-custom-elements-webui-carousel--docs) Web Component.

ui/stories/5. Components/Carousel/Carousel.stories.js

@@ -33,7 +33,7 @@ export const WebUICarousel = {
         <p>
             See the
             <code>&lt;webui-carousel&gt;</code>
-            Web Component / custom element.
+            Web Component.
         </p>
     `
 };

ui/stories/5. Components/Navigation/Navigation.mdx

@@ -21,14 +21,14 @@ import * as Navigation from './Navigation.stories';
 <Canvas of={Navigation.Navigation} />
 
 ## Hamburger (with simple navigation)
-- Uses the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) custom element to show/hide the navigation.
+- Uses the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) Web Component to show/hide the navigation.
 - The `ESC` key and clicking outside the navigation both close the hamburger navigation.
 - The disclosure button is placed **inside** the navigation region, allowing screen reader users who move to the `<nav>` using a shortcut to access the button directly.
 
 <Canvas of={Navigation.HamburgerNavigation} />
 
 ## Disclosure navigation (with top-level links and dropdown menus)
-- Uses the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) custom element to show/hide the dropdowns via a `<button>` click, not CSS `:hover`.
+- Uses the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) Web Component to show/hide the dropdowns via a `<button>` click, not CSS `:hover`.
 - The `ESC` key and clicking outside the dropdown both close the dropdown.
 - See the [ARIA APG navigation pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/) and [Adrian Roselli's article](https://adrianroselli.com/2019/06/link-disclosure-widget-navigation.html) for more details.
 - Also see this article that explains why [native HTML details/summary should not be used for navigation disclosure](https://melsumner.github.io/details-as-a-menu).

ui/stories/5. Components/Search/Search.mdx

@@ -15,4 +15,4 @@ import * as Search from './Search.stories';
 <Canvas of={Search.SearchDatalist} />
 
 ## `<webui-predictive-search>` (with dynamic results from an API)
-- See the [`<webui-predictive-search>`](/docs/web-components-or-custom-elements-webui-predictive-search--docs) custom element.
+- See the [`<webui-predictive-search>`](/docs/web-components-or-custom-elements-webui-predictive-search--docs) Web Component.

ui/stories/5. Components/Search/Search.stories.js

@@ -22,7 +22,7 @@ export const WebUIPredictiveSearch = {
     render: () => `
         <p>
             See the <code>&lt;webui-predictive-search&gt;</code>
-            Web Component / custom element.
+            Web Component.
         </p>
     `
 };

ui/stories/6. Web Components Or Custom Elements/WebUI Disclosure/WebUIDisclosure.mdx

@@ -5,11 +5,11 @@ import * as WebUIDisclosure from './WebUIDisclosure.stories';
 
 # `<webui-disclosure>`
 - Shows/hides content using the HTML `hidden` attribute.
-- Use this custom element when [accordion](/story/components-accordion--accordion) or [tabs](/story/components-tabs--tabs) components cannot be used.
+- Use this Web Component when [accordion](/story/components-accordion--accordion) or [tabs](/story/components-tabs--tabs) components cannot be used.
 - Also see the [ARIA APG disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
 
 ## Accessibility considerations
-- The content can be hidden via the `ESC` key, or clicking outside the custom element. See the table below.
+- The content can be hidden via the `ESC` key, or clicking outside the Web Component. See the table below.
 
 ## Required and optional HTML  or `data-` attributes
 
@@ -19,7 +19,7 @@ Attribute | Behaviour
 `data-trigger` | Required. Button that shows/hides the content.
 `data-content` | Required. Content to be shown/hidden.
 `data-bind-escape-key` | Optional. `ESC` key hides the content.
-`data-bind-click-outside` | Optional. Hides the content when clicking anywhere outside the custom element.
+`data-bind-click-outside` | Optional. Hides the content when clicking anywhere outside the Web Component.
 
 <Canvas of={WebUIDisclosure.WebUIDisclosure} />
 <Controls of={WebUIDisclosure.WebUIDisclosure} />

ui/stories/6. Web Components Or Custom Elements/WebUI Fetch Html/WebUIFetchHtml.mdx

@@ -5,7 +5,7 @@ import * as WebUIFetchHtml from './WebUIFetchHtml.stories';
 
 # `<webui-fetch-html>`
 - This is simply a demo to show the core features of a component that has some Ajax dependencies (e.g. fetching an HTML fragment).
-- A more realistic example can be found in the [`<webui-predictive-search>`](/docs/web-components-or-custom-elements-webui-predictive-search--docs) custom element.
+- A more realistic example can be found in the [`<webui-predictive-search>`](/docs/web-components-or-custom-elements-webui-predictive-search--docs) Web Component.
 
 ## Uses native Fetch API
 - See [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) docs on MDN.

ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx

@@ -6,12 +6,12 @@ import * as WebUIImageGallery from './WebUIImageGallery.stories';
 # `<webui-image-gallery>`
 - Uses a simple [grid list layout](/story/layout-grid--grid-list) to arrange the image thumbnails.
 - Without JavaScript, clicking thumbnails opens the large images in current browser window.
-- With JavaScript, the large images are shown in the [`<webui-modal>`](/docs/web-components-or-custom-elements-webui-modal--docs) custom element.
+- With JavaScript, the large images are shown in the [`<webui-modal>`](/docs/web-components-or-custom-elements-webui-modal--docs) Web Component.
 
 > Please note: For brevity, the large images only have a subset of [responsive image](/story/components-images--responsive-image) `<source>` markup.
 
 ## TODO
-- Consider extending `<webui-modal>` custom element to enable a single modal instance to be opened by multiple triggers?
+- Consider extending `<webui-modal>` Web Component to enable a single modal instance to be opened by multiple triggers?
 - Consider showing the large images in a carousel?
 
 <Canvas of={WebUIImageGallery.WebUIImageGallery} />

ui/stories/6. Web Components Or Custom Elements/WebUI Make Clickable/WebUIMakeClickable.mdx

@@ -4,13 +4,13 @@ import * as WebUIMakeClickable from './WebUIMakeClickable.stories';
 <Meta of={WebUIMakeClickable} />
 
 # `<webui-make-clickable>`
-- The entire custom element is made clickable via JavaScript.
-- CSS `focus-within` is utilised to add a focus indicator when the custom element, or any of its descendents, receives keyboard `focus`.
+- The entire Web Component is made clickable via JavaScript.
+- CSS `focus-within` is utilised to add a focus indicator when the Web Component, or any of its descendents, receives keyboard `focus`.
 
 ## Required and optional HTML  or `data-` attributes
 
 Attribute | Behaviour
 --- | ---
-`data-url` | Optional. Identifies the link whose URL is used for the click event. Fallback is the first link inside the custom element.
+`data-url` | Optional. Identifies the link whose URL is used for the click event. Fallback is the first link inside the Web Component.
 
 <Canvas of={WebUIMakeClickable.WebUIMakeClickable} />

ui/stories/6. Web Components Or Custom Elements/WebUI Share/WebUIShare.mdx

@@ -4,13 +4,13 @@ import * as WebUIShare from './WebUIShare.stories';
 <Meta of={WebUIShare} />
 
 # `<webui-share>`
-- This custom element contains a [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs).
+- This Web Component contains a [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs).
 - It leverages the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share).
 - Fallback behaviour in non-supporting browsers allows user to copy the URL.
 
 ## Required and optional HTML  or `data-` attributes
 
-- In addition to the `data-` attributes used with the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) custom element:
+- In addition to the `data-` attributes used with the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) Web Component:
 
 Attribute | Behaviour
 --- | ---

ui/stories/6. Web Components Or Custom Elements/WebUI Video Player/WebUIVideoPlayer.mdx

@@ -4,7 +4,7 @@ import * as WebUIVideoPlayer from './WebUIVideoPlayer.stories';
 <Meta of={WebUIVideoPlayer} />
 
 # `<webui-video-player>`
-- This custom element contains a [`<webui-modal>`](/docs/web-components-or-custom-elements-webui-modal--docs), creating a simple "lightbox".
+- This Web Component contains a [`<webui-modal>`](/docs/web-components-or-custom-elements-webui-modal--docs), creating a simple "lightbox".
 
 ## Responsive, accessibility and performance considerations
 - See the [responsive media/video](/story/components-responsive-media--responsive-video) component.