diff --git a/docs/components/content/accordion/overview.md b/docs/components/content/accordion/overview.md index e280f4a99..972bdf3f0 100644 --- a/docs/components/content/accordion/overview.md +++ b/docs/components/content/accordion/overview.md @@ -1,6 +1,6 @@ # Content >> Accordion >> Overview ||10 -`lion-accordion` is a component used to toggle the display of sections of content. +A web component that can be used to toggle the display of sections of content. Its purpose is to reduce the need to scroll when presenting multiple sections of content on a single page. Accordions often allow users to get the big picture before focusing on details. ```js script diff --git a/docs/components/content/collapsible/overview.md b/docs/components/content/collapsible/overview.md index 802359176..2132374f6 100644 --- a/docs/components/content/collapsible/overview.md +++ b/docs/components/content/collapsible/overview.md @@ -1,6 +1,6 @@ # Content >> Collapsible >> Overview ||10 -`lion-collapsible` is a combination of a button (the invoker), a chunk of 'extra content', and can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible. +A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible. ```js script import { html } from '@lion/core'; diff --git a/docs/components/content/progress-indicator/overview.md b/docs/components/content/progress-indicator/overview.md index 7ad6689ad..297779b15 100644 --- a/docs/components/content/progress-indicator/overview.md +++ b/docs/components/content/progress-indicator/overview.md @@ -1,6 +1,6 @@ # Content >> Progress Indicator >> Overview ||10 -`lion-progress-indicator` implements accessibility requirements for progress indicators. +A web component that implements accessibility requirements for progress indicators. ```html @@ -10,7 +10,7 @@ Note: You don't see a live demo here as it would be empty, since there is no sty ## Features -`LionProgressIndicator` is designed to be extended to add visuals. +This component is designed to be extended in order to add visuals. - Accessibility compliant - Localized "Loading" label diff --git a/docs/components/content/tabs/overview.md b/docs/components/content/tabs/overview.md index 747013b01..a90d222a1 100644 --- a/docs/components/content/tabs/overview.md +++ b/docs/components/content/tabs/overview.md @@ -1,6 +1,6 @@ # Content >> Tabs >> Overview ||10 -A component to allow users to quickly move between a small number of equally important views. +A web component that allows users to quickly move between a small number of equally important views. ```js script import { LitElement, html } from '@lion/core'; diff --git a/docs/components/inputs/calendar/overview.md b/docs/components/inputs/calendar/overview.md index cdec4e2ba..7792a4039 100644 --- a/docs/components/inputs/calendar/overview.md +++ b/docs/components/inputs/calendar/overview.md @@ -1,6 +1,6 @@ # Inputs >> Calendar >> Overview ||10 -`lion-calendar` is a reusable and accessible calendar view. +A reusable and accessible calendar view web component. ```js script import { html, css } from '@lion/core'; diff --git a/docs/components/inputs/checkbox-group/overview.md b/docs/components/inputs/checkbox-group/overview.md index 2f3c3d8df..7294dcea6 100644 --- a/docs/components/inputs/checkbox-group/overview.md +++ b/docs/components/inputs/checkbox-group/overview.md @@ -1,6 +1,6 @@ # Inputs >> Checkbox Group >> Overview ||10 -`lion-checkbox-group` component enhances the functionality of the native `` element. +A checkbox group enhances the functionality of the native `` element. Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle. > You should use `` elements as the children of the ``. diff --git a/docs/components/inputs/fieldset/overview.md b/docs/components/inputs/fieldset/overview.md index 0b87520a8..99837337f 100644 --- a/docs/components/inputs/fieldset/overview.md +++ b/docs/components/inputs/fieldset/overview.md @@ -7,7 +7,7 @@ import '@lion/input/define'; import '@lion/fieldset/define'; ``` -A fieldset groups multiple input fields or other fieldsets together. +A web component that can be used to group multiple input fields or other fieldsets together. ```js preview-story export const main = () => html` diff --git a/docs/components/inputs/form/overview.md b/docs/components/inputs/form/overview.md index bff167e1c..69300a463 100644 --- a/docs/components/inputs/form/overview.md +++ b/docs/components/inputs/form/overview.md @@ -7,7 +7,7 @@ import '@lion/input/define'; import '@lion/form/define'; ``` -We use a form web-component to enhances the functionality of the native `form` component. +A web component that enhances the functionality of the native `form` component. It is designed to interact with (instances of) the [form controls](../overview.md). ```js preview-story diff --git a/docs/components/inputs/input-amount/overview.md b/docs/components/inputs/input-amount/overview.md index b3a94eb20..fc84d5c3c 100644 --- a/docs/components/inputs/input-amount/overview.md +++ b/docs/components/inputs/input-amount/overview.md @@ -1,6 +1,6 @@ # Inputs >> Input Amount >> Overview ||10 -`lion-input-amount` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an amount. +A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount. For formatting, we use [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) with some overrides. diff --git a/docs/components/inputs/input-date/overview.md b/docs/components/inputs/input-date/overview.md index 6c5d92851..23fd56ce3 100644 --- a/docs/components/inputs/input-date/overview.md +++ b/docs/components/inputs/input-date/overview.md @@ -1,6 +1,6 @@ # Inputs >> Input Date >> Overview ||10 -`lion-input-date` component is based on the generic text input field. Its purpose is to provide a way for users to fill in a date. +A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date. ```js script import { html } from '@lion/core'; diff --git a/docs/components/inputs/input-datepicker/overview.md b/docs/components/inputs/input-datepicker/overview.md index e2d45f806..25922f6af 100644 --- a/docs/components/inputs/input-datepicker/overview.md +++ b/docs/components/inputs/input-datepicker/overview.md @@ -1,6 +1,6 @@ # Inputs >> Input Datepicker >> Overview ||10 -`lion-input-datepicker` component is based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker. +A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker. For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs. We encourage using the standard [lion-input-date](../input-date/overview.md) for this. diff --git a/docs/components/inputs/input-email/overview.md b/docs/components/inputs/input-email/overview.md index 3edc6a860..3c87a4b14 100644 --- a/docs/components/inputs/input-email/overview.md +++ b/docs/components/inputs/input-email/overview.md @@ -1,6 +1,6 @@ # Inputs >> Input Email >> Overview ||10 -`lion-input-email` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email. +A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an email. ```js script import { html } from '@lion/core'; diff --git a/docs/components/inputs/input-iban/overview.md b/docs/components/inputs/input-iban/overview.md index 0a651fb40..45f24317a 100644 --- a/docs/components/inputs/input-iban/overview.md +++ b/docs/components/inputs/input-iban/overview.md @@ -1,6 +1,6 @@ # Inputs >> Input Iban >> Overview ||10 -`lion-input-iban` component is based on the generic text input field. +A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number). ```js script diff --git a/docs/components/inputs/input-range/overview.md b/docs/components/inputs/input-range/overview.md index cd06af387..3deaf93fb 100644 --- a/docs/components/inputs/input-range/overview.md +++ b/docs/components/inputs/input-range/overview.md @@ -1,7 +1,6 @@ # Inputs >> Input Range >> Overview ||10 -`lion-input-range` component is based on the native range input. -Its purpose is to provide a way for users to select one value from a range of values. +A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values. ```js script import { html } from '@lion/core'; diff --git a/docs/components/inputs/input-stepper/overview.md b/docs/components/inputs/input-stepper/overview.md index edf819b0a..4c4928ff6 100644 --- a/docs/components/inputs/input-stepper/overview.md +++ b/docs/components/inputs/input-stepper/overview.md @@ -1,6 +1,6 @@ # Inputs >> Input Stepper >> Overview ||10 -`lion-input-stepper` enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information. +A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information. ```js script import { html } from '@lion/core'; diff --git a/docs/components/inputs/input/overview.md b/docs/components/inputs/input/overview.md index 3f8b536cd..aec6dee30 100644 --- a/docs/components/inputs/input/overview.md +++ b/docs/components/inputs/input/overview.md @@ -1,12 +1,12 @@ # Inputs >> Input >> Overview ||10 -`lion-input` component is a webcomponent that enhances the functionality of the native `` element. - ```js script import { html } from '@lion/core'; import '@lion/input/define'; ``` +A web component that enhances the functionality of the native `` element. + ```js preview-story export const main = () => html``; ``` diff --git a/docs/components/inputs/listbox/overview.md b/docs/components/inputs/listbox/overview.md index fddbc54e5..f5807a4e4 100644 --- a/docs/components/inputs/listbox/overview.md +++ b/docs/components/inputs/listbox/overview.md @@ -1,8 +1,8 @@ # Inputs >> Listbox >> Overview ||10 -A listbox widget presents a list of options and allows a user to select one or more of them. -A listbox that allows a single option to be chosen is a single-select listbox; one that allows -multiple options to be selected is a multi-select listbox. +A widget that presents a list of options and allows a user to select one or more of them. +A listbox that allows a single option to be chosen is a `single-select listbox`; one that allows +multiple options to be selected is a `multi-select listbox`. > From [listbox wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#Listbox) diff --git a/docs/components/inputs/radio-group/overview.md b/docs/components/inputs/radio-group/overview.md index 014771c09..b90928e55 100644 --- a/docs/components/inputs/radio-group/overview.md +++ b/docs/components/inputs/radio-group/overview.md @@ -1,6 +1,6 @@ # Inputs >> Radio Group >> Overview ||10 -`lion-radio-group` component is webcomponent that enhances the functionality of the native `` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices. +A web component that enhances the functionality of the native `` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices. You should use ``s inside this element. diff --git a/docs/components/inputs/select-rich/overview.md b/docs/components/inputs/select-rich/overview.md index 324eb08ea..e0b28f2b6 100644 --- a/docs/components/inputs/select-rich/overview.md +++ b/docs/components/inputs/select-rich/overview.md @@ -1,9 +1,8 @@ # Inputs >> Select Rich >> Overview ||10 -`lion-select-rich` component is a 'rich' version of the native `` doesn't provide enough -styling/theming/user interaction opportunities. +This web component is a 'rich' version of the native `` doesn't provide enough +styling,theming or user interaction opportunities. Its implementation is based on the following Design pattern: diff --git a/docs/components/inputs/select/overview.md b/docs/components/inputs/select/overview.md index 867ab9423..b4f25e97f 100644 --- a/docs/components/inputs/select/overview.md +++ b/docs/components/inputs/select/overview.md @@ -1,11 +1,9 @@ # Inputs >> Select >> Overview ||10 -`lion-select` component is a wrapper around the native `select`. +A web component that works as a wrapper around the native `select`. -You cannot use interactive elements inside the options. Avoid very long names to -facilitate the understandability and perceivability for screen reader users. Sets of options -where each option name starts with the same word or phrase can also significantly degrade -usability for keyboard and screen reader users. +You cannot use interactive elements inside the options. Avoid very long names to facilitate the understandability and perceivability for screen reader users. +Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users. ```js script import { html } from '@lion/core'; diff --git a/docs/components/inputs/textarea/overview.md b/docs/components/inputs/textarea/overview.md index e17d93cc6..5fe08563c 100644 --- a/docs/components/inputs/textarea/overview.md +++ b/docs/components/inputs/textarea/overview.md @@ -1,6 +1,6 @@ # Inputs >> Textarea >> Overview ||10 -`lion-textarea` is a webcomponent that enhances the functionality of the native `` element. +A webcomponent that enhances the functionality of the native `` element. Its purpose is to provide a way for users to write text that is multiple lines long. ```js script diff --git a/docs/components/interaction/button/overview.md b/docs/components/interaction/button/overview.md index 5e0974e7a..545f5d0fb 100644 --- a/docs/components/interaction/button/overview.md +++ b/docs/components/interaction/button/overview.md @@ -1,6 +1,6 @@ # Interaction >> Button >> Overview ||10 -`lion-button` provides a button component that is easily stylable and accessible. +A button web component that is easily stylable and accessible. ```js script import { html } from '@lion/core'; diff --git a/docs/components/interaction/dialog/overview.md b/docs/components/interaction/dialog/overview.md index 35e695fde..89c49f04b 100644 --- a/docs/components/interaction/dialog/overview.md +++ b/docs/components/interaction/dialog/overview.md @@ -1,6 +1,6 @@ # Interaction >> Dialog >> Overview ||10 -`lion-dialog` is a component wrapping a modal dialog controller. +A web component that wraps a modal dialog controller. Its purpose is to make it easy to use our Overlay System declaratively. ```js script diff --git a/docs/components/interaction/switch/overview.md b/docs/components/interaction/switch/overview.md index c40b7967d..4317b7793 100644 --- a/docs/components/interaction/switch/overview.md +++ b/docs/components/interaction/switch/overview.md @@ -1,6 +1,6 @@ # Interaction >> Switch >> Overview ||10 -`lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form. +A web component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. Switch is not a Checkbox in disguise and should not be used as part of a form. ```js script import { html } from '@lion/core'; diff --git a/docs/components/interaction/tooltip/overview.md b/docs/components/interaction/tooltip/overview.md index adc73df96..4233cfae6 100644 --- a/docs/components/interaction/tooltip/overview.md +++ b/docs/components/interaction/tooltip/overview.md @@ -1,6 +1,6 @@ # Interaction >> Tooltip >> Overview ||10 -`lion-tooltip` is a component used for basic popups on hover. +A web component used for basic popups on hover. Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused. ```js script diff --git a/docs/components/navigation/pagination/overview.md b/docs/components/navigation/pagination/overview.md index 07800cf9a..302fb4b12 100644 --- a/docs/components/navigation/pagination/overview.md +++ b/docs/components/navigation/pagination/overview.md @@ -1,6 +1,6 @@ # Navigation >> Pagination >> Overview ||10 -`lion-pagination` is a component that handles pagination. +A web component that handles pagination. ```js script import { html } from '@lion/core'; diff --git a/docs/components/navigation/steps/overview.md b/docs/components/navigation/steps/overview.md index bb1d6cf38..4e6590340 100644 --- a/docs/components/navigation/steps/overview.md +++ b/docs/components/navigation/steps/overview.md @@ -1,6 +1,6 @@ # Navigation >> Steps >> Overview ||10 -`lion-steps` breaks a single goal down into dependable sub-tasks. +A web component that can be used to break a single goal down into dependable sub-tasks. ```js script import { html } from '@lion/core';