@uqds/form 0.1.4-alpha.0 → 0.2.0-alpha.0

package/dist/css/main.css

@@ -1 +1 @@
-form,fieldset,legend,label,input,select,textarea,.uq-error-summary,.uq-error-message,.uq-success-message,.uq-inline-help{box-sizing:border-box;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}fieldset::before,fieldset::after,fieldset *,fieldset *::before,fieldset *::after,legend::before,legend::after,legend *,legend *::before,legend *::after,label::before,label::after,label *,label *::before,label *::after,input::before,input::after,input *,input *::before,input *::after,select::before,select::after,select *,select *::before,select *::after,textarea::before,textarea::after,textarea *,textarea *::before,textarea *::after{box-sizing:border-box}fieldset{border:0;padding:0;margin:0}label,legend{color:#3b383e;display:block;font-size:.875rem;font-weight:500}legend{margin-bottom:1rem;line-height:1.2;padding:0}legend.uq-legend--error{color:#d62929}legend .uq-legend__required{color:#d62929}label{cursor:pointer;line-height:1}label.uq-label--inline{align-items:center;display:inline-flex;font-size:1rem;line-height:1.6;margin-bottom:1.5rem}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea,label.uq-label--inline+input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline+select,label.uq-label--inline+textarea{max-width:none;min-width:200px;margin-left:1rem;margin-right:1.5rem;width:auto}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea{margin-top:0;margin-bottom:0}label.uq-label--disabled,label.uq-label--readonly{color:#d1d0d2}label.uq-label--disabled{cursor:not-allowed}label.uq-label--error{color:#d62929}label.uq-label--success{color:#4aa74e}label input:not([type=checkbox]):not([type=radio]),label select,label textarea,label+input:not([type=checkbox]):not([type=radio]),label+select,label+textarea{margin-top:.5rem}label input[type=radio]+*:not(input):not(select):not(textarea),label input[type=checkbox]+*:not(input):not(select):not(textarea){display:inline-block;font-size:1rem;font-weight:400;line-height:20px;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.25rem;padding-left:1.5rem;vertical-align:top}label input[type=radio][disabled]+*:not(input):not(select):not(textarea),label input[type=checkbox][disabled]+*:not(input):not(select):not(textarea){color:#d1d0d2}label .uq-label__required{color:#d62929}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed}input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{background-color:#fff;max-width:100%;min-width:100%;padding:.75rem 1rem;border:1px solid #d1d0d2;border-radius:2px;font-size:1rem;color:#3b383e;line-height:1;margin-bottom:1.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd inset;outline:none}input:not([type=checkbox]):not([type=radio]):not([type=submit])[disabled],select[disabled],textarea[disabled]{color:#d1d0d2}input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly]:focus,select[readonly]:focus,textarea[readonly]:focus{border-color:#d1d0d2;box-shadow:0 0 0 1px #d1d0d2 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder,select::placeholder,textarea::placeholder{color:#d1d0d2}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--error,select.uq-input--success,textarea.uq-input--error,textarea.uq-input--success{border-radius:2px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error:focus,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success:focus,select.uq-input--error:focus,select.uq-input--success:focus,textarea.uq-input--error:focus,textarea.uq-input--success:focus{border-color:#0d6dcd;box-shadow:0 2px 0 0 #0d6dcd,0 0 0 1px #0d6dcd inset}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,select.uq-input--error,textarea.uq-input--error{border-color:#d62929;box-shadow:0 2px 0 0 #d62929}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--success,textarea.uq-input--success{border-color:#4aa74e;box-shadow:0 2px 0 0 #4aa74e}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--large,select.uq-input--large,textarea.uq-input--large{padding:1.15625rem 1.5rem;border-radius:.25rem}input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-error-message,input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-success-message,select+.uq-error-message,select+.uq-success-message,textarea+.uq-error-message,textarea+.uq-success-message{margin-top:-1.5rem;border-radius:0 0 2px 2px}select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .25rem center;padding-right:2.5rem;cursor:pointer;line-height:1.2;width:100%}select:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%230d6dcd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}select[multiple]{height:auto;background-image:none}select[multiple]:focus{background-image:none}select[disabled]{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23a3a1a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}textarea{height:10rem}input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-block;border:1px solid #d1d0d2;cursor:pointer;height:20px;width:20px;vertical-align:top;position:absolute}input[type=radio]:focus,input[type=checkbox]:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd;outline:none}input[type=radio]+label,input[type=checkbox]+label{display:inline-block;font-size:1rem;font-weight:400;line-height:1.2;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.125rem;padding-left:1.5rem;vertical-align:top}input[type=radio]:checked,input[type=checkbox]:checked{border-color:#0d6dcd}input[type=radio]:checked:focus,input[type=checkbox]:checked:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio].uq-input--error,input[type=checkbox].uq-input--error{border-color:#d62929}input[type=radio].uq-input--error:focus,input[type=checkbox].uq-input--error:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio].uq-input--error:checked,input[type=checkbox].uq-input--error:checked{border-color:#d62929}input[type=radio].uq-input--error:checked:focus,input[type=checkbox].uq-input--error:checked:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio][disabled],input[type=checkbox][disabled]{cursor:not-allowed;border-color:#d1d0d2;background-color:#f3f3f4}input[type=radio][disabled]+label,input[type=checkbox][disabled]+label{color:#d1d0d2}input[type=radio][disabled]:checked,input[type=checkbox][disabled]:checked{background-color:#d1d0d2}input[type=checkbox]{border-radius:4px}input[type=checkbox]::after{content:"";display:block;position:absolute;background-repeat:no-repeat;background-position:center center;top:1px;left:1px;height:16px;width:16px}input[type=checkbox]:checked{background-color:#0d6dcd}input[type=checkbox]:checked::after{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 13.3 8.9 18 19 6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");padding:0px}input[type=checkbox].uq-input--error:checked{background-color:#d62929}input[type=radio]{border-radius:50%}input[type=radio]:checked{border-width:2px}input[type=radio]:checked::after{border-radius:50%;background-color:#0d6dcd;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}input[type=radio][disabled]:checked{background-color:#f3f3f4}input[type=radio][disabled]:checked::after{background-color:#d1d0d2}input[type=radio].uq-input--error:checked{border-color:#d62929}input[type=radio].uq-input--error:checked::after{background-color:#d62929}[type=submit]{appearance:none}.uq-error-summary{background-color:#fff;border:1px solid #d62929;border-left-width:.25rem;padding:1rem;margin-bottom:1.5rem}.uq-error-summary__title{color:#3b383e;font-size:1.125rem;font-weight:500;line-height:1.2;margin:0 0 1rem 0}.uq-error-summary_body{color:#3b383e;font-size:1rem}.uq-error-summary__list{color:#3b383e;font-size:1rem;margin:0;padding-left:1.5rem}.uq-error-summary__list__item{margin-bottom:.25rem;line-height:1.6}.uq-error-summary__list a{color:#d62929;text-decoration:underline;font-weight:400}.uq-error-summary__list a:hover,.uq-error-summary__list a:focus{color:#c32727}.uq-error-message,.uq-success-message{color:#fff;display:block;font-size:1rem;font-style:normal;font-weight:400;line-height:1.6;margin-bottom:1.5rem;padding:calc(0.5rem - 1px) 1rem .5rem 3rem;position:relative}.uq-error-message::before,.uq-success-message::before{content:"";display:block;background-position:center;background-repeat:no-repeat;background-size:contain;height:1.25rem;left:1rem;margin-right:.5rem;margin-top:calc(-0.625rem - 1px);position:absolute;top:50%;width:1.25rem}.uq-error-message{background-color:#d62929}.uq-error-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.127 18.545a1.18 1.18 0 0 1-1.055 1.706H4.929a1.18 1.18 0 0 1-1.055-1.706l7.072-14.143a1.179 1.179 0 0 1 2.109 0l7.072 14.143Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M12 9v4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='11.9' cy='16.601' r='1.1' fill='%23fff'%3e%3c/circle%3e%3c/svg%3e")}.uq-success-message{background-color:#4aa74e}.uq-success-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M7 12.867 9.6 16l6.733-8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-inline-help{display:block;font-size:.75rem;margin:0 0 1rem}
+form,fieldset,legend,label,input,select,textarea,.uq-error-summary,.uq-error-message,.uq-success-message,.uq-inline-help{box-sizing:border-box;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}fieldset::before,fieldset::after,fieldset *,fieldset *::before,fieldset *::after,legend::before,legend::after,legend *,legend *::before,legend *::after,label::before,label::after,label *,label *::before,label *::after,input::before,input::after,input *,input *::before,input *::after,select::before,select::after,select *,select *::before,select *::after,textarea::before,textarea::after,textarea *,textarea *::before,textarea *::after{box-sizing:border-box}fieldset{border:0;padding:0;margin:0}label,legend{color:#3b383e;display:block;font-size:.875rem;font-weight:500}legend{margin-bottom:1rem;line-height:1.2;padding:0}legend.uq-legend--error{color:#d62929}legend .uq-legend__required{color:#d62929}label{cursor:pointer;line-height:1}label.uq-label--inline{align-items:center;display:inline-flex;font-size:1rem;line-height:1.6;margin-bottom:1.5rem}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea,label.uq-label--inline+input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline+select,label.uq-label--inline+textarea{max-width:none;min-width:200px;margin-left:1rem;margin-right:1.5rem;width:auto}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea{margin-top:0;margin-bottom:0}label.uq-label--disabled,label.uq-label--readonly{color:#d1d0d2}label.uq-label--disabled{cursor:not-allowed}label.uq-label--error{color:#d62929}label.uq-label--success{color:#4aa74e}label input:not([type=checkbox]):not([type=radio]),label select,label textarea,label+input:not([type=checkbox]):not([type=radio]),label+select,label+textarea{margin-top:.5rem}label input[type=radio]+*:not(input):not(select):not(textarea),label input[type=checkbox]+*:not(input):not(select):not(textarea){display:inline-block;font-size:1rem;font-weight:400;line-height:20px;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.25rem;padding-left:1.5rem;vertical-align:top}label input[type=radio][disabled]+*:not(input):not(select):not(textarea),label input[type=checkbox][disabled]+*:not(input):not(select):not(textarea){color:#d1d0d2}label .uq-label__required{color:#d62929}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed}input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{background-color:#fff;max-width:100%;min-width:100%;padding:.75rem 1rem;border:1px solid #8c8a8d;border-radius:2px;font-size:1rem;color:#3b383e;line-height:1;margin-bottom:1.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd inset;outline:none}input:not([type=checkbox]):not([type=radio]):not([type=submit])[disabled],select[disabled],textarea[disabled]{color:#d1d0d2}input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly]:focus,select[readonly]:focus,textarea[readonly]:focus{border-color:#d1d0d2;box-shadow:0 0 0 1px #d1d0d2 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder,select::placeholder,textarea::placeholder{color:#a3a1a4}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--error,select.uq-input--success,textarea.uq-input--error,textarea.uq-input--success{border-radius:2px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error:focus,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success:focus,select.uq-input--error:focus,select.uq-input--success:focus,textarea.uq-input--error:focus,textarea.uq-input--success:focus{border-color:#0d6dcd;box-shadow:0 2px 0 0 #0d6dcd,0 0 0 1px #0d6dcd inset}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,select.uq-input--error,textarea.uq-input--error{border-color:#d62929;box-shadow:0 2px 0 0 #d62929}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--success,textarea.uq-input--success{border-color:#4aa74e;box-shadow:0 2px 0 0 #4aa74e}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--large,select.uq-input--large,textarea.uq-input--large{padding:1.15625rem 1.5rem;border-radius:.25rem}input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-error-message,input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-success-message,select+.uq-error-message,select+.uq-success-message,textarea+.uq-error-message,textarea+.uq-success-message{margin-top:-1.5rem;border-radius:0 0 2px 2px}select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .25rem center;padding-right:2.5rem;cursor:pointer;line-height:1.2;width:100%}select:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%230d6dcd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}select[multiple]{height:auto;background-image:none}select[multiple]:focus{background-image:none}select[disabled]{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23a3a1a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}textarea{height:10rem}input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-block;border:1px solid #d1d0d2;cursor:pointer;height:20px;width:20px;vertical-align:top;position:absolute}input[type=radio]:focus,input[type=checkbox]:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd;outline:none}input[type=radio]+label,input[type=checkbox]+label{display:inline-block;font-size:1rem;font-weight:400;line-height:1.2;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.125rem;padding-left:1.5rem;vertical-align:top}input[type=radio]:checked,input[type=checkbox]:checked{border-color:#0d6dcd}input[type=radio]:checked:focus,input[type=checkbox]:checked:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio].uq-input--error,input[type=checkbox].uq-input--error{border-color:#d62929}input[type=radio].uq-input--error:focus,input[type=checkbox].uq-input--error:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio].uq-input--error:checked,input[type=checkbox].uq-input--error:checked{border-color:#d62929}input[type=radio].uq-input--error:checked:focus,input[type=checkbox].uq-input--error:checked:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio][disabled],input[type=checkbox][disabled]{cursor:not-allowed;border-color:#d1d0d2;background-color:#f3f3f4}input[type=radio][disabled]+label,input[type=checkbox][disabled]+label{color:#d1d0d2}input[type=radio][disabled]:checked,input[type=checkbox][disabled]:checked{background-color:#d1d0d2}input[type=checkbox]{border-radius:4px}input[type=checkbox]::after{content:"";display:block;position:absolute;background-repeat:no-repeat;background-position:center center;top:1px;left:1px;height:16px;width:16px}input[type=checkbox]:checked{background-color:#0d6dcd}input[type=checkbox]:checked::after{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 13.3 8.9 18 19 6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");padding:0px}input[type=checkbox].uq-input--error:checked{background-color:#d62929}input[type=radio]{border-radius:50%}input[type=radio]:checked{border-width:2px}input[type=radio]:checked::after{border-radius:50%;background-color:#0d6dcd;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}input[type=radio][disabled]:checked{background-color:#f3f3f4}input[type=radio][disabled]:checked::after{background-color:#d1d0d2}input[type=radio].uq-input--error:checked{border-color:#d62929}input[type=radio].uq-input--error:checked::after{background-color:#d62929}[type=submit]{appearance:none}.uq-error-summary{background-color:#fff;border:1px solid #d62929;border-left-width:.25rem;padding:1rem;margin-bottom:1.5rem}.uq-error-summary__title{color:#3b383e;font-size:1.125rem;font-weight:500;line-height:1.2;margin:0 0 1rem 0}.uq-error-summary_body{color:#3b383e;font-size:1rem}.uq-error-summary__list{color:#3b383e;font-size:1rem;margin:0;padding-left:1.5rem}.uq-error-summary__list__item{margin-bottom:.25rem;line-height:1.6}.uq-error-summary__list a{color:#d62929;text-decoration:underline;font-weight:400}.uq-error-summary__list a:hover,.uq-error-summary__list a:focus{color:#c32727}.uq-error-message,.uq-success-message{color:#fff;display:block;font-size:1rem;font-style:normal;font-weight:400;line-height:1.6;margin-bottom:1.5rem;padding:calc(0.5rem - 1px) 1rem .5rem 3rem;position:relative}.uq-error-message::before,.uq-success-message::before{content:"";display:block;background-position:center;background-repeat:no-repeat;background-size:contain;height:1.25rem;left:1rem;margin-right:.5rem;margin-top:calc(-0.625rem - 1px);position:absolute;top:50%;width:1.25rem}.uq-error-message{background-color:#d62929}.uq-error-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.127 18.545a1.18 1.18 0 0 1-1.055 1.706H4.929a1.18 1.18 0 0 1-1.055-1.706l7.072-14.143a1.179 1.179 0 0 1 2.109 0l7.072 14.143Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M12 9v4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='11.9' cy='16.601' r='1.1' fill='%23fff'%3e%3c/circle%3e%3c/svg%3e")}.uq-success-message{background-color:#4aa74e}.uq-success-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M7 12.867 9.6 16l6.733-8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-inline-help{display:block;font-size:.75rem;margin:0 0 1rem}.uq-search-input{position:relative;max-width:554px}.uq-search-input input:not([type=checkbox]):not([type=radio]):not([type=submit]){margin:0}.uq-search-input--wide{max-width:800px}.uq-search-input__clear,.uq-search-input__submit{appearance:none;border:0;background:none;cursor:pointer;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}.uq-search-input__clear .uq-icon::before,.uq-search-input__submit .uq-icon::before{margin:0;width:24px;height:24px}.uq-search-input__submit{position:absolute;top:7px;right:12px}.uq-search-input__clear{position:absolute;top:7px;right:46px}.uq-search-input__clear .uq-icon::before{filter:invert(0%) sepia(72%) saturate(588%) hue-rotate(348deg) brightness(115%) contrast(81%);opacity:.6}

package/dist/js/uqds.js

@@ -0,0 +1,31 @@
+var uq = (function (exports) {
+  'use strict';
+
+  const searchInput = element => {
+    if (element) {
+      const textInput = element.querySelector(".uq-search-input__input");
+      const clearButton = element.querySelector(".uq-search-input__clear");
+      if (textInput && clearButton) {
+        textInput.addEventListener("input", event => {
+          const value = event.currentTarget.value;
+          if (value.length > 0) {
+            clearButton.classList.remove("hidden");
+          } else {
+            clearButton.classList.add("hidden");
+          }
+        });
+        clearButton.addEventListener("click", event => {
+          event.preventDefault();
+          textInput.value = "";
+          textInput.focus();
+          clearButton.classList.add("hidden");
+        });
+      }
+    }
+  };
+
+  exports.searchInput = searchInput;
+
+  return exports;
+
+})({});

package/dist/js/uqds.min.js

@@ -0,0 +1 @@
+var uq=(e=>(e.searchInput=e=>{if(e){let t=e.querySelector(".uq-search-input__input"),a=e.querySelector(".uq-search-input__clear");t&&a&&(t.addEventListener("input",e=>{0<e.currentTarget.value.length?a.classList.remove("hidden"):a.classList.add("hidden")}),a.addEventListener("click",e=>{e.preventDefault(),t.value="",t.focus(),a.classList.add("hidden")}))}},e))({});

package/dist/mjs/index.js

@@ -0,0 +1,24 @@
+const searchInput = element => {
+  if (element) {
+    const textInput = element.querySelector(".uq-search-input__input");
+    const clearButton = element.querySelector(".uq-search-input__clear");
+    if (textInput && clearButton) {
+      textInput.addEventListener("input", event => {
+        const value = event.currentTarget.value;
+        if (value.length > 0) {
+          clearButton.classList.remove("hidden");
+        } else {
+          clearButton.classList.add("hidden");
+        }
+      });
+      clearButton.addEventListener("click", event => {
+        event.preventDefault();
+        textInput.value = "";
+        textInput.focus();
+        clearButton.classList.add("hidden");
+      });
+    }
+  }
+};
+
+export { searchInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/form",
-  "version": "0.1.4-alpha.0",
+  "version": "0.2.0-alpha.0",
   "description": "Form element style rules",
   "keywords": [
     "uqds",
@@ -29,6 +29,17 @@
     "dist/*",
     "src/*"
   ],
+  "main": "dist/js/uqds.js",
+  "module": "dist/mjs/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/mjs/index.js",
+      "require": "./dist/js/uqds.js"
+    },
+    "./src/js/*": "./src/js/*.js",
+    "./src/scss/*": "./src/scss/*"
+  },
+  "style": "dist/css/main.css",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/uq-its-ss/design-system.git"
@@ -43,16 +54,7 @@
   },
   "dependencies": {
     "@uqds/core": "^1.2.4-alpha.0",
-    "@uqds/icon": "^0.0.19-alpha.0"
-  },
-  "devDependencies": {
-    "@svgdotjs/svg.js": "^3.0.16",
-    "chalk": "^4.1.0",
-    "glob": "^7.1.6",
-    "js-yaml": "^3.14.0",
-    "mini-svg-data-uri": "^1.2.3",
-    "svgdom": "0.1.14",
-    "svgo": "^1.3.2"
-  },
-  "gitHead": "24bcd44af1c5622d310d0742adce42f160e786f6"
+    "@uqds/icon": "^0.0.19-alpha.1"
+  },
+  "gitHead": "e3447f4270f4a5b7e190bb3360580edd661e01d6"
 }

