bug fixes

components/css/main.css

@@ -331,114 +331,6 @@ ul {
   margin-left: 0.5rem;
 }
 
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #50cb93;
-}
-
-.token.punctuation,
-.token.tag {
-  color: #29b6f6;
-}
-
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #1de9b6;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #ff6767;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #84ffff;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-
-pre {
-  max-width: 100%;
-  margin: 1rem 0;
-  padding: 0 1.5rem;
-  overflow-x: auto;
-  font-size: 0.9rem;
-  font-weight: 500;
-  white-space: pre;
-  border-radius: 0.5rem;
-  background: rgba(0, 0, 0, 0.9);
-  line-height: 1.7;
-}
-
-code {
-  border-radius: 0.3rem;
-  font-weight: 400;
-  padding: 0.2rem 0.4rem;
-  background: rgba(var(--text-color), 0.1);
-  color: rgba(255, 255, 255, 0.9);
-}
-
-code * {
-  color: rgba(255, 255, 255, 0.9);
-  font-family: "Roboto Mono", monospace;
-}
-
-pre code {
-  line-height: 1.4;
-  border-radius: none;
-  background: none;
-  width: 100%;
-}
-
 h1,
 h2,
 h3,

components/css/main.scss

@@ -46,6 +46,7 @@ strong {
   line-height: 1.7;
   color: rgba(var(--text-color), 0.9);
 }
+
 img {
   object-fit: cover;
 }
