		{
		"name": "@material/switch",
		"description": "The Material Components for the web switch component",
		"version": "0.36.1",
		"version": "0.38.0",
		"license": "Apache-2.0",
		@@ -11,2 +11,3 @@ "keywords": [
		],
		"main": "index.js",
		"repository": {
		@@ -18,5 +19,8 @@ "type": "git",
		"@material/animation": "^0.34.0",
		"@material/elevation": "^0.36.1",
		"@material/base": "^0.35.0",
		"@material/elevation": "^0.38.0",
		"@material/ripple": "^0.38.0",
		"@material/rtl": "^0.36.0",
		"@material/theme": "^0.35.0"
		"@material/selection-control": "^0.38.0",
		"@material/theme": "^0.38.0"
		},
		@@ -23,0 +27,0 @@ "publishConfig": {

103

README.md

		@@ -18,3 +18,3 @@ <!--docs:

		Switches toggle the state of a single settings option on or off, and are mobile preferred.
		Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.

		@@ -44,5 +44,7 @@ ## Design & API Documentation
		<div class="mdc-switch">
		<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
		<div class="mdc-switch__background">
		<div class="mdc-switch__knob"></div>
		<div class="mdc-switch__track"></div>
		<div class="mdc-switch__thumb-underlay">
		<div class="mdc-switch__thumb">
		<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
		</div>
		</div>
		@@ -52,2 +54,21 @@ </div>
		```

		### Styles

		```scss
		@import "@material/switch/mdc-switch";
		```

		### JavaScript Instantiation

		The Switch requires JavaScript to function, so it is necessary to instantiate MDCSwitch with the HTML.

		```js
		import {MDCSwitch} from '@material/switch';

		const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));
		```

		> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.

		## Variant
		@@ -57,9 +78,11 @@

		Users can add the `disabled` attribute directly to the `<input>` element or a parent `<fieldset>` element to disable a switch.
		Users can add the class 'mdc-switch--disabled' to the 'mdc-switch' element to disable the switch.

		```html
		<div class="mdc-switch">
		<input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
		<div class="mdc-switch__background">
		<div class="mdc-switch__knob"></div>
		<div class="mdc-switch mdc-switch--disabled">
		<div class="mdc-switch__track"></div>
		<div class="mdc-switch__thumb-underlay">
		<div class="mdc-switch__thumb">
		<input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" role="switch" disabled>
		</div>
		</div>
		@@ -77,15 +100,61 @@ </div>
		`mdc-switch` \| Mandatory, for the parent element.
		`mdc-switch__native-control` \| Mandatory, for the input checkbox.
		`mdc-switch__background` \| Mandatory, for the background element.
		`mdc-switch__knob` \| Mandatory, for the knob element.
		`mdc-switch__track` \| Mandatory, for the track element.
		`mdc-switch__thumb-underlay` \| Mandatory, for the ripple effect.
		`mdc-switch__thumb` \| Mandatory, for the thumb element.
		`mdc-switch__native-control` \| Mandatory, for the hidden input checkbox.

		### Sass Mixins

		The following mixins apply only to _enabled_ switches in the _on_ (checked) state.
		It is not currently possible to customize the color of a _disabled_ or _off_ (unchecked) switch.
		MDC Switch uses [MDC Theme](../mdc-theme)'s `secondary` color by default for the checked (toggled on) state.
		Use the following mixins to customize _enabled_ switches. It is not currently possible to customize the color of a
		_disabled_ switch. Disabled switches use the same colors as enabled switches, but with a different opacity value.

		Mixin \| Description
		--- \| ---
		`mdc-switch-track-color($color)` \| Sets the track color.
		`mdc-switch-knob-color($color)` \| Sets the knob color.
		`mdc-switch-focus-indicator-color($color)` \| Sets the focus indicator color.
		`mdc-switch-toggled-on-color($color)` \| Sets the base color of the track, thumb, and ripple when the switch is toggled on.
		`mdc-switch-toggled-off-color($color)` \| Sets the base color of the track, thumb, and ripple when the switch is toggled off.
		`mdc-switch-toggled-on-track-color($color)` \| Sets color of the track when the switch is toggled on.
		`mdc-switch-toggled-off-track-color($color)` \| Sets color of the track when the switch is toggled off.
		`mdc-switch-toggled-on-thumb-color($color)` \| Sets color of the thumb when the switch is toggled on.
		`mdc-switch-toggled-off-thumb-color($color)` \| Sets color of the thumb when the switch is toggled off.
		`mdc-switch-toggled-on-ripple-color($color)` \| Sets the color of the ripple surrounding the thumb when the switch is toggled on.
		`mdc-switch-toggled-off-ripple-color($color)` \| Sets the color of the ripple surrounding the thumb when the switch is toggled off.

		## `MDCSwitch` Properties and Methods

		Property \| Value Type \| Description
		--- \| --- \| ---
		`checked` \| Boolean \| Setter/getter for the switch's checked state
		`disabled` \| Boolean \| Setter/getter for the switch's disabled state

		## Usage within Web Frameworks

		If you are using a JavaScript framework, such as React or Angular, you can create a Switch for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).

		### `MDCSwitchAdapter`

		\| Method Signature \| Description \|
		\| --- \| --- \|
		\| `addClass(className: string) => void` \| Adds a class to the root element. \|
		\| `removeClass(className: string) => void` \| Removes a class from the root element. \|
		\| `setNativeControlChecked(checked: boolean)` \| Sets the checked state of the native control. \|
		\| `isNativeControlChecked() => boolean` \| Returns the checked state of the native control. \|
		\| `setNativeControlDisabled(disabled: boolean)` \| Sets the disabled state of the native control. \|
		\| `isNativeControlDisabled() => boolean` \| Returns the disabled state of the native control. \|

		### `MDCSwitchFoundation`

		\| Method Signature \| Description \|
		\| --- \| --- \|
		\| `isChecked() => boolean` \| Returns whether the native control is checked. \|
		\| `setChecked(checked: boolean) => void` \| Sets the checked value of the native control and updates styling to reflect the checked state. \|
		\| `isDisabled() => boolean` \| Returns whether the native control is disabled. \|
		\| `setDisabled(disabled: boolean) => void` \| Sets the disabled value of the native control and updates styling to reflect the disabled state. \|
		\| `handleChange() => void` \| Handles a change event from the native control. \|

		### `MDCSwitchFoundation` Event Handlers
		If wrapping the switch component it is necessary to add an event handler for native control change events that calls the `handleChange` foundation method. For an example of this, see the [MDCSwitch](index.js) component `initialSyncWithDOM` method.

		\| Event \| Element Selector \| Foundation Handler \|
		\| --- \| --- \| --- \|
		\| `change` \| `.mdc-switch__native-control` \| `handleChange()` \|

_functions.scss