package/src/js/main.js

@@ -0,0 +1,3 @@
+import { searchInput } from "./search-input";
+
+export { searchInput };

package/src/js/search-input.js

@@ -0,0 +1,24 @@
+export const searchInput = (element) => {
+  if (element) {
+    const textInput = element.querySelector(".uq-search-input__input");
+    const clearButton = element.querySelector(".uq-search-input__clear");
+
+    if (textInput && clearButton) {
+      textInput.addEventListener("input", (event) => {
+        const value = event.currentTarget.value;
+        if (value.length > 0) {
+          clearButton.classList.remove("hidden");
+        } else {
+          clearButton.classList.add("hidden");
+        }
+      });
+
+      clearButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        textInput.value = "";
+        textInput.focus();
+        clearButton.classList.add("hidden");
+      });
+    }
+  }
+};

package/src/scss/_component.scss

@@ -1,7 +1,6 @@
 @use "@uqds/core/src/scss/global" as core;
 @use "@uqds/icon/src/scss/global" as icon;
 @use "global" as *;
-@use "icons" as *;
 
 $use-encapsulation: false !default;
 
@@ -166,7 +165,7 @@ $use-encapsulation: false !default;
     max-width: 100%;
     min-width: 100%;
     padding: ($form-spacing - core.$space-xs) $form-spacing;
