diff --git a/Standard UI Components/README.md b/Standard UI Components/README.md
index d93f255..d646da4 100644
--- a/Standard UI Components/README.md
+++ b/Standard UI Components/README.md
@@ -89,19 +89,16 @@ Variants are different stylistic versions of same component, But they have same
#### Disabled State
-These can disabled adding `disabled="true` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further.
+These can disabled adding `disable` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further.
```html
-Disabled
+Disabled
```
#### Custom Events
-1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disabled="true"` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.
+1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disable` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.
2. `disabled` event fires when button is disabled and user tries to click on it. This event can be useful if you want to validate a form but user clicked submit before all data so you show message according to situation.
-#### Is it ***Responsive***?
-
-No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-button{
width: 100%;
@@ -169,22 +166,22 @@ This has two custom attributes `checked` and `disabled`.
1. Checked
```html
-
+
```
2. disabled
```html
-
+
```
#### Disabled State
-This component can disabled adding `disabled="true` attribute.
+This component can disabled adding `disable` attribute.
You can also have option to use both of these attributes at the same time.
```html
-
+
```
#### Supported Events
@@ -208,7 +205,7 @@ let myCheckbox = document.getElementById('my_checkbox');
```
##### To set checked
```js
-checkbox.checked="true"
+checkbox.checked = true
//or
myCheckbox.setAttribute('checked', 'true')
```
@@ -216,9 +213,9 @@ Replace `"true"` with `"false"` to un-tick checkbox
##### To set disabled
```js
-myCheckbox.disabled="true"
+myCheckbox.disabled = true
//or
-myCheckbox.setAttribute('disabled', 'true')
+myCheckbox.setAttribute('disable', '')
```
### Input
@@ -246,9 +243,7 @@ By default placeholder will disappear when input field has some value.
All events supported by traditional input.
-#### Is it ***Responsive***?
-No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-input{
width: 100%;
@@ -432,12 +427,12 @@ This has two custom attributes `checked` and `disabled`.
1. Checked
```html
-
+
```
2. disabled
```html
-
+
```
#### Disabled State
@@ -447,7 +442,7 @@ This component can disabled adding `disabled="true` attribute.
You can also have option to use both of these attributes at the same time.
```html
-
+
```
#### Supported Events
@@ -471,19 +466,17 @@ let mySwitch = document.getElementById('mySwitch');
```
##### To set checked
```js
-mySwitch.checked="true"
+mySwitch.checked = true
//or
-mySwitch.setAttribute('checked', 'true')
+mySwitch.setAttribute('checked', '')
```
-Replace `"true"` with `"false"` to turn switch off.
##### To set disabled
```js
-mySwitch.disabled="true"
+mySwitch.disabled = true
//or
-mySwitch.setAttribute('disabled', 'true')
+mySwitch.setAttribute('disable', '')
```
-Replace `"true"` with `"false"` to enable switch.
### Select
[See Demo](https://sairaj-mote.github.io/components/)
@@ -508,9 +501,6 @@ You can specify `sm-option` value using `value=""` attribute in option markup.
This supports `change` event that fires when new value is selected from dropdown.
-#### Is it ***Responsive***?
-
-No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-select{
width: 100%;
@@ -587,15 +577,7 @@ This component supports keyboard interactivity like ***Enter*** or ***Spacebar**
Notice how every `sm-tab` is folloed by `sm-option`, This is default structure or syntax for using `sm-tabs`. ***If you didn't add a panel after a tab, the component won't work.***
Another key part is `sm-tab` should have `slot="tab"` as attribute and `slot="panel"` for `sm-panel`. As this component uses HTML5 ***[](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)*** tag to organize user added data. For more information, please refer to this [MDN article](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots).
-#### Custom Attributes
-1. enable-flick
-```html
-
-
-//Tabs body
-
-```
#### Variants
Variants are different stylistic versions of same component, But they have same functions.
@@ -608,9 +590,6 @@ Setting this variant will change default sliding indicator to a block for provid
```
-#### Is it ***Responsive***?
-
-Yes, it will adjust according to screen size and input interrfaces like mouse, touch.
#### Interactions