@uqds/form 0.0.7-alpha.0 → 0.0.8-alpha.0

package/README.md

@@ -1,26 +1,26 @@
-# @uqds/form
-
-> Styles for HTML form elements and form validation.
-
-## Usage
-
-### Installation
-
-With Yarn:
-```shell
-yarn add @uqds/form
-```
-
-With NPM:
-```shell
-npm i @uqds/form
-```
-
----
-
-## Dependencies
-
-```
-@uqds/form
-└─ @uqds/core
-```
+# @uqds/form
+
+> Styles for HTML form elements and form validation.
+
+## Usage
+
+### Installation
+
+With Yarn:
+```shell
+yarn add @uqds/form
+```
+
+With NPM:
+```shell
+npm i @uqds/form
+```
+
+---
+
+## Dependencies
+
+```
+@uqds/form
+└─ @uqds/core
+```

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:#2b2a29;display:block;font-size:.875rem;font-weight:500}legend{margin-bottom:1rem;line-height:1.4;padding:0}legend.uq-legend--error{color:#951126}legend .uq-legend__required{color:#951126}label{cursor:pointer;line-height:1}label.uq-label--inline{align-items:center;display:inline-flex;font-size:1rem;line-height:1.5;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:#aca7a3}label.uq-label--disabled{cursor:not-allowed}label.uq-label--error{color:#951126}label.uq-label--success{color:#238029}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:#aca7a3}label .uq-label__required{color:#951126}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 #e7e3e0;border-radius:2px;font-size:1rem;color:#2b2a29;line-height:1;margin-bottom:1.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6 inset;outline:none}input:not([type=checkbox]):not([type=radio]):not([type=submit])[disabled],select[disabled],textarea[disabled]{color:#817d7a}input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly]:focus,select[readonly]:focus,textarea[readonly]:focus{border-color:#e7e3e0;box-shadow:0 0 0 1px #e7e3e0 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder,select::placeholder,textarea::placeholder{color:#817d7a}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:#1e72c6;box-shadow:0 2px 0 0 #1e72c6,0 0 0 1px #1e72c6 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,select.uq-input--error,textarea.uq-input--error{border-color:#951126;box-shadow:0 2px 0 0 #951126}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--success,textarea.uq-input--success{border-color:#238029;box-shadow:0 2px 0 0 #238029}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='%231E72C6' 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='%23e7e3e0' 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 #e7e3e0;cursor:pointer;height:20px;width:20px;vertical-align:top;position:absolute}input[type=radio]:focus,input[type=checkbox]:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6;outline:none}input[type=radio]+label,input[type=checkbox]+label{display:inline-block;font-size:1rem;font-weight:400;line-height:1.4;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:#1e72c6}input[type=radio]:checked:focus,input[type=checkbox]:checked:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio].uq-input--error,input[type=checkbox].uq-input--error{border-color:#951126}input[type=radio].uq-input--error:focus,input[type=checkbox].uq-input--error:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio].uq-input--error:checked,input[type=checkbox].uq-input--error:checked{border-color:#951126}input[type=radio].uq-input--error:checked:focus,input[type=checkbox].uq-input--error:checked:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio][disabled],input[type=checkbox][disabled]{cursor:not-allowed;border-color:#e7e3e0;background-color:#f7f6f5}input[type=radio][disabled]+label,input[type=checkbox][disabled]+label{color:#aca7a3}input[type=radio][disabled]:checked,input[type=checkbox][disabled]:checked{background-color:#dfdad6}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:#1e72c6}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:#951126}input[type=radio]{border-radius:50%}input[type=radio]:checked{border-width:2px}input[type=radio]:checked::after{border-radius:50%;background-color:#1e72c6;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}input[type=radio][disabled]:checked{background-color:#f7f6f5}input[type=radio][disabled]:checked::after{background-color:#dfdad6}input[type=radio].uq-input--error:checked{border-color:#951126}input[type=radio].uq-input--error:checked::after{background-color:#951126}[type=submit]{appearance:none}.uq-error-summary{background-color:#fff;border:1px solid #951126;border-left-width:.25rem;padding:1rem;margin-bottom:1.5rem}.uq-error-summary__title{color:#2b2a29;font-size:1.125rem;font-weight:500;line-height:1.4;margin:0 0 1rem 0}.uq-error-summary_body{color:#2b2a29;font-size:1rem}.uq-error-summary__list{color:#2b2a29;font-size:1rem;margin:0}.uq-error-summary__list__item{margin-bottom:.25rem;line-height:1.5}.uq-error-summary__list a{color:#951126;text-decoration:underline;font-weight:400}.uq-error-summary__list a:hover,.uq-error-summary__list a:focus{color:#7e0f21}.uq-error-message,.uq-success-message{color:#fff;display:block;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;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:#951126}.uq-error-message::before{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cg stroke='%23fff' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M8 11.77c-.113 0-.2.085-.2.203 0 .113.087.199.2.199.113 0 .2-.086.2-.2a.196.196 0 0 0-.2-.202zm0 0'%3e%3c/path%3e%3cpath d='M8 10.086V5.914m.914-3.629c-.258-.515-.855-.715-1.344-.457a.9.9 0 0 0-.457.457L1.801 13.06a.853.853 0 0 0 .398 1.14.77.77 0 0 0 .371.086h10.86a.858.858 0 0 0 .77-1.226zm0 0' fill='none'%3e%3c/path%3e%3c/g%3e%3c/svg%3e")}.uq-success-message{background-color:#238029}.uq-success-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m16.267 30.394 4.79 6.8a2.051 2.051 0 0 0 3.339.099l15.337-19.405' stroke='%23fff' stroke-width='2.66' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3cpath d='M6 28a22 22 0 1 0 44 0 22 22 0 0 0-44 0v0Z' stroke='%23fff' stroke-width='2.66' 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:#2b2a29;display:block;font-size:.875rem;font-weight:500}legend{margin-bottom:1rem;line-height:1.4;padding:0}legend.uq-legend--error{color:#951126}legend .uq-legend__required{color:#951126}label{cursor:pointer;line-height:1}label.uq-label--inline{align-items:center;display:inline-flex;font-size:1rem;line-height:1.5;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:#aca7a3}label.uq-label--disabled{cursor:not-allowed}label.uq-label--error{color:#951126}label.uq-label--success{color:#238029}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:#aca7a3}label .uq-label__required{color:#951126}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 #e7e3e0;border-radius:2px;font-size:1rem;color:#2b2a29;line-height:1;margin-bottom:1.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6 inset;outline:none}input:not([type=checkbox]):not([type=radio]):not([type=submit])[disabled],select[disabled],textarea[disabled]{color:#817d7a}input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly]:focus,select[readonly]:focus,textarea[readonly]:focus{border-color:#e7e3e0;box-shadow:0 0 0 1px #e7e3e0 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder,select::placeholder,textarea::placeholder{color:#817d7a}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:#1e72c6;box-shadow:0 2px 0 0 #1e72c6,0 0 0 1px #1e72c6 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,select.uq-input--error,textarea.uq-input--error{border-color:#951126;box-shadow:0 2px 0 0 #951126}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--success,textarea.uq-input--success{border-color:#238029;box-shadow:0 2px 0 0 #238029}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='%231E72C6' 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='%23e7e3e0' 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 #e7e3e0;cursor:pointer;height:20px;width:20px;vertical-align:top;position:absolute}input[type=radio]:focus,input[type=checkbox]:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6;outline:none}input[type=radio]+label,input[type=checkbox]+label{display:inline-block;font-size:1rem;font-weight:400;line-height:1.4;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:#1e72c6}input[type=radio]:checked:focus,input[type=checkbox]:checked:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio].uq-input--error,input[type=checkbox].uq-input--error{border-color:#951126}input[type=radio].uq-input--error:focus,input[type=checkbox].uq-input--error:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio].uq-input--error:checked,input[type=checkbox].uq-input--error:checked{border-color:#951126}input[type=radio].uq-input--error:checked:focus,input[type=checkbox].uq-input--error:checked:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio][disabled],input[type=checkbox][disabled]{cursor:not-allowed;border-color:#e7e3e0;background-color:#f7f6f5}input[type=radio][disabled]+label,input[type=checkbox][disabled]+label{color:#aca7a3}input[type=radio][disabled]:checked,input[type=checkbox][disabled]:checked{background-color:#dfdad6}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:#1e72c6}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:#951126}input[type=radio]{border-radius:50%}input[type=radio]:checked{border-width:2px}input[type=radio]:checked::after{border-radius:50%;background-color:#1e72c6;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}input[type=radio][disabled]:checked{background-color:#f7f6f5}input[type=radio][disabled]:checked::after{background-color:#dfdad6}input[type=radio].uq-input--error:checked{border-color:#951126}input[type=radio].uq-input--error:checked::after{background-color:#951126}[type=submit]{appearance:none}.uq-error-summary{background-color:#fff;border:1px solid #951126;border-left-width:.25rem;padding:1rem;margin-bottom:1.5rem}.uq-error-summary__title{color:#2b2a29;font-size:1.125rem;font-weight:500;line-height:1.4;margin:0 0 1rem 0}.uq-error-summary_body{color:#2b2a29;font-size:1rem}.uq-error-summary__list{color:#2b2a29;font-size:1rem;margin:0}.uq-error-summary__list__item{margin-bottom:.25rem;line-height:1.5}.uq-error-summary__list a{color:#951126;text-decoration:underline;font-weight:400}.uq-error-summary__list a:hover,.uq-error-summary__list a:focus{color:#7e0f21}.uq-error-message,.uq-success-message{color:#fff;display:block;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;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:#951126}.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:#238029}.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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/form",
-  "version": "0.0.7-alpha.0",
+  "version": "0.0.8-alpha.0",
   "description": "Form element style rules",
   "keywords": [
     "uqds",
@@ -42,8 +42,8 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^0.0.7-alpha.0",
-    "@uqds/icon": "^0.0.7-alpha.0"
+    "@uqds/core": "^0.0.8-alpha.0",
+    "@uqds/icon": "^0.0.8-alpha.0"
   },
   "devDependencies": {
     "@svgdotjs/svg.js": "^3.0.16",
@@ -54,5 +54,5 @@
     "svgdom": "^0.1.8",
     "svgo": "^1.3.2"
   },
