@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.4

package/src/css/main.scss

@@ -19,11 +19,6 @@ $font-family-sans-serif:
   "Noto Color Emoji" !default;
 $font-family-sitename: "Fira Sans";
 
-//Icons
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
-//TODO: should we pull from ../../node_modules/@fortawesome/fontawesome-free/css/all.css instead of cdn
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-
 //Prefix to namespace design-system classes
 $prefix: "qld-";
 $enable-cssgrid: true;
@@ -39,8 +34,6 @@ $enable-dark-mode: true;
 @import "./qld-variables";
 @import "variables";
 
-// @import "./scss/qld-variables-dark"; //future state
-
 // 3. Include remainder of bootstrap
 // 3.1 Required
 @import "../../node_modules/bootstrap/scss/maps";

package/src/css/mixins/focusable.scss

@@ -2,8 +2,12 @@
 /// Default focus styles for use in buttons etc. Resets :focus and uses :focus-visible instead which only appears on keyboard interaction.
 /// @param {Boolean} $offsetOutline [true] - Offset the focus ring by 2px.
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
-/// @param {String} $prefix ["qld-"] The css var prefix. This is declared in main.scss but required here as a module because reimporting will emit the entire main css file.
-@mixin focusable($offsetOutline: true, $isFocusWithin: false) {
+/// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+@mixin focusable(
+  $offsetOutline: true,
+  $isFocusWithin: false,
+  $customSelector: null
+) {
   // outline styles without the pseudo state to allow for transition animations.
 
   $outline-width: 3px;
@@ -18,7 +22,11 @@
   outline: $outline-width solid transparent;
   outline-offset: $initial-offset;
 
-  $selector: if($isFocusWithin, ":focus-within", ":focus");
+  $selector: if(
+    $customSelector,
+    $customSelector,
+    if($isFocusWithin, ":focus-within", ":focus")
+  );
 
   &#{$selector} {
     outline: {

package/src/css/mixins/make-icon.scss

@@ -13,6 +13,7 @@ $prefix: "qld-" !default;
 /// @param {String | null} $pseudo [null] - Whether the mixin applies styles as a pseudo-element. Valid string values are "before" | "after"
 /// @param {false} $is-inline - Applies extra styles to assist with vertical alignent when used inline with text.
 /// @param {Boolean} $include-base [true] - Apply all base styles. Set to false when reusing this mixin to create modifier classes where base styles are already applied (For instance qld-icon-{name})
+/// @content
 @mixin make-icon(
   $name: null,
   $size: "sm",
@@ -43,7 +44,9 @@ $prefix: "qld-" !default;
     &::#{$pseudo} {
       content: "";
       // recursively call this mixin with $pseudo set to null
-      @include make-icon($name, $size, null, $is-inline, $include-base);
+      @include make-icon($name, $size, null, $is-inline, $include-base) {
+        @content;
+      }
     }
   } @else {
     @if $include-base {
@@ -83,5 +86,8 @@ $prefix: "qld-" !default;
         -webkit-mask-image: var(--qgds-icon-#{$name});
       }
     }
+
+    // allow arbitrary content
+    @content;
   }
 }

package/src/css/qld-theme.scss

@@ -55,6 +55,7 @@
 // Light theme
 .light {
   @include light-theme-properties;
+  --qld-body-bg: var(--qld-light-background);
   --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
 }
 

package/src/css/utilities/_index.scss

@@ -1 +1,2 @@
 @import "responsive-visually-hidden";
+@import "sr-only";

package/src/css/utilities/sr-only.scss

@@ -0,0 +1,5 @@
+///
+/// Screen reader only utility - hides content visually while keeping it accessible to screen readers
+.sr-only {
+  @include visually-hidden();
+}

package/src/js/qld.bootstrap.js

@@ -9,10 +9,7 @@ import {
 } from "./../components/bs5/video/video.functions";
 import { initializeNavbar } from "./../components/bs5/navbar/navbar.functions";
 import { initBreadcrumb } from "./../components/bs5/breadcrumbs/breadcrumbs.functions";
