@alaskaairux/auro-checkbox - npm Package Compare versions

Comparing version 1.1.11 to 1.2.0

CHANGELOG.md

 # Semantic Release Automated Changelog
 
+# [1.2.0](https://github.com/AlaskaAirlines/auro-checkbox/compare/v1.1.11...v1.2.0) (2022-11-29)
+
+
+### Features
+
+* **validity:** add new html5 validity to component [#68](https://github.com/AlaskaAirlines/auro-checkbox/issues/68) ([a1cfa39](https://github.com/AlaskaAirlines/auro-checkbox/commit/a1cfa39c2a5a4fd1bf69e71ac2cb1b4232a801b9))
+
 ## [1.1.11](https://github.com/AlaskaAirlines/auro-checkbox/compare/v1.1.10...v1.1.11) (2022-06-10)
@@ -4,0 +11,0 @@

dist/auro-checkbox__bundled.js

@@ -1,5 +0,4 @@
-!function(){"use strict";var r,o={907:function(r,o,e){var i=e(148),t=e(499),a=e(577),l=(e(209),i.iv`*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}@media (prefers-reduced-motion: reduce){*,*:before,*:after{-webkit-transition:none !important;-o-transition:none !important;transition:none !important;-webkit-animation:none !important;animation:none !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.js-focus-visible :focus:not(.focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:-webkit-box;display:-ms-flexbox;display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host([error]){color:#df0b37;color:var(--auro-color-text-error-on-light)}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .cbxGroup{display:block;background-color:#0074cb;background-color:var(--auro-color-brand-atlas-400);padding-right:0.5rem;padding-right:var(--auro-size-xs)}:host(.focus-visible) .cbxGroup .cbx--input{background-color:#0074cb;background-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .cbx--input+label{color:#ffffff;color:var(--auro-color-base-white)}:host(.focus-visible) .cbxGroup .label--cbx:before{border-color:#0074cb;border-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .label--cbx:after{border-color:#ffffff;border-color:var(--auro-color-base-white);background-color:#ffffff;background-color:var(--auro-color-base-white)}fieldset{all:unset}@media screen and (min-width: 660px){.displayFlex slot{display:-webkit-box;display:-ms-flexbox;display:flex}.displayFlex slot .ods-inputGroup{margin-left:10px}.displayFlex slot .ods-inputGroup:first-child{margin-left:0}}.cbxGroup{position:relative;padding-left:0.5rem;padding-left:var(--auro-size-xs);padding-right:0.5rem;padding-right:var(--auro-size-xs);line-height:calc((2rem) + (0.25rem));line-height:calc((var(--auro-size-xl)) + (var(--auro-size-xxs)))}.cbx--input:disabled+label{color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.cbx--input:disabled+.label--cbx:before{border-color:#ffffff;border-color:var(--auro-color-base-white)}.cbx--input:disabled+.label--cbx:after{border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.label--cbx:after{opacity:1;background-color:#0074cb;background-color:var(--auro-color-ui-default-on-light);border-color:#0074cb;border-color:var(--auro-color-border-active-on-light)}.cbx--input:checked+.label--cbx:before{-webkit-transition:background-color 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);-o-transition:background-color 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);transition:background-color 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);opacity:1}.cbx--input:checked:disabled+.label--cbx:after{background-color:#dbdbdb;background-color:var(--auro-color-brand-gray-200);border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.errorBorder:before{border-color:#ffffff;border-color:var(--auro-color-base-white)}.cbx--input:checked+.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light);background-color:#df0b37;background-color:var(--auro-color-border-error-on-light)}.label{margin-left:2rem;margin-left:var(--auro-size-xl);display:block}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:'';top:0.25rem;top:var(--auro-size-xxs);left:0.5rem;left:var(--auro-size-xs);width:1.5rem;width:var(--auro-size-lg);height:1.5rem;height:var(--auro-size-lg);border-width:1px;border-style:solid;border-color:#222222;border-color:var(--auro-color-base-gray-500);border-radius:0.375rem;border-radius:var(--auro-border-radius);z-index:0;background-color:#ffffff;background-color:var(--auro-color-base-white)}.label--cbx:before{content:'';position:absolute;opacity:0;pointer-events:none;z-index:1;top:6px;left:18px;width:6px;height:18px;border-style:solid;border-color:#ffffff;border-color:var(--auro-color-base-white);border-width:2px;border-top-width:0;border-left-width:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.errorText{color:#df0b37;color:var(--auro-color-text-error-on-light);margin-bottom:0}.label--cbx.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light)}
-`);class c extends i.oi{constructor(){super(),this.checked=!1,this.disabled=!1,this.required=!1,this.error=!1}static get styles(){return i.iv`
+!function(){"use strict";var r,o={907:function(r,o,e){var i=e(148),t=e(499),a=e(577),l=(e(209),i.iv`*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{-webkit-animation-duration:.01ms !important;animation-duration:.01ms !important;-webkit-animation-iteration-count:1 !important;animation-iteration-count:1 !important;-webkit-transition-duration:.01ms !important;-o-transition-duration:.01ms !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.js-focus-visible :focus:not(.focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:-webkit-box;display:-ms-flexbox;display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .cbxGroup{display:block;background-color:#0074c8;background-color:var(--auro-color-brand-atlas-400);padding-right:.5rem;padding-right:var(--auro-size-xs)}:host(.focus-visible) .cbxGroup .cbx--input{background-color:#0074c8;background-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .cbx--input+label{color:#fff;color:var(--auro-color-base-white)}:host(.focus-visible) .cbxGroup .label--cbx:before{border-color:#0074c8;border-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .label--cbx:after{border-color:#fff;border-color:var(--auro-color-base-white);background-color:#fff;background-color:var(--auro-color-base-white)}fieldset{all:unset}@media screen and (min-width: 660px){.displayFlex slot{display:-webkit-box;display:-ms-flexbox;display:flex}.displayFlex slot .ods-inputGroup{margin-left:10px}.displayFlex slot .ods-inputGroup:first-child{margin-left:0}}.cbxGroup{position:relative;padding-left:.5rem;padding-left:var(--auro-size-xs);padding-right:.5rem;padding-right:var(--auro-size-xs);line-height:2.25rem;line-height:calc((var(--auro-size-xl)) + (var(--auro-size-xxs)))}.cbx--input:disabled+label{color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.cbx--input:disabled+.label--cbx:before{border-color:#fff;border-color:var(--auro-color-base-white)}.cbx--input:disabled+.label--cbx:after{border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.label--cbx:after{opacity:1;background-color:#0074c8;background-color:var(--auro-color-ui-default-on-light);border-color:#0074c8;border-color:var(--auro-color-border-active-on-light)}.cbx--input:checked+.label--cbx:before{-webkit-transition:background-color .2s cubic-bezier(0.35, 0.9, 0.4, 0.9);-o-transition:background-color .2s cubic-bezier(0.35, 0.9, 0.4, 0.9);transition:background-color .2s cubic-bezier(0.35, 0.9, 0.4, 0.9);opacity:1}.cbx--input:checked:disabled+.label--cbx:after{background-color:#dbdbdb;background-color:var(--auro-color-brand-gray-200);border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.errorBorder:before{border-color:#fff;border-color:var(--auro-color-base-white)}.cbx--input:checked+.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light);background-color:#df0b37;background-color:var(--auro-color-border-error-on-light)}.label{margin-left:2rem;margin-left:var(--auro-size-xl);display:block}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:.25rem;top:var(--auro-size-xxs);left:.5rem;left:var(--auro-size-xs);width:1.5rem;width:var(--auro-size-lg);height:1.5rem;height:var(--auro-size-lg);border-width:1px;border-style:solid;border-color:#222;border-color:var(--auro-color-base-gray-500);border-radius:.375rem;border-radius:var(--auro-border-radius);z-index:0;background-color:#fff;background-color:var(--auro-color-base-white)}.label--cbx:before{content:"";position:absolute;opacity:0;pointer-events:none;z-index:1;top:6px;left:18px;width:6px;height:18px;border-style:solid;border-color:#fff;border-color:var(--auro-color-base-white);border-width:2px;border-top-width:0;border-left-width:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.label--cbx.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light)}`);class n extends i.oi{constructor(){super(),this.checked=!1,this.disabled=!1,this.required=!1,this.error=!1}static get styles(){return i.iv`
       ${l}
-    `}static get properties(){return{checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},error:{type:Boolean,reflect:!0},id:{type:String},name:{type:String},value:{type:String}}}handleChange(r){this.checked=r.target.checked;const o=new CustomEvent(r.type,r);this.dispatchEvent(o)}handleInput(r){this.checked=r.target.checked}invalid(r){return r?"true":"false"}isRequired(r){return r?"true":"false"}render(){const r={label:!0,"label--cbx":!0,errorBorder:this.error};return i.dy`
+    `}static get properties(){return{checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},error:{type:Boolean,reflect:!0},id:{type:String},name:{type:String},value:{type:String}}}handleChange(r){this.checked=r.target.checked;const o=new CustomEvent(r.type,r);this.dispatchEvent(o)}handleInput(r){this.checked=r.target.checked,this.dispatchEvent(new CustomEvent("auroCheckbox-input",{bubbles:!0,cancelable:!1,composed:!0}))}invalid(r){return r?"true":"false"}isRequired(r){return r?"true":"false"}handleFocusin(){this.dispatchEvent(new CustomEvent("auroCheckbox-focusin",{bubbles:!0,cancelable:!1,composed:!0}))}firstUpdated(){this.addEventListener("click",(()=>{this.handleFocusin()})),this.addEventListener("focusin",(()=>{this.handleFocusin()})),this.addEventListener("focusout",(()=>{this.dispatchEvent(new CustomEvent("auroCheckbox-focusout",{bubbles:!0,cancelable:!1,composed:!0}))}))}render(){const r={label:!0,"label--cbx":!0,errorBorder:this.error};return i.dy`
       <div class="cbxGroup">
@@ -24,2 +23,2 @@ <input
       </div>
-    `}}customElements.get("auro-checkbox")||customElements.define("auro-checkbox",c)}},e={};function i(r){var t=e[r];if(void 0!==t)return t.exports;var a=e[r]={exports:{}};return o[r](a,a.exports,i),a.exports}i.m=o,r=[],i.O=function(o,e,t,a){if(!e){var l=1/0;for(s=0;s<r.length;s++){e=r[s][0],t=r[s][1],a=r[s][2];for(var c=!0,n=0;n<e.length;n++)(!1&a||l>=a)&&Object.keys(i.O).every((function(r){return i.O[r](e[n])}))?e.splice(n--,1):(c=!1,a<l&&(l=a));if(c){r.splice(s--,1);var d=t();void 0!==d&&(o=d)}}return o}a=a||0;for(var s=r.length;s>0&&r[s-1][2]>a;s--)r[s]=r[s-1];r[s]=[e,t,a]},i.d=function(r,o){for(var e in o)i.o(o,e)&&!i.o(r,e)&&Object.defineProperty(r,e,{enumerable:!0,get:o[e]})},i.o=function(r,o){return Object.prototype.hasOwnProperty.call(r,o)},function(){var r={351:0};i.O.j=function(o){return 0===r[o]};var o=function(o,e){var t,a,l=e[0],c=e[1],n=e[2],d=0;if(l.some((function(o){return 0!==r[o]}))){for(t in c)i.o(c,t)&&(i.m[t]=c[t]);if(n)var s=n(i)}for(o&&o(e);d<l.length;d++)a=l[d],i.o(r,a)&&r[a]&&r[a][0](),r[l[d]]=0;return i.O(s)},e=self.webpackChunk_alaskaairux_auro_checkbox=self.webpackChunk_alaskaairux_auro_checkbox||[];e.forEach(o.bind(null,0)),e.push=o.bind(null,e.push.bind(e))}();var t=i.O(void 0,[429],(function(){return i(907)}));t=i.O(t)}();
+    `}}customElements.get("auro-checkbox")||customElements.define("auro-checkbox",n)}},e={};function i(r){var t=e[r];if(void 0!==t)return t.exports;var a=e[r]={exports:{}};return o[r](a,a.exports,i),a.exports}i.m=o,r=[],i.O=function(o,e,t,a){if(!e){var l=1/0;for(d=0;d<r.length;d++){e=r[d][0],t=r[d][1],a=r[d][2];for(var n=!0,c=0;c<e.length;c++)(!1&a||l>=a)&&Object.keys(i.O).every((function(r){return i.O[r](e[c])}))?e.splice(c--,1):(n=!1,a<l&&(l=a));if(n){r.splice(d--,1);var s=t();void 0!==s&&(o=s)}}return o}a=a||0;for(var d=r.length;d>0&&r[d-1][2]>a;d--)r[d]=r[d-1];r[d]=[e,t,a]},i.d=function(r,o){for(var e in o)i.o(o,e)&&!i.o(r,e)&&Object.defineProperty(r,e,{enumerable:!0,get:o[e]})},i.o=function(r,o){return Object.prototype.hasOwnProperty.call(r,o)},function(){var r={351:0};i.O.j=function(o){return 0===r[o]};var o=function(o,e){var t,a,l=e[0],n=e[1],c=e[2],s=0;if(l.some((function(o){return 0!==r[o]}))){for(t in n)i.o(n,t)&&(i.m[t]=n[t]);if(c)var d=c(i)}for(o&&o(e);s<l.length;s++)a=l[s],i.o(r,a)&&r[a]&&r[a][0](),r[l[s]]=0;return i.O(d)},e=self.webpackChunk_alaskaairux_auro_checkbox=self.webpackChunk_alaskaairux_auro_checkbox||[];e.forEach(o.bind(null,0)),e.push=o.bind(null,e.push.bind(e))}();var t=i.O(void 0,[429],(function(){return i(907)}));t=i.O(t)}();

dist/auro-checkbox-css.js

 import {css} from 'lit-element';
-export default css`*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}@media (prefers-reduced-motion: reduce){*,*:before,*:after{-webkit-transition:none !important;-o-transition:none !important;transition:none !important;-webkit-animation:none !important;animation:none !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.js-focus-visible :focus:not(.focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:-webkit-box;display:-ms-flexbox;display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host([error]){color:#df0b37;color:var(--auro-color-text-error-on-light)}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .cbxGroup{display:block;background-color:#0074cb;background-color:var(--auro-color-brand-atlas-400);padding-right:0.5rem;padding-right:var(--auro-size-xs)}:host(.focus-visible) .cbxGroup .cbx--input{background-color:#0074cb;background-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .cbx--input+label{color:#ffffff;color:var(--auro-color-base-white)}:host(.focus-visible) .cbxGroup .label--cbx:before{border-color:#0074cb;border-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .label--cbx:after{border-color:#ffffff;border-color:var(--auro-color-base-white);background-color:#ffffff;background-color:var(--auro-color-base-white)}fieldset{all:unset}@media screen and (min-width: 660px){.displayFlex slot{display:-webkit-box;display:-ms-flexbox;display:flex}.displayFlex slot .ods-inputGroup{margin-left:10px}.displayFlex slot .ods-inputGroup:first-child{margin-left:0}}.cbxGroup{position:relative;padding-left:0.5rem;padding-left:var(--auro-size-xs);padding-right:0.5rem;padding-right:var(--auro-size-xs);line-height:calc((2rem) + (0.25rem));line-height:calc((var(--auro-size-xl)) + (var(--auro-size-xxs)))}.cbx--input:disabled+label{color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.cbx--input:disabled+.label--cbx:before{border-color:#ffffff;border-color:var(--auro-color-base-white)}.cbx--input:disabled+.label--cbx:after{border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.label--cbx:after{opacity:1;background-color:#0074cb;background-color:var(--auro-color-ui-default-on-light);border-color:#0074cb;border-color:var(--auro-color-border-active-on-light)}.cbx--input:checked+.label--cbx:before{-webkit-transition:background-color 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);-o-transition:background-color 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);transition:background-color 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);opacity:1}.cbx--input:checked:disabled+.label--cbx:after{background-color:#dbdbdb;background-color:var(--auro-color-brand-gray-200);border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.errorBorder:before{border-color:#ffffff;border-color:var(--auro-color-base-white)}.cbx--input:checked+.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light);background-color:#df0b37;background-color:var(--auro-color-border-error-on-light)}.label{margin-left:2rem;margin-left:var(--auro-size-xl);display:block}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:'';top:0.25rem;top:var(--auro-size-xxs);left:0.5rem;left:var(--auro-size-xs);width:1.5rem;width:var(--auro-size-lg);height:1.5rem;height:var(--auro-size-lg);border-width:1px;border-style:solid;border-color:#222222;border-color:var(--auro-color-base-gray-500);border-radius:0.375rem;border-radius:var(--auro-border-radius);z-index:0;background-color:#ffffff;background-color:var(--auro-color-base-white)}.label--cbx:before{content:'';position:absolute;opacity:0;pointer-events:none;z-index:1;top:6px;left:18px;width:6px;height:18px;border-style:solid;border-color:#ffffff;border-color:var(--auro-color-base-white);border-width:2px;border-top-width:0;border-left-width:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.errorText{color:#df0b37;color:var(--auro-color-text-error-on-light);margin-bottom:0}.label--cbx.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light)}
-`;
+export default css`*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{-webkit-animation-duration:.01ms !important;animation-duration:.01ms !important;-webkit-animation-iteration-count:1 !important;animation-iteration-count:1 !important;-webkit-transition-duration:.01ms !important;-o-transition-duration:.01ms !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.js-focus-visible :focus:not(.focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:-webkit-box;display:-ms-flexbox;display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .cbxGroup{display:block;background-color:#0074c8;background-color:var(--auro-color-brand-atlas-400);padding-right:.5rem;padding-right:var(--auro-size-xs)}:host(.focus-visible) .cbxGroup .cbx--input{background-color:#0074c8;background-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .cbx--input+label{color:#fff;color:var(--auro-color-base-white)}:host(.focus-visible) .cbxGroup .label--cbx:before{border-color:#0074c8;border-color:var(--auro-color-brand-atlas-400)}:host(.focus-visible) .cbxGroup .label--cbx:after{border-color:#fff;border-color:var(--auro-color-base-white);background-color:#fff;background-color:var(--auro-color-base-white)}fieldset{all:unset}@media screen and (min-width: 660px){.displayFlex slot{display:-webkit-box;display:-ms-flexbox;display:flex}.displayFlex slot .ods-inputGroup{margin-left:10px}.displayFlex slot .ods-inputGroup:first-child{margin-left:0}}.cbxGroup{position:relative;padding-left:.5rem;padding-left:var(--auro-size-xs);padding-right:.5rem;padding-right:var(--auro-size-xs);line-height:2.25rem;line-height:calc((var(--auro-size-xl)) + (var(--auro-size-xxs)))}.cbx--input:disabled+label{color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.cbx--input:disabled+.label--cbx:before{border-color:#fff;border-color:var(--auro-color-base-white)}.cbx--input:disabled+.label--cbx:after{border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.label--cbx:after{opacity:1;background-color:#0074c8;background-color:var(--auro-color-ui-default-on-light);border-color:#0074c8;border-color:var(--auro-color-border-active-on-light)}.cbx--input:checked+.label--cbx:before{-webkit-transition:background-color .2s cubic-bezier(0.35, 0.9, 0.4, 0.9);-o-transition:background-color .2s cubic-bezier(0.35, 0.9, 0.4, 0.9);transition:background-color .2s cubic-bezier(0.35, 0.9, 0.4, 0.9);opacity:1}.cbx--input:checked:disabled+.label--cbx:after{background-color:#dbdbdb;background-color:var(--auro-color-brand-gray-200);border-color:#dbdbdb;border-color:var(--auro-color-text-disabled-on-light)}.cbx--input:checked+.errorBorder:before{border-color:#fff;border-color:var(--auro-color-base-white)}.cbx--input:checked+.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light);background-color:#df0b37;background-color:var(--auro-color-border-error-on-light)}.label{margin-left:2rem;margin-left:var(--auro-size-xl);display:block}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:.25rem;top:var(--auro-size-xxs);left:.5rem;left:var(--auro-size-xs);width:1.5rem;width:var(--auro-size-lg);height:1.5rem;height:var(--auro-size-lg);border-width:1px;border-style:solid;border-color:#222;border-color:var(--auro-color-base-gray-500);border-radius:.375rem;border-radius:var(--auro-border-radius);z-index:0;background-color:#fff;background-color:var(--auro-color-base-white)}.label--cbx:before{content:"";position:absolute;opacity:0;pointer-events:none;z-index:1;top:6px;left:18px;width:6px;height:18px;border-style:solid;border-color:#fff;border-color:var(--auro-color-base-white);border-width:2px;border-top-width:0;border-left-width:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.label--cbx.errorBorder:after{border-color:#df0b37;border-color:var(--auro-color-border-error-on-light)}`;

dist/auro-checkbox-group__bundled.js

@@ -1,11 +0,16 @@
-!function(){"use strict";var e,r={295:function(e,r,t){var o=t(148),i=t(499),s=(t(209),o.iv`:host{display:block;padding-bottom:1rem;padding-bottom:var(--auro-size-md)}:host([error]){color:#df0b37;color:var(--auro-color-text-error-on-light)}:host([disabled]){color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.displayFlex legend+slot{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:1rem;margin-bottom:var(--auro-size-md)}.errorText{color:#df0b37;color:var(--auro-color-text-error-on-light)}
-`);class a extends o.oi{constructor(){super(),this.index=0,this.maxNumber=3,this.disabled=!1,this.horizontal=!1,this.required=!1}static get styles(){return o.iv`
-      ${s}
-    `}static get properties(){return{disabled:{type:Boolean,reflect:!0},horizontal:{type:Boolean},required:{type:Boolean},error:{type:String,reflect:!0}}}connectedCallback(){super.connectedCallback(),this.handleItems()}handleItems(){this.items=Array.from(this.querySelectorAll("auro-checkbox")),(this.disabled||this.error)&&this.items.forEach((e=>{e.disabled=Boolean(this.disabled),e.required=Boolean(this.required),e.error=Boolean(this.error)}))}updated(e){this.disabled&&e.has("disabled")&&this.items.forEach((e=>{e.disabled=this.disabled})),e.has("required")&&this.items.forEach((e=>{e.required=this.required})),e.has("error")&&this.items.forEach((e=>{e.error=Boolean(this.error)}))}render(){const e={displayFlex:this.horizontal&&this.items.length<=this.maxNumber};return o.dy`
-      <fieldset class="${(0,i.$)(e)}">
-        ${this.required?o.dy`<legend><slot name="legend"></slot></legend>`:o.dy`<legend><slot name="legend"></slot> (optional)</legend>`}
+!function(){"use strict";var e,t={295:function(e,t,i){var s=i(148),o=i(499),r=(i(209),s.iv`:host{display:block;padding-bottom:1rem;padding-bottom:var(--auro-size-md);color:#222;color:var(--auro-color-text-primary-on-light)}:host([disabled]){color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.displayFlex legend+slot{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:1rem;margin-bottom:var(--auro-size-md)}.checkboxGroupElement-helpText{color:#626b79;color:var(--auro-color-text-secondary-on-light)}:host([validity]:not([validity=valid])) .checkboxGroupElement-helpText{color:#df0b37;color:var(--auro-color-alert-error-on-light)}`);class a extends s.oi{constructor(){super(),this.validity=void 0,this.value=void 0,this.index=0,this.maxNumber=3,this.disabled=!1,this.horizontal=!1,this.required=!1}static get styles(){return s.iv`
+      ${r}
+    `}static get properties(){return{disabled:{type:Boolean,reflect:!0},horizontal:{type:Boolean},value:{type:Array},noValidate:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},error:{type:String,reflect:!0},setCustomValidity:{type:String},setCustomValidityCustomError:{type:String},setCustomValidityValueMissing:{type:String},validity:{type:String,reflect:!0}}}connectedCallback(){super.connectedCallback(),this.handleItems()}validate(){this.hasAttribute("error")?(this.validity="customError",this.setCustomValidity=this.error):void 0===this.value||this.noValidate?(this.validity=void 0,this.removeAttribute("validity")):(this.validity="valid",this.setCustomValidity="",this.value&&0!==this.value.length||!this.required||(this.validity="valueMissing",this.setCustomValidity=this.setCustomValidityValueMissing)),this.validity&&"valid"!==this.validity?(this.isValid=!1,this.ValidityMessageOverride&&(this.setCustomValidity=this.ValidityMessageOverride)):this.isValid=!0,this.error||this.validity&&"valid"!==this.validity?this.items.forEach((e=>{e.setAttribute("error","")})):this.items.forEach((e=>{e.removeAttribute("error")}))}handleValueUpdate(e,t){if(t)this.value.includes(e)||this.value.push(e);else if(this.value.indexOf(e)>-1){const t=this.value.indexOf(e);this.value.splice(t,1)}this.dispatchEvent(new CustomEvent("input",{bubbles:!0,cancelable:!1,composed:!0})),this.validate()}firstUpdated(){const e=function(t){document.auroCheckboxGroupActive&&!document.auroCheckboxGroupActive.contains(t.target)&&(document.auroCheckboxGroupActive.focusWithin=!1,window.removeEventListener("focusin",e),document.removeEventListener("click",e),document.auroCheckboxGroupActive.validate())};this.addEventListener("auroCheckbox-focusin",(()=>{this.value||(this.value=[]),this.focusWithin||document.addEventListener("click",e),this.focusWithin=!0})),this.addEventListener("auroCheckbox-focusout",(()=>{document.auroCheckboxGroupActive=this,this.focusWithin?window.addEventListener("focusin",e):this.focusWithin=!0})),this.addEventListener("auroCheckbox-input",(e=>{this.handleValueUpdate(e.target.value,e.target.checked)}))}handlePreselectedItems(){let e=!1;this.items.forEach((t=>{t.hasAttribute("checked")&&void 0===this.value&&(e=!0)})),e&&(this.value||(this.value=[]),this.items.forEach((e=>{this.handleValueUpdate(e.getAttribute("value"),Boolean(e.hasAttribute("checked")))})))}handleItems(){this.items=Array.from(this.querySelectorAll("auro-checkbox")),this.handlePreselectedItems(),this.disabled&&this.items.forEach((e=>{e.disabled=Boolean(this.disabled)})),this.validate()}updated(e){this.disabled&&e.has("disabled")&&this.items.forEach((e=>{e.disabled=this.disabled})),e.has("required")&&this.items.forEach((e=>{e.required=this.required})),e.has("error")&&this.validate()}render(){const e={displayFlex:this.horizontal&&this.items.length<=this.maxNumber};return s.dy`
+      <fieldset class="${(0,o.$)(e)}">
+        ${this.required?s.dy`<legend><slot name="legend"></slot></legend>`:s.dy`<legend><slot name="legend"></slot> (optional)</legend>`}
         <slot @slotchange=${this.handleItems}></slot>
       </fieldset>
 
-      ${this.error?o.dy`<p role="alert" aria-live="assertive" class="errorText">${this.error}</p>`:o.dy``}
-    `}}customElements.get("auro-checkbox-group")||customElements.define("auro-checkbox-group",a)}},t={};function o(e){var i=t[e];if(void 0!==i)return i.exports;var s=t[e]={exports:{}};return r[e](s,s.exports,o),s.exports}o.m=r,e=[],o.O=function(r,t,i,s){if(!t){var a=1/0;for(c=0;c<e.length;c++){t=e[c][0],i=e[c][1],s=e[c][2];for(var l=!0,n=0;n<t.length;n++)(!1&s||a>=s)&&Object.keys(o.O).every((function(e){return o.O[e](t[n])}))?t.splice(n--,1):(l=!1,s<a&&(a=s));if(l){e.splice(c--,1);var d=i();void 0!==d&&(r=d)}}return r}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[t,i,s]},o.d=function(e,r){for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},function(){var e={755:0};o.O.j=function(r){return 0===e[r]};var r=function(r,t){var i,s,a=t[0],l=t[1],n=t[2],d=0;if(a.some((function(r){return 0!==e[r]}))){for(i in l)o.o(l,i)&&(o.m[i]=l[i]);if(n)var c=n(o)}for(r&&r(t);d<a.length;d++)s=a[d],o.o(e,s)&&e[s]&&e[s][0](),e[a[d]]=0;return o.O(c)},t=self.webpackChunk_alaskaairux_auro_checkbox=self.webpackChunk_alaskaairux_auro_checkbox||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))}();var i=o.O(void 0,[429],(function(){return o(295)}));i=o.O(i)}();
+      ${this.validity&&void 0!==this.validity&&"valid"!==this.validity?s.dy`
+          <p class="checkboxGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
+            ${this.setCustomValidity}
+          </p>`:s.dy`
+          <p class="checkboxGroupElement-helpText" part="helpText">
+            <slot name="helpText"></slot>
+          </p>`}
+    `}}customElements.get("auro-checkbox-group")||customElements.define("auro-checkbox-group",a)}},i={};function s(e){var o=i[e];if(void 0!==o)return o.exports;var r=i[e]={exports:{}};return t[e](r,r.exports,s),r.exports}s.m=t,e=[],s.O=function(t,i,o,r){if(!i){var a=1/0;for(h=0;h<e.length;h++){i=e[h][0],o=e[h][1],r=e[h][2];for(var l=!0,d=0;d<i.length;d++)(!1&r||a>=r)&&Object.keys(s.O).every((function(e){return s.O[e](i[d])}))?i.splice(d--,1):(l=!1,r<a&&(a=r));if(l){e.splice(h--,1);var n=o();void 0!==n&&(t=n)}}return t}r=r||0;for(var h=e.length;h>0&&e[h-1][2]>r;h--)e[h]=e[h-1];e[h]=[i,o,r]},s.d=function(e,t){for(var i in t)s.o(t,i)&&!s.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){var e={755:0};s.O.j=function(t){return 0===e[t]};var t=function(t,i){var o,r,a=i[0],l=i[1],d=i[2],n=0;if(a.some((function(t){return 0!==e[t]}))){for(o in l)s.o(l,o)&&(s.m[o]=l[o]);if(d)var h=d(s)}for(t&&t(i);n<a.length;n++)r=a[n],s.o(e,r)&&e[r]&&e[r][0](),e[a[n]]=0;return s.O(h)},i=self.webpackChunk_alaskaairux_auro_checkbox=self.webpackChunk_alaskaairux_auro_checkbox||[];i.forEach(t.bind(null,0)),i.push=t.bind(null,i.push.bind(i))}();var o=s.O(void 0,[429],(function(){return s(295)}));o=s.O(o)}();

dist/auro-checkbox-group-css.js

 import {css} from 'lit-element';
-export default css`:host{display:block;padding-bottom:1rem;padding-bottom:var(--auro-size-md)}:host([error]){color:#df0b37;color:var(--auro-color-text-error-on-light)}:host([disabled]){color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.displayFlex legend+slot{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:1rem;margin-bottom:var(--auro-size-md)}.errorText{color:#df0b37;color:var(--auro-color-text-error-on-light)}
-`;
+export default css`:host{display:block;padding-bottom:1rem;padding-bottom:var(--auro-size-md);color:#222;color:var(--auro-color-text-primary-on-light)}:host([disabled]){color:#dbdbdb;color:var(--auro-color-text-disabled-on-light)}.displayFlex legend+slot{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:1rem;margin-bottom:var(--auro-size-md)}.checkboxGroupElement-helpText{color:#626b79;color:var(--auro-color-text-secondary-on-light)}:host([validity]:not([validity=valid])) .checkboxGroupElement-helpText{color:#df0b37;color:var(--auro-color-alert-error-on-light)}`;

dist/auro-checkbox-group.js

@@ -6,2 +6,14 @@ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 
+/**
+ * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
+ *
+ * @attr {String} validity - Specifies the `validityState` this element is in.
+ * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
+ * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
+ * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
+ */
+
 import { LitElement, html, css } from "lit-element";
@@ -20,2 +32,5 @@ import { classMap } from 'lit-html/directives/class-map';
 
+    this.validity = undefined;
+    this.value = undefined;
+
     this.index = 0;
@@ -41,6 +56,29 @@ this.maxNumber = 3;
       horizontal: { type: Boolean },
-      required:   { type: Boolean },
+      value: {
+        type: Array
+      },
+      noValidate: {
+        type: Boolean,
+        reflect: true
+      },
+      required: {
+        type: Boolean,
+        reflect: true
+      },
       error: {
         type: String,
         reflect: true
+      },
+      setCustomValidity: {
+        type: String
+      },
+      setCustomValidityCustomError: {
+        type: String
+      },
+      setCustomValidityValueMissing: {
+        type: String
+      },
+      validity: {
+        type: String,
+        reflect: true
       }
@@ -55,12 +93,152 @@ };
 
+  /**
+   * Determines the validity state of the element.
+   * @private
+   * @returns {void}
+   */
+  /* eslint-disable max-statements */
+  validate() {
+    // Validate only if noValidate is not true and the input does not have focus
+    if (this.hasAttribute('error')) {
+      this.validity = 'customError';
+      this.setCustomValidity = this.error;
+    } else if (this.value !== undefined && !this.noValidate) {
+      this.validity = 'valid';
+      this.setCustomValidity = '';
+
+      /**
+       * Only validate once we interact with the datepicker
+       * this.value === undefined is the initial state pre-interaction.
+       *
+       * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
+       */
+      if ((!this.value || this.value.length === 0) && this.required) { // eslint-disable-line no-magic-numbers
+        this.validity = 'valueMissing';
+        this.setCustomValidity = this.setCustomValidityValueMissing;
+      }
+    } else {
+      this.validity = undefined;
+      this.removeAttribute('validity');
+    }
+
+    if (this.validity && this.validity !== 'valid') {
+      this.isValid = false;
+
+      // Use the validity message override if it is declared
+      if (this.ValidityMessageOverride) {
+        this.setCustomValidity = this.ValidityMessageOverride;
+      }
+    } else {
+      this.isValid = true;
+    }
+
+    if (this.error || (this.validity && this.validity !== 'valid')) { // eslint-disable-line  no-extra-parens
+      this.items.forEach((el) => {
+        el.setAttribute('error', '');
+      });
+    } else {
+      this.items.forEach((el) => {
+        el.removeAttribute('error');
+      });
+    }
+  }
+  /* eslint-disable max-statements */
+
+  handleValueUpdate(value, selected) {
+    if (selected) {
+      // add if it isn't already in the value list
+      if (!this.value.includes(value)) {
+        this.value.push(value);
+      }
+    } else if (this.value.indexOf(value) > -1) { // eslint-disable-line no-magic-numbers
+      // remove if it is in the value list
+      const index = this.value.indexOf(value);
+
+      this.value.splice(index, 1); // eslint-disable-line no-magic-numbers
+    }
+
+    this.dispatchEvent(new CustomEvent('input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+
+    this.validate();
+  }
+
+  firstUpdated() {
+
+    // must declare this function as a variable to correctly pass the reference to the removeEventListener
+    const checkFocusWithin = function(evt) {
+      if (document.auroCheckboxGroupActive && !document.auroCheckboxGroupActive.contains(evt.target)) {
+        // if focus has left the group, cleanup and validate
+        document.auroCheckboxGroupActive.focusWithin = false;
+        window.removeEventListener('focusin', checkFocusWithin);
+        document.removeEventListener('click', checkFocusWithin);
+        // execute the validation
+        document.auroCheckboxGroupActive.validate();
+      }
+    }
+
+    this.addEventListener('auroCheckbox-focusin', () => {
+      if (!this.value) {
+        this.value = [];
+      }
+
+      // handle click outside the group
+      if (!this.focusWithin) {
+        document.addEventListener('click', checkFocusWithin);
+      }
+
+      this.focusWithin = true;
+    })
+
+    this.addEventListener('auroCheckbox-focusout', () => {
+      document.auroCheckboxGroupActive = this;
+
+      // Only add the focusWithin check event listener once as you move focus through the options
+      if (this.focusWithin) {
+        window.addEventListener('focusin', checkFocusWithin);
+      } else {
+        this.focusWithin = true;
+      }
+    })
+
+    this.addEventListener('auroCheckbox-input', (evt) => {
+      this.handleValueUpdate(evt.target.value, evt.target.checked);
+    })
+  }
+
+  handlePreselectedItems() {
+    let preSelectedValues = false;
+
+    this.items.forEach((item) => {
+      if (item.hasAttribute('checked') && this.value === undefined) {
+        preSelectedValues = true;
+      }
+    });
+
+    if (preSelectedValues) {
+      if (!this.value) {
+        this.value = [];
+      }
+
+      this.items.forEach((item) => {
+        this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
+      });
+    }
+  }
+
   handleItems() {
     this.items = Array.from(this.querySelectorAll('auro-checkbox'));
 
-    if (this.disabled || this.error) {
+    this.handlePreselectedItems();
+
+    if (this.disabled) {
       this.items.forEach((el) => {
         el.disabled = Boolean(this.disabled);
-        el.required = Boolean(this.required);
-        el.error = Boolean(this.error);
       });
     }
+
+    this.validate();
   }
@@ -73,3 +251,3 @@
    */
-   updated(changedProperties) {
+  updated(changedProperties) {
     if (this.disabled && changedProperties.has('disabled')) {
@@ -80,2 +258,3 @@ this.items.forEach((el) => {
     }
+
     if (changedProperties.has('required')) {
@@ -86,6 +265,5 @@ this.items.forEach((el) => {
     }
+
     if (changedProperties.has('error')) {
-      this.items.forEach((el) => {
-        el.error = Boolean(this.error)
-      });
+      this.validate();
     }
@@ -108,5 +286,12 @@ }
 
-      ${this.error
-        ? html`<p role="alert" aria-live="assertive" class="errorText">${this.error}</p>`
-        : html``}
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html`
+          <p class="checkboxGroupElement-helpText" part="helpText">
+            <slot name="helpText"></slot>
+          </p>`
+        : html`
+          <p class="checkboxGroupElement-helpText" role="alert" aria-live="assertive" part="helpText">
+            ${this.setCustomValidity}
+          </p>`
+      }
     `;
@@ -113,0 +298,0 @@ }

dist/auro-checkbox.js

@@ -66,2 +66,8 @@ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
     this.checked = event.target.checked;
+
+    this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
   }
@@ -85,2 +91,33 @@
 
+  /**
+   * Function to support @focusin event.
+   * @private
+   * @return {void}
+   */
+  handleFocusin() {
+    this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  firstUpdated() {
+    this.addEventListener('click', () => {
+      this.handleFocusin();
+    });
+
+    this.addEventListener('focusin', () => {
+      this.handleFocusin();
+    })
+
+    this.addEventListener('focusout', () => {
+      this.dispatchEvent(new CustomEvent('auroCheckbox-focusout', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      }));
+    });
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
@@ -87,0 +124,0 @@ render() {

package.json

@@ -11,3 +11,3 @@ {
   "name": "@alaskaairux/auro-checkbox",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "description": "Auro custom auro-checkbox element",
@@ -35,4 +35,4 @@ "author": "Product design and research",
   "devDependencies": {
-    "@alaskaairux/design-tokens": "^3.4.0",
-    "@alaskaairux/webcorestylesheets": "^3.7.2",
+    "@alaskaairux/design-tokens": "^3.11.0",
+    "@alaskaairux/webcorestylesheets": "^3.7.3",
     "@babel/core": "^7.16.0",
@@ -75,7 +75,8 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "postcss-selector-replace": "^1.0.2",
-    "semantic-release": "^17.4.3",
+    "sass": "^1.56.1",
+    "semantic-release": "^19.0.3",
     "sinon": "^9.2.4",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^20.0.0",
-    "wc-sass-render": "^1.2.3",
+    "wc-sass-render": "^1.4.0",
     "webpack": "^5.53.0",
@@ -111,4 +112,4 @@ "webpack-bundle-analyzer": "^3.9.0",
     "sassBuild:dev": "npm-run-all sassBuild:demo sassBuild:component postCss:component sassRender",
-    "sassBuild:demo": "node-sass ./demo/sass/ --output ./demo/css/",
-    "sassBuild:component": "node-sass ./src/ --output ./src/",
+    "sassBuild:demo": "sass --no-source-map demo:demo",
+    "sassBuild:component": "sass --no-source-map src:src",
     "sassBuild:watch": "nodemon -e scss --watch src --exec npm run sassBuild:dev",
@@ -115,0 +116,0 @@ "postCss:component": "node ./scripts/postCss.js",

No alert changes

Improved metrics

Total package byte prevSize

132879

increased by8.03%

Lines of code

808

increased by33.77%

Worsened metrics

Dev dependency count

50

increased by2.04%

No dependency changes