@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.1.0

package/dist/sample-data/select/select.data.json

@@ -1,12 +1,14 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"label-text": "Label",
-	"placeholder": "Please select",
-	"optional-text": "optional",
-	"hint-text": "Hint",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "isDisabled": false,
+  "isRequired": true,
+  "isFilled": false,
+  "isValid": null,
+  "customClass": "",
+  "label-text": "Label",
+  "placeholder": "Please select",
+  "optional-text": "optional",
+  "hint-text": "Hint",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

package/dist/sample-data/textarea/textarea.data.json

@@ -1,13 +1,16 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"rows": 3,
-	"label-text": "Label",
-	"placeholder": "Leave a comment here",
-	"optional-text": "optional",
-	"hint-text": "Hint",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "value": "",
+  "isDisabled": false,
+  "isRequired": true,
+  "isValid": null,
+  "isFilled": false,
+  "customClass": "",
+  "rows": 3,
+  "label-text": "Label",
+  "placeholder": "",
+  "optional-text": "optional",
+  "hint-text": "Hint",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

package/dist/sample-data/textbox/textbox.data.json

@@ -1,12 +1,15 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"label-text": "Label",
-	"placeholder": "Hello World",
-	"optional-text": "optional",
-	"hint-text": "Hint",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "value": "",
+  "isDisabled": false,
+  "isRequired": true,
+  "isValid": null,
+  "isFilled": false,
+  "customClass": "",
+  "label-text": "Label",
+  "placeholder": "",
+  "optional-text": "optional",
+  "hint-text": "Hint",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/breadcrumbs/breadcrumbs.scss

@@ -85,10 +85,9 @@ $expander-icon-color: $qld-light-link;
         );
         background-color: $core-default-color-neutral-lighter;
       }
