@@ -139,9 +136,45 @@ customElements.define('sm-select', class extends HTMLElement {
}).append(smSelect.content.cloneNode(true))
this.reset = this.reset.bind(this)
+ this.open = this.open.bind(this)
+ this.collapse = this.collapse.bind(this)
+ this.toggle = this.toggle.bind(this)
+ this.handleSelectKeyDown = this.handleSelectKeyDown.bind(this)
+ this.handleOptionsKeyDown = this.handleOptionsKeyDown.bind(this)
+ this.handleOptionsKeyDown = this.handleOptionsKeyDown.bind(this)
+
+ this.availableOptions
+ this.optionList = this.shadowRoot.querySelector('.options')
+ this.chevron = this.shadowRoot.querySelector('.toggle')
+ this.selection = this.shadowRoot.querySelector('.selection'),
+ this.previousOption
+ this.isOpen = false;
+ this.slideDown = [{
+ transform: `translateY(-0.5rem)`,
+ opacity: 0
+ },
+ {
+ transform: `translateY(0)`,
+ opacity: 1
+ }
+ ]
+ this.slideUp = [{
+ transform: `translateY(0)`,
+ opacity: 1
+ },
+ {
+ transform: `translateY(-0.5rem)`,
+ opacity: 0
+ }
+ ]
+ this.animationOptions = {
+ duration: 300,
+ fill: "forwards",
+ easing: 'ease'
+ }
}
static get observedAttributes() {
- return ['value']
+ return ['value', 'disabled']
}
get value() {
return this.getAttribute('value')
@@ -150,94 +183,89 @@ customElements.define('sm-select', class extends HTMLElement {
this.setAttribute('value', val)
}
- reset(){
+ reset() {
}
+ open() {
+ this.optionList.classList.remove('hide')
+ this.optionList.animate(this.slideDown, this.animationOptions)
+ this.chevron.classList.add('rotate')
+ this.isOpen = true
+ }
collapse() {
this.chevron.classList.remove('rotate')
this.optionList.animate(this.slideUp, this.animationOptions)
- .onfinish = () => {
- this.optionList.classList.add('hide')
- this.open = false
+ .onfinish = () => {
+ this.optionList.classList.add('hide')
+ this.isOpen = false
+ }
+ }
+ toggle() {
+ if (!this.isOpen && !this.hasAttribute('disabled')) {
+ this.open()
+ } else {
+ this.collapse()
}
}
- connectedCallback() {
- this.availableOptions
- this.optionList = this.shadowRoot.querySelector('.options')
- this.chevron = this.shadowRoot.querySelector('.toggle')
- let slot = this.shadowRoot.querySelector('.options slot'),
- selection = this.shadowRoot.querySelector('.selection'),
- previousOption
- this.open = false;
- this.slideDown = [{
- transform: `translateY(-0.5rem)`,
- opacity: 0
- },
- {
- transform: `translateY(0)`,
- opacity: 1
- }
- ]
- this.slideUp = [{
- transform: `translateY(0)`,
- opacity: 1
- },
- {
- transform: `translateY(-0.5rem)`,
- opacity: 0
- }
- ]
- this.animationOptions = {
- duration: 300,
- fill: "forwards",
- easing: 'ease'
+ handleSelectKeyDown(e) {
+ if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+ e.preventDefault()
+ this.availableOptions[0].focus()
}
- selection.addEventListener('click', e => {
- if (!this.open) {
+ else if (e.code === 'Enter' || e.code === 'Space') {
+ if (!this.isOpen) {
this.optionList.classList.remove('hide')
this.optionList.animate(this.slideDown, this.animationOptions)
this.chevron.classList.add('rotate')
- this.open = true
+ this.isOpen = true
} else {
this.collapse()
}
- })
- selection.addEventListener('keydown', e => {
- if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
- e.preventDefault()
+ }
+ }
+ handleOptionsKeyDown(e) {
+ if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+ e.preventDefault()
+ if (document.activeElement.previousElementSibling) {
+ document.activeElement.previousElementSibling.focus()
+ } else {
+ this.availableOptions[this.availableOptions.length - 1].focus()
+ }
+ }
+ else if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+ e.preventDefault()
+ if (document.activeElement.nextElementSibling) {
+ document.activeElement.nextElementSibling.focus()
+ } else {
this.availableOptions[0].focus()
}
- if (e.code === 'Enter' || e.code === 'Space')
- if (!this.open) {
- this.optionList.classList.remove('hide')
- this.optionList.animate(this.slideDown, this.animationOptions)
- this.chevron.classList.add('rotate')
- this.open = true
- } else {
- this.collapse()
- }
- })
- this.optionList.addEventListener('keydown', e => {
- if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
- e.preventDefault()
- if (document.activeElement.previousElementSibling) {
- document.activeElement.previousElementSibling.focus()
- } else {
- this.availableOptions[this.availableOptions.length - 1].focus()
- }
+ }
+ }
+ connectedCallback() {
+ this.setAttribute('role', 'listbox')
+ if (!this.hasAttribute('disabled')) {
+ this.selection.setAttribute('tabindex', '0')
+ }
+ let slot = this.shadowRoot.querySelector('slot')
+ slot.addEventListener('slotchange', e => {
+ this.availableOptions = slot.assignedElements()
+ if (this.availableOptions[0]) {
+ let firstElement = this.availableOptions[0];
+ this.previousOption = firstElement;
+ firstElement.classList.add('check-selected')
+ this.setAttribute('value', firstElement.getAttribute('value'))
+ this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
+ this.availableOptions.forEach((element, index) => {
+ element.setAttribute('tabindex', "0");
+ })
}
- if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
- e.preventDefault()
- if (document.activeElement.nextElementSibling) {
- document.activeElement.nextElementSibling.focus()
- } else{
- this.availableOptions[0].focus()
- }
- }
- })
+ });
+ this.selection.addEventListener('click', this.toggle)
+ this.selection.addEventListener('keydown', this.handleSelectKeyDown)
+ this.optionList.addEventListener('keydown', this.handleOptionsKeyDown)
this.addEventListener('optionSelected', e => {
- if (previousOption !== e.target) {
+ if (this.previousOption !== e.target) {
this.setAttribute('value', e.detail.value)
this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
this.dispatchEvent(new CustomEvent('change', {
@@ -247,36 +275,36 @@ customElements.define('sm-select', class extends HTMLElement {
value: e.detail.value
}
}))
- if (previousOption) {
- previousOption.classList.remove('check-selected')
+ if (this.previousOption) {
+ this.previousOption.classList.remove('check-selected')
}
- previousOption = e.target;
+ this.previousOption = e.target;
}
if (!e.detail.switching)
this.collapse()
e.target.classList.add('check-selected')
})
- slot.addEventListener('slotchange', e => {
- this.availableOptions = slot.assignedElements()
- if (this.availableOptions[0]) {
- let firstElement = this.availableOptions[0];
- previousOption = firstElement;
- firstElement.classList.add('check-selected')
- this.setAttribute('value', firstElement.getAttribute('value'))
- this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
- this.availableOptions.forEach((element, index) => {
- element.setAttribute('data-rank', index + 1);
- element.setAttribute('tabindex', "0");
- })
- }
- });
document.addEventListener('mousedown', e => {
- if (!this.contains(e.target) && this.open) {
+ if (this.isOpen && !this.contains(e.target)) {
this.collapse()
}
})
}
+ attributeChangedCallback(name, oldVal, newVal) {
+ if (name === "disabled") {
+ if (this.hasAttribute('disabled')) {
+ this.selection.removeAttribute('tabindex')
+ }else {
+ this.selection.setAttribute('tabindex', '0')
+ }
+ }
+ }
+ disconnectedCallback() {
+ this.selection.removeEventListener('click', this.toggle)
+ this.selection.removeEventListener('keydown', this.handleSelectKeyDown)
+ this.optionList.removeEventListener('keydown', this.handleOptionsKeyDown)
+ }
})
// option
@@ -351,6 +379,8 @@ customElements.define('sm-option', class extends HTMLElement {
this.attachShadow({
mode: 'open'
}).append(smOption.content.cloneNode(true))
+
+ this.sendDetails = this.sendDetails.bind(this)
}
sendDetails(switching) {
@@ -367,15 +397,14 @@ customElements.define('sm-option', class extends HTMLElement {
}
connectedCallback() {
+ this.setAttribute('role', 'option')
let validKey = [
'ArrowUp',
'ArrowDown',
'ArrowLeft',
'ArrowRight'
]
- this.addEventListener('click', e => {
- this.sendDetails()
- })
+ this.addEventListener('click', this.sendDetails)
this.addEventListener('keyup', e => {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault()
diff --git a/components/dist/select.min.js b/components/dist/select.min.js
index 714a626..49995b6 100644
--- a/components/dist/select.min.js
+++ b/components/dist/select.min.js
@@ -1 +1 @@
-const smSelect=document.createElement("template");smSelect.innerHTML='\n\n
',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.reset=this.reset.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e)}reset(){}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.open=!1})}connectedCallback(){this.availableOptions,this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle");let e,t=this.shadowRoot.querySelector(".options slot"),n=this.shadowRoot.querySelector(".selection");this.open=!1,this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},n.addEventListener("click",e=>{this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0)}),n.addEventListener("keydown",e=>{"ArrowDown"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),this.availableOptions[0].focus()),"Enter"!==e.code&&"Space"!==e.code||(this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0))}),this.optionList.addEventListener("keydown",e=>{"ArrowUp"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()),"ArrowDown"!==e.code&&"ArrowLeft"!==e.code||(e.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}),this.addEventListener("optionSelected",t=>{e!==t.target&&(this.setAttribute("value",t.detail.value),this.shadowRoot.querySelector(".option-text").textContent=t.detail.text,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:t.detail.value}})),e&&e.classList.remove("check-selected"),e=t.target),t.detail.switching||this.collapse(),t.target.classList.add("check-selected")}),t.addEventListener("slotchange",n=>{if(this.availableOptions=t.assignedElements(),this.availableOptions[0]){let t=this.availableOptions[0];e=t,t.classList.add("check-selected"),this.setAttribute("value",t.getAttribute("value")),this.shadowRoot.querySelector(".option-text").textContent=t.textContent,this.availableOptions.forEach((e,t)=>{e.setAttribute("data-rank",t+1),e.setAttribute("tabindex","0")})}}),document.addEventListener("mousedown",e=>{!this.contains(e.target)&&this.open&&this.collapse()})}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}sendDetails(e){let t=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{text:this.textContent,value:this.getAttribute("value"),switching:e}});this.dispatchEvent(t)}connectedCallback(){let e=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];this.addEventListener("click",e=>{this.sendDetails()}),this.addEventListener("keyup",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.sendDetails(!1)),e.includes(t.code)&&(t.preventDefault(),this.sendDetails(!0))}),this.hasAttribute("default")&&setTimeout(()=>{this.sendDetails()},0)}});
\ No newline at end of file
+const smSelect=document.createElement("template");smSelect.innerHTML='\n\n
',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleSelectKeyDown=this.handleSelectKeyDown.bind(this),this.handleOptionsKeyDown=this.handleOptionsKeyDown.bind(this),this.handleOptionsKeyDown=this.handleOptionsKeyDown.bind(this),this.availableOptions,this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.previousOption,this.isOpen=!1,this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"}}static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")}set value(t){this.setAttribute("value",t)}reset(){}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}handleSelectKeyDown(t){"ArrowDown"===t.code||"ArrowRight"===t.code?(t.preventDefault(),this.availableOptions[0].focus()):"Enter"!==t.code&&"Space"!==t.code||(this.isOpen?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0))}handleOptionsKeyDown(t){"ArrowUp"===t.code||"ArrowRight"===t.code?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"!==t.code&&"ArrowLeft"!==t.code||(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{if(this.availableOptions=t.assignedElements(),this.availableOptions[0]){let t=this.availableOptions[0];this.previousOption=t,t.classList.add("check-selected"),this.setAttribute("value",t.getAttribute("value")),this.shadowRoot.querySelector(".option-text").textContent=t.textContent,this.availableOptions.forEach((t,e)=>{t.setAttribute("tabindex","0")})}}),this.selection.addEventListener("click",this.toggle),this.selection.addEventListener("keydown",this.handleSelectKeyDown),this.optionList.addEventListener("keydown",this.handleOptionsKeyDown),this.addEventListener("optionSelected",t=>{this.previousOption!==t.target&&(this.setAttribute("value",t.detail.value),this.shadowRoot.querySelector(".option-text").textContent=t.detail.text,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:t.detail.value}})),this.previousOption&&this.previousOption.classList.remove("check-selected"),this.previousOption=t.target),t.detail.switching||this.collapse(),t.target.classList.add("check-selected")}),document.addEventListener("mousedown",t=>{this.isOpen&&!this.contains(t.target)&&this.collapse()})}attributeChangedCallback(t,e,n){"disabled"===t&&(this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"))}disconnectedCallback(){this.selection.removeEventListener("click",this.toggle),this.selection.removeEventListener("keydown",this.handleSelectKeyDown),this.optionList.removeEventListener("keydown",this.handleOptionsKeyDown)}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0)),this.sendDetails=this.sendDetails.bind(this)}sendDetails(t){let e=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{text:this.textContent,value:this.getAttribute("value"),switching:t}});this.dispatchEvent(e)}connectedCallback(){this.setAttribute("role","option");let t=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];this.addEventListener("click",this.sendDetails),this.addEventListener("keyup",e=>{"Enter"!==e.code&&"Space"!==e.code||(e.preventDefault(),this.sendDetails(!1)),t.includes(e.code)&&(e.preventDefault(),this.sendDetails(!0))}),this.hasAttribute("default")&&setTimeout(()=>{this.sendDetails()},0)}});
\ No newline at end of file
diff --git a/components/dist/theme-toggle.js b/components/dist/theme-toggle.js
new file mode 100644
index 0000000..c0fe31c
--- /dev/null
+++ b/components/dist/theme-toggle.js
@@ -0,0 +1,178 @@
+const themeToggle = document.createElement('template')
+themeToggle.innerHTML = `
+
+
+
+
+
+
+
+`
+
+class ThemeToggle extends HTMLElement {
+ constructor() {
+ super();
+
+ this.attachShadow({
+ mode: 'open'
+ }).append(themeToggle.content.cloneNode(true))
+
+ this.isChecked = false
+ this.hasTheme = 'light'
+
+ this.toggleState = this.toggleState.bind(this)
+ this.fireEvent = this.fireEvent.bind(this)
+ this.handleThemeChange = this.handleThemeChange.bind(this)
+ }
+ static get observedAttributes() {
+ return ['checked'];
+ }
+
+ daylight() {
+ this.hasTheme = 'light'
+ document.body.dataset.theme = 'light'
+ }
+
+ nightlight() {
+ this.hasTheme = 'dark'
+ document.body.dataset.theme = 'dark'
+ }
+
+ toggleState() {
+ this.toggleAttribute('checked')
+ this.fireEvent()
+ }
+ handleKeyDown(e) {
+ if (e.code === 'Space') {
+ this.toggleState()
+ }
+ }
+ handleThemeChange(e) {
+ if (e.detail.theme !== this.hasTheme) {
+ if (e.detail.theme === 'dark') {
+ this.setAttribute('checked', '')
+ }
+ else {
+ this.removeAttribute('checked')
+ }
+ }
+ }
+
+ fireEvent() {
+ this.dispatchEvent(
+ new CustomEvent('themechange', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ theme: this.hasTheme
+ }
+ })
+ )
+ }
+
+ connectedCallback() {
+ this.setAttribute('role', 'switch')
+ this.setAttribute('aria-label', 'theme toggle')
+ if (localStorage.theme === "dark") {
+ this.nightlight();
+ this.setAttribute('checked', '')
+ } else if (localStorage.theme === "light") {
+ this.daylight();
+ this.removeAttribute('checked')
+ }
+ else {
+ if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
+ this.nightlight();
+ this.setAttribute('checked', '')
+ } else {
+ this.daylight();
+ this.removeAttribute('checked')
+ }
+ }
+ this.addEventListener("click", this.toggleState);
+ this.addEventListener("keydown", this.handleKeyDown);
+ document.addEventListener('themechange', this.handleThemeChange)
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this.toggleState);
+ this.removeEventListener("keydown", this.handleKeyDown);
+ document.removeEventListener('themechange', this.handleThemeChange)
+ }
+
+ attributeChangedCallback(name, oldVal, newVal) {
+ if (name === 'checked') {
+ if (this.hasAttribute('checked')) {
+ this.nightlight();
+ localStorage.setItem("theme", "dark");
+ } else {
+ this.daylight();
+ localStorage.setItem("theme", "light");
+ }
+ }
+ }
+}
+
+window.customElements.define('theme-toggle', ThemeToggle);
\ No newline at end of file
diff --git a/components/dist/theme-toggle.min.js b/components/dist/theme-toggle.min.js
new file mode 100644
index 0000000..792a7ce
--- /dev/null
+++ b/components/dist/theme-toggle.min.js
@@ -0,0 +1 @@
+const themeToggle=document.createElement("template");themeToggle.innerHTML='\n \n
\n \n \n \n \n \n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light"}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark"}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(e){"Space"===e.code&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.theme?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.theme?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem("theme","dark")):(this.daylight(),localStorage.setItem("theme","light")))}}window.customElements.define("theme-toggle",ThemeToggle);
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index 5a2e378..0bffbf4 100644
--- a/components/index.html
+++ b/components/index.html
@@ -28,22 +28,7 @@
SM Components
-
-
-
-
-
-
+
Getting Started
@@ -282,7 +267,7 @@
touch enabled devices swipe can be used.
Interactive demo
-
+
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.
@@ -525,10 +510,9 @@
Interactive demo
-
-
+ Submit
+ Login
Supported functions
+
@@ -839,6 +827,7 @@
+