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

package/src/components/bs5/textbox/textbox.hbs

@@ -1,32 +1,31 @@
 <!-- QGDS Component: Textbox -->
 
-<!-- Label for the first input field -->
 <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 for the first input field -->
 {{#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}}
 
-<!-- First text input field, described by the hint text above -->
-<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
-    type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
-    isRequired}}required aria-required="true" {{/if}} />
+<input id={{id}} {{#if value}}value="{{value}}"{{/if}}  class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
+    type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
+    isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />

package/src/components/common/focus-styles/focusStyles.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, Controls } from "@storybook/addon-docs/blocks";
+import * as Stories from "./focusStyles.stories";
+
+<Meta of={Stories} />
+
+# Focus Styles
+
+Use the mixin `focusable()` to keep focus styles consistent across all elements including links, buttons, and single-action cards.
+
+## Focus ring color and palette context
+
+Focus ring color is palette context-aware via CSS custom property `--qld-focus-color`. This means it changes color based on the classes `default`, `alt`, `light`, `dark`, and `dark-alt`.
+Because a focus ring is offset beyond an element's boundaries, when a themable component such as a Card is also focusable, it must retain the palette color of its parent.
+For this reason `--qld-focus-color` is set on children of elements with palette classes, not the element itself. Change the values of `paletteClass` and `cardPaletteClass` to see this in effect.
+
+To otherwise force a focus-ring's palette context, you may also use utility classes `qld-focus-light` and `qld-focus-dark`. This should only be done as a final resort however.
+
+<Canvas of={Stories.Default} />
+
+<Controls />

package/src/components/common/focus-styles/focusStyles.stories.js

@@ -0,0 +1,58 @@
+import { Button, defaultArgs as buttonArgs } from "../../bs5/button/Button";
+import { Card } from "../../bs5/card/Card";
+import cardData from "../../bs5/card/card.data.json";
+const cardArgs = cardData.singleAction;
+/**
+ * @import { Meta, StoryObj } from "@storybook/html";
+ */
+
+/**
+ * @typedef {Object} Args
+ * @prop {"focus-light" | "focus-dark" | ""} [utilityClass] - Manually force a light or dark palette context on the focus color. This can be used as escape hatch for when the focus color must be inverted for accessibility reasons.
+ * @prop {"default" | "light" | "alt" | "dark" | "dark-alt" | ""} [paletteClass]
+ * @prop {"default" | "light" | "alt" | "dark" | "dark-alt" | ""} [cardPaletteClass]
+ */
+
+/**
+ * @type { Meta<Args> }
+ */
+export default {
+  title: "1. Core Styles/Focus Styles",
+  tags: ["autodocs"],
+  argTypes: {
+    utilityClass: {
+      description:
+        "Manually force a light or dark palette context on the focus color. This can be used as escape hatch for when the focus color must be inverted for accessibility reasons.",
+      control: "radio",
+      options: ["qld-focus-light", "qld-focus-dark", null],
+    },
+    paletteClass: {
+      control: "select",
+      options: ["default", "light", "alt", "dark", "dark-alt", null],
+    },
+    cardPaletteClass: {
+      control: "select",
+      options: ["default", "light", "alt", "dark", "dark-alt"],
+    },
+  },
+  parameters: { layout: "fullscreen" },
+
+  render: (args) => {
+    return `<div class="p-24 ${args.paletteClass || ""}" style="display: flex; gap: 48px; align-items: flex-start">
+<a href=javascript:void()" class="${args.utilityClass || ""}">Here is a link</a>
+${new Button({ ...buttonArgs, variantClass: `${buttonArgs.variantClass} ${args.utilityClass || ""}` }).html}
+${new Card({ ...cardArgs, variantClass: `${args.cardPaletteClass} ${args.utilityClass || ""}` }).html}
+</div>
+`;
+  },
+};
+
+/** @type {StoryObj<Args>} */
+export const Default = {
+  /**@type Args */
+  args: {
+    utilityClass: "",
+    paletteClass: "",
+    cardPaletteClass: "default",
+  },
+};

package/src/css/functions/_index.scss

@@ -1 +1,6 @@
+@forward "color-icon";
 @forward "in-list";
+@forward "remify";
+@forward "snap-line-height";
+@forward "string-replace";
+@forward "svg-encode";

package/src/css/functions/color-icon.scss

@@ -0,0 +1,31 @@
+@use "../../components/bs5/icons/icons.list" as icons;
+@use "../functions/string-replace" as *;
+@use "../functions/in-list" as *;
+@use "../functions/svg-encode" as *;
+@use "bootstrap/scss/functions" as bs;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+
+///
+/// This function can create an svg string with a customised fill color by replacing all instances of the string "currentColor" with the chosen color.
+/// This is useful when creating svg data urls for use in background property, where currentColor does not work.
+/// Use it together with svg-encode for fun and profit.
+/// @param {string} $name - The name of the QGDS icon
+/// @param {color} $color -The desired new color. Must be of type color (eg hex or rgb notation) not a CSS custom property.
+/// @return {string} - the new svg string with "currentColor" replaced with chosen color
+@function color-icon($name, $color) {
+  $_validNames: map.keys(icons.$icon-names);
+  // validate $name
+  @if ($name and not in-list($name, $_validNames)) {
+    @error "Invalid parameter $name: " + $name;
+  }
+
+  // validate color is valid.
+  @if (meta.type-of($color) != "color") {
+    @error "Invalid parameter $color: " + $name;
+  }
+
+  $svg: map.get(icons.$icon-names, $name);
+  @return string-replace($svg, "currentColor", "#{$color}");
+}

package/src/css/functions/remify.scss

@@ -0,0 +1,32 @@
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
+
+///
+/// Easily convert px to rems
+/// @param {Number} $value The px value to convert to rem. May be unitless or supplied as px units.
+/// @param {Number} $baseline [16px] The assumed px value of 1rem.
+/// @todo support complex property values eg: `border: remify(4px 8px 12px 2rem)`;
+@function remify($value, $baseline: 16px) {
+  @if (math.is-unitless($baseline)) {
+    $baseline-px: $baseline * 1px;
+  }
+
+  @if (math.unit($baseline) != "px") {
+    @error "parameter $baseline may only use px units";
+  }
+
+  @if (meta.type-of($value) == "list") {
+    $result: ();
+    @each $item in $value {
+      $result: list.append($result, remify($item));
+    }
+    @return $result;
+  }
+
+  @if (math.is-unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return (math.div($value, $baseline) * 1rem);
+}

package/src/css/functions/snap-line-height.scss

@@ -0,0 +1,7 @@
+@use "remify" as *;
+///
+/// Calculate a lineheight snapped to nearest 4px value, based on current font size
+/// The returned value is absolute, so only use on leaf nodes where relative line-height value doesn't need to cascade.
+@function snap-line-height($ideal-line-height: 1.4, $grid-size: 4px) {
+  @return round(nearest, calc(1em * $ideal-line-height), remify($grid-size));
+}

package/src/css/functions/string-replace.scss

@@ -0,0 +1,49 @@
+@use "sass:string";
+@use "sass:meta";
+
+///
+/// Adapted from Kitty Giraudel https://kittygiraudel.com/2014/01/13/string-replacement-function-in-sass/
+/// @param {type} $string - The string to be searched, with substring $replace replaced with $replaceWith
+/// @param {type} $replace - The substring to be replaced by $replaceWith
+/// @param {type} $replaceWith - The string to replace $replace
+/// @return {string} - A new string with $replace replaced by $replaceWith
+@function string-replace($string, $replace, $replaceWith) {
+  // validate strings
+  @if meta.type-of($string) !=
+    string or
+    meta.type-of($replace) !=
+    string or
+    meta.type-of($replaceWith) !=
+    string
+  {
+    @warn "One of the 3 arguments is not a string.";
+    @return $string;
+  }
+
+  // avoid infinite recursion
+  @if string.index($replaceWith, $replace) {
+    @warn "The string to be replaced is contained in the new string. Infinite recursion avoided.";
+    @return $string;
+  }
+
+  // Find the index of the string to replace
+  $index: string.index($string, $replace);
+
+  // If $replace string is found
+  @if ($index) and ($replaceWith != $replace) {
+    // Create a new string. Then we loop through each character in the string, and append them to the new string only if they are not part of the $replace string.
+    $newString: string.quote(string.slice($string, 1, $index - 1));
+
+    @for $i from $index through string.length($string) {
+      @if $i < $index or $i >= $index + string.length($replace) {
+        $newString: $newString + string.slice($string, $i, $i);
+      }
+    }
+
+    $newString: string.insert($newString, $replaceWith, $index);
+    @return string-replace($newString, $replace, $replaceWith);
+  }
+
+  // else nothing to do - return original $string
+  @return $string;
+}

package/src/css/functions/svg-encode.scss

@@ -0,0 +1,22 @@
+@use "../functions/string-replace" as *;
+
+///
+/// A simpler version of bootstrap's escape-svg, which cannot be used with sass module system.
+/// Unlike bootstraps' version, this function cannot be used to wrap `url()` function.
+/// It only works on strings!
+/// Based on the same original source at https://codepen.io/kevinweber/pen/dXWoRw
+/// @param {type} $svg -
+/// @return {string} - the encoded svg prefixed with "data:image/svg+xml,", ready to be used within `url()` for background images.
+@function svg-encode($svg) {
+  $encoding-reference: (
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+  );
+  @each $char, $encoded in $encoding-reference {
+    $svg: string-replace($svg, $char, $encoded);
+  }
+  @return "data:image/svg+xml," + $svg;
+}

package/src/css/main.scss

@@ -100,7 +100,7 @@ $enable-dark-mode: true;
 @import "../../node_modules/bootstrap/scss/utilities/api";
 
 // Themes
-@import "qld-theme";
+@import "qld-palettes";
 
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";

package/src/css/mixins/focusable.scss

@@ -4,6 +4,7 @@
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
 /// @param {String} $outlineWidth: [3px] The width of the outline.
 /// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+/// @content
 
 @mixin focusable(
   $offsetOutline: true,
@@ -39,5 +40,7 @@
       ); // --qld-focus-color defined in qld-type.scss
       offset: $offsetOutline;
     }
+
+    @content;
   }
 }

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