-      @include m.focusable($offsetOutline: 3px);
-      &:focus {
-        outline-offset: -3px;
-      }
+
+      --qld-focus-color: var(--qld-light-focus);
+      @include m.focusable($offsetOutline: -6px);
     }
   }
   .breadcrumb-collapse-wrapper {

package/src/components/bs5/button/Button.js

@@ -1,13 +1,39 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./button.hbs?raw";
+import data from "./button.data.json";
 
-export class Button {
+/**
+ * @typedef {Object} ButtonArgs
+ * @prop {"btn-primary" | "btn-secondary" | "btn-tertiary" } variantClass
+ * @prop {string} label The label description
+ * @prop {string} [onclick]
+ * @prop {boolean} [islink]
+ * @prop {boolean} [isdisabled]
+ * @prop {boolean} [isProgress]
+ * @prop {string} [progressLabel]
+ * @prop {string} [iconClass]
+ * @prop {"leading" | "trailing"} [iconPosition]
+ * @prop {string} [href]
+ * @prop {"_blank" | "_self" | "_parent" | "_top" | "_unfencedTop" } [target]
+ */
+
+/**  @type {ButtonArgs}*/
+export const defaultArgs = {
+  ...data,
+  onclick: "() => false",
+  islink: false,
+  href: "#",
+  target: null,
+};
 
+export class Button {
   // Use the global Component class to create a new instance of the Button component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
-  
-  constructor( data = {} ) {
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+  /**
+   *
+   * @param {ButtonArgs} data
+   */
+  constructor(data = defaultArgs) {
     return new Component(template, data);
   }
-
 }

package/src/components/bs5/button/button.hbs

@@ -10,7 +10,7 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

package/src/components/bs5/button/button.scss

@@ -340,11 +340,6 @@ a.btn,
     }
   }
 
-  &:focus {
-    outline: var(--#{$prefix}dark-focus) solid 3px;
-    outline-offset: 2px;
-  }
-
   // Progress state focus for dark mode
   &.btn-progress:focus {
     outline: var(--#{$prefix}dark-focus) solid 3px;

package/src/components/bs5/card/card.scss

@@ -303,6 +303,8 @@
     a {
       color: var(--#{$prefix}card-link-color);
       text-decoration-color: var(--#{$prefix}card-link-color);
+      outline-style: none;
+
       &:visited,
       &:hover,
       &:visited:hover {

package/src/components/bs5/dateinput/Dateinput.js

@@ -1,10 +1,9 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./dateinput.hbs?raw";
 
 export class Dateinput {
-
   // Use the global Component class to create a new instance of the Date input component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
   constructor(data = {}) {
     var component = new Component(template, data);
@@ -13,26 +12,32 @@ export class Dateinput {
   }
 
   dateInputs() {
-    let elements = document.querySelectorAll(".dayinput, .monthinput, .yearinput");
+    let elements = document.querySelectorAll(
+      ".dayinput, .monthinput, .yearinput",
+    );
 
     Array.from(elements).forEach(function (element) {
-      element.addEventListener('keyup', function () {
+      element.addEventListener("keyup", function () {
         const input = event.currentTarget;
         let max = 0;
         if (input.value) {
-          if (input.classList.contains('dayinput')) {
+          if (input.classList.contains("dayinput")) {
             max = 31;
-          } else if (input.classList.contains('monthinput')) {
+          } else if (input.classList.contains("monthinput")) {
             max = 12;
-          } if (input.classList.contains('yearinput')) {
+          }
+          if (input.classList.contains("yearinput")) {
             max = 2030;
           }
           if (!parseInt(input.value)) {
-            input.classList.add('qld-input-error');
+            input.classList.add("qld-input-error");
             input.blur();
           } else {
-            if ((parseInt(input.value)) > max && !input.classList.contains('qld-input-error')) {
-              input.classList.add('qld-input-error');
+            if (
+              parseInt(input.value) > max &&
+              !input.classList.contains("qld-input-error")
+            ) {
+              input.classList.add("qld-input-error");
               input.blur();
             }
           }
@@ -41,3 +46,13 @@ export class Dateinput {
     });
   }
 }
+
+export const argTypes = {
+  isValid: {
+    description:
+      "For server-side validation, set to true or false. Omit or set to null to to indicate the input is yet to be validated.",
+    control: "radio",
+    options: [true, false, null],
+    type: "boolean | null",
+  },
+};

package/src/components/bs5/dateinput/dateinput.data.json

@@ -1,14 +1,16 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"label-text": "Date label",
-	"day-placeholder": "DD",
-	"month-placeholder": "MM",
-	"year-placeholder": "YYYY",
-	"optional-text": "optional",
-	"hint-text": "(dd/mm/yyyy)",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "isDisabled": false,
+  "isRequired": true,
+  "isValid": null,
+  "isFilled": false,
+  "customClass": "",
+  "label-text": "Date label",
+  "day-placeholder": "DD",
+  "month-placeholder": "MM",
+  "year-placeholder": "YYYY",
+  "optional-text": "optional",
+  "hint-text": "(dd/mm/yyyy)",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

package/src/components/bs5/dateinput/dateinput.hbs

@@ -1,64 +1,64 @@
 <!-- QGDS Component: Date input -->
 
-<!-- Label -->
-<label id="dategroup-label"
+<label id="{{id}}-label"
     class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
+<span class="qld-input-success">{{successMessageText}}</span>
+{{else}}
+{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
+<span class="qld-input-error">{{errorMessageText}}</span>
+{{else}}
+{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">
+<div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
     <!-- day group -->
     <div class="day-group">
-        <label for="dayinput" class="date-label qld-text-input-label">Day</label>
+        <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
         <div>
-            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
+            <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
                 inputmode="numeric" maxlength="2"
-                class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="dayinput" ref="day"
+                class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"
                 aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
                 {{/if}}>
         </div>
     </div>
     <!-- month group -->
     <div class="date-group">
-        <label for="monthinput" class="date-label qld-text-input-label">Month</label>
+        <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
         <div>
-            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
+            <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
                 type="text" inputmode="numeric" maxlength="2"
-                class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="monthinput" ref="month"
+                class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"
                 aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
                 {{/if}}>
         </div>
     </div>
     <!-- year group -->
     <div class="date-group">
-        <label for="yearinput" class="date-label">Year</label>
+        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
         <div class="year-label">
-            <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"
+            <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
                 placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
-                class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
-                id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
-                isRequired}}required aria-required="true" {{/if}}>
+                class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
+                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
+                isRequired}}required{{/if}}>
         </div>
     </div>
 </div>

package/src/components/bs5/footer/customLinks.hbs

@@ -1,5 +1,5 @@
 {{#if customLinks }}
-    <ul class="nav footer-link-list footer-link-list--custom flex-column">      
+    <ul class="nav footer-link-list footer-link-list--custom flex-column">
         {{#each customLinks }}
         <li><a class="nav-link" href="{{ link }}" {{#if target }} target="_blank" {{/if}}>{{ label }}</a></li>
         {{/each }}

package/src/components/bs5/footer/followLinks.hbs

@@ -6,7 +6,7 @@
               <span class="qld-icon qld-icon-md qld-icon-{{icon}} d-lg-none" aria-hidden="true"></span>
               <span class="qld-icon qld-icon-sm qld-icon-{{icon}} d-none d-lg-block" aria-hidden="true"></span>
               <span class="nav-link-label d-none d-lg-block">{{ label }}</span>
-              <span class="sr-only">{{ label }}</span>
+              <span class="sr-only">{{isdefined accessibleLabel label}}</span>
           </a>
       </li>
     {{/each }}

package/src/components/bs5/footer/footer.data.json

@@ -61,18 +61,21 @@
   "followLinks": [
     {
       "label": "Facebook",
+      "accessibleLabel": "Facebook page",
       "link": "#",
       "icon": "facebook",
       "target": "_blank"
     },
     {
       "label": "LinkedIn",
+      "accessibleLabel": "LinkedIn page",
       "link": "#",
       "icon": "linkedin",
       "target": "_blank"
     },
     {
       "label": "X (Twitter)",
+      "accessibleLabel": "X page",
       "link": "#",
       "icon": "x",
       "target": "_blank"

package/src/components/bs5/formcheck/Formcheck.js

@@ -1,13 +1,64 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./formcheck.hbs?raw";
 
 export class Formcheck {
-
   // Use the global Component class to create a new instance of the Breadcrumbs component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
-  
-  constructor( data = {} ) {
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+
+  constructor(data = {}) {
     return new Component(template, data);
   }
-
 }
+
+/**
+ * argTypes is used to render component parameters in storybook.
+ */
+export const argTypes = {
+  questionLabel: {
+    type: "string",
+    description: `The heading label for the for the set of checks/radios.`,
+  },
+  optionalLabel: {
+    type: "string",
+    description: "Additional text used to denote an optional field.",
+  },
+  hintLabel: {
+    type: "string",
+    description:
+      "Extra informational text which can be used to give the input more context.",
+  },
+  listClasses: {
+    type: "string",
+    description: "CSS class names to be added to the topmost element.",
+  },
+  successMessageText: {
+    type: "string",
+    description:
+      "Informational text which appears when the input passes validation, or if `isValid` is true.",
+  },
+  errorMessageText: {
+    type: "string",
+    description:
+      "Informational text which appears when the input fails validation, or if `isValid` is false.",
+  },
+  type: {
+    type: "string",
+    options: ["checkbox", "radio"],
+    control: "radio",
+    description:
+      "The type of input. This will override any value of `type` set on the listItems themselves.",
+    table: {
+      defaultValue: { summary: "checkbox" },
+    },
+  },
+  isValid: {
+    options: [null, true, false],
+    type: "boolean | null",
+    control: "radio",
+    description:
+      "Should be set only when the input is to be validated server-side. Adds class `is-valid` or `is-invalid` to the form control. For client-side validation.",
+  },
+  listitems: {
+    description: "An array which represents the input set.",
+  },
+};

package/src/components/bs5/formcheck/_form-variables.scss

@@ -0,0 +1,167 @@
+// Expand this file with all themable shared form variables
+// @extend %form-variables in all input and form components.
+@use "../../../css/functions" as f;
+
+/// Custom colored icons for dropdown chevron in all states.
+/// Select input cannot use ::before or ::after so need a svg cbackground image via url(data);
+@function _dropdown-icon($color) {
+  @return url(f.svg-encode(f.color-icon("chevron-down", $color)));
+}
+
+%form-control-variables {
+  &,
+  .default &,
+  .light &,
+  .alt & {
+    // colors
+    --#{$prefix}bg: #{$core-default-color-neutral-white};
+    --#{$prefix}bg-hover: #{$core-default-color-neutral-lightest};
+    --#{$prefix}bg-focus: #{$core-default-color-neutral-white};
+    --#{$prefix}border-color: #{$color-default-color-light-border-alt};
+    --#{$prefix}border-color-hover: #{$qld-light-action-primary-hover};
+    --#{$prefix}border-color-focus: #{$core-default-color-neutral-lighter};
+    --#{$prefix}color: #{$color-default-color-light-text-default};
+    --#{$prefix}color-hover: var(--#{$prefix}color);
+    --#{$prefix}color-focus: var(--#{$prefix}color);
+    --#{$prefix}placeholder-color: #{$color-default-color-light-text-lighter};
+    --#{$prefix}placeholder-color-hover: var(--#{$prefix}placeholder-color);
+    --#{$prefix}placeholder-color-focus: var(--#{$prefix}placeholder-color);
+
+    // other properties
+    --#{$prefix}border-top-width: 0.125rem;
+    --#{$prefix}border-right-width: 0.125rem;
+    --#{$prefix}border-bottom-width: 0.125rem;
+    --#{$prefix}border-left-width: 0.125rem;
+    --#{$prefix}border-width: var(--#{$prefix}border-top-width)
+      var(--#{$prefix}border-right-width) var(--#{$prefix}border-bottom-width)
+      var(--#{$prefix}border-left-width);
+    --#{$prefix}border-radius: 0.25rem;
+
+    // .form-style-filled legacy class
+    &.is-filled,
+    &.form-style-filled {
+      --#{$prefix}bg: #{$core-default-color-neutral-lightest};
+      --#{$prefix}border-radius: 0.25rem 0.25rem 0 0;
+      --#{$prefix}border-top-width: 0px; // px unit required for use in calc()
+      --#{$prefix}border-right-width: 0px; // px unit required for use in calc()
+      --#{$prefix}border-left-width: 0px; // px unit required for use in calc()
+
+      &:focus {
+        --#{$prefix}border-top-width: 0.125rem;
+        --#{$prefix}border-right-width: 0.125rem;
+        --#{$prefix}border-left-width: 0.125rem;
+        --#{$prefix}border-radius: 0.25rem;
+      }
+    }
+
+    // .qld-input-success legacy class
+    &.is-valid,
+    &.qld-input-success,
+    .was-validated &:valid {
+      --#{$prefix}bg: #{$core-default-color-status-success-lightest};
+      --#{$prefix}bg-hover: #{$core-default-color-status-success-lighter};
+      --#{$prefix}border-color: #{$core-default-color-status-success-default};
+      --#{$prefix}border-color-hover: var(--#{$prefix}border-color);
+    }
+
+    // .qld-input-error legacy class
+    &.is-invalid,
+    &.qld-input-error,
+    .was-validated &:invalid {
+      --#{$prefix}bg: #{$qld-color-error-light};
+      --#{$prefix}bg-hover: #{$core-default-color-status-error-lighter};
+      --#{$prefix}border-color: #{$qld-notify-warning};
+      --#{$prefix}border-color-hover: var(--#{$prefix}border-color);
+    }
+  }
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}bg: #{$qld-color-dark-background};
+    --#{$prefix}bg-hover: #{$qld-color-dark-background--shade};
+    --#{$prefix}border-color: #{$color-default-color-dark-border-alt};
+    --#{$prefix}border-color-hover: #{$color-default-color-dark-action-primary-hover};
+    --#{$prefix}border-color-focus: #{$core-default-color-neutral-lighter};
+    --#{$prefix}color: #{$color-default-color-dark-text-default};
+    --#{$prefix}color-focus: #{$color-default-color-light-text-lighter};
+    --#{$prefix}placeholder-color: #{$color-default-color-dark-text-lighter};
+    --#{$prefix}placeholder-color-focus: #{$color-default-color-light-text-lighter};
+
+    &.is-filled,
+    &.form-style-filled {
+      --#{$prefix}bg: #{$qld-color-dark-background--shade};
+    }
+
+    &.is-valid,
+    &.qld-input-success,
+    .was-validated &:valid {
+      --#{$prefix}bg: #{$core-default-color-status-success-lightest};
+      --#{$prefix}bg-hover: #{$core-default-color-status-success-lighter};
+      --#{$prefix}border-color: #{$core-default-color-status-success-default};
+      --#{$prefix}border-color-hover: #{$core-default-color-status-success-default};
+      --#{$prefix}color: #{$color-default-color-light-text-default};
+      --#{$prefix}placeholder-color: #{$color-default-color-light-text-lighter};
+    }
+
+    &.is-invalid,
+    &.qld-input-error,
+    .was-validated &:invalid {
+      --#{$prefix}bg: #{$qld-color-error-light};
+      --#{$prefix}bg-hover: #{$core-default-color-status-error-lighter};
+      --#{$prefix}border-color: #{$qld-notify-warning};
+      --#{$prefix}border-color-hover: #{$qld-notify-warning};
+      --#{$prefix}color: #{$color-default-color-light-text-default};
+      --#{$prefix}placeholder-color: #{$color-default-color-light-text-lighter};
+    }
+  }
+}
+
+%form-select-variables {
+  &,
+  .default &,
+  .light &,
+  .alt & {
+    --#{$prefix}icon-url: #{_dropdown-icon($qld-light-action-secondary)};
+    --#{$prefix}icon-hover-url: #{_dropdown-icon(
+        $qld-light-action-secondary-hover
+      )};
+    --#{$prefix}icon-disabled-url: #{_dropdown-icon(
+        $color-default-color-light-text-lighter
+      )};
+    --#{$prefix}icon-error-url: #{_dropdown-icon($qld-notify-warning)};
+    --#{$prefix}icon-success-url: #{_dropdown-icon($qld-notify-success)};
+    --#{$prefix}icon-focus-url: #{_dropdown-icon($qld-light-action-secondary)};
+  }
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}icon-url: #{_dropdown-icon($qld-dark-action-secondary)};
+    --#{$prefix}icon-hover-url: #{_dropdown-icon($qld-dark-action-secondary)};
+    --#{$prefix}icon-disabled-url: #{_dropdown-icon(
+        $color-default-color-dark-text-lighter
+      )};
+    --#{$prefix}icon-focus-url: #{_dropdown-icon($qld-light-action-secondary)};
+  }
+}
+
+%form-valid-feedback-variables {
+  &,
+  :is(.default, .light, .alt) & {
+    --color-text: #{$color-default-color-light-text-default};
+  }
+
+  :is(.dark, .dark-alt) & {
+    --color-text: #{$color-default-color-dark-text-default};
+  }
+}
+
+%form-invalid-feedback-variables {
+  &,
+  :is(.default, .light, .alt) & {
+    --color-text: #{$core-default-color-status-error-default};
+  }
+
+  :is(.dark, .dark-alt) & {
+    --color-text: #{$core-default-color-status-error-lighter};
+  }
+}