-import {
-  positionQuickExit,
-  initQuickexit,
-} from "./../components/bs5/quickexit/quickexit.functions";
+import { initQuickexit } from "./../components/bs5/quickexit/quickexit.functions";
 //import { displayFeedbackForm } from "./../components/bs5/footer/footer.functions";
 import { toggleSearch } from "./../components/bs5/header/header.functions";
 import {
@@ -24,8 +21,6 @@ import { initTabsScroll } from "./../components/bs5/tabs/tabs.functions";
 import { initGlobalAlerts } from "./../components/bs5/globalAlert/globalAlert.function";
 import { validateSkipLinks } from "./../components/bs5/skiplinks/skipLinks.functions";
 
-window.addEventListener("scroll", positionQuickExit, true);
-window.addEventListener("resize", positionQuickExit, true);
 window.addEventListener("click", initQuickexit, true);
 window.addEventListener("keydown", initQuickexit, true);
 
@@ -151,12 +146,9 @@ window.addEventListener("DOMContentLoaded", () => {
     initBreadcrumb();
 
     // Quick exit
-    window.addEventListener("scroll", positionQuickExit, true);
-    window.addEventListener("resize", positionQuickExit, true);
     window.addEventListener("click", initQuickexit, true);
     window.addEventListener("keydown", initQuickexit, true);
     initQuickexit();
-    positionQuickExit();
 
     // Accordion
     let accordionToggleButton = document.querySelectorAll(

package/src/stories/documentation/_storybookDocsTabs.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+
+/**
+ * StorybookDocsTabs component renders a tabbed interface for displaying documentation sections.
+ *
+ * @param {Array} props.tabs - Array of tab objects, each containing id, label, and content to display in the tabbed interface.
+ * @returns {JSX.Element} Tabbed documentation interface.
+ */
+export const StorybookDocsTabs = ({ tabs }) => {
+  useEffect(() => {
+    // This code will run once the component has mounted
+    initTabs();
+  }, []);
+
+  function initTabs() {
+    let tabButtons = document.querySelectorAll(".tablinks");
+    tabButtons.forEach(function (tabButton) {
+      tabButton.addEventListener("click", openTab);
+    });
+  }
+
+  function openTab(evt) {
+    const targetId = evt.currentTarget.dataset.targetid;
+
+    ["tabcontent", "tablinks"].forEach((cls) =>
+      document
+        .querySelectorAll(`.${cls}`)
+        .forEach((el) => el.classList.remove("active")),
+    );
+
+    if (targetId) {
+      document.getElementById(targetId)?.classList.add("active");
+      evt.currentTarget.classList.add("active");
+    }
+  }
+  return (
+    <>
+      <ul className="qld-sb-docs-tab sb-unstyled">
+        {tabs &&
+          tabs.map((tab, index) => (
+            <li key={`tab-${index}`}>
+              <button
+                className={`tablinks ${index === 0 ? "active" : ""}`}
+                data-targetid={tab.id}
+              >
+                {tab.label}
+              </button>
+            </li>
+          ))}
+      </ul>
+      {tabs?.map((tab, index) => (
+        <div
+          id={tab.id}
+          key={`tab-content-${index}`}
+          className={`tabcontent ${index === 0 ? "active" : ""}`}
+        >
+          {tab.heading && <h3>{tab.heading}</h3>}
+          {tab.content}
+        </div>
+      ))}
+    </>
+  );
+};

package/src/stories/documentation/storybook-documentation.scss

@@ -0,0 +1,51 @@
+/* Style the tab */
+.qld-sb-docs-tab {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: auto;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Style the buttons inside the tab */
+.qld-sb-docs-tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: 17px;
+  font-weight: 600;
+  padding: 0.5rem 0.3rem;
+  white-space: nowrap;
+  p {
+    color: inherit;
+    margin: 0;
+    padding: 8px 0;
+  }
+}
+
+/* Change background color of buttons on hover */
+.qld-sb-docs-tab button:hover {
+  border-bottom: 2px solid #ccc;
+}
+.qld-sb-docs-tab button.active {
+  //  background-color: #ddd;
+  color: #029cfd;
+
+  border-bottom: 2px solid #029cfd;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 1rem 0;
+  border-top: 1px solid #ccc;
+  //border-top: none;
+  &.active {
+    display: block;
+  }
+}

package/src/components/bs5/pagination/health-icon-sprite.svg

@@ -1,156 +0,0 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" focusable="false">
-    <defs>
-        <symbol viewBox="0 0 384 512" id="qld__icon__arrow-up">
-            <title>Icon arrow up</title>
-            <path fill="currentColor" d="M379.8 225.7C376.7 229.3 372.3 231.1 368 231.1c-3.844 0-7.703-1.426-10.77-4.31L208 86.12v377.3c0 9.171-7.156 16.59-15.1 16.59S176 472.6 176 463.4V86.12l-149.2 140.7C20.25 232.1 10.14 232.5 4.156 225.7C-1.781 218.9-1.297 208.4 5.234 202.2l176-165.9c6.094-5.768 15.44-5.768 21.53 0l176 165.9C385.3 208.4 385.8 218.9 379.8 225.7z"/>
-        </symbol>
-        
-        <symbol viewBox="0 0 448 512" id="qld__icon__arrow-right">
-            <title>Icon arrow right</title>
-            <path fill="currentColor" d="M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 384 512" id="qld__icon__arrow-down">
-            <title>Icon arrow down</title>
-            <path fill="currentColor" d="M378.8 309.8l-176 165.9C199.7 478.6 195.9 480 192 480s-7.719-1.426-10.77-4.31l-176-165.9C-1.297 303.6-1.781 293.1 4.156 286.3c5.953-6.838 16.09-7.259 22.61-1.134L176 425.9V48.59c0-9.171 7.156-16.59 15.1-16.59S208 39.42 208 48.59v377.3l149.2-140.7c6.516-6.125 16.66-5.704 22.61 1.134C385.8 293.1 385.3 303.6 378.8 309.8z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 384 512" id="qld__icon__arrow-left">
-            <title>Icon arrow left</title>
-            <path fill="currentColor" d="M448 256C448 264.8 440.6 272 431.4 272H54.11l140.7 149.3c6.157 6.531 5.655 16.66-1.118 22.59C190.5 446.6 186.5 448 182.5 448c-4.505 0-9.009-1.75-12.28-5.25l-165.9-176c-5.752-6.094-5.752-15.41 0-21.5l165.9-176c6.19-6.562 16.69-7 23.45-1.094c6.773 5.938 7.275 16.06 1.118 22.59L54.11 240h377.3C440.6 240 448 247.2 448 256z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 512 512" id="qld__icon__arrow-view-all">
-            <title>Icon view all</title>
-            <path fill="currentColor" d="M283.3 148.7c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62L329.4 240H144C135.2 240 128 247.2 128 256s7.156 16 16 16h185.4l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.62s16.38 6.25 22.62 0l96-96C382.4 264.2 384 260.1 384 256s-1.562-8.188-4.688-11.31L283.3 148.7zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 448 512" id="qld__icon__chevron-up">
-            <title>Icon chevron up</title>
-            <path fill="currentColor" d="M443.8 330.8C440.6 334.3 436.3 336 432 336c-3.891 0-7.781-1.406-10.86-4.25L224 149.8l-197.1 181.1c-6.5 6-16.64 5.625-22.61-.9062c-6-6.5-5.594-16.59 .8906-22.59l208-192c6.156-5.688 15.56-5.688 21.72 0l208 192C449.3 314.3 449.8 324.3 443.8 330.8z"/>
-        </symbol>
-        
-        <symbol viewBox="0 0 384 512" id="qld__icon__chevron-right">
-            <title>Icon chevron right</title>
-            <path fill="currentColor" d="M85.14 475.8c-3.438-3.141-5.156-7.438-5.156-11.75c0-3.891 1.406-7.781 4.25-10.86l181.1-197.1L84.23 58.86c-6-6.5-5.625-16.64 .9062-22.61c6.5-6 16.59-5.594 22.59 .8906l192 208c5.688 6.156 5.688 15.56 0 21.72l-192 208C101.7 481.3 91.64 481.8 85.14 475.8z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 384 512" id="qld__icon__chevron-down">
-            <title>Icon chevron down</title>
-            <path fill="currentColor" d="M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 384 512" id="qld__icon__chevron-left">
-            <title>Icon chevron left</title>
-            <path fill="currentColor" d="M234.8 36.25c3.438 3.141 5.156 7.438 5.156 11.75c0 3.891-1.406 7.781-4.25 10.86L53.77 256l181.1 197.1c6 6.5 5.625 16.64-.9062 22.61c-6.5 6-16.59 5.594-22.59-.8906l-192-208c-5.688-6.156-5.688-15.56 0-21.72l192-208C218.2 30.66 228.3 30.25 234.8 36.25z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 16 16" id="qld__icon__close">
-            <title>Icon close</title>
-            <path d="M9.54688 8L14.375 3.21875L15.3594 2.23438C15.5 2.09375 15.5 1.85938 15.3594 1.67188L14.3281 0.640625C14.1406 0.5 13.9062 0.5 13.7656 0.640625L8 6.45312L2.1875 0.640625C2.04688 0.5 1.8125 0.5 1.625 0.640625L0.59375 1.67188C0.453125 1.85938 0.453125 2.09375 0.59375 2.23438L6.40625 8L0.59375 13.8125C0.453125 13.9531 0.453125 14.1875 0.59375 14.375L1.625 15.4062C1.8125 15.5469 2.04688 15.5469 2.1875 15.4062L8 9.59375L12.7812 14.4219L13.7656 15.4062C13.9062 15.5469 14.1406 15.5469 14.3281 15.4062L15.3594 14.375C15.5 14.1875 15.5 13.9531 15.3594 13.8125L9.54688 8Z" fill="currentColor"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 384 512" id="qld__icon__close-hover">
-            <title>Icon close hover</title>
-            <path fill="currentColor" d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 512 512" id="qld__icon__error">
-            <title>Icon error</title>
-            <path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM362.4 131.8c-6.688-5.75-16.8-4.938-22.55 1.75L256 231.4l-83.86-97.84C166.4 126.9 156.3 126.2 149.6 131.8c-6.719 5.75-7.5 15.88-1.734 22.56L234.9 256l-87.08 101.6c-5.766 6.688-4.984 16.81 1.734 22.56C152.6 382.8 156.3 384 160 384c4.5 0 8.984-1.906 12.14-5.594L256 280.6l83.86 97.84C343 382.1 347.5 384 352 384c3.688 0 7.391-1.281 10.41-3.844c6.719-5.75 7.5-15.88 1.734-22.56L277.1 256l87.08-101.6C369.9 147.7 369.1 137.6 362.4 131.8z"/>
-        </symbol>
-
-        <symbol viewBox="0 0 512 512" id="qld__icon__success">
-            <title>Icon success</title>
-            <path fill="currentColor" d="M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 512 512" id="qld__icon__warning">
-            <title>Icon warning</title>
-            <path fill="currentColor" d="M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 20 20" id="qld__icon__critical">
-            <title>Icon critical</title>
-            <path fill="currentColor" d="M18.4727 6.30859L13.6914 1.52734C13.375 1.21094 12.9531 1 12.4961 1H7.46875C7.01172 1 6.58984 1.21094 6.27344 1.52734L1.49219 6.30859C1.17578 6.625 1 7.04688 1 7.50391V12.5312C1 12.9883 1.17578 13.4102 1.49219 13.7266L6.27344 18.5078C6.58984 18.8242 7.01172 19 7.46875 19H12.4961C12.9531 19 13.375 18.8242 13.6914 18.5078L18.5078 13.7266C18.8242 13.4102 19 12.9883 19 12.5312V7.50391C19 7.04688 18.7891 6.625 18.4727 6.30859ZM17.3125 12.5312L12.4961 17.3125H7.46875L2.6875 12.5312V7.50391L7.46875 2.6875H12.4961L17.3125 7.50391V12.5312Z"></path>
-            <path fill="currentColor" d="M9.14286 5.24648C9.14286 5.10563 9.21429 5 9.35714 5H10.6071C10.75 5 10.8214 5.10563 10.8214 5.24648L10.5714 11.7606C10.5714 11.8662 10.4643 11.9366 10.3571 11.9366H9.60714C9.5 11.9366 9.39286 11.8662 9.39286 11.7606L9.14286 5.24648Z"></path>
-            <path fill="currentColor" d="M9 14.0141C9 13.4859 9.42857 13.0282 10 13.0282C10.5357 13.0282 11 13.4859 11 14.0141C11 14.5775 10.5357 15 10 15C9.42857 15 9 14.5775 9 14.0141Z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 18 18" id="qld__icon__info">
-            <title>Icon info</title>
-            <path fill="currentColor" d="M16.0714 0H1.92857C0.84375 0 0 0.883929 0 1.92857V16.0714C0 17.1563 0.84375 18 1.92857 18H16.0714C17.1161 18 18 17.1563 18 16.0714V1.92857C18 0.883929 17.1161 0 16.0714 0ZM16.7143 16.0714C16.7143 16.433 16.3929 16.7143 16.0714 16.7143H1.92857C1.56696 16.7143 1.28571 16.433 1.28571 16.0714V1.92857C1.28571 1.60714 1.56696 1.28571 1.92857 1.28571H16.0714C16.3929 1.28571 16.7143 1.60714 16.7143 1.92857V16.0714ZM7.55357 12.8571C7.27232 12.8571 7.07143 13.0982 7.07143 13.3393V13.6607C7.07143 13.942 7.27232 14.1429 7.55357 14.1429H10.4464C10.6875 14.1429 10.9286 13.942 10.9286 13.6607V13.3393C10.9286 13.0982 10.6875 12.8571 10.4464 12.8571H9.96429V7.23214C9.96429 6.99107 9.72322 6.75 9.48214 6.75H7.55357C7.27232 6.75 7.07143 6.99107 7.07143 7.23214V7.55357C7.07143 7.83482 7.27232 8.03572 7.55357 8.03572H8.03572V12.8571H7.55357ZM9 3.21429C8.27679 3.21429 7.71429 3.81696 7.71429 4.5C7.71429 5.22321 8.27679 5.78571 9 5.78571C9.68304 5.78571 10.2857 5.22321 10.2857 4.5C10.2857 3.81696 9.68304 3.21429 9 3.21429Z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 30 31" id="qld__icon__search">
-            <title>Search icon</title>
-            <path fill="currentColor" d="M29.7802 28.256L22.2179 20.6937C22.1006 20.5765 21.9248 20.5178 21.7489 20.5178H21.1041C23.1558 18.2902 24.3869 15.4177 24.3869 12.1935C24.3869 5.5105 18.8764 0 12.1935 0C5.45188 0 0 5.5105 0 12.1935C0 18.935 5.45188 24.3869 12.1935 24.3869C15.3591 24.3869 18.2902 23.1558 20.4592 21.1627V21.7489C20.4592 21.9834 20.5178 22.1593 20.6351 22.2765L28.1974 29.8388C28.4905 30.1319 28.9008 30.1319 29.1939 29.8388L29.7802 29.2526C30.0733 28.9594 30.0733 28.5491 29.7802 28.256ZM12.1935 22.511C6.44846 22.511 1.87592 17.9384 1.87592 12.1935C1.87592 6.50708 6.44846 1.87592 12.1935 1.87592C17.8798 1.87592 22.511 6.50708 22.511 12.1935C22.511 17.9384 17.8798 22.511 12.1935 22.511Z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 448 512" id="qld__icon__mobile-menu">
-            <title>Mobile Menu icon</title>
-            <path fill="currentColor" d="M0 80C0 71.16 7.164 64 16 64H432C440.8 64 448 71.16 448 80C448 88.84 440.8 96 432 96H16C7.164 96 0 88.84 0 80zM0 240C0 231.2 7.164 224 16 224H432C440.8 224 448 231.2 448 240C448 248.8 440.8 256 432 256H16C7.164 256 0 248.8 0 240zM432 416H16C7.164 416 0 408.8 0 400C0 391.2 7.164 384 16 384H432C440.8 384 448 391.2 448 400C448 408.8 440.8 416 432 416z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 576 512" id="qld__icon__home">
-            <title>Home Icon</title>
-            <path fill="currentColor" d="M541 229.16l-61-49.83v-77.4a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v51.33L308.19 39.14a32.16 32.16 0 0 0-40.38 0L35 229.16a8 8 0 0 0-1.16 11.24l10.1 12.41a8 8 0 0 0 11.2 1.19L96 220.62v243a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-128l64 .3V464a16 16 0 0 0 16 16l128-.33a16 16 0 0 0 16-16V220.62L520.86 254a8 8 0 0 0 11.25-1.16l10.1-12.41a8 8 0 0 0-1.21-11.27zm-93.11 218.59h.1l-96 .3V319.88a16.05 16.05 0 0 0-15.95-16l-96-.27a16 16 0 0 0-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 448 512" id="qld__icon__ellipsis">
-            <title>Ellipsis Icon</title>
-            <path fill="currentColor" d="M352 256C352 238.3 366.3 224 384 224C401.7 224 416 238.3 416 256C416 273.7 401.7 288 384 288C366.3 288 352 273.7 352 256zM192 256C192 238.3 206.3 224 224 224C241.7 224 256 238.3 256 256C256 273.7 241.7 288 224 288C206.3 288 192 273.7 192 256zM96 256C96 273.7 81.67 288 64 288C46.33 288 32 273.7 32 256C32 238.3 46.33 224 64 224C81.67 224 96 238.3 96 256z"></path>
-        </symbol>
-
-
-
-        <symbol viewBox="0 0 320 512" id="accordionChevron">
-            <path d="M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 20 20" id="mobileMenuOpenIcon">
-            <title>Menu Open Icon</title>
-            <path d="M16.4 9h-12.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h12.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM16.4 13h-12.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h12.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM3.6 7h12.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1h-12.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1z"></path>
-        </symbol>
-        
-        <symbol viewBox="0 0 16 16" id="mobileMenuCloseIcon">
-            <title>Menu Close Icon</title>
-            <path d="M9.54688 8L14.375 3.21875L15.3594 2.23438C15.5 2.09375 15.5 1.85938 15.3594 1.67188L14.3281 0.640625C14.1406 0.5 13.9062 0.5 13.7656 0.640625L8 6.45312L2.1875 0.640625C2.04688 0.5 1.8125 0.5 1.625 0.640625L0.59375 1.67188C0.453125 1.85938 0.453125 2.09375 0.59375 2.23438L6.40625 8L0.59375 13.8125C0.453125 13.9531 0.453125 14.1875 0.59375 14.375L1.625 15.4062C1.8125 15.5469 2.04688 15.5469 2.1875 15.4062L8 9.59375L12.7812 14.4219L13.7656 15.4062C13.9062 15.5469 14.1406 15.5469 14.3281 15.4062L15.3594 14.375C15.5 14.1875 15.5 13.9531 15.3594 13.8125L9.54688 8Z" fill="currentColor"></path>
-        </symbol>
-        
-        
-        
-        <symbol viewBox="0 0 12 21" id="socialIconFacebook">
-            <title>Facebook icon</title>
-            <path d="M3.85156 20.5H7.52344V11.5547H10.375L10.8438 8H7.52344V5.53906C7.52344 4.99219 7.60156 4.5625 7.83594 4.28906C8.07031 3.97656 8.57812 3.82031 9.28125 3.82031H11.1562V0.65625C10.4531 0.578125 9.51562 0.5 8.42188 0.5C7.01562 0.5 5.92188 0.929688 5.10156 1.75C4.24219 2.57031 3.85156 3.70312 3.85156 5.1875V8H0.84375V11.5547H3.85156V20.5Z" fill="currentColor"></path>
-        </symbol>        
-
-        <symbol viewBox="0 0 20 17" id="socialIconTwitter">
-            <title>Twitter icon</title>
-            <path d="M17.9297 4.4375C18.7109 3.85156 19.4141 3.14844 20 2.28906C19.2188 2.64062 18.4375 2.875 17.6562 2.95312C18.5156 2.40625 19.1406 1.66406 19.4531 0.6875C18.6328 1.15625 17.7734 1.50781 16.8359 1.66406C16.4453 1.27344 15.9766 0.960938 15.4688 0.726562C14.9609 0.492188 14.4141 0.375 13.8281 0.375C13.0859 0.375 12.4219 0.570312 11.7969 0.921875C11.1719 1.3125 10.6641 1.82031 10.3125 2.44531C9.92188 3.07031 9.76562 3.77344 9.76562 4.47656C9.76562 4.78906 9.76562 5.10156 9.84375 5.41406C8.16406 5.33594 6.60156 4.94531 5.11719 4.16406C3.63281 3.42188 2.42188 2.40625 1.40625 1.11719C1.01562 1.78125 0.820312 2.48438 0.820312 3.1875C0.820312 3.89062 0.976562 4.55469 1.32812 5.14062C1.64062 5.76562 2.10938 6.23438 2.65625 6.625C1.99219 6.625 1.36719 6.42969 0.820312 6.07812V6.15625C0.820312 7.13281 1.13281 7.99219 1.75781 8.73438C2.38281 9.51562 3.16406 9.98438 4.10156 10.1797C3.71094 10.2578 3.35938 10.2969 3.00781 10.2969C2.77344 10.2969 2.5 10.2969 2.26562 10.2578C2.5 11.0781 2.96875 11.7422 3.67188 12.2891C4.375 12.8359 5.15625 13.0703 6.09375 13.0703C4.57031 14.2422 2.85156 14.8281 0.976562 14.8281C0.585938 14.8281 0.273438 14.8281 0 14.7891C1.875 16.0391 3.98438 16.625 6.28906 16.625C8.67188 16.625 10.7812 16.0391 12.6562 14.7891C14.3359 13.6953 15.6641 12.25 16.6016 10.375C17.5 8.65625 17.9688 6.82031 17.9688 4.94531C17.9688 4.71094 17.9297 4.55469 17.9297 4.4375Z" fill="currentColor"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 18 19" id="socialIconLinkedIn">
-            <title>LinkedIn icon</title>
-            <path d="M4.15625 18.25V6.57031H0.523438V18.25H4.15625ZM2.35938 4.96875C2.90625 4.96875 3.41406 4.77344 3.84375 4.34375C4.23438 3.95312 4.46875 3.44531 4.46875 2.85938C4.46875 2.3125 4.23438 1.80469 3.84375 1.375C3.41406 0.984375 2.90625 0.75 2.35938 0.75C1.77344 0.75 1.26562 0.984375 0.875 1.375C0.445312 1.80469 0.25 2.3125 0.25 2.85938C0.25 3.44531 0.445312 3.95312 0.875 4.34375C1.26562 4.77344 1.77344 4.96875 2.35938 4.96875ZM17.75 18.25V11.8438C17.75 10.0469 17.4766 8.71875 16.9688 7.85938C16.2656 6.80469 15.0938 6.25781 13.4141 6.25781C12.5547 6.25781 11.8516 6.49219 11.2266 6.88281C10.6406 7.23438 10.2109 7.66406 9.97656 8.17188H9.9375V6.57031H6.46094V18.25H10.0547V12.4688C10.0547 11.5703 10.1719 10.8672 10.4453 10.3984C10.7578 9.77344 11.3438 9.46094 12.2031 9.46094C13.0234 9.46094 13.5703 9.8125 13.8828 10.5156C14.0391 10.9453 14.1172 11.6094 14.1172 12.5469V18.25H17.75Z" fill="currentColor"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 22 15" id="socialIconYouTube">
-            <title>Youtube icon</title>
-            <path d="M21.2344 2.34375C21.3906 3.04688 21.5469 4.14062 21.625 5.54688L21.6641 7.5L21.625 9.45312C21.5469 10.9375 21.3906 11.9922 21.2344 12.6953C21.0781 13.1641 20.8438 13.5547 20.5312 13.8672C20.1797 14.2188 19.7891 14.4531 19.3203 14.5703C18.6172 14.7656 17.0547 14.8828 14.5547 14.9609L11 15L7.44531 14.9609C4.94531 14.8828 3.34375 14.7656 2.67969 14.5703C2.21094 14.4531 1.78125 14.2188 1.46875 13.8672C1.11719 13.5547 0.882812 13.1641 0.765625 12.6953C0.570312 11.9922 0.453125 10.9375 0.375 9.45312L0.335938 7.5C0.335938 6.95312 0.335938 6.28906 0.375 5.54688C0.453125 4.14062 0.570312 3.04688 0.765625 2.34375C0.882812 1.875 1.11719 1.48438 1.46875 1.13281C1.78125 0.820312 2.21094 0.585938 2.67969 0.429688C3.34375 0.273438 4.94531 0.117188 7.44531 0.0390625L11 0L14.5547 0.0390625C17.0547 0.117188 18.6172 0.273438 19.3203 0.429688C19.7891 0.585938 20.1797 0.820312 20.5312 1.13281C20.8438 1.48438 21.0781 1.875 21.2344 2.34375ZM8.8125 10.7031L14.3984 7.5L8.8125 4.33594V10.7031Z" fill="currentColor"></path>
-        </symbol>
-
-        <symbol viewBox="0 0 18 19" id="socialIconInstagram">
-            <title>Instagram icon</title>
-            <path d="M9 5.00781C9.78125 5.00781 10.5234 5.24219 11.2266 5.63281C11.9297 6.02344 12.4766 6.57031 12.8672 7.27344C13.2578 7.97656 13.4922 8.71875 13.4922 9.5C13.4922 10.3203 13.2578 11.0625 12.8672 11.7656C12.4766 12.4688 11.9297 13.0156 11.2266 13.4062C10.5234 13.7969 9.78125 13.9922 9 13.9922C8.17969 13.9922 7.4375 13.7969 6.73438 13.4062C6.03125 13.0156 5.48438 12.4688 5.09375 11.7656C4.70312 11.0625 4.50781 10.3203 4.50781 9.5C4.50781 8.71875 4.70312 7.97656 5.09375 7.27344C5.48438 6.57031 6.03125 6.02344 6.73438 5.63281C7.4375 5.24219 8.17969 5.00781 9 5.00781ZM9 12.4297C9.78125 12.4297 10.4844 12.1562 11.0703 11.5703C11.6172 11.0234 11.9297 10.3203 11.9297 9.5C11.9297 8.71875 11.6172 8.01562 11.0703 7.42969C10.4844 6.88281 9.78125 6.57031 9 6.57031C8.17969 6.57031 7.47656 6.88281 6.92969 7.42969C6.34375 8.01562 6.07031 8.71875 6.07031 9.5C6.07031 10.3203 6.34375 11.0234 6.92969 11.5703C7.47656 12.1562 8.17969 12.4297 9 12.4297ZM14.7422 4.8125C14.7422 4.53906 14.625 4.30469 14.4297 4.07031C14.1953 3.875 13.9609 3.75781 13.6875 3.75781C13.375 3.75781 13.1406 3.875 12.9453 4.07031C12.7109 4.30469 12.6328 4.53906 12.6328 4.8125C12.6328 5.125 12.7109 5.35938 12.9453 5.55469C13.1406 5.78906 13.375 5.86719 13.6875 5.86719C13.9609 5.86719 14.1953 5.78906 14.3906 5.55469C14.5859 5.35938 14.7031 5.125 14.7422 4.8125ZM17.7109 5.86719C17.7109 6.60938 17.75 7.82031 17.75 9.5C17.75 11.2188 17.7109 12.4297 17.6719 13.1719C17.6328 13.9141 17.5156 14.5391 17.3594 15.0859C17.125 15.75 16.7344 16.3359 16.2656 16.8047C15.7969 17.2734 15.2109 17.625 14.5859 17.8594C14.0391 18.0547 13.375 18.1719 12.6328 18.2109C11.8906 18.25 10.6797 18.25 9 18.25C7.28125 18.25 6.07031 18.25 5.32812 18.2109C4.58594 18.1719 3.96094 18.0547 3.41406 17.8203C2.75 17.625 2.16406 17.2734 1.69531 16.8047C1.22656 16.3359 0.875 15.75 0.640625 15.0859C0.445312 14.5391 0.328125 13.9141 0.289062 13.1719C0.25 12.4297 0.25 11.2188 0.25 9.5C0.25 7.82031 0.25 6.60938 0.289062 5.86719C0.328125 5.125 0.445312 4.46094 0.640625 3.91406C0.875 3.28906 1.22656 2.70312 1.69531 2.23438C2.16406 1.76562 2.75 1.375 3.41406 1.14062C3.96094 0.984375 4.58594 0.867188 5.32812 0.828125C6.07031 0.789062 7.28125 0.75 9 0.75C10.6797 0.75 11.8906 0.789062 12.6328 0.828125C13.375 0.867188 14.0391 0.984375 14.5859 1.14062C15.2109 1.375 15.7969 1.76562 16.2656 2.23438C16.7344 2.70312 17.125 3.28906 17.3594 3.91406C17.5156 4.46094 17.6328 5.125 17.7109 5.86719ZM15.8359 14.6562C15.9922 14.2266 16.0703 13.5234 16.1484 12.5469C16.1484 12 16.1875 11.1797 16.1875 10.125V8.875C16.1875 7.82031 16.1484 7 16.1484 6.45312C16.0703 5.47656 15.9922 4.77344 15.8359 4.34375C15.5234 3.5625 14.9375 2.97656 14.1562 2.66406C13.7266 2.50781 13.0234 2.42969 12.0469 2.35156C11.4609 2.35156 10.6406 2.3125 9.625 2.3125H8.375C7.32031 2.3125 6.5 2.35156 5.95312 2.35156C4.97656 2.42969 4.27344 2.50781 3.84375 2.66406C3.02344 2.97656 2.47656 3.5625 2.16406 4.34375C2.00781 4.77344 1.89062 5.47656 1.85156 6.45312C1.8125 7.03906 1.8125 7.85938 1.8125 8.875V10.125C1.8125 11.1797 1.8125 12 1.85156 12.5469C1.89062 13.5234 2.00781 14.2266 2.16406 14.6562C2.47656 15.4766 3.0625 16.0234 3.84375 16.3359C4.27344 16.4922 4.97656 16.6094 5.95312 16.6484C6.5 16.6875 7.32031 16.6875 8.375 16.6875H9.625C10.6797 16.6875 11.5 16.6875 12.0469 16.6484C13.0234 16.6094 13.7266 16.4922 14.1562 16.3359C14.9375 16.0234 15.5234 15.4375 15.8359 14.6562Z" fill="currentColor"></path>
-        </symbol>
-        
-        
-        
-        <symbol viewBox="0 0 448 512" id="ctaIcon">
-            <path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z">
-            </path>
-        </symbol>
-    </defs>
-</svg>

package/src/components/bs5/searchInput/_colours.scss

@@ -1,63 +0,0 @@
-.qld-search-input {
-    // ------------------------------------------------------------------------------------------------------------------
-    //  1. Common vars
-    // ------------------------------------------------------------------------------------------------------------------
-    //  Search inputs
-    --#{$prefix}site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
-    --#{$prefix}site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
-    --#{$prefix}site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}site-search_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
-
-    // Search input dark
-    --#{$prefix}dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
-    --#{$prefix}dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
-    
-    // Dropdown
-    --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-
-    // Search bootstrap variables
-    --site-search-bg: var(--#{$prefix}site-search-bg);
-    --site-search-btn-color: var(--#{$prefix}site-search-btn-color);
-    --site-search-btn-bg: var(--#{$prefix}site-search-btn-bg);
-    --site-search-border-color: var(--#{$prefix}site-search-border-color);
-    --site-search-icon-color: var(--#{$prefix}site-search-icon-color);
-    --site-search-input-color: var(--#{$prefix}site-search-text-color);
-    --site-search-text-color: var(--#{$prefix}site-search-text-color);
-    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-
-    
-    // ------------------------------------------------------------------------------------------------------------------
-    //  2. Colour modes
-    // ------------------------------------------------------------------------------------------------------------------
-    .dark &,
-    .dark-alt & {
-        // Search (dark/dark/alt)
-        --site-search-bg: var(--#{$prefix}dark-site-search-bg);
-        --site-search-btn-color: var(--#{$prefix}dark-site-search-btn-color);
-        --site-search-btn-bg: var(--#{$prefix}dark-site-search-btn-bg);
-        --site-search-border-color: var(--#{$prefix}dark-site-search-border-color);
-        --site-search-icon-color: var(--#{$prefix}dark-site-search-icon-color);
-        --site-search-input-color: var(--#{$prefix}dark-site-search-text-color);
-        --site-search-text-color: var(--#{$prefix}dark-site-search-text-color);
-
-        // Suggestions colours
-        --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
-        --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
-        --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-        --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-    }
-}