@@ -53,6 +54,7 @@ img {
 a {
   color: inherit;
   text-decoration: none;
+
   &:focus-visible {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
   }
@@ -67,12 +69,15 @@ button {
 a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
+
 sm-button {
   --border-radius: 0.3rem;
 }
+
 ul {
   list-style: none;
 }
+
 .table {
   display: grid;
   gap: 0.5rem;
@@ -84,45 +89,56 @@ ul {
   border-collapse: separate;
   border-spacing: 1rem 1.5rem;
   background-color: rgba(var(--text-color), 0.04);
+
   p:only-of-type {
     margin-bottom: 0;
   }
 }
+
 .tr {
   display: grid;
   gap: 1rem;
   padding: 1rem;
   grid-template-columns: 11rem 1fr;
   width: 100%;
+
   &:nth-of-type(odd) {
     background-color: rgba(var(--text-color), 0.04);
   }
+
   p {
     min-width: 30ch;
   }
 }
+
 .flex {
   display: flex;
 }
+
 .grid {
   display: grid;
 }
+
 .hide {
   opacity: 0;
   pointer-events: none;
 }
+
 .hide-completely {
   display: none !important;
 }
+
 .no-transformations {
   transform: none !important;
 }
+
 .overflow-ellipsis {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 .breakable {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -133,21 +149,27 @@ ul {
   -webkit-hyphens: auto;
   hyphens: auto;
 }
+
 .full-bleed {
   grid-column: 1/4;
 }
+
 .h1 {
   font-size: 2.5rem;
 }
+
 .h2 {
   font-size: 2rem;
 }
+
 .h3 {
   font-size: 1.4rem;
 }
+
 .h4 {
   font-size: 1rem;
 }
+
 .h5 {
   font-size: 0.8rem;
 }
@@ -155,262 +177,198 @@ ul {
 .uppercase {
   text-transform: uppercase;
 }
+
 .capitalize {
   text-transform: capitalize;
 }
+
 .flex {
   display: flex;
 }
+
 .grid {
   display: grid;
 }
+
 .grid-3 {
   grid-template-columns: 1fr auto auto;
 }
+
 .flow-column {
   grid-auto-flow: column;
 }
+
 .gap-0-5 {
   gap: 0.5rem;
 }
+
 .gap-1 {
   gap: 1rem;
 }
+
 .gap-1-5 {
   gap: 1.5rem;
 }
+
 .gap-2 {
   gap: 2rem;
 }
+
 .gap-3 {
   gap: 3rem;
 }
+
 .text-align-right {
   text-align: right;
 }
+
 .align-start {
   align-items: flex-start;
 }
+
 .align-center {
   align-items: center;
 }
+
 .text-center {
   text-align: center;
 }
+
 .justify-start {
   justify-content: start;
 }
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-right {
   margin-left: auto;
 }
+
 .align-self-center {
   align-self: center;
 }
+
 .justify-self-center {
   justify-self: center;
 }
+
 .justify-self-start {
   justify-self: start;
 }
+
 .justify-self-end {
   justify-self: end;
 }
+
 .direction-column {
   flex-direction: column;
 }
+
 .space-between {
   justify-content: space-between;
 }
+
 .w-100 {
   width: 100%;
 }
+
 .color-0-8 {
   color: rgba(var(--text-color), 0.8);
 }
+
 .weight-400 {
   font-weight: 400;
 }
+
 .weight-500 {
   font-weight: 500;
 }
+
 .ripple {
   height: 8rem;
   width: 8rem;
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  background: radial-gradient(
-    circle,
-    rgba(var(--text-color), 0.3) 0%,
-    rgba(0, 0, 0, 0) 50%
-  );
+  background: radial-gradient(circle,
+      rgba(var(--text-color), 0.3) 0%,
+      rgba(0, 0, 0, 0) 50%);
   pointer-events: none;
 }
+
 .interact {
   position: relative;
   overflow: hidden;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
+
 .observe-empty-state:empty {
   display: none;
 }
-.observe-empty-state:not(:empty) ~ .empty-state {
+
+.observe-empty-state:not(:empty)~.empty-state {
   display: none;
 }
+
 .icon {
   width: 1.5rem;
   height: 1.5rem;
   fill: rgba(var(--text-color), 0.9);
 }
+
 .button__icon {
   height: 1.2rem;
   width: 1.2rem;
+
   &--left {
     margin-right: 0.5rem;
   }
+
   &--right {
     margin-left: 0.5rem;
   }
 }
-//Syntax highlighting
 
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #50cb93;
-}
-
-.token.punctuation,
-.token.tag {
-  color: #29b6f6;
-}
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #1de9b6;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #ff6767;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #84ffff;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-pre {
-  max-width: 100%;
-  margin: 1rem 0;
-  padding: 0 1.5rem;
-  overflow-x: auto;
-  font-size: 0.9rem;
-  font-weight: 500;
-  white-space: pre;
-  border-radius: 0.5rem;
-  background: rgba(0, 0, 0, 0.9);
-  line-height: 1.7;
-}
-code {
-  border-radius: 0.3rem;
-  font-weight: 400;
-  padding: 0.2rem 0.4rem;
-  background: rgba(var(--text-color), 0.1);
-  color: rgba(255, 255, 255, 0.9);
-}
-code * {
-  color: rgba(255, 255, 255, 0.9);
-  font-family: "Roboto Mono", monospace;
-}
-pre code {
-  line-height: 1.4;
-  border-radius: none;
-  background: none;
-  width: 100%;
-}
-
-//
 h1,
 h2,
 h3,
 h4.h5 {
   font-family: "Poppins", sans-serif;
 }
+
 h2 {
   margin: 3rem 0 1rem 0;
   text-transform: capitalize;
 }
+
 main {
   display: grid;
   height: 100%;
 }
+
 #main_header {
   padding: 0.5rem 1.5rem;
   border-bottom: 1px solid rgba(var(--text-color), 0.1);
 }
+
 #side_nav_button {
   padding: 0.5rem;
   margin-left: -0.5rem;
 }
+
 .right {
   max-height: 100%;
   overflow-y: auto;
 }
+
 #side_nav {
-  & > :last-child {
+  &> :last-child {
     padding-bottom: 3rem;
   }
+
   h4 {
     font-size: 0.9rem;
     letter-spacing: 0.08em;
@@ -418,27 +376,33 @@ main {
     padding: 1.5rem;
   }
 }
+
 .right {
   padding: 1.5rem;
+
   h1 {
     margin-bottom: 1.5rem;
   }
 }
+
 .list {
   list-style: none;
   display: flex;
   flex-direction: column;
   margin-bottom: 0.8rem;
 }
+
 .list__item {
   display: flex;
   padding: 0.8rem 1.5rem;
   text-transform: capitalize;
+
   &--active {
     color: var(--accent-color);
     background: rgba(var(--text-color), 0.06);
   }
 }
+
 .card {
   display: flex;
   flex-direction: column;
@@ -448,31 +412,39 @@ main {
   min-width: min(24rem, 80%);
   background-color: rgba(var(--text-color), 0.06);
 }
+
 sm-carousel {
   margin-bottom: 1rem;
 }
+
 sm-tab-header {
   margin-bottom: 1.5rem;
 }
+
 .page {
   display: flex;
   flex-direction: column;
   padding-bottom: 3rem;
 }
+
 ol {
   padding: 0.6rem 1rem;
   max-width: 75ch;
   margin-bottom: 1.5rem;
+
   li {
     margin-bottom: 1rem;
+
     &:last-of-type {
       margin-bottom: 0;
     }
   }
 }
+
 strong {
   max-width: 65ch;
 }
+
 strong.important {
   display: flex;
   padding: 0.5rem;
@@ -481,6 +453,7 @@ strong.important {
   color: rgba(0, 0, 0, 0.8);
   background-color: khaki;
 }
+
 .highlight {
   display: inline-flex;
   font-family: "Roboto Mono", monospace;
@@ -490,24 +463,29 @@ strong.important {
   font-size: 0.9rem;
   line-height: 1.6;
 }
+
 #total_components_count {
   font-size: 4rem;
 }
+
 #components_selection_list {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   padding: 1.5rem 0 3rem 0;
 }
+
 .comp-checkbox__title {
   margin-left: 0.5rem;
 }
+
 .auto-grid-2 {
   justify-content: center;
   justify-items: center;
   text-align: center;
   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
+
 .screenshot {
   object-fit: cover;
   object-position: top;
@@ -517,50 +495,62 @@ strong.important {
   justify-self: center;
   box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), 0 0 0 0.3rem black;
 }
+
 @media screen and (max-width: 640px) {
   main {
     grid-template-rows: auto 1fr;
     grid-template-columns: 1fr;
   }
 }
+
 @media screen and (min-width: 640px) {
   sm-popup {
     --width: 32rem;
   }
+
   #main_header {
     padding: 1rem 1.5rem;
     grid-area: main-header;
   }
+
   #side_nav_button {
     display: none;
   }
+
   main {
     grid-template-columns: 14rem minmax(0, 1fr);
     grid-template-areas: "main-header main-header" ". .";
   }
+
   .right {
     display: grid;
     grid-template-columns: 1fr 90% 1fr;
-    & > * {
+
+    &>* {
       grid-column: 2/3;
     }
   }
+
   .page__title {
     font-size: 2.5rem;
   }
+
   #overview_page {
     display: grid;
     gap: 1.5rem;
     grid-template-columns: 1fr auto;
-    & > div:first-of-type {
+
+    &>div:first-of-type {
       grid-column: 2/3;
       text-align: right;
     }
-    & > div:nth-of-type(2) {
+
+    &>div:nth-of-type(2) {
       grid-row: 1/2;
     }
   }
 }
+
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;
@@ -570,12 +560,14 @@ strong.important {
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
+
     &:hover {
       background: rgba(var(--text-color), 0.5);
     }
   }
+
   .list__item:hover {
     background: rgba(var(--text-color), 0.1);
     cursor: pointer;
   }
-}
+}

components/dist/chips.js

@@ -1,5 +1,5 @@
 const smChips = document.createElement('template');
-smChips.innerHTML = `
+smChips.innerHTML = /*html*/`
 <style>
     *{
         padding: 0;
@@ -163,6 +163,9 @@ customElements.define('sm-chips', class extends HTMLElement {
     set value(val) {
         this.setSelectedOption(val);
     }
+    get isValid() {
+        return this._value !== undefined;
+    }
     scrollLeft() {
         this.chipsWrapper.scrollBy({
             left: -this.scrollDistance,
@@ -239,8 +242,9 @@ customElements.define('sm-chips', class extends HTMLElement {
             threshold: 1,
         });
         this.chipsWrapper.addEventListener('option-clicked', e => {
-            if (this._value !== e.target.value) {
-                this.setSelectedOption(e.target.value);
+            e.stopPropagation();
+            if (this._value !== e.detail.value) {
+                this.setSelectedOption(e.detail.value);
                 this.fireEvent();
             }
         });
@@ -284,7 +288,7 @@ customElements.define('sm-chips', class extends HTMLElement {
 });
 
 const smChip = document.createElement('template');
-smChip.innerHTML = `
+smChip.innerHTML = /*html*/`
 <style>
     *{
         padding: 0;
@@ -327,7 +331,7 @@ customElements.define('sm-chip', class extends HTMLElement {
         this.attachShadow({
             mode: 'open'
         }).append(smChip.content.cloneNode(true));
-        this._value = undefined;
+        this._value = this.getAttribute('value');
         this.radioButton = this.shadowRoot.querySelector('input');
 
         this.fireEvent = this.fireEvent.bind(this);
@@ -358,22 +362,28 @@ customElements.define('sm-chip', class extends HTMLElement {
     connectedCallback() {
         this.setAttribute('role', 'option');
         this.setAttribute('tabindex', '0');
-        this._value = this.getAttribute('value');
+        if (!this.hasAttribute('value')) {
+            console.error('sm-chip must have a value attribute');
+        }
+        if (this.hasAttribute('selected'))
+            this.fireEvent();
         this.addEventListener('click', this.fireEvent);
         this.addEventListener('keydown', this.handleKeyDown);
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'selected') {
-            if (newValue !== null) {
+            if (this.hasAttribute('selected')) {
                 this.fireEvent();
                 this.setAttribute('aria-selected', 'true');
             } else {
                 this.removeAttribute('aria-selected');
             }
+        } else if (name === 'value') {
+            this._value = newValue;
         }
     }
     disconnectedCallback() {
         this.removeEventListener('click', this.fireEvent);
         this.removeEventListener('keydown', this.handleKeyDown);
     }
-});
+});

components/dist/form.js

@@ -52,7 +52,11 @@ customElements.define('sm-form', class extends HTMLElement {
 		};
 	}
 	_checkValidity = () => {
-		if (!this.submitButton || this._requiredElements.length === 0) return;
+		if (!this.submitButton || this._requiredElements.length === 0) {
+			if (this.submitButton)
+				this.submitButton.disabled = false;
+			return;
+		}
 		this.invalidFieldsCount = 0
 		this._requiredElements.forEach(([elem, isWC]) => {
 			if (!elem.disabled && isWC && !elem.isValid || !isWC && !elem.checkValidity())
@@ -121,7 +125,8 @@ customElements.define('sm-form', class extends HTMLElement {
 		this._checkValidity();
 	}
 	elementsChanged = () => {
-		this.formElements = [...this.querySelectorAll(this.supportedElements)].map(elem => {
+		this.isFormValid = undefined;
+		this.formElements = [...this.querySelectorAll(this.supportedElements)].map((elem) => {
 			return [elem, elem.tagName.includes('-')];
 		});
 		this._requiredElements = this.formElements.filter(([elem]) => elem.hasAttribute('required'));

components/dist/form.min.js

@@ -1 +1 @@
-const smForm=document.createElement("template");smForm.innerHTML='\n            <style>\n            *{\n                padding: 0;\n                margin: 0;\n                box-sizing: border-box;\n            }\n            :host{\n                display: grid;\n                width: 100%;\n            }\n            form{\n                display: inherit;\n                gap: var(--gap, 1.5rem);\n                width: 100%;\n            }\n            </style>\n            <form part="form" onsubmit="return false">\n                <slot></slot>\n            </form>\n        ',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.invalidFieldsCount,this.skipSubmit=!1,this.isFormValid=void 0,this.supportedElements="input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio",this.formElements=[],this._requiredElements=[]}static get observedAttributes(){return["skip-submit"]}get validity(){return this.isFormValid}debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};_checkValidity=()=>{this.submitButton&&0!==this._requiredElements.length&&(this.invalidFieldsCount=0,this._requiredElements.forEach((([elem,isWC])=>{(!elem.disabled&&isWC&&!elem.isValid||!isWC&&!elem.checkValidity())&&this.invalidFieldsCount++})),this.isFormValid!==(0===this.invalidFieldsCount)&&(this.isFormValid=0===this.invalidFieldsCount,this.dispatchEvent(new CustomEvent(this.isFormValid?"valid":"invalid",{bubbles:!0,composed:!0})),this.skipSubmit||(this.submitButton.disabled=!this.isFormValid)))};handleKeydown=e=>{if("Enter"===e.key&&e.target.tagName.includes("INPUT"))if(0===this.invalidFieldsCount)this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}));else for(const[elem,isWC]of this._requiredElements){if(isWC?!elem.isValid:!elem.checkValidity()){(elem?.shadowRoot?.lastElementChild||elem).animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}),isWC?(elem.focusIn(),"SM-INPUT"===elem.tagName&&""===elem.value.trim()&&elem.showError()):elem.focus();break}}};reset=()=>{this.formElements.forEach((([elem,isWC])=>{if(isWC)elem.reset();else switch(elem.type){case"checkbox":case"radio":elem.checked=!1;break;default:elem.value=""}})),this._checkValidity()};elementsChanged=()=>{this.formElements=[...this.querySelectorAll(this.supportedElements)].map((elem=>[elem,elem.tagName.includes("-")])),this._requiredElements=this.formElements.filter((([elem])=>elem.hasAttribute("required"))),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()};checkIfSupported=elem=>1===elem.nodeType&&(elem.tagName.includes("-")||"input"===elem.tagName||elem.querySelector(this.supportedElements));connectedCallback(){const updateFormDecedents=this.debounce(this.elementsChanged,100);this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100)),this.shadowRoot.querySelector("slot").addEventListener("slotchange",updateFormDecedents),this.mutationObserver=new MutationObserver((mutations=>{mutations.forEach((mutation=>{("childList"===mutation.type&&[...mutation.addedNodes].some((node=>this.checkIfSupported(node)))||[...mutation.removedNodes].some((node=>this.checkIfSupported(node))))&&updateFormDecedents()}))})),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(name,oldValue,newValue){"skip-submit"===name&&(this.skipSubmit=this.hasAttribute("skip-submit"))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),this.mutationObserver.disconnect()}});
+const smForm=document.createElement("template");smForm.innerHTML='\n            <style>\n            *{\n                padding: 0;\n                margin: 0;\n                box-sizing: border-box;\n            }\n            :host{\n                display: grid;\n                width: 100%;\n            }\n            form{\n                display: inherit;\n                gap: var(--gap, 1.5rem);\n                width: 100%;\n            }\n            </style>\n            <form part="form" onsubmit="return false">\n                <slot></slot>\n            </form>\n        ',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.invalidFieldsCount,this.skipSubmit=!1,this.isFormValid=void 0,this.supportedElements="input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio",this.formElements=[],this._requiredElements=[]}static get observedAttributes(){return["skip-submit"]}get validity(){return this.isFormValid}debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};_checkValidity=()=>{this.submitButton&&0!==this._requiredElements.length?(this.invalidFieldsCount=0,this._requiredElements.forEach((([elem,isWC])=>{(!elem.disabled&&isWC&&!elem.isValid||!isWC&&!elem.checkValidity())&&this.invalidFieldsCount++})),this.isFormValid!==(0===this.invalidFieldsCount)&&(this.isFormValid=0===this.invalidFieldsCount,this.dispatchEvent(new CustomEvent(this.isFormValid?"valid":"invalid",{bubbles:!0,composed:!0})),this.skipSubmit||(this.submitButton.disabled=!this.isFormValid))):this.submitButton&&(this.submitButton.disabled=!1)};handleKeydown=e=>{if("Enter"===e.key&&e.target.tagName.includes("INPUT"))if(0===this.invalidFieldsCount)this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}));else for(const[elem,isWC]of this._requiredElements){if(isWC?!elem.isValid:!elem.checkValidity()){(elem?.shadowRoot?.lastElementChild||elem).animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}),isWC?(elem.focusIn(),"SM-INPUT"===elem.tagName&&""===elem.value.trim()&&elem.showError()):elem.focus();break}}};reset=()=>{this.formElements.forEach((([elem,isWC])=>{if(isWC)elem.reset();else switch(elem.type){case"checkbox":case"radio":elem.checked=!1;break;default:elem.value=""}})),this._checkValidity()};elementsChanged=()=>{this.isFormValid=void 0,this.formElements=[...this.querySelectorAll(this.supportedElements)].map((elem=>[elem,elem.tagName.includes("-")])),this._requiredElements=this.formElements.filter((([elem])=>elem.hasAttribute("required"))),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()};checkIfSupported=elem=>1===elem.nodeType&&(elem.tagName.includes("-")||"input"===elem.tagName||elem.querySelector(this.supportedElements));connectedCallback(){const updateFormDecedents=this.debounce(this.elementsChanged,100);this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100)),this.shadowRoot.querySelector("slot").addEventListener("slotchange",updateFormDecedents),this.mutationObserver=new MutationObserver((mutations=>{mutations.forEach((mutation=>{("childList"===mutation.type&&[...mutation.addedNodes].some((node=>this.checkIfSupported(node)))||[...mutation.removedNodes].some((node=>this.checkIfSupported(node))))&&updateFormDecedents()}))})),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(name,oldValue,newValue){"skip-submit"===name&&(this.skipSubmit=this.hasAttribute("skip-submit"))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),this.mutationObserver.disconnect()}});