-    border: $form-border-width solid core.$grey-300;
+    border: $form-border-width solid core.$grey-600;
     border-radius: $form-border-radius;
     font-size: $form-text-size;
     color: core.$grey-900;
@@ -191,7 +190,7 @@ $use-encapsulation: false !default;
     }
 
     &::placeholder {
-      color: core.$grey-300;
+      color: core.$grey-500;
     }
 
     &.uq-input--error,
@@ -200,7 +199,8 @@ $use-encapsulation: false !default;
 
       &:focus {
         border-color: core.$utility-500;
-        box-shadow: 0 2px 0 0 core.$utility-500,
+        box-shadow:
+          0 2px 0 0 core.$utility-500,
           0 0 0 1px core.$utility-500 inset;
       }
     }

package/src/scss/_search-input.scss

@@ -0,0 +1,55 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "@uqds/icon/src/scss/global" as icon;
+@use "global" as *;
+
+.uq-search-input {
+  position: relative;
+  max-width: 554px;
+
+  & input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
+    margin: 0;
+  }
+}
+
+.uq-search-input--wide {
+  max-width: 800px;
+}
+
+.uq-search-input__clear,
+.uq-search-input__submit {
+  appearance: none;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & .uq-icon {
+    &::before {
+      margin: 0;
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+.uq-search-input__submit {
+  position: absolute;
+  top: 7px;
+  right: 12px;
+}
+
+.uq-search-input__clear {
+  position: absolute;
+  top: 7px;
+  right: 46px;
+
+  & .uq-icon::before {
+    filter: icon.$icon-text-filter;
+    opacity: 0.6;
+  }
+}

package/src/scss/main.scss

@@ -1 +1,2 @@
 @use "component";
+@use "search-input";

package/src/images/form-checkbox-check.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-  <path d="M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z" />
-</svg>

package/src/images/form-chevron-down.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-  <path d="M14.285 5.145l-6 6.167a.41.41 0 01-.598 0L1.715 5.145" fill="none" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/images/form-error.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140"><g transform="matrix(10,0,0,10,0,0)"><path d="M13.842,11.829l-5.5-11a1.5,1.5,0,0,0-2.684,0l-5.5,11A1.5,1.5,0,0,0,1.5,14h11a1.5,1.5,0,0,0,1.342-2.171ZM6.25,5a.75.75,0,0,1,1.5,0V8a.75.75,0,0,1-1.5,0ZM7,12a1,1,0,1,1,1-1A1,1,0,0,1,7,12Z" fill="#000000" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>

package/src/images/form-success.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140"><g transform="matrix(10,0,0,10,0,0)"><path d="M7,0a7,7,0,1,0,7,7A7.008,7.008,0,0,0,7,0Zm3.6,5.9L6.624,9.874a1,1,0,0,1-1.415,0L3.4,8.068A1,1,0,0,1,4.818,6.654l1.1,1.1L9.182,4.487A1,1,0,0,1,10.6,5.9Z" fill="#000000" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>

package/src/scss/_icons.scss

@@ -1,42 +0,0 @@
-$-icons: (
-  "form-checkbox-check":
-    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='~~COLOR~~'%3e%3cpath d='M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z'%3e%3c/path%3e%3c/svg%3e",
-  "form-chevron-down":
-    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='~~COLOR~~'%3e%3cpath d='M14.285 5.145l-6 6.167a.41.41 0 01-.598 0L1.715 5.145' fill='none' stroke='~~COLOR~~' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e",
-  "form-error":
-    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='140' height='140' fill='~~COLOR~~'%3e%3cpath d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z'%3e%3c/path%3e%3c/svg%3e",
-  "form-success":
-    "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='140' height='140' fill='~~COLOR~~'%3e%3cpath d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm36 59L66.24 98.74a10 10 0 01-14.15 0L34 80.68a10.013 10.013 0 0114.18-14.14l11 11 32.64-32.67A10.01 10.01 0 01106 59z'%3e%3c/path%3e%3c/svg%3e",
-);
-
-@function -str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      -str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}
-
-@function get-icon($icon, $color: #2b2b2b) {
-  @if type-of($color) != "color" and $color != "none" {
-    @warn 'The requested color - "' + $color + '" - was not recognized as a Sass color value.';
-    @return null;
-  }
-
-  @if map-has-key($-icons, $icon) {
-    $icon: map-get($-icons, $icon);
-    $data-uri: -str-replace($icon, "~~COLOR~~", $color);
-
-    @return -str-replace($data-uri, "#", "%23");
-  }
-
-  @warn 'The requested icon - "' + $icon + '" - is not defined in the $icons map.';
-  @return null;
-}