@@ -22,7 +22,7 @@ $prefix: "qld-" !default;
   $include-base: true
 ) {
   // validate $name
-  @if ($name and not f.in-list($name, $icon-names)) {
+  @if ($name and not f.in-list($name, map.keys($icon-names))) {
     @error "Invalid parameter $name: " + $name;
   }
   // validate $include-base

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

@@ -1,24 +1,27 @@
 @use "focusable" as *;
-@use "../variables/animation";
+@use "../functions" as f;
+// @use "../variables/animation";
 
 ///
 /// Apply generic links styles. Ensures consistent styles including transition effects.
 @mixin make-link() {
   color: var(--qld-link-color);
-  transition: {
-    property:
-      color, background-color, border-color, outline-color, outline-offset,
-      outline-width, text-decoration-color, text-decoration-line,
-      text-decoration-thickness, text-underline-offset, opacity;
-    duration: animation.$duration-fast;
-    timing-function: animation.$timing-function;
-  }
+  border-radius: 0.25rem;
+  transition: none; // remove transitions until decisions at design system level.
+  // {
+  //   property:
+  //     color, background-color, border-color, outline-color, outline-offset,
+  //     outline-width, text-decoration-color, text-decoration-line,
+  //     text-decoration-thickness, text-underline-offset, opacity;
+  //   duration: animation.$duration-fast;
+  //   timing-function: animation.$timing-function;
+  // }
 
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
   text-decoration-color: var(--qld-link-underline);
 
-  @include focusable($offsetOutline: true, $outlineWidth: 2px);
+  @include focusable();
 
   &:hover {
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);

package/src/css/{qld-theme.scss → qld-palettes.scss}

@@ -1,8 +1,7 @@
-// QLD Theme Palette Classes
+// QLD Palette Classes
 // Provides complete theme styling including color, background-color, and CSS variables
 
-// Theme properties mixins to avoid duplication
-@mixin light-theme-properties {
+%qld-palette-default {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
   --qld-action-icon-color: var(--qld-light-action-secondary);
@@ -11,11 +10,9 @@
   --qld-body-color: #{$body-color};
   --qld-body-font-weight: #{$body-font-weight};
   --qld-border-color: var(--qld-light-border);
-  --qld-focus-color: var(--qld-light-focus);
   --qld-headings-color: #{$headings-color};
   --qld-link-color: #{$link-color};
   --qld-link-color-rgb: #{to-rgb($link-color)};
-  --qld-link-font-weight: 400;
   --qld-link-hover-color: var(--qld-link-color);
   --qld-link-visited-color: #{$color-default-color-light-link-visited};
   --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
@@ -23,73 +20,91 @@
   --qld-link-underline-hover: #{$color-default-color-light-underline-default-hover};
   --qld-link-underline-visited: #{$color-default-color-light-underline-visited};
   --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-hover};
-  --qld-link-underline-offset: 0.3rem;
+  --qld-link-underline-offset: 0.3em;
   --qld-link-underline-thickness: 0.5px;
   --qld-link-underline-thickness-hover: 2px;
-  --qld-selection-bg: var(--qld-brand-primary);
-  --qld-selection-color: var(--qld-white);
+  --qld-selection-bg: var(--qld-dark-background);
+  --qld-selection-color: var(--qld-neutral-white);
+ 
+
+  // Because a focus ring generally is offset outside of an element, at the boundary between palette themes,
+  // its color should inherit the parent's palette, not the focussed element's palette, so defer setting
+  // focus color until first descendant, unless this is :root
+  &:root,
+  > :where(*) {
+    --qld-focus-color: var(--qld-light-focus);
+  }
+}
+
+%qld-palette-light {
+  @extend %qld-palette-default;
+  --qld-body-bg: var(--qld-light-background);
+  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
 }
 
-@mixin dark-theme-properties {
+%qld-palette-alt {
+  @extend %qld-palette-default;
+  --qld-body-bg: var(--qld-light-alt-background);
+  --qld-border-color: var(--qld-soft-grey);
+}
+
+%qld-palette-dark {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
   --qld-action-icon-color: var(--qld-dark-action-secondary);
   --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
+  --qld-body-bg: var(--qld-dark-background);
   --qld-body-color: #fff;
-  --qld-focus-color: var(--qld-dark-focus);
+  --qld-border-color: var(--qld-dark-border);
   --qld-headings-color: #{$color-default-color-dark-text-heading};
   --qld-link-color: #{$color-default-color-dark-link-default};
   --qld-link-color-rgb: 255, 255, 255;
   --qld-link-hover-color: #{$color-default-color-dark-link-default};
   --qld-link-hover-color-rgb: 255, 255, 255;
   --qld-link-visited-color: #{$color-default-color-dark-link-visited};
-  --qld-link-visited: var(
-    --qld-link-visited-dark
-  ); // TODO tidy up these variables, we should only use --qld-link-visited-color
   --qld-link-underline: #{$qld-link-underline-dark};
   --qld-link-underline-hover: #{$qld-link-underline-hover-dark};
   --qld-link-underline-visited: #{$qld-link-underline-visited-dark};
   --qld-link-underline-visited-hover: #{$qld-link-underline-hover-dark};
-  --qld-selection-bg: var(--qld-white);
-  --qld-selection-color: var(--qld-brand-primary);
+  --qld-selection-bg: var(--qld-neutral-white);
+  --qld-selection-color: var(--qld-dark-background);
+
+  &:root,
+  > :where(*) {
+    --qld-focus-color: var(--qld-dark-focus);
+  }
+}
+
+%qld-palette-dark-alt {
+  @extend %qld-palette-dark;
+  --qld-body-bg: var(--qld-dark-alt-background);
+  --qld-border-color: var(--qld-dark-alt-border);
 }
 
 // Default theme (inherits :root variables) and root variables
 :root,
 .default {
-  @include light-theme-properties;
+  @extend %qld-palette-default;
 }
 
 // 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);
+  @extend %qld-palette-light;
 }
 
 // Alt theme (light alternative)
 .alt {
-  @include light-theme-properties;
-  --qld-body-bg: var(--qld-light-alt-background);
-  --qld-border-color: var(--qld-soft-grey);
+  @extend %qld-palette-alt;
 }
 
 // Dark theme
-.dark {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-dark-background);
-  --qld-border-color: var(--qld-dark-border);
+// Bootstrap dark mode support
+.dark,
+:root[data-bs-theme="dark"] {
+  @extend %qld-palette-dark;
 }
 
 // Dark alt theme
 .dark-alt {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-dark-alt-background);
-  --qld-border-color: var(--qld-dark-alt-border);
-}
-
-// Bootstrap dark mode support
-:root[data-bs-theme="dark"] {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-brand-primary);
+  @extend %qld-palette-dark-alt;
 }

package/src/css/qld-type.scss

@@ -68,9 +68,13 @@ h6 {
   color: var(--qld-headings-color);
 }
 
-a,
+a {
+  @include mixins.make-link();
+}
+
 a.nav-link {
   @include mixins.make-link();
+  border-radius: 0;
 }
 
 figure > figcaption {

package/src/css/qld-utilities.scss

@@ -30,6 +30,14 @@ $utilities: map-merge(
           "dark-alt": var(--qld-dark-alt-background),
           "dark-alt-shade": var(--qld-dark-alt-background-shade),
         ),
-      )
+      ),
+    "focus": (
+      class: "qld-focus",
+      property: --qld-focus-color,
+      values: (
+        "light": var(--#{$prefix}light-focus),
+        "dark": var(--#{$prefix}dark-focus),
+      ),
+    )
   )
 );