-  "gitHead": "8375016d6dc8a6b640f9fa12733156796d7e28c1"
+  "gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
 }

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

@@ -1,3 +1,3 @@
-<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>
+<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 +1,3 @@
-<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>
+<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/scss/_component.scss

@@ -1,505 +1,505 @@
-@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;
-
-@mixin form-styles {
-  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: core.$font-body;
-  }
-
-  fieldset,
-  legend,
-  label,
-  input,
-  select,
-  textarea {
-    &::before, &::after,
-    *, *::before, *::after {
-      box-sizing: border-box;
-    }
-  }
-
-  fieldset {
-    border: 0;
-    padding: 0;
-    margin: 0;
-  }
-
-  label,
-  legend {
-    color: $form-text-color;
-    display: block;
-    font-size: $form-label-size;
-    font-weight: core.$font-weight-bold;
-  }
-
-  legend {
-    margin-bottom: $form-spacing;
-    line-height: core.$line-height-h;
-    padding: 0;
-
-    &.uq-legend--error {
-      color: $form-color-error;
-    }
-
-    .uq-legend__required {
-      color: $form-color-error;
-    }
-  }
-  
-  label {
-    cursor: pointer;
-    line-height: core.$line-height-ui;
-
-    &.uq-label {
-      &--inline {
-        align-items: center;
-        display: inline-flex;
-        font-size: core.$font-size;
-        line-height: core.$line-height;
-        margin-bottom: core.$space-m;
-  
-        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-        select,
-        textarea,
-        + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-        + select,
-        + textarea {
-          max-width: none;
-          min-width: 200px;
-          margin-left: core.$space;
-          margin-right: core.$space-m;
-          width: auto;
-        }
-
-        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-        select,
-        textarea {
-          margin-top: 0;
-          margin-bottom: core.$space-none;
-        }
-      }
-
-      &--disabled,
-      &--readonly {
-        color: $form-text-disabled-color;
-      }
-
-      &--disabled {
-        cursor: not-allowed;
-      }
-
-      &--error {
-        color: $form-color-error;
-      }
-
-      &--success {
-        color: $form-color-success;
-      }
-    }
-
-    input:not([type="checkbox"]):not([type="radio"]),
-    select,
-    textarea,
-    + input:not([type="checkbox"]):not([type="radio"]),
-    + select,
-    + textarea {
-      margin-top: core.$space-s;
-    }
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      + *:not(input):not(select):not(textarea) {
-        display: inline-block;
-        font-size: core.$font-size;
-        font-weight: core.$font-weight-normal;
-        line-height: $form-checkbox-size;
-        margin-bottom: core.$space;
-        margin-left: core.$space-s;
-        margin-right: $form-spacing;
-        padding-top: core.$space-xs;
-        padding-left: core.$space-m;
-        vertical-align: top;
-      }
-
-      &[disabled] {
-        + *:not(input):not(select):not(textarea) {
-          color: $form-text-disabled-color;
-        }
-      }
-    }
-
-    .uq-label__required {
-      color: $form-color-error;
-    }
-  }
-
-  input,
-  select,
-  textarea {
-    &[disabled] {
-      cursor: not-allowed;
-    }
-  }
-
-  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
-  select,
-  textarea {
-    background-color: core.$uq-white;
-    max-width: 100%;
-    min-width: 100%;
-    padding: ($form-spacing - core.$space-xs) $form-spacing;
-    border: $form-border-width solid $form-border-color;
-    border-radius: $form-border-radius;
-    font-size: $form-text-size;
-    color: $form-text-color;
-    line-height: core.$line-height-ui;
-    margin-bottom: core.$space-m;
-
-    &:focus {
-      border-color: $form-border-color-focus;
-      box-shadow: 0 0 0 1px $form-border-color-focus inset;
-      outline: none;
-    }
-
-    &[disabled] {
-      color: $form-placeholder-color;
-    }
-
-    &[readonly] {
-      &:focus {
-        border-color: $form-border-color;
-        box-shadow: 0 0 0 1px $form-border-color inset;
-      }
-    }
-
-    &::placeholder {
-      color: $form-placeholder-color;
-    }
-
-    &.uq-input--error,
-    &.uq-input--success {
-      border-radius: $form-border-radius;
-
-      &:focus {
-        border-color: $form-border-color-focus;
-        box-shadow: 0 2px 0 0 $form-border-color-focus,
-                    0 0 0 1px $form-border-color-focus inset;
-      }
-    }
-
-    &.uq-input--error {
-      border-color: $form-color-error;
-      box-shadow: 0 2px 0 0 $form-color-error;
-    }
-
-    &.uq-input--success {
-      border-color: $form-color-success;
-      box-shadow: 0 2px 0 0 $form-color-success;
-    }
-
-    &.uq-input--large {
-      padding: 1.15625rem core.$space-m;
-      border-radius: core.$space-xs;
-    }
-
-    + .uq-error-message,
-    + .uq-success-message {
-      margin-top: -(core.$space-m);
-      border-radius: 0 0 $form-border-radius $form-border-radius;
-    }
-  }
-
-  select {
-    appearance: none;
-    -webkit-appearance: none;
-    background-image: url(icon.get-icon('standard--chevron-down-sml', $form-select-icon));
-    background-repeat: no-repeat;
-    background-position: right core.$space-xs center;
-    padding-right: 2.5rem;
-    cursor: pointer;
-    line-height: 1.2;
-    width: 100%;
-
-    &:focus {
-      background-image: url(icon.get-icon('standard--chevron-down-sml', $form-focus-color));
-    }
-  
-    &[multiple] {
-      height: auto;
-      background-image: none;
-
-      &:focus {
-        background-image: none;
-      }
-    }
-  
-    &[disabled] {
-      background-image: url(icon.get-icon('standard--chevron-down-sml', $form-select-icon-disabled));
-    }
-  }
-
-  textarea {
-    height: 4 * $form-element-height;
-  }
-
-  input[type="radio"],
-  input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    display: inline-block;
-    border: $form-checkbox-border-width solid $form-border-color;
-    cursor: pointer;
-    height: $form-checkbox-size;
-    width: $form-checkbox-size;
-    vertical-align: top;
-    position: absolute;
-
-    &:focus {
-      border-color: $form-focus-color;
-      box-shadow: 0 0 0 1px $form-focus-color;
-      outline: none;
-    }
-
-    + label {
-      display: inline-block;
-      font-size: core.$font-size;
-      font-weight: core.$font-weight-normal;
-      line-height: core.$line-height-h;
-      margin-bottom: core.$space;
-      margin-left: core.$space-s;
-      margin-right: $form-spacing;
-      padding-top: core.$space-compressed-xs;
-      padding-left: core.$space-m;
-      vertical-align: top;
-    }
-
-    &:checked {
-      border-color: core.$link;
-
-      &:focus {
-        border-color: $form-focus-color;
-        box-shadow: 0 0 0 1px $form-focus-color;
-      }
-    }
-
-    &.uq-input--error {
-      border-color: $form-color-error;
-
-      &:focus {
-        border-color: $form-focus-color;
-        box-shadow: 0 0 0 1px $form-focus-color;
-      }
-
-      &:checked {
-        border-color: $form-color-error;
-
-        &:focus {
-          border-color: $form-focus-color;
-          box-shadow: 0 0 0 1px $form-focus-color;
-        }
-      }
-    }
-
-    &[disabled] {
-      cursor: not-allowed;
-      border-color: $form-border-color;
-      background-color: core.$uq-neutral-light80;
-
-      + label {
-        color: $form-text-disabled-color;
-      }
-
-      &:checked {
-        background-color: core.$uq-neutral-light20;
-      }
-    }
-  }
-  
-  input[type="checkbox"] {
-    border-radius: $form-checkbox-border-radius;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      background-repeat: no-repeat;
-      background-position: center center;
-      top: 1px;
-      left: 1px;
-      height: $form-checkbox-check-size;
-      width: $form-checkbox-check-size;
-    }
-
-    &:checked {
-      background-color: core.$link;
-
-      &::after {
-        background-image: url(icon.get-icon('standard--check', $form-checkbox-check-color));
-        padding: 0px;
-      }
-    }
-
-    &.uq-input--error {
-      &:checked {
-        background-color: $form-color-error;
-      }
-    }
-  }
-  
-  input[type="radio"] {
-    border-radius: 50%;
-  
-    &:checked {
-      border-width: 2px;
-
-      &::after {
-        border-radius: 50%;
-        background-color: core.$link;
-        content: "";
-        display: block;
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        height: $form-checkbox-size - 10px;
-        width: $form-checkbox-size - 10px;
-      }
-    }
-
-    &[disabled] {
-      &:checked {
-        background-color: core.$uq-neutral-light80;
-        &::after {
-          background-color: core.$uq-neutral-light20;
-        }
-      }
-    }
-
-    &.uq-input--error {
-      &:checked {
-        border-color: $form-color-error;
-
-        &::after {
-          background-color: $form-color-error;
-        }
-      }
-    }
-  }
-
-  [type="submit"] {
-    appearance: none;
-  }
-
-  .uq-error-summary {
-    background-color: lighten(core.$alert-light, 10%);
-    border: 1px solid core.$alert;
-    border-left-width: core.$space-xs;
-    padding: core.$space;
-    margin-bottom: core.$space-m;
-  
-    &__title {
-      color: core.$text;
-      font-size: core.$font-size-m;
-      font-weight: core.$font-weight-bold;
-      line-height: core.$line-height-h;
-      margin: core.$space-none core.$space-none core.$space core.$space-none;
-    }
-  
-    &_body {
-      color: core.$text;
-      font-size: core.$space;
-    }
-    
-    &__list {
-      color: core.$text;
-      font-size: core.$space;
-      margin: core.$space-none;
-  
-      &__item {
-        margin-bottom: core.$space-xs;
-        line-height: core.$line-height;
-      }
-  
-      a {
-        color: core.$alert;
-        text-decoration: underline;
-        font-weight: core.$font-weight-normal;
-        &:hover, &:focus {
-          color: darken(core.$alert, 5%);
-        }
-      }
-    }
-  }
-
-  .uq-error-message,
-  .uq-success-message {
-    color: core.$uq-white;
-    display: block;
-    font-size: core.$font-size;
-    font-style: normal;
-    font-weight: core.$font-weight-normal;
-    line-height: core.$line-height;
-    margin-bottom: core.$space-m;
-    padding: calc(#{core.$space-s} - 1px) core.$space core.$space-s core.$space-xxl;
-    position: relative;
-
-    &::before {
-      content: '';
-      display: block;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      height: core.$space-compressed-xl;
-      left: core.$space;
-      margin-right: core.$space-s;
-      margin-top: calc(#{-(core.$space-compressed-xl) * 0.5} - 1px);
-      position: absolute;
-      top: 50%;
-      width: core.$space-compressed-xl;
-    }
-  }
-
-  .uq-error-message {
-    background-color: $form-color-error;
-
-    &::before {
-      background-image: url(icon.get-icon('standard--alert-triangle', core.$uq-white));
-    }
-  }
-
-  .uq-success-message {
-    background-color: $form-color-success;
-
-    &::before {
-      background-image: url(icon.get-icon('standard--success-circle', core.$uq-white));
-    }
-  }
-
-  .uq-inline-help {
-    display: block;
-    font-size: $form-description-size;
-    margin: 0 0 $form-spacing;
-  }
-}
-
-@if $use-encapsulation {
-  .uq {
-    @include form-styles;
-  }
-} @else {
-  @include form-styles;
-}
+@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;
+
+@mixin form-styles {
+  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: core.$font-body;
+  }
+
+  fieldset,
+  legend,
+  label,
+  input,
+  select,
+  textarea {
+    &::before, &::after,
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+  }
+
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  label,
+  legend {
+    color: $form-text-color;
+    display: block;
+    font-size: $form-label-size;
+    font-weight: core.$font-weight-bold;
+  }
+
+  legend {
+    margin-bottom: $form-spacing;
+    line-height: core.$line-height-h;
+    padding: 0;
+
+    &.uq-legend--error {
+      color: $form-color-error;
+    }
+
+    .uq-legend__required {
+      color: $form-color-error;
+    }
+  }
+  
+  label {
+    cursor: pointer;
+    line-height: core.$line-height-ui;
+
+    &.uq-label {
+      &--inline {
+        align-items: center;
+        display: inline-flex;
+        font-size: core.$font-size;
+        line-height: core.$line-height;
+        margin-bottom: core.$space-m;
+  
+        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+        select,
+        textarea,
+        + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+        + select,
+        + textarea {
+          max-width: none;
+          min-width: 200px;
+          margin-left: core.$space;
+          margin-right: core.$space-m;
+          width: auto;
+        }
+
+        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+        select,
+        textarea {
+          margin-top: 0;
+          margin-bottom: core.$space-none;
+        }
+      }
+
+      &--disabled,
+      &--readonly {
+        color: $form-text-disabled-color;
+      }
+
+      &--disabled {
+        cursor: not-allowed;
+      }
+
+      &--error {
+        color: $form-color-error;
+      }
+
+      &--success {
+        color: $form-color-success;
+      }
+    }
+
+    input:not([type="checkbox"]):not([type="radio"]),
+    select,
+    textarea,
+    + input:not([type="checkbox"]):not([type="radio"]),
+    + select,
+    + textarea {
+      margin-top: core.$space-s;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      + *:not(input):not(select):not(textarea) {
+        display: inline-block;
+        font-size: core.$font-size;
+        font-weight: core.$font-weight-normal;
+        line-height: $form-checkbox-size;
+        margin-bottom: core.$space;
+        margin-left: core.$space-s;
+        margin-right: $form-spacing;
+        padding-top: core.$space-xs;
+        padding-left: core.$space-m;
+        vertical-align: top;
+      }
+
+      &[disabled] {
+        + *:not(input):not(select):not(textarea) {
+          color: $form-text-disabled-color;
+        }
+      }
+    }
+
+    .uq-label__required {
+      color: $form-color-error;
+    }
+  }
+
+  input,
+  select,
+  textarea {
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  }
+
+  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
+  select,
+  textarea {
+    background-color: core.$uq-white;
+    max-width: 100%;
+    min-width: 100%;
+    padding: ($form-spacing - core.$space-xs) $form-spacing;
+    border: $form-border-width solid $form-border-color;
+    border-radius: $form-border-radius;
+    font-size: $form-text-size;
+    color: $form-text-color;
+    line-height: core.$line-height-ui;
+    margin-bottom: core.$space-m;
+
+    &:focus {
+      border-color: $form-border-color-focus;
+      box-shadow: 0 0 0 1px $form-border-color-focus inset;
+      outline: none;
+    }
+
+    &[disabled] {
+      color: $form-placeholder-color;
+    }
+
+    &[readonly] {
+      &:focus {
+        border-color: $form-border-color;
+        box-shadow: 0 0 0 1px $form-border-color inset;
+      }
+    }
+
+    &::placeholder {
+      color: $form-placeholder-color;
+    }
+
+    &.uq-input--error,
+    &.uq-input--success {
+      border-radius: $form-border-radius;
+
+      &:focus {
+        border-color: $form-border-color-focus;
+        box-shadow: 0 2px 0 0 $form-border-color-focus,
+                    0 0 0 1px $form-border-color-focus inset;
+      }
+    }
+
+    &.uq-input--error {
+      border-color: $form-color-error;
+      box-shadow: 0 2px 0 0 $form-color-error;
+    }
+
+    &.uq-input--success {
+      border-color: $form-color-success;
+      box-shadow: 0 2px 0 0 $form-color-success;
+    }
+
+    &.uq-input--large {
+      padding: 1.15625rem core.$space-m;
+      border-radius: core.$space-xs;
+    }
+
+    + .uq-error-message,
+    + .uq-success-message {
+      margin-top: -(core.$space-m);
+      border-radius: 0 0 $form-border-radius $form-border-radius;
+    }
+  }
+
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url(icon.get-icon('standard--chevron-down-sml', $form-select-icon));
+    background-repeat: no-repeat;
+    background-position: right core.$space-xs center;
+    padding-right: 2.5rem;
+    cursor: pointer;
+    line-height: 1.2;
+    width: 100%;
+
+    &:focus {
+      background-image: url(icon.get-icon('standard--chevron-down-sml', $form-focus-color));
+    }
+  
+    &[multiple] {
+      height: auto;
+      background-image: none;
+
+      &:focus {
+        background-image: none;
+      }
+    }
+  
+    &[disabled] {
+      background-image: url(icon.get-icon('standard--chevron-down-sml', $form-select-icon-disabled));
+    }
+  }
+
+  textarea {
+    height: 4 * $form-element-height;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    display: inline-block;
+    border: $form-checkbox-border-width solid $form-border-color;
+    cursor: pointer;
+    height: $form-checkbox-size;
+    width: $form-checkbox-size;
+    vertical-align: top;
+    position: absolute;
+
+    &:focus {
+      border-color: $form-focus-color;
+      box-shadow: 0 0 0 1px $form-focus-color;
+      outline: none;
+    }
+
+    + label {
+      display: inline-block;
+      font-size: core.$font-size;
+      font-weight: core.$font-weight-normal;
+      line-height: core.$line-height-h;
+      margin-bottom: core.$space;
+      margin-left: core.$space-s;
+      margin-right: $form-spacing;
+      padding-top: core.$space-compressed-xs;
+      padding-left: core.$space-m;
+      vertical-align: top;
+    }
+
+    &:checked {
+      border-color: core.$link;
+
+      &:focus {
+        border-color: $form-focus-color;
+        box-shadow: 0 0 0 1px $form-focus-color;
+      }
+    }
+
+    &.uq-input--error {
+      border-color: $form-color-error;
+
+      &:focus {
+        border-color: $form-focus-color;
+        box-shadow: 0 0 0 1px $form-focus-color;
+      }
+
+      &:checked {
+        border-color: $form-color-error;
+
+        &:focus {
+          border-color: $form-focus-color;
+          box-shadow: 0 0 0 1px $form-focus-color;
+        }
+      }
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      border-color: $form-border-color;
+      background-color: core.$uq-neutral-light80;
+
+      + label {
+        color: $form-text-disabled-color;
+      }
+
+      &:checked {
+        background-color: core.$uq-neutral-light20;
+      }
+    }
+  }
+  
+  input[type="checkbox"] {
+    border-radius: $form-checkbox-border-radius;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      background-repeat: no-repeat;
+      background-position: center center;
+      top: 1px;
+      left: 1px;
+      height: $form-checkbox-check-size;
+      width: $form-checkbox-check-size;
+    }
+
+    &:checked {
+      background-color: core.$link;
+
+      &::after {
+        background-image: url(icon.get-icon('standard--check', $form-checkbox-check-color));
+        padding: 0px;
+      }
+    }
+
+    &.uq-input--error {
+      &:checked {
+        background-color: $form-color-error;
+      }
+    }
+  }
+  
+  input[type="radio"] {
+    border-radius: 50%;
+  
+    &:checked {
+      border-width: 2px;
+
+      &::after {
+        border-radius: 50%;
+        background-color: core.$link;
+        content: "";
+        display: block;
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        height: $form-checkbox-size - 10px;
+        width: $form-checkbox-size - 10px;
+      }
+    }
+
+    &[disabled] {
+      &:checked {
+        background-color: core.$uq-neutral-light80;
+        &::after {
+          background-color: core.$uq-neutral-light20;
+        }
+      }
+    }
+
+    &.uq-input--error {
+      &:checked {
+        border-color: $form-color-error;
+
+        &::after {
+          background-color: $form-color-error;
+        }
+      }
+    }
+  }
+
+  [type="submit"] {
+    appearance: none;
+  }
+
+  .uq-error-summary {
+    background-color: lighten(core.$alert-light, 10%);
+    border: 1px solid core.$alert;
+    border-left-width: core.$space-xs;
+    padding: core.$space;
+    margin-bottom: core.$space-m;
+  
+    &__title {
+      color: core.$text;
+      font-size: core.$font-size-m;
+      font-weight: core.$font-weight-bold;
+      line-height: core.$line-height-h;
+      margin: core.$space-none core.$space-none core.$space core.$space-none;
+    }
+  
+    &_body {
+      color: core.$text;
+      font-size: core.$space;
+    }
+    
+    &__list {
+      color: core.$text;
+      font-size: core.$space;
+      margin: core.$space-none;
+  
+      &__item {
+        margin-bottom: core.$space-xs;
+        line-height: core.$line-height;
+      }
+  
+      a {
+        color: core.$alert;
+        text-decoration: underline;
+        font-weight: core.$font-weight-normal;
+        &:hover, &:focus {
+          color: darken(core.$alert, 5%);
+        }
+      }
+    }
+  }
+
+  .uq-error-message,
+  .uq-success-message {
+    color: core.$uq-white;
+    display: block;
+    font-size: core.$font-size;
+    font-style: normal;
+    font-weight: core.$font-weight-normal;
+    line-height: core.$line-height;
+    margin-bottom: core.$space-m;
+    padding: calc(#{core.$space-s} - 1px) core.$space core.$space-s core.$space-xxl;
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: core.$space-compressed-xl;
+      left: core.$space;
+      margin-right: core.$space-s;
+      margin-top: calc(#{-(core.$space-compressed-xl) * 0.5} - 1px);
+      position: absolute;
+      top: 50%;
+      width: core.$space-compressed-xl;
+    }
+  }
+
+  .uq-error-message {
+    background-color: $form-color-error;
+
+    &::before {
+      background-image: url(icon.get-icon('standard--exclamation-triangle', core.$uq-white));
+    }
+  }
+
+  .uq-success-message {
+    background-color: $form-color-success;
+
+    &::before {
+      background-image: url(icon.get-icon('standard--check-circle', core.$uq-white));
+    }
+  }
+
+  .uq-inline-help {
+    display: block;
+    font-size: $form-description-size;
+    margin: 0 0 $form-spacing;
+  }
+}
+
+@if $use-encapsulation {
+  .uq {
+    @include form-styles;
+  }
+} @else {
+  @include form-styles;
+}

