@cfpb/cfpb-forms - npm Package Compare versions

Comparing version 0.43.0 to 1.0.0

dist/index.js

@@ -1,2 +0,2 @@
-(()=>{var Ot=Object.defineProperty;var rt=Object.getOwnPropertySymbols;var xt=Object.prototype.hasOwnProperty,Tt=Object.prototype.propertyIsEnumerable;var ot=(e,n,t)=>n in e?Ot(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,J=(e,n)=>{for(var t in n||(n={}))xt.call(n,t)&&ot(e,t,n[t]);if(rt)for(var t of rt(n))Tt.call(n,t)&&ot(e,t,n[t]);return e};var C="data-js-hook",j="behavior_",W="state_";function y(){let e={};function n(i,s){return{}.hasOwnProperty.call(e,i)?e[i].push(s):e[i]=[s],this}function t(i,s){if(!{}.hasOwnProperty.call(e,i))return this;let f=e[i].indexOf(s);return f!==-1&&e[i].splice(f,1),this}function o(i,s){if(!{}.hasOwnProperty.call(e,i))return this;s=s||{};let f=e[i];for(let u=0,l=f.length;u<l;u++)f[u].call(this,s);return this}return this.addEventListener=n,this.removeEventListener=t,this.dispatchEvent=o,this.getRegisteredEvents=()=>e,this}function R(e,n){if(!e)return!1;let t=e.getAttribute(C);return t?(t=t.split(" "),t.indexOf(n)>-1):!1}function Z(e,n){if(R(e,n))return n;if(n.indexOf(" ")!==-1){let o=C+" values cannot contain spaces!";throw new Error(o)}let t=e.getAttribute(C);return t!==null&&(n=t+" "+n),e.setAttribute(C,n),n}var Q=W+"atomic_init";function It(e,n){if(!e||!e.classList){let t=e+' is not valid. Check that element is a DOM node with class "'+n+'"';throw new Error(t)}return e}function bt(e,n){let t=e.classList.contains(n)?e:e.querySelector("."+n);if(!t){let o=n+" not found on or in passed DOM node.";throw new Error(o)}return t}function tt(e,n){return It(e,n),bt(e,n)}function K(e){return R(e,Q)?!1:(Z(e,Q),!0)}function et(e,n,t,o={}){let s=(t||document).querySelectorAll(e),f=[],u,l;for(let p=0,_=s.length;p<_;p++)l=s[p],R(l,Q)===!1&&(u=new n(l),u.init(o),f.push(u));return f}var yt=Object.prototype.toString;var Nt=Array.isArray||function(n){return yt.call(n)==="[object Array]"};function nt(){return!!new RegExp(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent)}var wt=j+"flyout-menu",ie="["+C+"="+wt;var Y={CSS_PROPERTY:"opacity",BASE_CLASS:"u-alpha-transition",ALPHA_100:"u-alpha-100",ALPHA_0:"u-alpha-0"};function at(e){let n=new y,t=new m(e,Y,this);function o(f){return t.init(f),this}function i(){return t.applyClass(Y.ALPHA_100),this}function s(){return t.applyClass(Y.ALPHA_0),this}return this.addEventListener=n.addEventListener,this.dispatchEvent=n.dispatchEvent,this.removeEventListener=n.removeEventListener,this.animateOff=t.animateOff,this.animateOn=t.animateOn,this.halt=t.halt,this.isAnimated=t.isAnimated,this.remove=t.remove,this.setElement=t.setElement,this.fadeIn=i,this.fadeOut=s,this.init=o,this}at.CLASSES=Y;function m(e,n,t){let o=n,i=e;if(!t)throw new Error("Child transition argument must be defined!");let s=t,f,u,l,p=!1,_=!1,A=!1;if(typeof o.CSS_PROPERTY=="undefined"||typeof o.BASE_CLASS=="undefined")throw new Error("Transitions require CSS_PROPERTY and BASE_CLASS to be passed into BaseTransition.");function L(){u&&p?(i.addEventListener(u,l),s.dispatchEvent(m.BEGIN_EVENT,{target:s,type:m.BEGIN_EVENT}),i.classList.add(m.ANIMATING_CLASS),_=!0):(s.dispatchEvent(m.BEGIN_EVENT,{target:s,type:m.BEGIN_EVENT}),l())}function g(){i.removeEventListener(u,l)}function D(E){return E&&E.propertyName!==o.CSS_PROPERTY?!1:(g(),i.classList.remove(m.ANIMATING_CLASS),s.dispatchEvent(m.END_EVENT,{target:s,type:m.END_EVENT}),_=!1,!0)}function O(){let E;for(E in o)({}).hasOwnProperty.call(o,E)&&o[E]!==o.BASE_CLASS&&i.classList.contains(o[E])&&i.classList.remove(o[E])}function H(){_&&(i.style.webkitTransitionDuration="0",i.style.mozTransitionDuration="0",i.style.oTransitionDuration="0",i.style.transitionDuration="0",i.removeEventListener(u,l),l(),i.style.webkitTransitionDuration="",i.style.mozTransitionDuration="",i.style.oTransitionDuration="",i.style.transitionDuration="")}function M(){H(),O(),i.classList.remove(o.BASE_CLASS)}function B(){i.classList.remove(m.NO_ANIMATION_CLASS),p=!0}function F(){i.classList.add(m.NO_ANIMATION_CLASS),p=!1}function V(E){if(!E){let G="Element does not have TransitionEnd event. It may be null!";throw new Error(G)}let T,N={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},k;for(k in N)if({}.hasOwnProperty.call(N,k)&&typeof E.style[k]!="undefined"){T=N[k];break}return T}function h(E){M(),B(),i=E,i.classList.add(o.BASE_CLASS),u=V(i)}function v(E){if(p=!i.classList.contains(m.NO_ANIMATION_CLASS),l=D.bind(this),h(i),!E)throw new Error("Transition needs to be passed an initial CSS class on initialization!");return i.classList.add(E),this}function S(E){return A||(O(),A=!0),i.classList.contains(E)?!1:(g(),i.classList.remove(f),f=E,L(),i.classList.add(f),!0)}return this.animateOff=F,this.animateOn=B,this.applyClass=S,this.halt=H,this.init=v,this.isAnimated=()=>p,this.remove=M,this.setElement=h,this}m.BEGIN_EVENT="transitionbegin";m.END_EVENT="transitionend";m.NO_ANIMATION_CLASS="u-no-animation";m.ANIMATING_CLASS="u-is-animating";var X={CSS_PROPERTY:"max-height",BASE_CLASS:"u-max-height-transition",MH_DEFAULT:"u-max-height-default",MH_SUMMARY:"u-max-height-summary",MH_ZERO:"u-max-height-zero"};function ct(e){let n=new y,t=new m(e,X,this),o=0;function i(){let L=e.scrollHeight+"px";e.style.maxHeight=L}function s(){window.removeEventListener("load",s),i()}function f(A){return t.init(A),window.addEventListener("load",s),window.addEventListener("resize",()=>{i()}),this}function u(){return i(),t.applyClass(X.MH_DEFAULT),(!o||e.scrollHeight>o)&&(o=e.scrollHeight),this}function l(){return t.applyClass(X.MH_SUMMARY),o=e.scrollHeight,this}function p(){return t.applyClass(X.MH_ZERO),o=e.scrollHeight,this}function _(){return e.style.maxHeight="",t.remove()}return this.addEventListener=n.addEventListener,this.dispatchEvent=n.dispatchEvent,this.removeEventListener=n.removeEventListener,this.animateOff=t.animateOff,this.animateOn=t.animateOn,this.halt=t.halt,this.isAnimated=t.isAnimated,this.setElement=t.setElement,this.refresh=i,this.remove=_,this.init=f,this.maxHeightDefault=u,this.maxHeightSummary=l,this.maxHeightZero=p,this}ct.CLASSES=X;var w={CSS_PROPERTY:"transform",BASE_CLASS:"u-move-transition",MOVE_TO_ORIGIN:"u-move-to-origin",MOVE_LEFT:"u-move-left",MOVE_LEFT_2X:"u-move-left-2x",MOVE_LEFT_3X:"u-move-left-3x",MOVE_RIGHT:"u-move-right",MOVE_UP:"u-move-up"};function lt(e){let n=new y,t=new m(e,w,this);function o(l){return t.init(l),this}function i(){return t.applyClass(w.MOVE_TO_ORIGIN),this}function s(l){l=l||1;let p=[w.MOVE_LEFT,w.MOVE_LEFT_2X,w.MOVE_LEFT_3X];return t.applyClass(p[l-1]),this}function f(){return t.applyClass(w.MOVE_RIGHT),this}function u(){return t.applyClass(w.MOVE_UP),this}return this.addEventListener=n.addEventListener,this.dispatchEvent=n.dispatchEvent,this.removeEventListener=n.removeEventListener,this.animateOff=t.animateOff,this.animateOn=t.animateOn,this.halt=t.halt,this.isAnimated=t.isAnimated,this.setElement=t.setElement,this.remove=t.remove,this.init=o,this.moveLeft=()=>s(1),this.moveLeft2=()=>s(2),this.moveLeft3=()=>s(3),this.moveRight=f,this.moveToOrigin=i,this.moveUp=u,this}lt.CLASSES=w;var Dt;function Mt(e){return e.replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&")}function kt(e,n){return RegExp(Mt(n.trim()),"i").test(e)}function Ht(e,n,t){let o=e,i=n,s=(t==null?void 0:t.maxSelections)||5,f=[],u=[],l=[],p=[],_=-1;function A(h){return i+"-"+h.value.trim().replace(/\s+/g,"-").toLowerCase()}function L(){return u.length>=s}function g(h){let v,S=[],E=!1;for(let T=0,N=h.length;T<N;T++)v=h[T],E=L()?!1:v.defaultSelected,S.push({id:A(v),value:v.value,text:v.text,checked:E}),E&&u.push(T);return S}function D(){return f=g(o),this}function O(h){return f[h].checked=!f[h].checked,u.length<s&&f[h].checked?(u.push(h),u.sort(),!0):(f[h].checked=!1,u=u.filter(function(v){return v!==h}),!1)}function H(h,v,S,E){return kt(v.text,E)&&h.push(S),h}function M(h){return Object.prototype.toString.call(h)!=="[object String]"&&(h=""),p=l,f.length>0&&(l=f.reduce(function(v,S,E){return H(v,S,E,h)},[])),_=-1,l}function B(h){return f[h]}function F(h){let v=l.length,S=v===0?f.length:v;h<0?_=-1:h>=S?_=S-1:_=h}function V(){return _}return this.init=D,this.toggleOption=O,this.getSelectedIndices=function(){return u},this.isAtMaxSelections=L,this.filterIndices=M,this.clearFilter=function(){return l=p=[],Dt},this.getFilterIndices=function(){return l},this.getLastFilterIndices=function(){return p},this.getIndex=V,this.setIndex=F,this.resetIndex=function(){return _=-1,_},this.getOption=B,this}var ut=Ht;function b(e,n,t){let o=document.createElement(e);return Object.keys(t).forEach(i=>{let s=t[i];i in o?o[i]=s:o.setAttribute(i,s)}),n&&n.appendChild(o),o}var ft='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"/></svg>';var Ft=ft,I="o-multiselect",Vt="a-checkbox",Ut="a-text-input",dt="prev",q="next",it="Enter",Xt=" ",ht="Escape",Gt="ArrowUp",Et="ArrowDown",pt="Tab",mt={renderTags:!0,maxSelections:5};function z(e){e.classList.add(I);let n=tt(e,I),t=!1,o,i,s,f,u,l,p,_,A,L,g,D=[],O;function H(){g.classList.remove("u-no-results"),g.classList.add("u-filtered");let a=s.getLastFilterIndices();for(let r=0,c=a.length;r<c;r++)D[a[r]].classList.remove("u-filter-match");a=s.getFilterIndices();for(let r=0,c=a.length;r<c;r++)D[a[r]].classList.add("u-filter-match")}function M(){g.classList.remove("u-filtered","u-no-results");for(let a=0,r=g.children.length;a<r;a++)g.children[a].classList.remove("u-filter-match");s.clearFilter()}function B(){g.classList.add("u-no-results"),g.classList.remove("u-filtered")}function F(a){return a.length>0?(H(),!0):(B(),!1)}function V(a){M(),s.resetIndex();let r=s.filterIndices(a);F(r)}function h(){return l.classList.add("u-active"),L.classList.remove("u-invisible"),L.setAttribute("aria-hidden",!1),O.dispatchEvent("expandbegin",{target:O}),O}function v(){return l.classList.remove("u-active"),L.classList.add("u-invisible"),L.setAttribute("aria-hidden",!0),s.resetIndex(),O.dispatchEvent("collapsebegin",{target:O}),O}function S(a){a===q?s.setIndex(s.getIndex()+1):a===dt&&s.setIndex(s.getIndex()-1);let r=s.getIndex();if(r>-1){let c=r,d=s.getFilterIndices();d.length>0&&(c=d[r]);let U=s.getOption(c).value,St=g.querySelector('[data-option="'+U+'"]').querySelector("input");t=!0,St.focus()}else t=!1,A.focus()}function E(){A.value="",M()}function T(a){let r=a.target;r.tagName==="BUTTON"&&(a.preventDefault(),r.removeEventListener("click",T),r.querySelector("label").click())}function N(a){if(a.key===Xt||a.key===it){let r=a.target.querySelector("label");g.querySelector("#"+r.getAttribute("for")).click()}}function k(a){return o+"-"+a.value.trim().replace(/[^\w]/g,"-").toLowerCase()}function G(a,r){let c=k(r),d=b("li",null,{"data-option":r.value}),x=b("button",d,{type:"button",innerHTML:"<label for="+c+">"+r.text+Ft+"</label>"});a.appendChild(d),x.addEventListener("click",T),x.addEventListener("keydown",N)}function st(a){let r=s.getOption(a)||s.getOption(s.getIndex());if(r){if(r.checked){g.classList.contains("u-max-selections")&&g.classList.remove("u-max-selections");let c='[data-option="'+r.value+'"]',d=p.querySelector(c);typeof d!="undefined"&&d&&(p==null||p.removeChild(d))}else u!=null&&u.renderTags&&p&&G(p,r);s.toggleOption(a),s.isAtMaxSelections()&&g.classList.add("u-max-selections"),O.dispatchEvent("selectionsupdated",{target:O})}s.resetIndex(),t=!1,L.getAttribute("aria-hidden")==="false"&&A.focus()}function gt(a){st(Number(a.target.getAttribute("data-index"))),E()}function vt(){_.addEventListener("mousemove",function(c){let d=c.target;c.offsetX>d.offsetWidth-35?d.style.cursor="pointer":d.style.cursor="auto"}),_.addEventListener("mouseup",function(c){let d=c.target;c.offsetX>d.offsetWidth-35&&L.offsetHeight===140&&A.blur()}),A.addEventListener("input",function(){V(this.value)}),A.addEventListener("focus",function(){L.getAttribute("aria-hidden")==="true"&&h()}),A.addEventListener("blur",function(){!t&&L.getAttribute("aria-hidden")==="false"&&v()}),A.addEventListener("keydown",function(c){let d=c.key;L.getAttribute("aria-hidden")==="true"&&d!==pt&&h(),d===it?(c.preventDefault(),S(q)):d===ht?(E(),v()):d===Et?S(q):d===pt&&!c.shiftKey&&L.getAttribute("aria-hidden")==="false"&&v()}),g.addEventListener("mousedown",function(){t=!0}),g.addEventListener("keydown",function(c){let d=c.key,x=c.target,U=x.checked;if(d===it){c.preventDefault(),x.checked=!U;let P=new Event("change",{bubbles:!1,cancelable:!0});x.dispatchEvent(P)}else d===ht?(A.focus(),v()):d===Gt?S(dt):d===Et&&S(q)}),L.addEventListener("mousedown",function(c){c.target.tagName==="LABEL"&&(t=!0)});let a=g.querySelectorAll("input");for(let c=0,d=a.length;c<d;c++)a[c].addEventListener("change",gt);let r=p.querySelectorAll("button");for(let c=0,d=r.length;c<d;c++)r[c].addEventListener("click",T),r[c].addEventListener("keydown",N)}function _t(){l=document.createElement("div"),l.className=I,p=b("ul",null,{className:I+"_choices"}),_=b("header",l,{className:I+"_header"}),A=b("input",_,{className:I+"_search "+Ut,type:"text",placeholder:i||"Select up to five",id:n.id,autocomplete:"off"}),L=b("fieldset",l,{className:I+"_fieldset u-invisible","aria-hidden":"true"});let a=I+"_options";s.isAtMaxSelections()&&(a+=" u-max-selections"),g=b("ul",L,{className:a});let r,c,d;for(let x=0,U=f.length;x<U;x++){r=f[x],c=k(r),d=s.getOption(x).checked;let P=b("li",g,{"data-option":r.value,"data-cy":"multiselect-option",class:"m-form-field m-form-field__checkbox"});b("input",P,{id:c,type:"checkbox",value:r.value,name:o,class:Vt+" "+I+"_checkbox",checked:d,"data-index":x}),b("label",P,{for:c,textContent:r.text,className:I+"_label a-label"}),D.push(P),d&&(u!=null&&u.renderTags)&&G(p,r)}return l.insertBefore(p,_),n.parentNode.insertBefore(l,n),l.appendChild(n),l}function Lt(a=mt){if(!K(n))return this;if(nt())return this;if(O=this,o=n.name||n.id,i=n.getAttribute("placeholder"),f=n.options||[],u=J(J({},mt),a),f.length>0){s=new ut(f,o,u).init();let r=_t();n.parentNode.removeChild(n),n=r,K(n),vt()}return this}function At(){return s}this.init=Lt,this.expand=h,this.collapse=v;let $=new y;return this.addEventListener=$.addEventListener,this.removeEventListener=$.removeEventListener,this.dispatchEvent=$.dispatchEvent,this.getModel=At,this.updateSelections=st,this.selectionClickHandler=T,this.selectionKeyDownHandler=N,this}z.BASE_CLASS=I;z.init=e=>et(`.${I}`,z,void 0,e);})();
+(()=>{var Ot=Object.defineProperty;var rt=Object.getOwnPropertySymbols;var xt=Object.prototype.hasOwnProperty,Tt=Object.prototype.propertyIsEnumerable;var ot=(e,n,t)=>n in e?Ot(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,J=(e,n)=>{for(var t in n||(n={}))xt.call(n,t)&&ot(e,t,n[t]);if(rt)for(var t of rt(n))Tt.call(n,t)&&ot(e,t,n[t]);return e};var C="data-js-hook",j="behavior_",W="state_";function y(){let e={};function n(i,s){return{}.hasOwnProperty.call(e,i)?e[i].push(s):e[i]=[s],this}function t(i,s){if(!{}.hasOwnProperty.call(e,i))return this;let f=e[i].indexOf(s);return f!==-1&&e[i].splice(f,1),this}function o(i,s){if(!{}.hasOwnProperty.call(e,i))return this;s=s||{};let f=e[i];for(let u=0,l=f.length;u<l;u++)f[u].call(this,s);return this}return this.addEventListener=n,this.removeEventListener=t,this.dispatchEvent=o,this.getRegisteredEvents=()=>e,this}function R(e,n){if(!e)return!1;let t=e.getAttribute(C);return t?(t=t.split(" "),t.indexOf(n)>-1):!1}function Z(e,n){if(R(e,n))return n;if(n.indexOf(" ")!==-1){let o=C+" values cannot contain spaces!";throw new Error(o)}let t=e.getAttribute(C);return t!==null&&(n=t+" "+n),e.setAttribute(C,n),n}var Q=W+"atomic_init";function It(e,n){if(!e||!e.classList){let t=e+' is not valid. Check that element is a DOM node with class "'+n+'"';throw new Error(t)}return e}function bt(e,n){let t=e.classList.contains(n)?e:e.querySelector("."+n);if(!t){let o=n+" not found on or in passed DOM node.";throw new Error(o)}return t}function tt(e,n){return It(e,n),bt(e,n)}function K(e){return R(e,Q)?!1:(Z(e,Q),!0)}function et(e,n,t,o={}){let s=(t||document).querySelectorAll(e),f=[],u,l;for(let p=0,_=s.length;p<_;p++)l=s[p],R(l,Q)===!1&&(u=new n(l),u.init(o),f.push(u));return f}var yt=Object.prototype.toString;var Nt=Array.isArray||function(n){return yt.call(n)==="[object Array]"};function nt(){return!!new RegExp(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent)}var wt=j+"flyout-menu",ie="["+C+"="+wt;var Y={CSS_PROPERTY:"opacity",BASE_CLASS:"u-alpha-transition",ALPHA_100:"u-alpha-100",ALPHA_0:"u-alpha-0"};function at(e){let n=new y,t=new m(e,Y,this);function o(f){return t.init(f),this}function i(){return t.applyClass(Y.ALPHA_100),this}function s(){return t.applyClass(Y.ALPHA_0),this}return this.addEventListener=n.addEventListener,this.dispatchEvent=n.dispatchEvent,this.removeEventListener=n.removeEventListener,this.animateOff=t.animateOff,this.animateOn=t.animateOn,this.halt=t.halt,this.isAnimated=t.isAnimated,this.remove=t.remove,this.setElement=t.setElement,this.fadeIn=i,this.fadeOut=s,this.init=o,this}at.CLASSES=Y;function m(e,n,t){let o=n,i=e;if(!t)throw new Error("Child transition argument must be defined!");let s=t,f,u,l,p=!1,_=!1,A=!1;if(typeof o.CSS_PROPERTY=="undefined"||typeof o.BASE_CLASS=="undefined")throw new Error("Transitions require CSS_PROPERTY and BASE_CLASS to be passed into BaseTransition.");function L(){u&&p?(i.addEventListener(u,l),s.dispatchEvent(m.BEGIN_EVENT,{target:s,type:m.BEGIN_EVENT}),i.classList.add(m.ANIMATING_CLASS),_=!0):(s.dispatchEvent(m.BEGIN_EVENT,{target:s,type:m.BEGIN_EVENT}),l())}function g(){i.removeEventListener(u,l)}function D(E){return E&&E.propertyName!==o.CSS_PROPERTY?!1:(g(),i.classList.remove(m.ANIMATING_CLASS),s.dispatchEvent(m.END_EVENT,{target:s,type:m.END_EVENT}),_=!1,!0)}function O(){let E;for(E in o)({}).hasOwnProperty.call(o,E)&&o[E]!==o.BASE_CLASS&&i.classList.contains(o[E])&&i.classList.remove(o[E])}function H(){_&&(i.style.webkitTransitionDuration="0",i.style.mozTransitionDuration="0",i.style.oTransitionDuration="0",i.style.transitionDuration="0",i.removeEventListener(u,l),l(),i.style.webkitTransitionDuration="",i.style.mozTransitionDuration="",i.style.oTransitionDuration="",i.style.transitionDuration="")}function M(){H(),O(),i.classList.remove(o.BASE_CLASS)}function B(){i.classList.remove(m.NO_ANIMATION_CLASS),p=!0}function F(){i.classList.add(m.NO_ANIMATION_CLASS),p=!1}function V(E){if(!E){let G="Element does not have TransitionEnd event. It may be null!";throw new Error(G)}let T,N={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},k;for(k in N)if({}.hasOwnProperty.call(N,k)&&typeof E.style[k]!="undefined"){T=N[k];break}return T}function h(E){M(),B(),i=E,i.classList.add(o.BASE_CLASS),u=V(i)}function v(E){if(p=!i.classList.contains(m.NO_ANIMATION_CLASS),l=D.bind(this),h(i),!E)throw new Error("Transition needs to be passed an initial CSS class on initialization!");return i.classList.add(E),this}function S(E){return A||(O(),A=!0),i.classList.contains(E)?!1:(g(),i.classList.remove(f),f=E,L(),i.classList.add(f),!0)}return this.animateOff=F,this.animateOn=B,this.applyClass=S,this.halt=H,this.init=v,this.isAnimated=()=>p,this.remove=M,this.setElement=h,this}m.BEGIN_EVENT="transitionbegin";m.END_EVENT="transitionend";m.NO_ANIMATION_CLASS="u-no-animation";m.ANIMATING_CLASS="u-is-animating";var X={CSS_PROPERTY:"max-height",BASE_CLASS:"u-max-height-transition",MH_DEFAULT:"u-max-height-default",MH_SUMMARY:"u-max-height-summary",MH_ZERO:"u-max-height-zero"};function ct(e){let n=new y,t=new m(e,X,this),o=0;function i(){let L=e.scrollHeight+"px";e.style.maxHeight=L}function s(){window.removeEventListener("load",s),i()}function f(A){return t.init(A),window.addEventListener("load",s),window.addEventListener("resize",()=>{i()}),this}function u(){return i(),t.applyClass(X.MH_DEFAULT),(!o||e.scrollHeight>o)&&(o=e.scrollHeight),this}function l(){return t.applyClass(X.MH_SUMMARY),o=e.scrollHeight,this}function p(){return t.applyClass(X.MH_ZERO),o=e.scrollHeight,this}function _(){return e.style.maxHeight="",t.remove()}return this.addEventListener=n.addEventListener,this.dispatchEvent=n.dispatchEvent,this.removeEventListener=n.removeEventListener,this.animateOff=t.animateOff,this.animateOn=t.animateOn,this.halt=t.halt,this.isAnimated=t.isAnimated,this.setElement=t.setElement,this.refresh=i,this.remove=_,this.init=f,this.maxHeightDefault=u,this.maxHeightSummary=l,this.maxHeightZero=p,this}ct.CLASSES=X;var w={CSS_PROPERTY:"transform",BASE_CLASS:"u-move-transition",MOVE_TO_ORIGIN:"u-move-to-origin",MOVE_LEFT:"u-move-left",MOVE_LEFT_2X:"u-move-left-2x",MOVE_LEFT_3X:"u-move-left-3x",MOVE_RIGHT:"u-move-right",MOVE_UP:"u-move-up"};function lt(e){let n=new y,t=new m(e,w,this);function o(l){return t.init(l),this}function i(){return t.applyClass(w.MOVE_TO_ORIGIN),this}function s(l){l=l||1;let p=[w.MOVE_LEFT,w.MOVE_LEFT_2X,w.MOVE_LEFT_3X];return t.applyClass(p[l-1]),this}function f(){return t.applyClass(w.MOVE_RIGHT),this}function u(){return t.applyClass(w.MOVE_UP),this}return this.addEventListener=n.addEventListener,this.dispatchEvent=n.dispatchEvent,this.removeEventListener=n.removeEventListener,this.animateOff=t.animateOff,this.animateOn=t.animateOn,this.halt=t.halt,this.isAnimated=t.isAnimated,this.setElement=t.setElement,this.remove=t.remove,this.init=o,this.moveLeft=()=>s(1),this.moveLeft2=()=>s(2),this.moveLeft3=()=>s(3),this.moveRight=f,this.moveToOrigin=i,this.moveUp=u,this}lt.CLASSES=w;var Dt;function Mt(e){return e.replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&")}function kt(e,n){return RegExp(Mt(n.trim()),"i").test(e)}function Ht(e,n,t){let o=e,i=n,s=(t==null?void 0:t.maxSelections)||5,f=[],u=[],l=[],p=[],_=-1;function A(h){return i+"-"+h.value.trim().replace(/\s+/g,"-").toLowerCase()}function L(){return u.length>=s}function g(h){let v,S=[],E=!1;for(let T=0,N=h.length;T<N;T++)v=h[T],E=L()?!1:v.defaultSelected,S.push({id:A(v),value:v.value,text:v.text,checked:E}),E&&u.push(T);return S}function D(){return f=g(o),this}function O(h){return f[h].checked=!f[h].checked,u.length<s&&f[h].checked?(u.push(h),u.sort(),!0):(f[h].checked=!1,u=u.filter(function(v){return v!==h}),!1)}function H(h,v,S,E){return kt(v.text,E)&&h.push(S),h}function M(h){return Object.prototype.toString.call(h)!=="[object String]"&&(h=""),p=l,f.length>0&&(l=f.reduce(function(v,S,E){return H(v,S,E,h)},[])),_=-1,l}function B(h){return f[h]}function F(h){let v=l.length,S=v===0?f.length:v;h<0?_=-1:h>=S?_=S-1:_=h}function V(){return _}return this.init=D,this.toggleOption=O,this.getSelectedIndices=function(){return u},this.isAtMaxSelections=L,this.filterIndices=M,this.clearFilter=function(){return l=p=[],Dt},this.getFilterIndices=function(){return l},this.getLastFilterIndices=function(){return p},this.getIndex=V,this.setIndex=F,this.resetIndex=function(){return _=-1,_},this.getOption=B,this}var ut=Ht;function b(e,n,t){let o=document.createElement(e);return Object.keys(t).forEach(i=>{let s=t[i];i in o?o[i]=s:o.setAttribute(i,s)}),n&&n.appendChild(o),o}var ft='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"/></svg>';var Ft=ft,I="o-multiselect",Vt="a-checkbox",Ut="a-text-input",dt="prev",q="next",it="Enter",Xt=" ",ht="Escape",Gt="ArrowUp",Et="ArrowDown",pt="Tab",mt={renderTags:!0,maxSelections:5};function z(e){e.classList.add(I);let n=tt(e,I),t=!1,o,i,s,f,u,l,p,_,A,L,g,D=[],O;function H(){g.classList.remove("u-no-results"),g.classList.add("u-filtered");let a=s.getLastFilterIndices();for(let r=0,c=a.length;r<c;r++)D[a[r]].classList.remove("u-filter-match");a=s.getFilterIndices();for(let r=0,c=a.length;r<c;r++)D[a[r]].classList.add("u-filter-match")}function M(){g.classList.remove("u-filtered","u-no-results");for(let a=0,r=g.children.length;a<r;a++)g.children[a].classList.remove("u-filter-match");s.clearFilter()}function B(){g.classList.add("u-no-results"),g.classList.remove("u-filtered")}function F(a){return a.length>0?(H(),!0):(B(),!1)}function V(a){M(),s.resetIndex();let r=s.filterIndices(a);F(r)}function h(){return l.classList.add("u-active"),L.classList.remove("u-invisible"),L.setAttribute("aria-hidden",!1),O.dispatchEvent("expandbegin",{target:O}),O}function v(){return l.classList.remove("u-active"),L.classList.add("u-invisible"),L.setAttribute("aria-hidden",!0),s.resetIndex(),O.dispatchEvent("collapsebegin",{target:O}),O}function S(a){a===q?s.setIndex(s.getIndex()+1):a===dt&&s.setIndex(s.getIndex()-1);let r=s.getIndex();if(r>-1){let c=r,d=s.getFilterIndices();d.length>0&&(c=d[r]);let U=s.getOption(c).value,St=g.querySelector('[data-option="'+U+'"]').querySelector("input");t=!0,St.focus()}else t=!1,A.focus()}function E(){A.value="",M()}function T(a){let r=a.target;r.tagName==="BUTTON"&&(a.preventDefault(),r.removeEventListener("click",T),r.querySelector("label").click())}function N(a){if(a.key===Xt||a.key===it){let r=a.target.querySelector("label");g.querySelector("#"+r.getAttribute("for")).click()}}function k(a){return o+"-"+a.value.trim().replace(/[^\w]/g,"-").toLowerCase()}function G(a,r){let c=k(r),d=b("li",null,{"data-option":r.value}),x=b("button",d,{type:"button",innerHTML:"<label for="+c+">"+r.text+Ft+"</label>"});a.appendChild(d),x.addEventListener("click",T),x.addEventListener("keydown",N)}function st(a){let r=s.getOption(a)||s.getOption(s.getIndex());if(r){if(r.checked){g.classList.contains("u-max-selections")&&g.classList.remove("u-max-selections");let c='[data-option="'+r.value+'"]',d=p.querySelector(c);typeof d!="undefined"&&d&&(p==null||p.removeChild(d))}else u!=null&&u.renderTags&&p&&G(p,r);s.toggleOption(a),s.isAtMaxSelections()&&g.classList.add("u-max-selections"),O.dispatchEvent("selectionsupdated",{target:O})}s.resetIndex(),t=!1,L.getAttribute("aria-hidden")==="false"&&A.focus()}function gt(a){st(Number(a.target.getAttribute("data-index"))),E()}function vt(){_.addEventListener("mousemove",function(c){let d=c.target;c.offsetX>d.offsetWidth-35?d.style.cursor="pointer":d.style.cursor="auto"}),_.addEventListener("mouseup",function(c){let d=c.target;c.offsetX>d.offsetWidth-35&&L.offsetHeight===140&&A.blur()}),A.addEventListener("input",function(){V(this.value)}),A.addEventListener("focus",function(){L.getAttribute("aria-hidden")==="true"&&h()}),A.addEventListener("blur",function(){!t&&L.getAttribute("aria-hidden")==="false"&&v()}),A.addEventListener("keydown",function(c){let d=c.key;L.getAttribute("aria-hidden")==="true"&&d!==pt&&h(),d===it?(c.preventDefault(),S(q)):d===ht?(E(),v()):d===Et?S(q):d===pt&&!c.shiftKey&&L.getAttribute("aria-hidden")==="false"&&v()}),g.addEventListener("mousedown",function(){t=!0}),g.addEventListener("keydown",function(c){let d=c.key,x=c.target,U=x.checked;if(d===it){c.preventDefault(),x.checked=!U;let P=new Event("change",{bubbles:!1,cancelable:!0});x.dispatchEvent(P)}else d===ht?(A.focus(),v()):d===Gt?S(dt):d===Et&&S(q)}),L.addEventListener("mousedown",function(c){c.target.tagName==="LABEL"&&(t=!0)});let a=g.querySelectorAll("input");for(let c=0,d=a.length;c<d;c++)a[c].addEventListener("change",gt);let r=p.querySelectorAll("button");for(let c=0,d=r.length;c<d;c++)r[c].addEventListener("click",T),r[c].addEventListener("keydown",N)}function _t(){l=document.createElement("div"),l.className=I,p=b("ul",null,{className:I+"__choices"}),_=b("header",l,{className:I+"__header"}),A=b("input",_,{className:I+"__search "+Ut,type:"text",placeholder:i||"Select up to five",id:n.id,autocomplete:"off"}),L=b("fieldset",l,{className:I+"__fieldset u-invisible","aria-hidden":"true"});let a=I+"__options";s.isAtMaxSelections()&&(a+=" u-max-selections"),g=b("ul",L,{className:a});let r,c,d;for(let x=0,U=f.length;x<U;x++){r=f[x],c=k(r),d=s.getOption(x).checked;let P=b("li",g,{"data-option":r.value,"data-cy":"multiselect-option",class:"m-form-field m-form-field--checkbox"});b("input",P,{id:c,type:"checkbox",value:r.value,name:o,class:Vt+" "+I+"__checkbox",checked:d,"data-index":x}),b("label",P,{for:c,textContent:r.text,className:I+"__label a-label"}),D.push(P),d&&(u!=null&&u.renderTags)&&G(p,r)}return l.insertBefore(p,_),n.parentNode.insertBefore(l,n),l.appendChild(n),l}function Lt(a=mt){if(!K(n))return this;if(nt())return this;if(O=this,o=n.name||n.id,i=n.getAttribute("placeholder"),f=n.options||[],u=J(J({},mt),a),f.length>0){s=new ut(f,o,u).init();let r=_t();n.parentNode.removeChild(n),n=r,K(n),vt()}return this}function At(){return s}this.init=Lt,this.expand=h,this.collapse=v;let $=new y;return this.addEventListener=$.addEventListener,this.removeEventListener=$.removeEventListener,this.dispatchEvent=$.dispatchEvent,this.getModel=At,this.updateSelections=st,this.selectionClickHandler=T,this.selectionKeyDownHandler=N,this}z.BASE_CLASS=I;z.init=e=>et(`.${I}`,z,void 0,e);})();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@cfpb/cfpb-forms",
-  "version": "0.43.0",
+  "version": "1.0.0",
   "description": "Design System form fields",
@@ -12,6 +12,6 @@ "less": "src/cfpb-forms.less",
   "dependencies": {
-    "@cfpb/cfpb-buttons": "^0.43.0",
-    "@cfpb/cfpb-core": "^0.43.0",
-    "@cfpb/cfpb-grid": "^0.43.0",
-    "@cfpb/cfpb-icons": "^0.43.0"
+    "@cfpb/cfpb-buttons": "^1.0.0",
+    "@cfpb/cfpb-core": "^1.0.0",
+    "@cfpb/cfpb-grid": "^1.0.0",
+    "@cfpb/cfpb-icons": "^1.0.0"
   },
@@ -21,4 +21,4 @@ "keywords": [
   ],
-  "gitHead": "9181a7c9e0d8a625adf5d82cae61a273b76f3106",
+  "gitHead": "7625fff2bcddb5be39b08063f97bd9973ba81f75",
   "type": "module"
 }

src/organisms/Multiselect.js

@@ -465,11 +465,11 @@ import {
     _selectionsDom = create('ul', null, {
-      className: BASE_CLASS + '_choices',
+      className: BASE_CLASS + '__choices',
     });
 
     _headerDom = create('header', _containerDom, {
-      className: BASE_CLASS + '_header',
+      className: BASE_CLASS + '__header',
     });
 
     _searchDom = create('input', _headerDom, {
-      className: BASE_CLASS + '_search ' + TEXT_INPUT_CLASS,
+      className: BASE_CLASS + '__search ' + TEXT_INPUT_CLASS,
       type: 'text',
@@ -482,7 +482,7 @@ placeholder: _placeholder || 'Select up to five',
     _fieldsetDom = create('fieldset', _containerDom, {
-      className: BASE_CLASS + '_fieldset u-invisible',
+      className: BASE_CLASS + '__fieldset u-invisible',
       'aria-hidden': 'true',
     });
 
-    let optionsClasses = BASE_CLASS + '_options';
+    let optionsClasses = BASE_CLASS + '__options';
     if (_model.isAtMaxSelections()) {
@@ -506,3 +506,3 @@ optionsClasses += ' u-max-selections';
         'data-cy': 'multiselect-option',
-        class: 'm-form-field m-form-field__checkbox',
+        class: 'm-form-field m-form-field--checkbox',
       });
@@ -516,3 +516,3 @@
         name: _name,
-        class: CHECKBOX_INPUT_CLASS + ' ' + BASE_CLASS + '_checkbox',
+        class: CHECKBOX_INPUT_CLASS + ' ' + BASE_CLASS + '__checkbox',
         checked: isChecked,
@@ -525,3 +525,3 @@ 'data-index': i,
         textContent: option.text,
-        className: BASE_CLASS + '_label a-label',
+        className: BASE_CLASS + '__label a-label',
       });
@@ -528,0 +528,0 @@

usage.md

@@ -84,3 +84,3 @@ The @cfpb/forms component provides extensions to the basic form styles for
 
-// .m-form-field__lg-target
+// .m-form-field--lg-target
 @form-field-input-lg-target-bg: var(--gray-10);
@@ -91,3 +91,3 @@ @form-field-input-lg-target-bg__selected: var(--pacific-20);
 
-// .a-label_helper
+// .a-label__helper
 @label-helper: var(--gray);
@@ -127,3 +127,3 @@ ```
 
-<label class="a-label a-label__heading">
+<label class="a-label a-label--heading">
     A label heading
@@ -133,3 +133,3 @@ </label>
 ```html
-<label class="a-label a-label__heading"> A label heading </label>
+<label class="a-label a-label--heading"> A label heading </label>
 ```
@@ -144,9 +144,9 @@
 
-<label class="a-label a-label__heading">
-    A label heading <small class="a-label_helper">(optional)</small>
+<label class="a-label a-label--heading">
+    A label heading <small class="a-label__helper">(optional)</small>
 </label>
 
 ```html
-<label class="a-label a-label__heading">
-  A label heading <small class="a-label_helper">(optional)</small>
+<label class="a-label a-label--heading">
+  A label heading <small class="a-label__helper">(optional)</small>
 </label>
@@ -159,11 +159,11 @@ ```
 
-<label class="a-label a-label__heading">
+<label class="a-label a-label--heading">
     A label heading
-    <small class="a-label_helper a-label_helper__block">Helper text</small>
+    <small class="a-label__helper a-label__helper__block">Helper text</small>
 </label>
 
 ```html
-<label class="a-label a-label__heading">
+<label class="a-label a-label--heading">
   A label heading
-  <small class="a-label_helper a-label_helper__block">Helper text</small>
+  <small class="a-label__helper a-label__helper__block">Helper text</small>
 </label>
@@ -183,3 +183,3 @@ ```
 
-<label class="a-label a-label__heading" for="textinput-example-default">
+<label class="a-label a-label--heading" for="textinput-example-default">
     A text input
@@ -193,3 +193,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-default">
+<label class="a-label a-label--heading" for="textarea-example-default">
     A textarea input
@@ -202,3 +202,3 @@ </label>
 ```html
-<label class="a-label a-label__heading" for="textinput-example-default">
+<label class="a-label a-label--heading" for="textinput-example-default">
   A text input
@@ -214,3 +214,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-default">
+<label class="a-label a-label--heading" for="textarea-example-default">
   A textarea input
@@ -233,3 +233,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textinput-example-hover">
+<label class="a-label a-label--heading" for="textinput-example-hover">
     A text input
@@ -243,3 +243,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-hover">
+<label class="a-label a-label--heading" for="textarea-example-hover">
     A textarea input
@@ -251,3 +251,3 @@ </label>
 ```html
-<label class="a-label a-label__heading" for="textinput-example-hover">
+<label class="a-label a-label--heading" for="textinput-example-hover">
     A text input
@@ -261,3 +261,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-hover">
+<label class="a-label a-label--heading" for="textarea-example-hover">
     A textarea input
@@ -272,3 +272,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textinput-example-focus">
+<label class="a-label a-label--heading" for="textinput-example-focus">
     A text input
@@ -282,3 +282,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-focus">
+<label class="a-label a-label--heading" for="textarea-example-focus">
     A textarea input
@@ -290,3 +290,3 @@ </label>
 ```html
-<label class="a-label a-label__heading" for="textinput-example-focus">
+<label class="a-label a-label--heading" for="textinput-example-focus">
     A text input
@@ -300,3 +300,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-focus">
+<label class="a-label a-label--heading" for="textarea-example-focus">
     A textarea input
@@ -311,3 +311,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textinput-example-disabled-demo">
+<label class="a-label a-label--heading" for="textinput-example-disabled-demo">
     A text input
@@ -322,3 +322,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-disabled-demo">
+<label class="a-label a-label--heading" for="textarea-example-disabled-demo">
     A textarea input
@@ -331,3 +331,3 @@ </label>
 ```html
-<label class="a-label a-label__heading" for="textinput-example-disabled">
+<label class="a-label a-label--heading" for="textinput-example-disabled">
     A text input
@@ -342,3 +342,3 @@ </label>
 
-<label class="a-label a-label__heading" for="textarea-example-disabled">
+<label class="a-label a-label--heading" for="textarea-example-disabled">
     A textarea input
@@ -355,6 +355,6 @@ </label>
 <div class="m-form-field">
-    <label class="a-label a-label__heading" for="full-textinput-example">
+    <label class="a-label a-label--heading" for="full-textinput-example">
         A full-width text input
     </label>
-    <input class="a-text-input a-text-input__full"
+    <input class="a-text-input a-text-input--full"
            type="text"
@@ -367,7 +367,7 @@ id="full-textinput-example"
 <div class="m-form-field">
-  <label class="a-label a-label__heading" for="full-textinput-example">
+  <label class="a-label a-label--heading" for="full-textinput-example">
     A full-width text input
   </label>
   <input
-    class="a-text-input a-text-input__full"
+    class="a-text-input a-text-input--full"
     type="text"
@@ -381,6 +381,6 @@ id="full-textinput-example"
 <div class="m-form-field">
-    <label class="a-label a-label__heading" for="full-textarea-example">
+    <label class="a-label a-label--heading" for="full-textarea-example">
         A full-width textarea input
     </label>
-    <textarea class="a-text-input a-text-input__full"
+    <textarea class="a-text-input a-text-input--full"
               id="full-textarea-example">Lorem Ipsum</textarea>
@@ -391,6 +391,6 @@ </div>
 <div class="m-form-field">
-  <label class="a-label a-label__heading" for="full-textarea-example">
+  <label class="a-label a-label--heading" for="full-textarea-example">
     A full-width textarea input
   </label>
-  <textarea class="a-text-input a-text-input__full" id="full-textarea-example">
+  <textarea class="a-text-input a-text-input--full" id="full-textarea-example">
 Lorem Ipsum</textarea
@@ -407,4 +407,4 @@ >
 
-<div class="o-form__input-w-btn">
-    <div class="o-form__input-w-btn_input-container">
+<div class="o-form--input-w-btn">
+    <div class="o-form--input-w-btn_input-container">
         <label for="button-input-test-demo"
@@ -418,3 +418,3 @@ class="u-visually-hidden">
     </div>
-    <div class="o-form__input-w-btn_btn-container">
+    <div class="o-form--input-w-btn_btn-container">
         <button class="a-btn">Search</button>
@@ -425,4 +425,4 @@ </div>
 ```html
-<div class="o-form__input-w-btn">
-  <div class="o-form__input-w-btn_input-container">
+<div class="o-form--input-w-btn">
+  <div class="o-form--input-w-btn_input-container">
     <label for="button-input-test" class="u-visually-hidden">
@@ -433,3 +433,3 @@ Test input
   </div>
-  <div class="o-form__input-w-btn_btn-container">
+  <div class="o-form--input-w-btn_btn-container">
     <button class="a-btn">Search</button>
@@ -454,3 +454,3 @@ </div>
         class="a-text-input">
-    <button class="a-btn a-btn__link">
+    <button class="a-btn a-btn--link">
         {% include icons/error.svg %}
@@ -472,3 +472,3 @@ <span class="u-visually-hidden">Clear</span>
   />
-  <button class="a-btn a-btn__link">
+  <button class="a-btn a-btn--link">
     {% raw %}{% include icons/error.svg %}{% endraw %}
@@ -485,4 +485,4 @@ <span class="u-visually-hidden">Clear</span>
 
-<div class="o-form__input-w-btn">
-    <div class="o-form__input-w-btn_input-container">
+<div class="o-form--input-w-btn">
+    <div class="o-form--input-w-btn_input-container">
         <div class="m-btn-inside-input">
@@ -497,3 +497,3 @@ <label for="button-inside-input-test-demo"
                 class="a-text-input">
-            <button class="a-btn a-btn__link">
+            <button class="a-btn a-btn--link">
                 {% include icons/error.svg %}
@@ -504,3 +504,3 @@ <span class="u-visually-hidden">Clear</span>
     </div>
-    <div class="o-form__input-w-btn_btn-container">
+    <div class="o-form--input-w-btn_btn-container">
         <button class="a-btn">Search</button>
@@ -511,4 +511,4 @@ </div>
 ```html
-<div class="o-form__input-w-btn">
-  <div class="o-form__input-w-btn_input-container">
+<div class="o-form--input-w-btn">
+  <div class="o-form--input-w-btn_input-container">
     <div class="m-btn-inside-input">
@@ -524,3 +524,3 @@ <label for="button-inside-input-test" class="u-visually-hidden">
       />
-      <button class="a-btn a-btn__link">
+      <button class="a-btn a-btn--link">
         {% raw %}{% include icons/error.svg %}{% endraw %}
@@ -531,3 +531,3 @@ <span class="u-visually-hidden">Clear</span>
   </div>
-  <div class="o-form__input-w-btn_btn-container">
+  <div class="o-form--input-w-btn_btn-container">
     <button class="a-btn">Search</button>
@@ -547,3 +547,3 @@ </div>
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_default">
@@ -554,3 +554,3 @@ <label class="a-label" for="test_checkbox_basic_default">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input class="a-checkbox" type="checkbox" id="test_checkbox" />
@@ -567,3 +567,3 @@ <label class="a-label" for="test_checkbox">Label</label>
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox hover" type="checkbox" id="test_checkbox_basic_hover">
@@ -574,3 +574,3 @@ <label class="a-label" for="test_checkbox_basic_hover">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input
@@ -587,3 +587,3 @@ class="a-checkbox hover"
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox focus" type="checkbox" id="test_checkbox_basic_focus">
@@ -594,3 +594,3 @@ <label class="a-label" for="test_checkbox_basic_focus">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input
@@ -607,3 +607,3 @@ class="a-checkbox focus"
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_checked" checked>
@@ -614,3 +614,3 @@ <label class="a-label" for="test_checkbox_basic_checked">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input
@@ -628,3 +628,3 @@ class="a-checkbox"
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_disabled" disabled>
@@ -635,3 +635,3 @@ <label class="a-label" for="test_checkbox_basic_disabled">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input
@@ -649,3 +649,3 @@ class="a-checkbox"
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_disabled" disabled checked>
@@ -656,3 +656,3 @@ <label class="a-label" for="test_checkbox_basic_disabled">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input
@@ -676,3 +676,3 @@ class="a-checkbox"
 
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
     <input class="a-radio" type="radio" id="test_radio_basic_default">
@@ -683,3 +683,3 @@ <label class="a-label" for="test_radio_basic_default">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
   <input class="a-radio" type="radio" id="test_radio_basic_default" />
@@ -696,3 +696,3 @@ <label class="a-label" for="test_radio_basic_default">Label</label>
 
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
     <input class="a-radio hover" type="radio" id="test_radio_basic_hover">
@@ -703,3 +703,3 @@ <label class="a-label" for="test_radio_basic_hover">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
   <input class="a-radio hover" type="radio" id="test_radio_basic_hover" />
@@ -712,3 +712,3 @@ <label class="a-label" for="test_radio_basic_hover">Label</label>
 
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
     <input class="a-radio focus" type="radio" id="test_radio_basic_focus">
@@ -719,3 +719,3 @@ <label class="a-label" for="test_radio_basic_focus">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
   <input class="a-radio focus" type="radio" id="test_radio_basic_focus" />
@@ -728,3 +728,3 @@ <label class="a-label" for="test_radio_basic_focus">Label</label>
 
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
     <input class="a-radio" type="radio" id="test_radio_basic_checked" checked>
@@ -735,3 +735,3 @@ <label class="a-label" for="test_radio_basic_checked">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
   <input class="a-radio" type="radio" id="test_radio_basic_checked" checked />
@@ -744,3 +744,3 @@ <label class="a-label" for="test_radio_basic_checked">Label</label>
 
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
     <input class="a-radio" type="radio" id="test_radio_basic_disabled" disabled>
@@ -751,3 +751,3 @@ <label class="a-label" for="test_radio_basic_disabled">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
   <input class="a-radio" type="radio" id="test_radio_basic_disabled" disabled />
@@ -760,3 +760,3 @@ <label class="a-label" for="test_radio_basic_disabled">Label</label>
 
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
     <input class="a-radio"
@@ -771,3 +771,3 @@ type="radio"
 ```html
-<div class="m-form-field m-form-field__radio">
+<div class="m-form-field m-form-field--radio">
   <input
@@ -791,3 +791,3 @@ class="a-radio"
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default">
@@ -798,3 +798,3 @@ <label class="a-label" for="test_checkbox_lg_default">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default" />
@@ -811,3 +811,3 @@ <label class="a-label" for="test_checkbox_lg_default">Label</label>
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox hover" type="checkbox" id="test_checkbox_lg_hover">
@@ -818,3 +818,3 @@ <label class="a-label" for="test_checkbox_lg_hover">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input class="a-checkbox hover" type="checkbox" id="test_checkbox_lg_hover" />
@@ -827,3 +827,3 @@ <label class="a-label" for="test_checkbox_lg_hover">Label</label>
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox focus" type="checkbox" id="test_checkbox_lg_focus">
@@ -834,3 +834,3 @@ <label class="a-label" for="test_checkbox_lg_focus">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input class="a-checkbox focus" type="checkbox" id="test_checkbox_lg_focus" />
@@ -843,3 +843,3 @@ <label class="a-label" for="test_checkbox_lg_focus">Label</label>
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_checked" checked>
@@ -850,3 +850,3 @@ <label class="a-label" for="test_checkbox_lg_checked">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input
@@ -864,3 +864,3 @@ class="a-checkbox"
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_disabled" disabled>
@@ -871,3 +871,3 @@ <label class="a-label" for="test_checkbox_lg_disabled">Label</label>
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input
@@ -885,3 +885,3 @@ class="a-checkbox"
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox"
@@ -896,3 +896,3 @@ type="checkbox"
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input
@@ -916,3 +916,3 @@ class="a-checkbox"
 
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
     <input class="a-radio" type="radio" id="test_radio_lg_default">
@@ -923,3 +923,3 @@ <label class="a-label" for="test_radio_lg_default">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
   <input class="a-radio" type="radio" id="test_radio_lg_default" />
@@ -936,3 +936,3 @@ <label class="a-label" for="test_radio_lg_default">Label</label>
 
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
     <input class="a-radio hover" type="radio" id="test_radio_lg_hover">
@@ -943,3 +943,3 @@ <label class="a-label" for="test_radio_lg_hover">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
   <input class="a-radio hover" type="radio" id="test_radio_lg_hover" />
@@ -952,3 +952,3 @@ <label class="a-label" for="test_radio_lg_hover">Label</label>
 
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
     <input class="a-radio focus" type="radio" id="test_radio_lg_focus">
@@ -959,3 +959,3 @@ <label class="a-label" for="test_radio_lg_focus">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
   <input class="a-radio focus" type="radio" id="test_radio_lg_focus" />
@@ -968,3 +968,3 @@ <label class="a-label" for="test_radio_lg_focus">Label</label>
 
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
     <input class="a-radio" type="radio" id="test_radio_lg_checked" checked>
@@ -975,3 +975,3 @@ <label class="a-label" for="test_radio_lg_checked">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
   <input class="a-radio" type="radio" id="test_radio_lg_checked" checked />
@@ -984,3 +984,3 @@ <label class="a-label" for="test_radio_lg_checked">Label</label>
 
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
     <input class="a-radio" type="radio" id="test_radio_lg_disabled" disabled>
@@ -991,3 +991,3 @@ <label class="a-label" for="test_radio_lg_disabled">Label</label>
 ```html
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
   <input class="a-radio" type="radio" id="test_radio_lg_disabled" disabled />
@@ -1000,3 +1000,3 @@ <label class="a-label" for="test_radio_lg_disabled">Label</label>
 
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
     <input class="a-radio"
@@ -1011,3 +1011,3 @@ type="radio"
 ```html
-<div class="m-form-field m-form-field__radio m-form-field__lg-target">
+<div class="m-form-field m-form-field--radio m-form-field--lg-target">
   <input
@@ -1031,3 +1031,3 @@ class="a-radio"
 
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_helper">
@@ -1037,3 +1037,3 @@ <label class="a-label" for="test_checkbox_helper">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <small class="a-label_helper">
+        <small class="a-label__helper">
             (This is helper text)
@@ -1045,3 +1045,3 @@ </small>
 ```html
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
   <input class="a-checkbox" type="checkbox" id="test_checkbox_helper" />
@@ -1051,3 +1051,3 @@ <label class="a-label" for="test_checkbox_helper">
     amet, consectetur adipiscing elit.
-    <small class="a-label_helper"> (This is helper text) </small>
+    <small class="a-label__helper"> (This is helper text) </small>
   </label>
@@ -1059,3 +1059,3 @@ </div>
 
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_helper">
@@ -1065,3 +1065,3 @@ <label class="a-label" for="test_checkbox_lg_helper">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <small class="a-label_helper">
+        <small class="a-label__helper">
             (This is helper text)
@@ -1073,3 +1073,3 @@ </small>
 ```html
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
   <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_helper" />
@@ -1079,3 +1079,3 @@ <label class="a-label" for="test_checkbox_lg_helper">
     amet, consectetur adipiscing elit.
-    <small class="a-label_helper"> (This is helper text) </small>
+    <small class="a-label__helper"> (This is helper text) </small>
   </label>
@@ -1093,3 +1093,3 @@ </div>
 <div class="m-form-field m-form-field__select">
-    <label class="a-label a-label__heading" for="test_select_default">
+    <label class="a-label a-label--heading" for="test_select_default">
         Label
@@ -1109,3 +1109,3 @@ </label>
 <div class="m-form-field m-form-field__select">
-  <label class="a-label a-label__heading" for="test_select_default">
+  <label class="a-label a-label--heading" for="test_select_default">
     Label
@@ -1131,3 +1131,3 @@ </label>
 <div class="m-form-field m-form-field__select">
-    <label class="a-label a-label__heading" for="test_select__hover">
+    <label class="a-label a-label--heading" for="test_select__hover">
         Label
@@ -1147,3 +1147,3 @@ </label>
 <div class="m-form-field m-form-field__select">
-  <label class="a-label a-label__heading" for="test_select__hover">
+  <label class="a-label a-label--heading" for="test_select__hover">
     Label
@@ -1165,3 +1165,3 @@ </label>
 <div class="m-form-field m-form-field__select">
-    <label class="a-label a-label__heading" for="test_select__focus">
+    <label class="a-label a-label--heading" for="test_select__focus">
         Label
@@ -1181,3 +1181,3 @@ </label>
 <div class="m-form-field m-form-field__select">
-  <label class="a-label a-label__heading" for="test_select__focus">
+  <label class="a-label a-label--heading" for="test_select__focus">
     Label
@@ -1199,4 +1199,4 @@ </label>
 <div class="m-form-field m-form-field__select">
-    <label class="a-label a-label__heading" for="test_select__disabled">Label</label>
-    <div class="a-select a-select__disabled">
+    <label class="a-label a-label--heading" for="test_select__disabled">Label</label>
+    <div class="a-select a-select--disabled">
         <select id="test_select__disabled" disabled>
@@ -1213,6 +1213,6 @@ <option value="option1">Option 1</option>
 <div class="m-form-field m-form-field__select">
-  <label class="a-label a-label__heading" for="test_select__disabled"
+  <label class="a-label a-label--heading" for="test_select__disabled"
     >Label</label
   >
-  <div class="a-select a-select__disabled">
+  <div class="a-select a-select--disabled">
     <select id="test_select__disabled" disabled>
@@ -1231,3 +1231,3 @@ <option value="option1">Option 1</option>
 <div class="m-form-field m-form-field__select">
-    <label class="a-label a-label__heading" for="test_select__multiple">
+    <label class="a-label a-label--heading" for="test_select__multiple">
         Label
@@ -1249,3 +1249,3 @@ </label>
 <div class="m-form-field m-form-field__select">
-  <label class="a-label a-label__heading" for="test_select__multiple">
+  <label class="a-label a-label--heading" for="test_select__multiple">
     Label
@@ -1271,5 +1271,5 @@ </label>
 
-<div class="o-form_group">
+<div class="o-form__group">
     <div class="m-form-field">
-        <label class="a-label__heading"
+        <label class="a-label--heading"
                for="field-validation__default-demo">
@@ -1287,3 +1287,3 @@ Label
             {% include icons/info-round.svg %}
-            <span class="a-form-alert_text">
+            <span class="a-form-alert__text">
                 This is an inline alert with a default state.
@@ -1294,9 +1294,9 @@ </span>
 </div>
-<div class="o-form_group">
+<div class="o-form__group">
     <div class="m-form-field m-form-field__success">
-        <label class="a-label__heading"
+        <label class="a-label--heading"
                for="field-validation__success-demo">
             Label
         </label>
-        <input class="a-text-input a-text-input__success"
+        <input class="a-text-input a-text-input--success"
                type="text"
@@ -1307,6 +1307,6 @@ value="Valid input"
         <div id="field-validation__success-message-demo"
-             class="a-form-alert a-form-alert__success"
+             class="a-form-alert a-form-alert--success"
              role="alert">
             {% include icons/approved-round.svg %}
-            <span class="a-form-alert_text">
+            <span class="a-form-alert__text">
                 This is an inline alert with a success state.
@@ -1317,9 +1317,9 @@ </span>
 </div>
-<div class="o-form_group">
+<div class="o-form__group">
     <div class="m-form-field m-form-field__error">
-        <label class="a-label__heading"
+        <label class="a-label--heading"
                for="field-validation__error-demo">
             Label
         </label>
-        <input class="a-text-input a-text-input__error"
+        <input class="a-text-input a-text-input--error"
                type="text"
@@ -1330,6 +1330,6 @@ value="Invalid input"
         <div id="field-validation__error-message-demo"
-             class="a-form-alert a-form-alert__error"
+             class="a-form-alert a-form-alert--error"
              role="alert">
             {% include icons/error-round.svg %}
-            <span class="a-form-alert_text">
+            <span class="a-form-alert__text">
                 This is an inline alert with an error state.
@@ -1340,9 +1340,9 @@ </span>
 </div>
-<div class="o-form_group">
+<div class="o-form__group">
     <div class="m-form-field m-form-field__warning">
-        <label class="a-label__heading"
+        <label class="a-label--heading"
                for="field-validation__warning-demo">
             Label
         </label>
-        <input class="a-text-input a-text-input__warning"
+        <input class="a-text-input a-text-input--warning"
                type="text"
@@ -1353,6 +1353,6 @@ value="Semi-valid input"
         <div id="field-validation__warning-message-demo"
-             class="a-form-alert a-form-alert__warning"
+             class="a-form-alert a-form-alert--warning"
              role="alert">
             {% include icons/warning-round.svg %}
-            <span class="a-form-alert_text">
+            <span class="a-form-alert__text">
                 This is an inline alert with a warning state.
@@ -1365,5 +1365,5 @@ </span>
 ```html
-<div class="o-form_group">
+<div class="o-form__group">
   <div class="m-form-field">
-    <label class="a-label__heading" for="field-validation__default">
+    <label class="a-label--heading" for="field-validation__default">
       Label
@@ -1384,3 +1384,3 @@ </label>
       {% include icons/info-round.svg %}
-      <span class="a-form-alert_text">
+      <span class="a-form-alert__text">
         This is an inline alert with a default state.
@@ -1391,9 +1391,9 @@ </span>
 </div>
-<div class="o-form_group">
+<div class="o-form__group">
   <div class="m-form-field m-form-field__success">
-    <label class="a-label__heading" for="field-validation__success">
+    <label class="a-label--heading" for="field-validation__success">
       Label
     </label>
     <input
-      class="a-text-input a-text-input__success"
+      class="a-text-input a-text-input--success"
       type="text"
@@ -1406,7 +1406,7 @@ value="Valid input"
       id="field-validation__success-message"
-      class="a-form-alert a-form-alert__success"
+      class="a-form-alert a-form-alert--success"
       role="alert"
     >
       {% include icons/approved-round.svg %}
-      <span class="a-form-alert_text">
+      <span class="a-form-alert__text">
         This is an inline alert with a success state.
@@ -1417,9 +1417,9 @@ </span>
 </div>
-<div class="o-form_group">
+<div class="o-form__group">
   <div class="m-form-field m-form-field__error">
-    <label class="a-label__heading" for="field-validation__error">
+    <label class="a-label--heading" for="field-validation__error">
       Label
     </label>
     <input
-      class="a-text-input a-text-input__error"
+      class="a-text-input a-text-input--error"
       type="text"
@@ -1432,7 +1432,7 @@ value="Invalid input"
       id="field-validation__error-message"
-      class="a-form-alert a-form-alert__error"
+      class="a-form-alert a-form-alert--error"
       role="alert"
     >
       {% include icons/error-round.svg %}
-      <span class="a-form-alert_text">
+      <span class="a-form-alert__text">
         This is an inline alert with an error state.
@@ -1443,9 +1443,9 @@ </span>
 </div>
-<div class="o-form_group">
+<div class="o-form__group">
   <div class="m-form-field m-form-field__warning">
-    <label class="a-label__heading" for="field-validation__warning">
+    <label class="a-label--heading" for="field-validation__warning">
       Label
     </label>
     <input
-      class="a-text-input a-text-input__warning"
+      class="a-text-input a-text-input--warning"
       type="text"
@@ -1458,7 +1458,7 @@ value="Semi-valid input"
       id="field-validation__warning-message"
-      class="a-form-alert a-form-alert__warning"
+      class="a-form-alert a-form-alert--warning"
       role="alert"
     >
       {% include icons/warning-round.svg %}
-      <span class="a-form-alert_text">
+      <span class="a-form-alert__text">
         This is an inline alert with a warning state.
@@ -1474,9 +1474,9 @@ </span>
 <form class="o-form">
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
-            <div class="m-form-field m-form-field__checkbox">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
+            <div class="m-form-field m-form-field--checkbox">
                 <input class="a-checkbox" type="checkbox" id="test_checkbox_1" name="test_checkbox">
                 <label class="a-label" for="test_checkbox_1">Label</label>
             </div>
-            <div class="m-form-field m-form-field__checkbox">
+            <div class="m-form-field m-form-field--checkbox">
                 <input class="a-checkbox" type="checkbox" id="test_checkbox_2" name="test_checkbox">
@@ -1487,9 +1487,9 @@ <label class="a-label" for="test_checkbox_2">Label</label>
     </div>
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
-            <div class="m-form-field m-form-field__radio">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
+            <div class="m-form-field m-form-field--radio">
                 <input class="a-radio" type="radio" id="test_radio_1" name="test_radio">
                 <label class="a-label" for="test_radio_1">Label</label>
             </div>
-            <div class="m-form-field m-form-field__radio">
+            <div class="m-form-field m-form-field--radio">
                 <input class="a-radio" type="radio" id="test_radio_2" name="test_radio">
@@ -1500,13 +1500,13 @@ <label class="a-label" for="test_radio_2">Label</label>
     </div>
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
-            <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
+            <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
                 <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_1">
                 <label class="a-label" for="test_checkbox_lg_default_1">Label</label>
             </div>
-            <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+            <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
                 <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_2">
                 <label class="a-label" for="test_checkbox_lg_default_2">Label</label>
             </div>
-            <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+            <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
                 <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_3">
@@ -1516,3 +1516,3 @@ <label class="a-label" for="test_checkbox_lg_default_3">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    <small class="a-label_helper">
+                    <small class="a-label__helper">
                         (This is helper text)
@@ -1522,3 +1522,3 @@ </small>
             </div>
-            <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+            <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
                 <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_4">
@@ -1529,17 +1529,17 @@ <label class="a-label" for="test_checkbox_lg_default_4">Label</label>
     </div>
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
-            <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
+            <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                 <input class="a-radio" type="radio" id="test_radio_lg_default_1" name="radio-fieldset">
                 <label class="a-label" for="test_radio_lg_default_1">Label</label>
             </div>
-            <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+            <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                 <input class="a-radio" type="radio" id="test_radio_lg_default_2" name="radio-fieldset">
                 <label class="a-label" for="test_radio_lg_default_2">Label</label>
             </div>
-            <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+            <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                 <input class="a-radio" type="radio" id="test_radio_lg_default_3" name="radio-fieldset">
                 <label class="a-label" for="test_radio_lg_default_3">Label</label>
             </div>
-            <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+            <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                 <input class="a-radio" type="radio" id="test_radio_lg_default_4" name="radio-fieldset">
@@ -1554,5 +1554,5 @@ <label class="a-label" for="test_radio_lg_default_4">Label</label>
 <form class="o-form">
-  <div class="o-form_group">
-    <fieldset class="o-form_fieldset">
-      <div class="m-form-field m-form-field__checkbox">
+  <div class="o-form__group">
+    <fieldset class="o-form__fieldset">
+      <div class="m-form-field m-form-field--checkbox">
         <input
@@ -1566,3 +1566,3 @@ class="a-checkbox"
       </div>
-      <div class="m-form-field m-form-field__checkbox">
+      <div class="m-form-field m-form-field--checkbox">
         <input
@@ -1578,5 +1578,5 @@ class="a-checkbox"
   </div>
-  <div class="o-form_group">
-    <fieldset class="o-form_fieldset">
-      <div class="m-form-field m-form-field__radio">
+  <div class="o-form__group">
+    <fieldset class="o-form__fieldset">
+      <div class="m-form-field m-form-field--radio">
         <input
@@ -1590,3 +1590,3 @@ class="a-radio"
       </div>
-      <div class="m-form-field m-form-field__radio">
+      <div class="m-form-field m-form-field--radio">
         <input
@@ -1602,5 +1602,5 @@ class="a-radio"
   </div>
-  <div class="o-form_group">
-    <fieldset class="o-form_fieldset">
-      <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+  <div class="o-form__group">
+    <fieldset class="o-form__fieldset">
+      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
         <input
@@ -1613,3 +1613,3 @@ class="a-checkbox"
       </div>
-      <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
         <input
@@ -1622,3 +1622,3 @@ class="a-checkbox"
       </div>
-      <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
         <input
@@ -1631,3 +1631,3 @@ class="a-checkbox"
       </div>
-      <div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+      <div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
         <input
@@ -1642,5 +1642,5 @@ class="a-checkbox"
   </div>
-  <div class="o-form_group">
-    <fieldset class="o-form_fieldset">
-      <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+  <div class="o-form__group">
+    <fieldset class="o-form__fieldset">
+      <div class="m-form-field m-form-field--radio m-form-field--lg-target">
         <input
@@ -1654,3 +1654,3 @@ class="a-radio"
       </div>
-      <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+      <div class="m-form-field m-form-field--radio m-form-field--lg-target">
         <input
@@ -1664,3 +1664,3 @@ class="a-radio"
       </div>
-      <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+      <div class="m-form-field m-form-field--radio m-form-field--lg-target">
         <input
@@ -1674,3 +1674,3 @@ class="a-radio"
       </div>
-      <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+      <div class="m-form-field m-form-field--radio m-form-field--lg-target">
         <input
@@ -1677,0 +1677,0 @@ class="a-radio"

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

281809

increased by0.06%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Added@cfpb/cfpb-buttons@1.3.0(transitive)

• + Added@cfpb/cfpb-core@1.2.0(transitive)

• + Added@cfpb/cfpb-grid@1.2.0(transitive)

• + Added@cfpb/cfpb-icons@1.3.0(transitive)

• - Removed@cfpb/cfpb-buttons@0.43.0(transitive)

• - Removed@cfpb/cfpb-core@0.43.0(transitive)

• - Removed@cfpb/cfpb-grid@0.43.0(transitive)

• - Removed@cfpb/cfpb-icons@0.43.0(transitive)

• Updated@cfpb/cfpb-buttons@^1.0.0

• Updated@cfpb/cfpb-core@^1.0.0

• Updated@cfpb/cfpb-grid@^1.0.0

• Updated@cfpb/cfpb-icons@^1.0.0