package/src/css/qld-variables.scss

@@ -21,7 +21,7 @@ $qld-red-border: $core-default-color-status-error-darker;
 $qld-blue-border: $color-default-color-light-border-light;
 $qld-yellow-border: $core-default-color-status-caution-darker;
 $qld-dark-blue-shade: $color-default-color-dark-background-alt-shade;
-$qld-light-background: $core-default-color-status-info-lightest;
+$qld-light-background: $color-default-color-light-background-light;
 $qld-light-background-shade: $color-default-color-light-background-light-shade;
 $qld-light-border: $color-default-color-light-border-default;
 $qld-light-border-alt: $color-default-color-light-border-alt;

package/src/img/icons-sprite.svg

@@ -1,28 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" role="img">
-  <symbol id="qgds-icon-spinner-step-1" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M29.988 8.231A16 16 0 1 1 16.928.027l-.17 2.93a13.064 13.064 0 1 0 10.663 6.7l2.567-1.426Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-2" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M23.768 29.988a16 16 0 1 1 8.205-13.06l-2.93-.17a13.064 13.064 0 1 0-6.7 10.663l1.425 2.567Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-3" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M2.013 23.768a16 16 0 1 1 13.059 8.205l.17-2.93a13.064 13.064 0 1 0-10.663-6.7l-2.566 1.425Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-4" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M8.231 2.012a16 16 0 1 1-8.204 13.06l2.93.17a13.064 13.064 0 1 0 6.7-10.663L8.23 2.012Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-x" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M22.21 6.25h3.282l-7.219 8.297 8.532 11.203h-6.657l-5.25-6.797-5.953 6.797H5.617l7.735-8.813L5.195 6.25h6.844l4.688 6.234L22.21 6.25Zm-1.17 17.531h1.827L11.055 8.125h-1.97L21.04 23.781Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-youtube" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M28.258 9.86c.562 1.968.562 6.187.562 6.187s0 4.172-.562 6.187a3.127 3.127 0 0 1-2.25 2.25C23.992 25 16.023 25 16.023 25s-8.015 0-10.03-.516a3.127 3.127 0 0 1-2.25-2.25c-.563-2.015-.563-6.187-.563-6.187s0-4.219.562-6.188c.281-1.125 1.172-2.015 2.25-2.296C8.008 7 16.023 7 16.023 7s7.97 0 9.985.563c1.078.28 1.969 1.171 2.25 2.296Zm-14.86 9.984 6.657-3.797-6.657-3.797v7.594Z"></path>
-  </symbol>
-
   <symbol id="qgds-icon-accessibility" viewBox="0 0 32 32">
     <path fill="currentColor" d="M15.933 7.738c-.793 0-1.457-.267-1.992-.802-.535-.535-.803-1.2-.803-1.992 0-.793.268-1.458.803-1.993.535-.535 1.2-.802 1.992-.802.793 0 1.457.267 1.993.802.535.535.802 1.2.802 1.993 0 .793-.267 1.457-.802 1.992-.535.535-1.2.802-1.993.802ZM11.805 28.1V12.215a53.57 53.57 0 0 1-3.343-.396 43.696 43.696 0 0 1-3.262-.616 1.505 1.505 0 0 1-.978-.663 1.48 1.48 0 0 1-.212-1.148 1.24 1.24 0 0 1 .7-.918 1.77 1.77 0 0 1 1.198-.138c1.608.342 3.263.596 4.963.763a51.862 51.862 0 0 0 10.175 0 46.103 46.103 0 0 0 5.046-.763 1.767 1.767 0 0 1 1.198.138c.38.187.614.493.7.918.085.417.015.8-.212 1.148a1.506 1.506 0 0 1-.978.663c-1.067.244-2.154.45-3.262.616a53.564 53.564 0 0 1-3.343.396V28.1c0 .395-.14.732-.42 1.013-.281.28-.619.42-1.013.42a1.38 1.38 0 0 1-1.013-.42 1.38 1.38 0 0 1-.42-1.013v-6.72h-2.657v6.72c0 .395-.14.732-.42 1.013-.281.28-.619.42-1.014.42a1.38 1.38 0 0 1-1.012-.42 1.38 1.38 0 0 1-.42-1.013Z"></path>
   </symbol>