package/src/scss/_global.scss

@@ -1,28 +1,28 @@
-@use '@uqds/core/src/scss/global' as core;
-
-$form-border-color-focus: core.$link;
-$form-border-color: core.$uq-neutral-light40;
-$form-border-radius: 2px;
-$form-border-width: 1px;
-$form-color-error: core.$alert;
-$form-color-success: core.$success;
-$form-description-size: core.$font-size-xs;
-$form-element-height: core.$space-xl;
-$form-focus-color: core.$link;
-$form-label-size: core.$font-size-s;
-$form-placeholder-color: core.$uq-neutral-dark40;
-$form-spacing: core.$space;
-$form-text-color: core.$text;
-$form-text-disabled-color: core.$uq-neutral-dark20;
-$form-text-size: core.$font-size;
-
-// Select
-$form-select-icon: core.$uq-purple;
-$form-select-icon-disabled: $form-border-color;
-
-// Checkbox/Radio buttons
-$form-checkbox-border-radius: 4px;
-$form-checkbox-border-width: 1px;
-$form-checkbox-check-color: core.$uq-white;
-$form-checkbox-size: 20px;
-$form-checkbox-check-size: 16px;
+@use '@uqds/core/src/scss/global' as core;
+
+$form-border-color-focus: core.$link;
+$form-border-color: core.$uq-neutral-light40;
+$form-border-radius: 2px;
+$form-border-width: 1px;
+$form-color-error: core.$alert;
+$form-color-success: core.$success;
+$form-description-size: core.$font-size-xs;
+$form-element-height: core.$space-xl;
+$form-focus-color: core.$link;
+$form-label-size: core.$font-size-s;
+$form-placeholder-color: core.$uq-neutral-dark40;
+$form-spacing: core.$space;
+$form-text-color: core.$text;
+$form-text-disabled-color: core.$uq-neutral-dark20;
+$form-text-size: core.$font-size;
+
+// Select
+$form-select-icon: core.$uq-purple;
+$form-select-icon-disabled: $form-border-color;
+
+// Checkbox/Radio buttons
+$form-checkbox-border-radius: 4px;
+$form-checkbox-border-width: 1px;
+$form-checkbox-check-color: core.$uq-white;
+$form-checkbox-size: 20px;
+$form-checkbox-check-size: 16px;

package/src/scss/_icons.scss

@@ -1,33 +1,33 @@
-$-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;
-  }
+$-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;
+  }