components/dist/input.js

@@ -233,7 +233,7 @@ smInput.innerHTML = /*html*/`
     `;
 customElements.define('sm-input',
     class SmInput extends HTMLElement {
-        static hasAppendedStyles = false
+        static hasAppendedStyles = false;
         #validationState = {
             validatedFor: undefined,
             isValid: false,
@@ -348,7 +348,7 @@ customElements.define('sm-input',
             const _isValid = this.input.checkValidity();
             let _validity = { isValid: true, errorText: '' }
             if (this.validationFunction) {
-                _validity = this.validationFunction(this.input.value);
+                _validity = this.validationFunction(this.input.value, this);
             }
             if (_isValid && _validity.isValid) {
                 this.setAttribute('valid', '');
@@ -373,6 +373,7 @@ customElements.define('sm-input',
             this.value = '';
             this.input.focus();
             this.fireEvent();
+            this.hideFeedback();
         }
 
         focusIn = () => {
@@ -508,6 +509,9 @@ customElements.define('sm-input',
             }
         }
         handleBlur = (e) => {
+            if (this.input.value.trim() === '') {
+                this.hideFeedback();
+            }
             if (this.datalist.length) {
                 this.optionList.classList.add('hidden');
             }
@@ -595,15 +599,17 @@ customElements.define('sm-input',
                 fill: 'forwards'
             }).onfinish = () => {
                 this.intersectionObserver?.disconnect();
-                this.feedbackPopover.remove();
-                this.feedbackPopover = null;
+                if (this.feedbackPopover) {
+                    this.feedbackPopover.remove();
+                    this.feedbackPopover = null;
+                }
                 window.removeEventListener('resize', this.updatePosition, { passive: true })
             }
         }
         connectedCallback() {
             if (!SmInput.hasAppendedStyles) {
-                // inject styles once will be utilised by all instances
-                document.head.insertAdjacentHTML('beforeend', `<style>
+                // inject styles once will be utilized by all instances
+                document.head.insertAdjacentHTML('beforeend', /*html*/`<style>
                     // styles injected by sm-input component
                     .success{
                         color: var(--success-color);

components/dist/notifications.js

@@ -213,7 +213,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
         notification.id = this.randString(8)
         notification.className = `notification ${pinned ? 'pinned' : ''}`
         notification.style.setProperty('--timeout', `${timeout}ms`);
-        notification.innerHTML = `
+        notification.innerHTML = /*html*/`
             ${icon ? `<div class="icon-container">${icon}</div>` : ''}
             <output>${message}</output>
             ${action ? `<button class="action">${action.label}</button>` : ''}

components/dist/switch.js

@@ -177,9 +177,10 @@ customElements.define('sm-switch', class extends HTMLElement {
             if (name === 'disabled') {
                 if (this.hasAttribute('disabled')) {
                     this.disabled = true
-                }
-                else {
+                    this.inert = true
+                } else {
                     this.disabled = false
+                    this.inert = false
                 }
             }
             else if (name === 'checked') {

components/dist/switch.min.js

@@ -1 +1 @@
-const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: inline-flex;\n    }\n    :host(:active) .thumb{\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n    }\n    label{\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        transition: background 0.3s;\n        background: rgba(var(--text-color,inherit), 0.4);\n        box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:focus-visible .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color,inherit), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        justify-content: center;\n        align-items: center;\n        border-radius: 1rem;\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n        transition: 0.3s ease;\n        background-color: inherit;\n    }\n    \n    input:checked ~ .thumb {\n        transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color, teal);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(val){val?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(value){value?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch=()=>{this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))};connectedCallback(){this.addEventListener("keydown",(e=>{" "!==e.key||this.isDisabled||(e.preventDefault(),this.input.click())})),this.input.addEventListener("click",(e=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()}))}attributeChangedCallback(name,oldValue,newValue){oldValue!==newValue&&("disabled"===name?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===name&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
+const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: inline-flex;\n    }\n    :host(:active) .thumb{\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n    }\n    label{\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        transition: background 0.3s;\n        background: rgba(var(--text-color,inherit), 0.4);\n        box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:focus-visible .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color,inherit), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        justify-content: center;\n        align-items: center;\n        border-radius: 1rem;\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n        transition: 0.3s ease;\n        background-color: inherit;\n    }\n    \n    input:checked ~ .thumb {\n        transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color, teal);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(val){val?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(value){value?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch=()=>{this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))};connectedCallback(){this.addEventListener("keydown",(e=>{" "!==e.key||this.isDisabled||(e.preventDefault(),this.input.click())})),this.input.addEventListener("click",(e=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()}))}attributeChangedCallback(name,oldValue,newValue){oldValue!==newValue&&("disabled"===name?this.hasAttribute("disabled")?(this.disabled=!0,this.inert=!0):(this.disabled=!1,this.inert=!1):"checked"===name&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});

components/dist/textarea.min.js

@@ -1 +1 @@
-const smTextarea=document.createElement("template");smTextarea.innerHTML='\n    <style>\n    *,\n    *::before,\n    *::after { \n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    ::-moz-focus-inner{\n        border: none;\n    }\n    .hide{\n        opacity: 0 !important;\n    }\n    :host{\n        display: grid;\n        --danger-color: red;\n        --border-radius: 0.3rem;\n        --background: rgba(var(--text-color,(17,17,17)), 0.06);\n        --padding: initial;\n        --max-height: 8rem;\n    }\n    :host([variant="outlined"]) .textarea {\n        box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n    }\n    .textarea{\n        display: grid;\n        position: relative;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n        grid-template-columns: 1fr;\n        align-items: stretch;\n        max-height: var(--max-height);\n        background: var(--background);\n        border-radius: var(--border-radius);\n        padding: var(--padding);\n        transition: opacity 0.3s, box-shadow 0.2s;\n    }\n    .textarea::after,\n    textarea{\n        padding: var(--padding,0.6rem 0.8rem);\n        width: 100%;\n        min-width: 1em;\n        font: inherit;\n        color: inherit;\n        resize: none;\n        grid-area: 2/1;\n        justify-self: stretch;\n        background: none;\n        appearance: none;\n        border: none;\n        outline: none;\n        line-height: 1.5;\n        overflow: hidden auto;\n    }\n    .textarea::after{\n        content: attr(data-value) \' \';\n        visibility: hidden;\n        white-space: pre-wrap;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        hyphens: auto;\n    }\n    .readonly{\n        pointer-events: none;\n    }\n    .textarea:focus-within:not(.readonly){\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    .placeholder{\n        margin: var(--padding,0.6rem 0.8rem);\n        opacity: .7;\n        font-weight: inherit;\n        font-size: inherit;\n        line-height: 1.5;\n        pointer-events: none;\n        user-select: none;\n        grid-area: 2/1;\n    }\n    :host([disabled]) .textarea{\n        cursor: not-allowed;\n        opacity: 0.6;\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n            height: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color,(17,17,17)), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color,(17,17,17)), 0.5);\n            }\n        }\n    }\n    </style>\n    <label class="textarea" part="textarea">\n        <span class="placeholder"></span>\n        <textarea rows="1"></textarea>\n    </label>\n    ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
+const smTextarea=document.createElement("template");smTextarea.innerHTML='\n    <style>\n    *,\n    *::before,\n    *::after { \n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    ::-moz-focus-inner{\n        border: none;\n    }\n    .hide{\n        opacity: 0 !important;\n    }\n    :host{\n        display: grid;\n        --danger-color: red;\n        --border-radius: 0.3rem;\n        --background: rgba(var(--text-color,(17,17,17)), 0.06);\n        --padding: initial;\n        --max-height: 8rem;\n    }\n    :host([variant="outlined"]) .textarea {\n        box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n    }\n    .textarea{\n        display: grid;\n        position: relative;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n        grid-template-columns: 1fr;\n        align-items: stretch;\n        max-height: var(--max-height);\n        background: var(--background);\n        border-radius: var(--border-radius);\n        padding: var(--padding);\n        transition: opacity 0.3s, box-shadow 0.2s;\n    }\n    .textarea::after,\n    textarea{\n        padding: var(--padding,0.6rem 0.8rem);\n        width: 100%;\n        min-width: 1em;\n        font: inherit;\n        color: inherit;\n        resize: none;\n        grid-area: 2/1;\n        justify-self: stretch;\n        background: none;\n        appearance: none;\n        border: none;\n        outline: none;\n        line-height: 1.5;\n        overflow: hidden auto;\n    }\n    .textarea::after{\n        content: attr(data-value) \' \';\n        visibility: hidden;\n        white-space: pre-wrap;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        hyphens: auto;\n    }\n    .readonly{\n        pointer-events: none;\n    }\n    .textarea:focus-within:not(.readonly){\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    .placeholder{\n        margin: var(--padding,0.6rem 0.8rem);\n        opacity: .7;\n        font-weight: inherit;\n        font-size: inherit;\n        line-height: 1.5;\n        pointer-events: none;\n        user-select: none;\n        grid-area: 2/1;\n    }\n    :host([disabled]) .textarea{\n        cursor: not-allowed;\n        opacity: 0.6;\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n            height: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color,(17,17,17)), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color,(17,17,17)), 0.5);\n            }\n        }\n    }\n    </style>\n    <label class="textarea" part="textarea">\n        <span class="placeholder"></span>\n        <textarea rows="1"></textarea>\n    </label>\n    ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(val){this.setAttribute("value",val),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(val){val?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",(e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()}))}attributeChangedCallback(name,oldValue,newValue){this.reflectedAttributes.includes(name)?this.hasAttribute(name)?this.textarea.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.textContent.removeAttribute(name):"placeholder"===name?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===name&&(this.textarea.value=newValue,this.textareaBox.dataset.value=newValue,this.checkInput())}});

components/test.html

@@ -23,6 +23,7 @@
     <script src="dist/strip-select.js"></script>
     <script src="dist/collapsed-text.js"></script>
     <script src="dist/notifications.js"></script>
+    <script src="dist/syntax-highlighter.js"></script>
     <link rel="stylesheet" href="css/main.min.css">
     <style>
         div {
@@ -38,63 +39,21 @@
 
 <body>
     <sm-copy value="hi dhf jsbdjf sjdb"></sm-copy>
+    <syntax-highlighter language="html">
+        <sm-copy value="hi dhf jsbdjf sjdb">
+            <sm-button>
+                hi
+            </sm-button>
+        </sm-copy>
+    </syntax-highlighter>
+    <sm-input></sm-input>
 </body>
 <script>
-    let currentSubscriber = null;
-    /**
-     * @param {any} initialValue - initial value for the signal
-     * @returns {array} - array containing getter and setter for the signal
-     * @example
-     * const [getCount, setCount] = $signal(0);
-     */
-    function $signal(initialValue) {
-        let value = initialValue;
-        const subscribers = new Set();
-
-        function getter() {
-            if (currentSubscriber) {
-                const weakRef = new WeakRef({ func: currentSubscriber });
-                subscribers.add(weakRef);
-            }
-            return value;
-        }
-
-        function setter(newValue) {
-            if (newValue !== value) {
-                value = newValue;
-                for (const subscriber of subscribers) {
-                    const ref = subscriber.deref();
-                    if (ref) {
-                        ref.func();
-                    }
-                }
-            }
-        }
-
-        return [getter, setter];
-    }
-    /**
-     * 
-     * @param {function} fn - function that will run if any of its dependent signals change
-     * @example
-     * $effect(() => {
-     * console.log(count());
-     * } 
-     * @returns {void}
-     */
-    async function $effect(fn) {
-        currentSubscriber = fn;
-        const result = fn();
-        try {
-            if (result instanceof Promise) {
-                await result;
-            }
-        } catch (e) {
-            console.error(e)
-        } finally {
-            currentSubscriber = null;
-        }
-    }
+    setInterval(() => {
+        const random = Math.random().toString(36).substring(7);
+        console.log(random);
+        document.querySelector('sm-input').value = random;
+    }, 3000);
 </script>
 
 </html>

components/test.min.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Document</title><script src=dist/select.js></script><script src=dist/form.js></script><script src=dist/popup.js></script><script src=dist/switch.js></script><script src=dist/checkbox.js></script><script src=dist/radio.js></script><script src=dist/input.js></script><script src=dist/textarea.js></script><script src=dist/text-field.js></script><script src=dist/button.js></script><script src=dist/menu.js></script><script src=dist/cube-loader.js></script><script src=dist/tags-input.js></script><script src=dist/strip-select.js></script><script src=dist/collapsed-text.js></script><script src=dist/notifications.js></script><link rel=stylesheet href=css/main.min.css><style>div{display:flex;padding:4vmax}body{overflow:auto}</style></head><body><sm-form><sm-input placeholder=fafh value="" animate required><sm-button slot=right type=submit>Submit</sm-button></sm-input><button type=submit>Submit</button></sm-form></body><script>document.querySelector("sm-input").isValid;let currentSubscriber=null;function $signal(r){let c=r;const t=new Set;return[function(){var r;return currentSubscriber&&(r=new WeakRef({func:currentSubscriber}),t.add(r)),c},function(r){if(r!==c){c=r;for(const n of t){var e=n.deref();e&&e.func()}}}]}async function $effect(r){r=(currentSubscriber=r)();try{r instanceof Promise&&await r}catch(r){console.error(r)}finally{currentSubscriber=null}}</script></html>
+<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Document</title> <script src="dist/copy.js"></script> <script src="dist/select.js"></script> <script src="dist/form.js"></script> <script src="dist/popup.js"></script> <script src="dist/switch.js"></script> <script src="dist/checkbox.js"></script> <script src="dist/radio.js"></script> <script src="dist/input.js"></script> <script src="dist/textarea.js"></script> <script src="dist/text-field.js"></script> <script src="dist/button.js"></script> <script src="dist/menu.js"></script> <script src="dist/cube-loader.js"></script> <script src="dist/tags-input.js"></script> <script src="dist/strip-select.js"></script> <script src="dist/collapsed-text.js"></script> <script src="dist/notifications.js"></script> <script src="dist/syntax-highlighter.js"></script> <link rel="stylesheet" href="css/main.min.css"> <style>div{display:flex;padding:4vmax}body{overflow:auto}</style> </head> <body>  <syntax-highlighter language="html"> <sm-copy value="hi dhf jsbdjf sjdb"> <sm-button> hi </sm-button> </sm-copy> </syntax-highlighter>  <script>let currentSubscriber=null;function $signal(n){let r=n;const c=new Set;return[function(){if(currentSubscriber){const n=new WeakRef({func:currentSubscriber});c.add(n)}return r},function(n){if(n!==r){r=n;for(const n of c){const r=n.deref();r&&r.func()}}}]}async function $effect(n){currentSubscriber=n;const r=n();try{r instanceof Promise&&await r}catch(n){console.error(n)}finally{currentSubscriber=null}}</script> 

main_UI.js

@@ -274,7 +274,8 @@ function notify(message, mode, options = {}) {
             break;
         case 'error':
             icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
-            options.pinned = true
+            if (!options.hasOwnProperty('timeout'))
+                options.pinned = true
             break;
     }
     if (mode === 'error') {