@@ -400,6 +376,22 @@
     <path fill="currentColor" d="M7.842 23.526 4.82 26.548c-.337.337-.724.414-1.162.231-.439-.182-.658-.512-.658-.988V5.141c0-.589.21-1.092.63-1.512A2.056 2.056 0 0 1 5.14 3h21.72c.588 0 1.091.21 1.51.63.42.419.63.922.63 1.51v16.246a2.06 2.06 0 0 1-.63 1.511c-.419.42-.922.63-1.51.63H7.842Zm-.744-1.72H26.86a.403.403 0 0 0 .29-.13.403.403 0 0 0 .13-.29V5.14a.403.403 0 0 0-.13-.29.403.403 0 0 0-.29-.13H5.14a.403.403 0 0 0-.29.13.403.403 0 0 0-.13.29v19.14l2.378-2.473Zm3.197-7.383c.335 0 .62-.118.856-.354s.354-.522.354-.857c0-.335-.118-.62-.354-.856a1.167 1.167 0 0 0-.856-.354c-.341 0-.628.118-.861.354-.233.236-.35.521-.35.856 0 .335.117.62.35.857.233.236.52.354.86.354Zm5.756 0c.335 0 .62-.118.857-.354a1.17 1.17 0 0 0 .353-.857c0-.335-.118-.62-.353-.856a1.167 1.167 0 0 0-.857-.354c-.335 0-.62.118-.857.354a1.167 1.167 0 0 0-.354.856c0 .335.118.62.354.857.236.236.522.354.857.354Zm5.64 0c.335 0 .62-.118.857-.354.236-.236.354-.522.354-.857 0-.335-.118-.62-.354-.856a1.167 1.167 0 0 0-.857-.354c-.335 0-.62.118-.856.354a1.167 1.167 0 0 0-.354.856c0 .335.118.62.354.857.236.236.521.354.856.354Z"></path>
   </symbol>
 
