<commit_before># gsuiToggle

This is the equivalent of the `<input type="checkbox"/>`, but this time it's fully CSS customisable. The component don't use any real `<input/>` element inside (maybe this will change in the future)<br/>
<br/>
<p align="center">
  <a href="https://codepen.io/mr21/full/XRMQrw">
    <img src="https://gridsound.github.io/assets/screenshots/gsuiToggle.png"/><br/>
    <b>Demo</b> (<i>CodePen</i>)
  </a>
</p>
<br/>

## Documentation

### `.checked<Boolean>`
The `checked` attribute is a readonly value, to change its state we have to use `un/check` or `toggle` methods described below.

### `.onchange = function( checked<Boolean> ) {}`
To detect the change of the `checked` attribute, we have to bind the `onchange` callback and the `checked` boolean will be its only argument.

### `check()`
This component will check the toggle. After that the `gsuiToggle.checked` attribute will be `true`.

### `uncheck()`
This component will uncheck the toggle. After that the `toggle.checked` attribute will be `false`.

### `toggle( [ checked<Boolean> ] )`
`toggle.toggle( checked )` is a shortcut to `checked ? toggle.check() : toggle.uncheck()`, and  
`toggle.toggle()` is a shortcut to `toggle.checked ? toggle.uncheck() : toggle.check()`<commit_msg>gsuiToggle: README (better doc)<commit_after># gsuiToggle

This is the equivalent of the `<input type="checkbox"/>`, but this time it's fully CSS customisable. The component don't use any real `<input/>` element inside (maybe this will change in the future)<br/>
<br/>
<p align="center">
  <a href="https://codepen.io/mr21/full/XRMQrw">
    <img src="https://gridsound.github.io/assets/screenshots/gsuiToggle.png"/><br/>
    <b>Demo</b> (<i>CodePen</i>)
  </a>
</p>
<br/>

## Documentation

### Methods :

* #### `.checked<Boolean>`
  The `checked` attribute is a readonly value, to change its state we have to use `un/check` or `toggle` methods described below.

* #### `check()`
  This component will check the toggle. After that the `gsuiToggle.checked` attribute will be `true`.

* #### `uncheck()`
  This component will uncheck the toggle. After that the `toggle.checked` attribute will be `false`.

* #### `toggle( [ checked<Boolean> ] )`
  `toggle.toggle( checked )` is a shortcut to `checked ? toggle.check() : toggle.uncheck()`, and  
  `toggle.toggle()` is a shortcut to `toggle.checked ? toggle.uncheck() : toggle.check()`

### Callbacks :

* #### `.onchange = function( checked<Boolean> ) {}`
  To detect the change of the `checked` attribute, we have to bind the `onchange` callback and the `checked` boolean will be its only argument.
{'fraction_non_alphanumeric': 0.15769377625047729, 'fraction_numerical': 0.0015273004963726614, 'mean_word_length': 4.446985446985447, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6404468', 'n_tokens_mistral': 832, 'n_tokens_neox': 812, 'n_words': 294}