diff --git a/README.md b/README.md index 82c0c1b..6cd1b12 100644 --- a/README.md +++ b/README.md @@ -118,8 +118,9 @@ You are more than welcome to contribute to this repository! Below are some instr 1. Clone this repository by running `git clone https://github.com/andreasbm/weightless.git`. 2. Run `npm i` to install all dependencies. -3. Spin up the development server with `npm run s`. The browser should automatically be opened at the correct url. -5. Run tests with `npm run test`. +3. Spin up the development server with `npm run s`. The browser should automatically be opened at the correct url. If not, you can open your browser and go to `http://localhost:1350`. +4. Run tests with `npm run test`. +5. Lint the files with `npm run lint`. 6. Compile the documentation by running `npm run docs`. The elements are written in [Typescript](https://www.typescriptlang.org/) and the stylesheets are written in [SASS](https://sass-lang.com/). All of the web components uses [lit-element](https://lit-element.polymer-project.org/). diff --git a/blueprint.md b/blueprint.md index b7fddb2..30e5791 100644 --- a/blueprint.md +++ b/blueprint.md @@ -41,8 +41,9 @@ You are more than welcome to contribute to this repository! Below are some instr 1. Clone this repository by running `git clone https://github.com/andreasbm/weightless.git`. 2. Run `npm i` to install all dependencies. -3. Spin up the development server with `npm run s`. The browser should automatically be opened at the correct url. -5. Run tests with `npm run test`. +3. Spin up the development server with `npm run s`. The browser should automatically be opened at the correct url. If not, you can open your browser and go to `http://localhost:1350`. +4. Run tests with `npm run test`. +5. Lint the files with `npm run lint`. 6. Compile the documentation by running `npm run docs`. The elements are written in [Typescript](https://www.typescriptlang.org/) and the stylesheets are written in [SASS](https://sass-lang.com/). All of the web components uses [lit-element](https://lit-element.polymer-project.org/). diff --git a/src/lib/button/README.md b/src/lib/button/README.md index 2e2f05e..83aa8ce 100644 --- a/src/lib/button/README.md +++ b/src/lib/button/README.md @@ -12,18 +12,18 @@ Allow users to take actions, and make choices, with a single tap. | Property | Attribute | Type | Default | Description | |------------|------------|------------------------|----------|--------------------------------------------------| -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `fab` | `fab` | `boolean` | false | Makes the button round and squared. | -| `flat` | `flat` | `boolean` | false | Makes the button flat. | -| `inverted` | `inverted` | `boolean` | false | Inverts the colors of the button. | -| `name` | `name` | `string` | | Name of the native form element. | -| `noRipple` | `noRipple` | `boolean` | false | Deactivates the ripple. | -| `outlined` | `outlined` | `boolean` | false | Makes the button outlined. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `fab` | `fab` | `boolean` | | Makes the button round and squared. | +| `flat` | `flat` | `boolean` | | Makes the button flat. | +| `inverted` | `inverted` | `boolean` | | Inverts the colors of the button. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `noRipple` | `noRipple` | `boolean` | | Deactivates the ripple. | +| `outlined` | `outlined` | `boolean` | | Makes the button outlined. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | | `role` | `role` | `AriaRole` | "button" | Role of the button. | | `type` | `type` | `"button" \| "submit"` | "submit" | Type of the button. | -| `value` | `value` | `string` | "" | Value of the form element. | +| `value` | `value` | `string` | | Value of the form element. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/card/README.md b/src/lib/card/README.md index 05072d7..ff498fd 100644 --- a/src/lib/card/README.md +++ b/src/lib/card/README.md @@ -10,9 +10,9 @@ Group related content and action. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-------------|-------------|-----------|---------|---------------------------| -| `hoverable` | `hoverable` | `boolean` | false | Makes the card hoverable. | +| Property | Attribute | Type | Description | +|-------------|-------------|-----------|---------------------------| +| `hoverable` | `hoverable` | `boolean` | Makes the card hoverable. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/checkbox/README.md b/src/lib/checkbox/README.md index 01d4482..82c742b 100644 --- a/src/lib/checkbox/README.md +++ b/src/lib/checkbox/README.md @@ -10,17 +10,17 @@ Turn an option on or off. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-----------------|-----------------|------------|------------|--------------------------------------------------| -| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | -| `checked` | `checked` | `boolean` | false | Checks the switch. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `indeterminate` | `indeterminate` | `boolean` | false | Indeterminate checkbox state. | -| `name` | `name` | `string` | | Name of the native form element. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "checkbox" | Role of the switch. | -| `value` | `value` | `string` | "" | Value of the form element. | +| Property | Attribute | Type | Default | Description | +|-----------------|-----------------|-----------------------|------------|--------------------------------------------------| +| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | +| `checked` | `checked` | `boolean` | | Checks the switch. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `indeterminate` | `indeterminate` | `boolean` | | Indeterminate checkbox state. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "checkbox" | Role of the switch. | +| `value` | `value` | `string` | | Value of the form element. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/dialog/README.md b/src/lib/dialog/README.md index 5bce9c8..b39cca5 100644 --- a/src/lib/dialog/README.md +++ b/src/lib/dialog/README.md @@ -10,19 +10,19 @@ Highly interruptive messages. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|--------------------|--------------------|---------------|----------|--------------------------------------------------| -| `backdrop` | `backdrop` | `boolean` | false | Whether the backdrop is visible or not. | -| `blockScrolling` | `blockScrolling` | `boolean` | false | Whether the overlay blocks the scrolling on the scroll container. | -| `disableFocusTrap` | `disableFocusTrap` | `boolean` | false | Whether the focus trap be disabled. | -| `duration` | `duration` | `number` | 200 | The duration of the animations. | -| `fixed` | `fixed` | `boolean` | false | Whether the overlay is fixed or not. | -| `open` | `open` | `boolean` | false | Whether the overlay is open or not. | -| `persistent` | `persistent` | `boolean` | false | Whether the overlay is persistent or not. When the overlay is persistent, ESCAPE and backdrop clicks won't close it. | -| `role` | `role` | `AriaRole` | "dialog" | Role of the dialog. | -| `scrollContainer` | `scrollContainer` | `EventTarget` | | The container the overlay lives in. | -| `scrollable` | `scrollable` | `boolean` | false | Makes the dialog scrollable. | -| `size` | `size` | `DialogSize` | | Size of the dialog. | +| Property | Attribute | Type | Default | Description | +|--------------------|--------------------|---------------------------|----------|--------------------------------------------------| +| `backdrop` | `backdrop` | `boolean` | | Whether the backdrop is visible or not. | +| `blockScrolling` | `blockScrolling` | `boolean` | | Whether the overlay blocks the scrolling on the scroll container. | +| `disableFocusTrap` | `disableFocusTrap` | `boolean` | | Whether the focus trap be disabled. | +| `duration` | `duration` | `number` | 200 | The duration of the animations. | +| `fixed` | `fixed` | `boolean` | | Whether the overlay is fixed or not. | +| `open` | `open` | `boolean` | | Whether the overlay is open or not. | +| `persistent` | `persistent` | `boolean` | | Whether the overlay is persistent or not. When the overlay is persistent, ESCAPE and backdrop clicks won't close it. | +| `role` | `role` | `AriaRole` | "dialog" | Role of the dialog. | +| `scrollContainer` | `scrollContainer` | `EventTarget` | | The container the overlay lives in. | +| `scrollable` | `scrollable` | `boolean` | | Makes the dialog scrollable. | +| `size` | `size` | `DialogSize \| undefined` | | Size of the dialog. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/divider/README.md b/src/lib/divider/README.md index 92734bb..eae425c 100644 --- a/src/lib/divider/README.md +++ b/src/lib/divider/README.md @@ -13,7 +13,7 @@ Thin line that groups content in lists and layouts. | Property | Attribute | Type | Default | Description | |------------|------------|------------|-------------|-----------------------------| | `role` | `role` | `AriaRole` | "separator" | Role of the backdrop. | -| `vertical` | `vertical` | `boolean` | false | Makes the divider vertical. | +| `vertical` | `vertical` | `boolean` | | Makes the divider vertical. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/expansion/README.md b/src/lib/expansion/README.md index 3c66e24..2b1952b 100644 --- a/src/lib/expansion/README.md +++ b/src/lib/expansion/README.md @@ -10,19 +10,19 @@ Provide an expandable details-summary view. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|---------------|---------------|------------|---------------|--------------------------------------------------| -| `ariaChecked` | `ariaChecked` | `string` | | Aria expanded attribute. | -| `checked` | `checked` | `boolean` | false | Opens the expansion. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `duration` | `duration` | `number` | 250 | The duration of the animations. | -| `icon` | `icon` | `string` | "expand_more" | Icon name. | -| `name` | `name` | `string` | | Name of the native form element. | -| `noRipple` | `noRipple` | `boolean` | false | Deactivates the ripple. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "radio" | Role of the radio behavior. | -| `value` | `value` | `string` | "" | Value of the form element. | +| Property | Attribute | Type | Default | Description | +|---------------|----------------|-----------------------|---------------|--------------------------------------------------| +| `ariaChecked` | `aria-checked` | `string` | | Aria expanded attribute. | +| `checked` | `checked` | `boolean` | | Opens the expansion. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `duration` | `duration` | `number` | 250 | The duration of the animations. | +| `icon` | `icon` | `string \| undefined` | "expand_more" | Icon name. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `noRipple` | `noRipple` | `boolean` | | Deactivates the ripple. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "radio" | Role of the radio behavior. | +| `value` | `value` | `string` | | Value of the form element. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/label/README.md b/src/lib/label/README.md index 3fccffc..1ffa6dd 100644 --- a/src/lib/label/README.md +++ b/src/lib/label/README.md @@ -10,11 +10,11 @@ Make form elements more accessible. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|------------|------------|-----------|---------|--------------------------------------------------| -| `for` | `for` | `string` | | Query of the form element click events are re-fired upon. | -| `nowrap` | `nowrap` | `boolean` | false | Caps the label element with ellipsis if overflowing. | -| `required` | `required` | `boolean` | false | Styles the label as required. | +| Property | Attribute | Type | Description | +|------------|------------|-----------------------|--------------------------------------------------| +| `for` | `for` | `string \| undefined` | Query of the form element click events are re-fired upon. | +| `nowrap` | `nowrap` | `boolean` | Caps the label element with ellipsis if overflowing. | +| `required` | `required` | `boolean` | Styles the label as required. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/list-item/README.md b/src/lib/list-item/README.md index f1246f5..9a23ae8 100644 --- a/src/lib/list-item/README.md +++ b/src/lib/list-item/README.md @@ -12,15 +12,15 @@ Display an item in a list. | Property | Attribute | Type | Default | Description | |-------------|-------------|------------------------|------------|--------------------------------------------------| -| `clickable` | `clickable` | `boolean` | false | Makes the element clickable. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `name` | `name` | `string` | | Name of the native form element. | -| `noRipple` | `noRipple` | `boolean` | false | Deactivates the ripple. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | +| `clickable` | `clickable` | `boolean` | | Makes the element clickable. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `noRipple` | `noRipple` | `boolean` | | Deactivates the ripple. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | | `role` | `role` | `AriaRole` | "listitem" | Role of the list item. | | `type` | `type` | `"button" \| "submit"` | "submit" | Type of the button. | -| `value` | `value` | `string` | "" | Value of the form element. | +| `value` | `value` | `string` | | Value of the form element. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/nav/README.md b/src/lib/nav/README.md index e8376a8..4e1c083 100644 --- a/src/lib/nav/README.md +++ b/src/lib/nav/README.md @@ -12,9 +12,9 @@ Provide access to destinations in your app. | Property | Attribute | Type | Default | Description | |----------|-----------|------------|--------------|---------------------------------------| -| `fixed` | `fixed` | `boolean` | false | Fixes the nav to the top of the page. | +| `fixed` | `fixed` | `boolean` | | Fixes the nav to the top of the page. | | `role` | `role` | `AriaRole` | "navigation" | Role of the nav. | -| `shadow` | `shadow` | `boolean` | false | Gives the nav a shadow. | +| `shadow` | `shadow` | `boolean` | | Gives the nav a shadow. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/popover/README.md b/src/lib/popover/README.md index 2b29f89..7c8758a 100644 --- a/src/lib/popover/README.md +++ b/src/lib/popover/README.md @@ -10,26 +10,27 @@ Contextual anchored elements. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|---------------------|---------------------|---------------------|---------|--------------------------------------------------| -| `anchor` | `anchor` | `string \| Element` | | Anchor element or query. | -| `anchorCloseEvents` | `anchorCloseEvents` | `string[]` | | Events on the anchor that makes the popover close itself. | -| `anchorOpenEvents` | `anchorOpenEvents` | `string[]` | | Events on the anchor that makes the popover open itself. | -| `anchorOriginX` | `anchorOriginX` | `OriginX` | "left" | X origin of the anchored point. | -| `anchorOriginY` | `anchorOriginY` | `OriginY` | "top" | Y origin of the anchored point. | -| `backdrop` | `backdrop` | `boolean` | false | Whether the backdrop is visible or not. | -| `blockScrolling` | `blockScrolling` | `boolean` | false | Whether the overlay blocks the scrolling on the scroll container. | -| `closeOnClick` | `closeOnClick` | `boolean` | false | Makes the popover close when it is clicked upon. | -| `disableFocusTrap` | `disableFocusTrap` | `boolean` | false | Whether the focus trap be disabled. | -| `duration` | `duration` | `number` | 200 | The duration of the animations. | -| `fixed` | `fixed` | `boolean` | false | Whether the overlay is fixed or not. | -| `noFallback` | `noFallback` | `boolean` | false | Whether a fallback strategy for the positioning should be used when there are no room for the popover. | -| `open` | `open` | `boolean` | false | Whether the overlay is open or not. | -| `persistent` | `persistent` | `boolean` | false | Whether the overlay is persistent or not. When the overlay is persistent, ESCAPE and backdrop clicks won't close it. | -| `role` | `role` | `AriaRole` | "menu" | Role of the popover. | -| `scrollContainer` | `scrollContainer` | `EventTarget` | | The container the overlay lives in. | -| `transformOriginX` | `transformOriginX` | `OriginX` | "left" | X origin of the transform. | -| `transformOriginY` | `transformOriginY` | `OriginY` | "top" | Y origin of the transform. | +| Property | Attribute | Type | Default | Description | +|---------------------|---------------------|----------------------------------|---------|--------------------------------------------------| +| `anchor` | `anchor` | `string \| Element \| undefined` | | Anchor element or query. | +| `anchorCloseEvents` | `anchorCloseEvents` | `string[] \| undefined` | | Events on the anchor that makes the popover close itself. | +| `anchorOpenEvents` | `anchorOpenEvents` | `string[] \| undefined` | | Events on the anchor that makes the popover open itself. | +| `anchorOriginX` | `anchorOriginX` | `OriginX` | | X origin of the anchored point. | +| `anchorOriginY` | `anchorOriginY` | `OriginY` | | Y origin of the anchored point. | +| `backdrop` | `backdrop` | `boolean` | | Whether the backdrop is visible or not. | +| `blockScrolling` | `blockScrolling` | `boolean` | | Whether the overlay blocks the scrolling on the scroll container. | +| `closeOnClick` | `closeOnClick` | `boolean` | | Makes the popover close when it is clicked upon. | +| `disableFocusTrap` | `disableFocusTrap` | `boolean` | | Whether the focus trap be disabled. | +| `duration` | `duration` | `number` | 200 | The duration of the animations. | +| `fixed` | `fixed` | `boolean` | | Whether the overlay is fixed or not. | +| `helloWorld` | `helloWorld` | `boolean` | | | +| `noFallback` | `noFallback` | `boolean` | | Whether a fallback strategy for the positioning should be used when there are no room for the popover. | +| `open` | `open` | `boolean` | | Whether the overlay is open or not. | +| `persistent` | `persistent` | `boolean` | | Whether the overlay is persistent or not. When the overlay is persistent, ESCAPE and backdrop clicks won't close it. | +| `role` | `role` | `AriaRole` | "menu" | Role of the popover. | +| `scrollContainer` | `scrollContainer` | `EventTarget` | | The container the overlay lives in. | +| `transformOriginX` | `transformOriginX` | `OriginX` | | X origin of the transform. | +| `transformOriginY` | `transformOriginY` | `OriginY` | | Y origin of the transform. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/progress-bar/README.md b/src/lib/progress-bar/README.md index 70ecb0d..6ef8565 100644 --- a/src/lib/progress-bar/README.md +++ b/src/lib/progress-bar/README.md @@ -10,16 +10,16 @@ Fills a bar from 0% to 100%. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-------------|-------------|----------------|-----------------|--------------------------------| -| `buffer` | `buffer` | `number` | 0 | Buffer progress value. | -| `bufferMax` | `bufferMax` | `number` | 1 | Max buffer progress value. | -| `bufferMin` | `bufferMin` | `number` | 0 | Min buffer progress value. | -| `max` | `max` | `number` | 1 | Max progress value. | -| `min` | `min` | `number` | 0 | Min progress value. | -| `mode` | `mode` | `ProgressMode` | "indeterminate" | Animation mode. | -| `role` | `role` | `AriaRole` | "progressbar" | Role of the progress behavior. | -| `value` | `value` | `number` | 0 | Progress value. | +| Property | Attribute | Type | Default | Description | +|-------------|-------------|----------------|---------------|--------------------------------| +| `buffer` | `buffer` | `number` | | Buffer progress value. | +| `bufferMax` | `bufferMax` | `number` | 1 | Max buffer progress value. | +| `bufferMin` | `bufferMin` | `number` | | Min buffer progress value. | +| `max` | `max` | `number` | 1 | Max progress value. | +| `min` | `min` | `number` | | Min progress value. | +| `mode` | `mode` | `ProgressMode` | | Animation mode. | +| `role` | `role` | `AriaRole` | "progressbar" | Role of the progress behavior. | +| `value` | `value` | `number` | | Progress value. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/progress-spinner/README.md b/src/lib/progress-spinner/README.md index 06484df..e337929 100644 --- a/src/lib/progress-spinner/README.md +++ b/src/lib/progress-spinner/README.md @@ -10,16 +10,16 @@ Fills a circle from 0% to 100%. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-------------|-------------|----------------|-----------------|--------------------------------| -| `buffer` | `buffer` | `number` | 0 | Buffer progress value. | -| `bufferMax` | `bufferMax` | `number` | 1 | Max buffer progress value. | -| `bufferMin` | `bufferMin` | `number` | 0 | Min buffer progress value. | -| `max` | `max` | `number` | 1 | Max progress value. | -| `min` | `min` | `number` | 0 | Min progress value. | -| `mode` | `mode` | `ProgressMode` | "indeterminate" | Animation mode. | -| `role` | `role` | `AriaRole` | "progressbar" | Role of the progress behavior. | -| `value` | `value` | `number` | 0 | Progress value. | +| Property | Attribute | Type | Default | Description | +|-------------|-------------|----------------|---------------|--------------------------------| +| `buffer` | `buffer` | `number` | | Buffer progress value. | +| `bufferMax` | `bufferMax` | `number` | 1 | Max buffer progress value. | +| `bufferMin` | `bufferMin` | `number` | | Min buffer progress value. | +| `max` | `max` | `number` | 1 | Max progress value. | +| `min` | `min` | `number` | | Min progress value. | +| `mode` | `mode` | `ProgressMode` | | Animation mode. | +| `role` | `role` | `AriaRole` | "progressbar" | Role of the progress behavior. | +| `value` | `value` | `number` | | Progress value. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/radio/README.md b/src/lib/radio/README.md index a1dfbeb..d1bc695 100644 --- a/src/lib/radio/README.md +++ b/src/lib/radio/README.md @@ -10,16 +10,16 @@ Select one option from a set. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|---------------|----------------|------------|---------|--------------------------------------------------| -| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | -| `checked` | `checked` | `boolean` | false | Checks the switch. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `name` | `name` | `string` | | Name of the native form element. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "radio" | Role of the radio behavior. | -| `value` | `value` | `string` | "" | Value of the form element. | +| Property | Attribute | Type | Default | Description | +|---------------|----------------|-----------------------|---------|--------------------------------------------------| +| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | +| `checked` | `checked` | `boolean` | | Checks the switch. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "radio" | Role of the radio behavior. | +| `value` | `value` | `string` | | Value of the form element. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/ripple/README.md b/src/lib/ripple/README.md index e5db285..afb12c6 100644 --- a/src/lib/ripple/README.md +++ b/src/lib/ripple/README.md @@ -12,16 +12,16 @@ Indicate touch actions. | Property | Attribute | Type | Default | Description | |-------------------|-------------------|---------------|----------------|------------------------------------------------| -| `autoRelease` | `autoRelease` | `boolean` | false | Releases the ripple after it has been spawned. | -| `centered` | `centered` | `boolean` | false | Makes ripple appear from the center. | -| `disabled` | `disabled` | `boolean` | false | Disables the ripple. | -| `focusable` | `focusable` | `boolean` | false | Allows focusin to spawn a ripple. | +| `autoRelease` | `autoRelease` | `boolean` | | Releases the ripple after it has been spawned. | +| `centered` | `centered` | `boolean` | | Makes ripple appear from the center. | +| `disabled` | `disabled` | `boolean` | | Disables the ripple. | +| `focusable` | `focusable` | `boolean` | | Allows focusin to spawn a ripple. | | `initialDuration` | `initialDuration` | `number` | 350 | Initial animation duration. | -| `overlay` | `overlay` | `boolean` | false | Overlays the ripple. | +| `overlay` | `overlay` | `boolean` | | Overlays the ripple. | | `releaseDuration` | `releaseDuration` | `number` | 500 | Fade out animation duration. | | `role` | `role` | `AriaRole` | "presentation" | Role of the ripple. | | `target` | `target` | `EventTarget` | | Target for the spawn ripple events. | -| `unbounded` | `unbounded` | `boolean` | false | Makes the ripple visible outside the bounds. | +| `unbounded` | `unbounded` | `boolean` | | Makes the ripple visible outside the bounds. | | `x` | | `number` | **required** | | | `y` | | `number` | **required** | | diff --git a/src/lib/ripple/ripple.ts b/src/lib/ripple/ripple.ts index ee98082..97e85ba 100644 --- a/src/lib/ripple/ripple.ts +++ b/src/lib/ripple/ripple.ts @@ -177,7 +177,7 @@ export class Ripple extends LitElement implements IRippleProperties { protected addListeners () { if (this.target == null) return; this.listeners.push( - addListener(this.target, "mousedown", e => this.spawnRipple.bind(e), {passive: true}), + addListener(this.target, "mousedown", (e: MouseEvent) => this.spawnRipple(e), {passive: true}), addListener(this.target, "focusin", this.onFocusIn.bind(this), {passive: true}), addListener(this.target, "focusout", this.onFocusOut.bind(this), {passive: true}) ); @@ -202,8 +202,7 @@ export class Ripple extends LitElement implements IRippleProperties { if (this.disabled) { // Return an empty noop function - return (() => { - }); + return (() => {}); } // Release the existing ripple if there is one diff --git a/src/lib/select/README.md b/src/lib/select/README.md index 311c0d8..194af0d 100644 --- a/src/lib/select/README.md +++ b/src/lib/select/README.md @@ -10,19 +10,19 @@ Select one or more values from a set of options. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-----------------|-----------------|-----------------|----------|--------------------------------------------------| -| `autocomplete` | `autocomplete` | `"on" \| "off"` | | Whether autocomplete is on or off. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `filled` | `filled` | `boolean` | false | Fills the input with a solid color. | -| `label` | `label` | `string` | | Label text. | -| `name` | `name` | `string` | | Name of the native form element. | -| `outlined` | `outlined` | `boolean` | false | Makes the input outlined. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | | `AriaRole` | "select" | Role of the select. | -| `value` | `value` | `string` | | Value of the form element. | -| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | +| Property | Attribute | Type | Default | Description | +|-----------------|-----------------|------------------------------|----------|--------------------------------------------------| +| `autocomplete` | `autocomplete` | `"on" \| "off" \| undefined` | | Whether autocomplete is on or off. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `filled` | `filled` | `boolean` | | Fills the input with a solid color. | +| `label` | `label` | `string \| undefined` | | Label text. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `outlined` | `outlined` | `boolean` | | Makes the input outlined. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "select" | Role of the select. | +| `value` | `value` | `string` | | Value of the form element. | +| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index b696c2e..098811f 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -98,7 +98,7 @@ export class Select extends InputBehavior implements ISelectProperties { ?readonly="${this.readonly}" name="${ifDefined(this.name)}" autocomplete="${ifDefined(this.autocomplete)}" - tabindex="${this.disabled ? "-1" : "0"}"> + tabindex="${this.disabled ? -1 : 0}"> diff --git a/src/lib/slider/README.md b/src/lib/slider/README.md index 95d5e5e..6b8c1d1 100644 --- a/src/lib/slider/README.md +++ b/src/lib/slider/README.md @@ -10,26 +10,26 @@ Make selections from a range of values. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-----------------|-----------------|-----------------|----------|--------------------------------------------------| -| `autocomplete` | `autocomplete` | `"on" \| "off"` | | Whether autocomplete is on or off. | -| `bufferMax` | `bufferMax` | `number` | 100 | The maximum buffer value allowed. | -| `bufferMin` | `bufferMin` | `number` | 0 | The minimum buffer value allowed. | -| `bufferValue` | `bufferValue` | `number` | | The buffer value. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `filled` | `filled` | `boolean` | false | Fills the input with a solid color. | -| `label` | `label` | `string` | | Label text. | -| `max` | `max` | `number` | 100 | The maximum value allowed. | -| `min` | `min` | `number` | 0 | The minimum value allowed. | -| `name` | `name` | `string` | | Name of the native form element. | -| `outlined` | `outlined` | `boolean` | false | Makes the input outlined. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "slider" | Role of the slider. | -| `step` | `step` | `number` | | The legal number intervals | -| `thumbLabel` | `thumbLabel` | `boolean` | false | Label above the thumb that shows the value. | -| `value` | `value` | `string` | | Value of the form element. | -| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | +| Property | Attribute | Type | Default | Description | +|-----------------|-----------------|------------------------------|----------|--------------------------------------------------| +| `autocomplete` | `autocomplete` | `"on" \| "off" \| undefined` | | Whether autocomplete is on or off. | +| `bufferMax` | `bufferMax` | `number` | 100 | The maximum buffer value allowed. | +| `bufferMin` | `bufferMin` | `number` | | The minimum buffer value allowed. | +| `bufferValue` | `bufferValue` | `number \| undefined` | | The buffer value. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `filled` | `filled` | `boolean` | | Fills the input with a solid color. | +| `label` | `label` | `string \| undefined` | | Label text. | +| `max` | `max` | `number` | 100 | The maximum value allowed. | +| `min` | `min` | `number` | | The minimum value allowed. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `outlined` | `outlined` | `boolean` | | Makes the input outlined. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "slider" | Role of the slider. | +| `step` | `step` | `number \| undefined` | | The legal number intervals | +| `thumbLabel` | `thumbLabel` | `boolean` | | Label above the thumb that shows the value. | +| `value` | `value` | `string` | | Value of the form element. | +| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/snackbar/README.md b/src/lib/snackbar/README.md index 2c0e5eb..4eb7f17 100644 --- a/src/lib/snackbar/README.md +++ b/src/lib/snackbar/README.md @@ -12,14 +12,14 @@ Provide brief messages at the bottom of the screen. | Property | Attribute | Type | Default | Description | |--------------------|--------------------|---------------|----------|--------------------------------------------------| -| `backdrop` | `backdrop` | `boolean` | false | Whether the backdrop is visible or not. | -| `blockScrolling` | `blockScrolling` | `boolean` | false | Whether the overlay blocks the scrolling on the scroll container. | -| `disableFocusTrap` | `disableFocusTrap` | `boolean` | false | Whether the focus trap be disabled. | +| `backdrop` | `backdrop` | `boolean` | | Whether the backdrop is visible or not. | +| `blockScrolling` | `blockScrolling` | `boolean` | | Whether the overlay blocks the scrolling on the scroll container. | +| `disableFocusTrap` | `disableFocusTrap` | `boolean` | | Whether the focus trap be disabled. | | `duration` | `duration` | `number` | 200 | The duration of the animations. | -| `fixed` | `fixed` | `boolean` | false | Whether the overlay is fixed or not. | +| `fixed` | `fixed` | `boolean` | | Whether the overlay is fixed or not. | | `hideDelay` | `hideDelay` | `number` | 5000 | Time in ms before the snackbar is hidden automatically. | -| `open` | `open` | `boolean` | false | Whether the overlay is open or not. | -| `persistent` | `persistent` | `boolean` | false | Whether the overlay is persistent or not. When the overlay is persistent, ESCAPE and backdrop clicks won't close it. | +| `open` | `open` | `boolean` | | Whether the overlay is open or not. | +| `persistent` | `persistent` | `boolean` | | Whether the overlay is persistent or not. When the overlay is persistent, ESCAPE and backdrop clicks won't close it. | | `role` | `role` | `AriaRole` | "banner" | Role of the snackbar. | | `scrollContainer` | `scrollContainer` | `EventTarget` | | The container the overlay lives in. | diff --git a/src/lib/switch/README.md b/src/lib/switch/README.md index e3acc52..bdfd235 100644 --- a/src/lib/switch/README.md +++ b/src/lib/switch/README.md @@ -10,16 +10,16 @@ Turn an option on or off. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|---------------|----------------|------------|------------|--------------------------------------------------| -| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | -| `checked` | `checked` | `boolean` | false | Checks the switch. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `name` | `name` | `string` | | Name of the native form element. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "checkbox" | Role of the switch. | -| `value` | `value` | `string` | "" | Value of the form element. | +| Property | Attribute | Type | Default | Description | +|---------------|----------------|-----------------------|------------|--------------------------------------------------| +| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | +| `checked` | `checked` | `boolean` | | Checks the switch. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "checkbox" | Role of the switch. | +| `value` | `value` | `string` | | Value of the form element. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/tab-group/README.md b/src/lib/tab-group/README.md index 5095ade..e64e61a 100644 --- a/src/lib/tab-group/README.md +++ b/src/lib/tab-group/README.md @@ -13,9 +13,9 @@ Organize navigation between groups of content. | Property | Attribute | Type | Default | Description | |------------|------------|---------------------|-----------|---------------------------------------| | `align` | `align` | `TabGroupAlignment` | "start" | Alignment of the tabs. | -| `filled` | `filled` | `boolean` | false | Adds a filled color style to the tab. | +| `filled` | `filled` | `boolean` | | Adds a filled color style to the tab. | | `role` | `role` | `AriaRole` | "tablist" | Role of the tab. | -| `vertical` | `vertical` | `boolean` | false | Makes the tabs vertical. | +| `vertical` | `vertical` | `boolean` | | Makes the tabs vertical. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#css-custom-properties) diff --git a/src/lib/tab/README.md b/src/lib/tab/README.md index 4cf355a..b92ddc7 100644 --- a/src/lib/tab/README.md +++ b/src/lib/tab/README.md @@ -10,17 +10,17 @@ Organize navigation between groups of content. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|---------------|----------------|------------|---------|--------------------------------------------------| -| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | -| `checked` | `checked` | `boolean` | false | Checks the switch. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `name` | `name` | `string` | | Name of the native form element. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "tab" | Role of the tab. | -| `value` | `value` | `string` | "" | Value of the form element. | -| `vertical` | `vertical` | `boolean` | false | Vertical tab style. | +| Property | Attribute | Type | Default | Description | +|---------------|----------------|-----------------------|---------|--------------------------------------------------| +| `ariaChecked` | `aria-checked` | `string` | | Aria checked attribute. | +| `checked` | `checked` | `boolean` | | Checks the switch. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "tab" | Role of the tab. | +| `value` | `value` | `string` | | Value of the form element. | +| `vertical` | `vertical` | `boolean` | | Vertical tab style. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/textarea/README.md b/src/lib/textarea/README.md index dc6500b..05fee72 100644 --- a/src/lib/textarea/README.md +++ b/src/lib/textarea/README.md @@ -10,22 +10,22 @@ Multiline text fields. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-----------------|-----------------|-----------------|-----------|--------------------------------------------------| -| `autocomplete` | `autocomplete` | `"on" \| "off"` | | Whether autocomplete is on or off. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `filled` | `filled` | `boolean` | false | Fills the input with a solid color. | -| `label` | `label` | `string` | | Label text. | -| `maxLength` | `maxLength` | `number` | | Max value length. | -| `minLength` | `minLength` | `number` | | Min value length. | -| `name` | `name` | `string` | | Name of the native form element. | -| `outlined` | `outlined` | `boolean` | false | Makes the input outlined. | -| `pattern` | `pattern` | `string` | | Value pattern. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "textbox" | Role of the input. | -| `value` | `value` | `string` | | Value of the form element. | -| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | +| Property | Attribute | Type | Default | Description | +|-----------------|-----------------|------------------------------|-----------|--------------------------------------------------| +| `autocomplete` | `autocomplete` | `"on" \| "off" \| undefined` | | Whether autocomplete is on or off. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `filled` | `filled` | `boolean` | | Fills the input with a solid color. | +| `label` | `label` | `string \| undefined` | | Label text. | +| `maxLength` | `maxLength` | `number \| undefined` | | Max value length. | +| `minLength` | `minLength` | `number \| undefined` | | Min value length. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `outlined` | `outlined` | `boolean` | | Makes the input outlined. | +| `pattern` | `pattern` | `string \| undefined` | | Value pattern. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "textbox" | Role of the input. | +| `value` | `value` | `string` | | Value of the form element. | +| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/textarea/textarea.ts b/src/lib/textarea/textarea.ts index 99766ab..93c137a 100644 --- a/src/lib/textarea/textarea.ts +++ b/src/lib/textarea/textarea.ts @@ -90,6 +90,7 @@ export class Textarea extends TextfieldBehavior implements ITextareaProperties { return html` + rows="1" + tabindex="${this.disabled ? -1 : 0}" + >${this.initialValue || ""} `; } } diff --git a/src/lib/textfield/README.md b/src/lib/textfield/README.md index 23fe7c0..7aaa65e 100644 --- a/src/lib/textfield/README.md +++ b/src/lib/textfield/README.md @@ -10,26 +10,26 @@ Singleline text fields. ## ➤ Properties -| Property | Attribute | Type | Default | Description | -|-----------------|-----------------|-----------------|-----------|--------------------------------------------------| -| `autocomplete` | `autocomplete` | `"on" \| "off"` | | Whether autocomplete is on or off. | -| `disabled` | `disabled` | `boolean` | false | Disables the element. | -| `filled` | `filled` | `boolean` | false | Fills the input with a solid color. | -| `label` | `label` | `string` | | Label text. | -| `list` | `list` | `string` | | Datalist id. | -| `max` | `max` | `number` | | Max number value. | -| `maxLength` | `maxLength` | `number` | | Max value length. | -| `min` | `min` | `number` | | Min number value. | -| `minLength` | `minLength` | `number` | | Min value length. | -| `name` | `name` | `string` | | Name of the native form element. | -| `outlined` | `outlined` | `boolean` | false | Makes the input outlined. | -| `pattern` | `pattern` | `string` | | Value pattern. | -| `readonly` | `readonly` | `boolean` | false | Makes the element readonly (disabled but tabbable) | -| `required` | `required` | `boolean` | false | Makes the element required in a form context. | -| `role` | `role` | `AriaRole` | "textbox" | Role of the input. | -| `type` | `type` | `TextfieldType` | "text" | Type of the input. | -| `value` | `value` | `string` | | Value of the form element. | -| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | +| Property | Attribute | Type | Default | Description | +|-----------------|-----------------|------------------------------|-----------|--------------------------------------------------| +| `autocomplete` | `autocomplete` | `"on" \| "off" \| undefined` | | Whether autocomplete is on or off. | +| `disabled` | `disabled` | `boolean` | | Disables the element. | +| `filled` | `filled` | `boolean` | | Fills the input with a solid color. | +| `label` | `label` | `string \| undefined` | | Label text. | +| `list` | `list` | `string \| undefined` | | Datalist id. | +| `max` | `max` | `number \| undefined` | | Max number value. | +| `maxLength` | `maxLength` | `number \| undefined` | | Max value length. | +| `min` | `min` | `number \| undefined` | | Min number value. | +| `minLength` | `minLength` | `number \| undefined` | | Min value length. | +| `name` | `name` | `string \| undefined` | | Name of the native form element. | +| `outlined` | `outlined` | `boolean` | | Makes the input outlined. | +| `pattern` | `pattern` | `string \| undefined` | | Value pattern. | +| `readonly` | `readonly` | `boolean` | | Makes the element readonly (disabled but tabbable) | +| `required` | `required` | `boolean` | | Makes the element required in a form context. | +| `role` | `role` | `AriaRole` | "textbox" | Role of the input. | +| `type` | `type` | `TextfieldType` | "text" | Type of the input. | +| `value` | `value` | `string` | | Value of the form element. | +| `valueAsNumber` | `valueAsNumber` | `number` | | Value of the slider. | [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events) diff --git a/src/lib/textfield/textfield.ts b/src/lib/textfield/textfield.ts index 47b611a..aab7871 100644 --- a/src/lib/textfield/textfield.ts +++ b/src/lib/textfield/textfield.ts @@ -54,6 +54,7 @@ export class Textfield extends TextfieldBehavior implements ITextfieldProperties `; } diff --git a/src/lib/title/README.md b/src/lib/title/README.md index 9c93951..755561e 100644 --- a/src/lib/title/README.md +++ b/src/lib/title/README.md @@ -13,7 +13,7 @@ Indicate the start of a new section. | Property | Attribute | Type | Default | Description | |----------|-----------|--------------|-----------|--------------------------------------------------| | `level` | `level` | `TitleLevel` | 1 | Level of the title. | -| `nowrap` | `nowrap` | `boolean` | false | Caps the title element with ellipsis if overflowing. | +| `nowrap` | `nowrap` | `boolean` | | Caps the title element with ellipsis if overflowing. | | `role` | `role` | `AriaRole` | "heading" | Role of the title. |