+  <symbol id="qgds-icon-spinner-step-1" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M29.988 8.231A16 16 0 1 1 16.928.027l-.17 2.93a13.064 13.064 0 1 0 10.663 6.7l2.567-1.426Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-2" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M23.768 29.988a16 16 0 1 1 8.205-13.06l-2.93-.17a13.064 13.064 0 1 0-6.7 10.663l1.425 2.567Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-3" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M2.013 23.768a16 16 0 1 1 13.059 8.205l.17-2.93a13.064 13.064 0 1 0-10.663-6.7l-2.566 1.425Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-4" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M8.231 2.012a16 16 0 1 1-8.204 13.06l2.93.17a13.064 13.064 0 1 0 6.7-10.663L8.23 2.012Z"></path>
+  </symbol>
+
   <symbol id="qgds-icon-spreadsheet" viewBox="0 0 32 32">
     <path fill="currentColor" d="M4 25.347V6.63c0-.72.258-1.338.774-1.854A2.557 2.557 0 0 1 6.653 4H25.37c.72 0 1.338.258 1.854.775A2.53 2.53 0 0 1 28 6.629v18.706c0 .714-.258 1.336-.775 1.868-.516.531-1.134.797-1.854.797H6.653a2.558 2.558 0 0 1-1.879-.774A2.558 2.558 0 0 1 4 25.347Zm1.8-14.644h20.4V6.665a.842.842 0 0 0-.243-.622.842.842 0 0 0-.622-.244H6.665a.842.842 0 0 0-.622.244.842.842 0 0 0-.244.622v4.038Zm7.383 7.749h5.634v-5.95h-5.634v5.95Zm0 7.749h5.634v-5.95h-5.634v5.95Zm-7.384-7.75h5.62v-5.949h-5.62v5.95Zm14.806 0H26.2v-5.949h-5.596v5.95Zm-13.94 7.75h4.754v-5.95h-5.62v5.084c0 .253.081.46.244.622a.84.84 0 0 0 .622.244Zm13.94 0h4.73c.253 0 .46-.081.622-.244a.842.842 0 0 0 .244-.622v-5.084h-5.596v5.95Z"></path>
   </symbol>
@@ -472,6 +464,14 @@
     <path fill="currentColor" d="M11.627 29.59c-1.837 0-3.401-.652-4.692-1.956C5.645 26.33 5 24.759 5 22.922c0-1.594.512-3.002 1.536-4.226a6.506 6.506 0 0 1 3.882-2.282c.292-.068.562-.02.81.142.25.162.408.39.476.682a.986.986 0 0 1-.14.804c-.164.244-.391.4-.683.468a4.345 4.345 0 0 0-2.668 1.525 4.349 4.349 0 0 0-1.05 2.887c0 1.238.436 2.294 1.31 3.167.873.874 1.934 1.31 3.182 1.31 1.05 0 1.98-.323 2.79-.97a4.438 4.438 0 0 0 1.585-2.473c.092-.292.26-.517.504-.675a.907.907 0 0 1 .805-.099c.292.093.517.263.675.512.158.248.19.519.098.81a6.503 6.503 0 0 1-2.37 3.664 6.503 6.503 0 0 1-4.115 1.422ZM22.135 8.185a2.5 2.5 0 0 1-1.835-.757 2.5 2.5 0 0 1-.757-1.836 2.5 2.5 0 0 1 .757-1.835A2.5 2.5 0 0 1 22.135 3c.72 0 1.329.252 1.829.757s.75 1.116.75 1.835c0 .72-.25 1.331-.75 1.836a2.48 2.48 0 0 1-1.829.757Zm-6.322 13.35c-1.01 0-1.798-.434-2.36-1.303-.563-.869-.633-1.773-.21-2.712l2.806-6.188h-3.46l-.577 1.508a1.046 1.046 0 0 1-.525.581.963.963 0 0 1-.789.062 1.063 1.063 0 0 1-.659-.558.998.998 0 0 1-.029-.867l.558-1.505c.188-.488.482-.86.883-1.114a2.5 2.5 0 0 1 1.368-.38h6.54c.962 0 1.692.373 2.192 1.12.5.749.548 1.578.143 2.49l-2.78 6.08h4.885c.691 0 1.28.245 1.766.736.486.49.73 1.082.73 1.773v5.809c0 .307-.104.564-.311.77-.207.208-.464.311-.771.311s-.564-.103-.771-.31a1.046 1.046 0 0 1-.31-.771V21.84a.314.314 0 0 0-.077-.221c-.05-.056-.127-.084-.228-.084h-8.014Z"></path>
   </symbol>
 
+  <symbol id="qgds-icon-x" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M22.21 6.25h3.282l-7.219 8.297 8.532 11.203h-6.657l-5.25-6.797-5.953 6.797H5.617l7.735-8.813L5.195 6.25h6.844l4.688 6.234L22.21 6.25Zm-1.17 17.531h1.827L11.055 8.125h-1.97L21.04 23.781Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-youtube" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M28.258 9.86c.562 1.968.562 6.187.562 6.187s0 4.172-.562 6.187a3.127 3.127 0 0 1-2.25 2.25C23.992 25 16.023 25 16.023 25s-8.015 0-10.03-.516a3.127 3.127 0 0 1-2.25-2.25c-.563-2.015-.563-6.187-.563-6.187s0-4.219.562-6.188c.281-1.125 1.172-2.015 2.25-2.296C8.008 7 16.023 7 16.023 7s7.97 0 9.985.563c1.078.28 1.969 1.171 2.25 2.296Zm-14.86 9.984 6.657-3.797-6.657-3.797v7.594Z"></path>
+  </symbol>
+
   <symbol id="qgds-icon-zoom" viewBox="0 0 32 32">
     <path fill="currentColor" d="M11 13.05H8.78c-.295 0-.541-.1-.74-.3-.2-.2-.299-.448-.299-.744s.1-.542.299-.739c.199-.196.445-.295.74-.295H11V8.781c0-.295.1-.541.3-.74.2-.2.449-.299.745-.299s.542.1.739.299c.196.199.295.445.295.74v2.191h2.19c.295 0 .542.1.741.3.2.2.299.449.299.745s-.1.543-.299.74a1.013 1.013 0 0 1-.74.294h-2.191v2.219c0 .294-.1.541-.3.74-.201.2-.45.299-.745.299A1.013 1.013 0 0 1 11 15.269v-2.218Zm1.073 9.018c-2.815 0-5.198-.975-7.148-2.924C2.975 17.195 2 14.826 2 12.037c0-2.79.974-5.16 2.924-7.111C6.873 2.976 9.244 2 12.037 2c2.794 0 5.166.975 7.116 2.924 1.95 1.95 2.926 4.32 2.926 7.11a9.823 9.823 0 0 1-.596 3.385 9.62 9.62 0 0 1-1.676 2.924l9.889 9.845c.199.19.301.438.307.74.005.302-.097.556-.307.763-.21.206-.464.309-.76.309a.996.996 0 0 1-.748-.315l-9.862-9.861a8.99 8.99 0 0 1-2.87 1.657 9.935 9.935 0 0 1-3.383.587Zm-.017-2.079c2.217 0 4.096-.771 5.635-2.314C19.23 16.13 20 14.25 20 12.034c0-2.218-.77-4.098-2.31-5.64-1.538-1.544-3.417-2.316-5.634-2.316-2.227 0-4.113.772-5.659 2.315-1.546 1.543-2.319 3.423-2.319 5.64 0 2.218.773 4.098 2.32 5.642 1.545 1.543 3.431 2.314 5.658 2.314Z"></path>
   </symbol>