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

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

@@ -1,6 +1,6 @@
 {
   "variantClass": "alert-success",
-  "alertType": "",
+  "ariaLabel": "Success alert",
   "heading": "Alert heading",
   "headingTag": "h2",
   "content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"

package/src/components/bs5/inpageAlert/inpageAlert.hbs

@@ -1,5 +1,13 @@
-<div class="alert {{variantClass}} {{customClass}}" role="alert" 
-    {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
+<div class="alert {{variantClass}} {{customClass}}" role="alert"
+    {{#if ariaLabel}}
+    aria-label="{{ ariaLabel }}"
+    {{else}}
+    {{#ifCond variantClass "==" "alert-info"}}aria-label="Information alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-success"}}aria-label="Success alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-error"}}aria-label="Error alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-warning"}}aria-label="Warning alert"{{/ifCond}}
+    {{/if}}
+>
     {{#if heading}}
         {{#if headingTag}}
             <{{headingTag}} class="alert-heading">{{{ heading }}}</{{headingTag}}>

package/src/components/bs5/inpageAlert/inpageAlert.scss

@@ -1,17 +1,19 @@
 // QLD Desing System Bootstrap 5 library
 // Extends: https://getbootstrap.com/docs/5.3/components/alerts/#variables
+@use "../../../css/mixins" as m;
 
 //All alerts have the same text and background color, even on darker themes
 //To account for this, we redefine the global vars at the .alert scope
 
 .alert {
-  @include light-theme-properties();
+  @extend %qld-palette-default;
   --qld-headings-color: var(--#{$prefix}light-text-text);
   --qld-alert-color: var(--#{$prefix}light-text-text);
   --qld-alert-bg: #fff;
 }
 
 .alert {
+  position: relative;
   padding-left: 4rem;
   overflow-wrap: break-word;
 
@@ -45,79 +47,75 @@
       no-repeat center center;
   }
 
-  //Alert sidebar color and icon
-  //Colors and icons defined below
-  &:before,
-  &:after {
-    content: "";
-    width: 3rem;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  &:after {
-    color: #fff;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-
-  //alerts color map
-  $alert-colors-map: (
+  //alerts color map with icons
+  $alert-icons-map: (
     "success": (
-      color: var(--#{$prefix}success),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82645' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath d='M9.2207 12.6953C8.99805 12.918 8.58984 12.918 8.36719 12.6953L5.99219 10.3203C5.76953 10.0977 5.76953 9.68945 5.99219 9.4668C6.21484 9.24414 6.62305 9.24414 6.8457 9.4668L8.8125 11.4336L13.1172 7.0918C13.3398 6.86914 13.748 6.86914 13.9707 7.0918C14.1934 7.31445 14.1934 7.72266 13.9707 7.94531L9.2207 12.6953ZM19.5 9.875C19.5 15.1445 15.2324 19.375 10 19.375C4.73047 19.375 0.5 15.1445 0.5 9.875C0.5 4.64258 4.73047 0.375 10 0.375C15.2324 0.375 19.5 4.64258 19.5 9.875ZM10 1.5625C5.39844 1.5625 1.6875 5.31055 1.6875 9.875C1.6875 14.4766 5.39844 18.1875 10 18.1875C14.5645 18.1875 18.3125 14.4766 18.3125 9.875C18.3125 5.31055 14.5645 1.5625 10 1.5625Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82645)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}success),
+      "icon": "alert-success",
     ),
     "info": (
-      color: var(--#{$prefix}info),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}info),
+      "icon": "alert-information",
     ),
     "warning": (
-      color: var(--#{$prefix}warning),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_80802' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='2' width='20' height='17'%3E%3Cpath d='M10 13.9062C10.457 13.9062 10.8438 14.293 10.8086 14.75C10.8086 15.2422 10.457 15.5938 10 15.5938C9.54297 15.5938 9.15625 15.2422 9.15625 14.75C9.15625 14.293 9.50781 13.9062 10 13.9062ZM10 12.5C9.68359 12.5 9.4375 12.2539 9.4375 11.9375V6.875C9.4375 6.59375 9.71875 6.3125 10 6.3125C10.2461 6.3125 10.5273 6.59375 10.5273 6.875V11.9375C10.5273 12.2539 10.2812 12.5 10 12.5ZM18.7188 15.2422C19.0703 15.8398 19.0703 16.543 18.7188 17.1406C18.3672 17.7734 17.7344 18.125 17.0312 18.125H2.96875C2.23047 18.125 1.59766 17.7734 1.24609 17.1406C0.894531 16.543 0.894531 15.8398 1.24609 15.2422L8.27734 3.35938C8.62891 2.76172 9.26172 2.375 10 2.375C10.7031 2.41016 11.3359 2.76172 11.6875 3.35938L18.7188 15.2422ZM17.7344 16.5781C17.9102 16.332 17.875 16.0508 17.7344 15.8047L10.7031 3.92188C10.5625 3.67578 10.2812 3.53516 10 3.5C9.96484 3.5 10 3.5 10 3.5C9.68359 3.5 9.40234 3.67578 9.26172 3.92188L2.23047 15.8047C2.08984 16.0508 2.05469 16.332 2.23047 16.5781C2.37109 16.8594 2.65234 17 2.96875 17H16.9961C17.3125 17 17.5938 16.8594 17.7344 16.5781Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_80802)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}warning),
+      "icon": "alert-warning",
     ),
     "danger": (
-      color: var(--#{$prefix}danger),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_34619_4370' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='12' height='12'%3E%3Cpath d='M14.8438 14.875C14.6562 15.0625 14.3125 15.0625 14.125 14.875L10 10.7188L5.84375 14.875C5.65625 15.0625 5.3125 15.0625 5.125 14.875C4.9375 14.6875 4.9375 14.3438 5.125 14.1562L9.28125 10L5.125 5.875C4.9375 5.6875 4.9375 5.34375 5.125 5.15625C5.3125 4.96875 5.65625 4.96875 5.84375 5.15625L10 9.3125L14.125 5.15625C14.3125 4.96875 14.6562 4.96875 14.8438 5.15625C15.0312 5.34375 15.0312 5.6875 14.8438 5.875L10.6875 10L14.8438 14.1562C15.0312 14.3438 15.0312 14.6875 14.8438 14.875Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_34619_4370)'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='white'/%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}danger),
+      "icon": "alert-danger",
     ),
-    //.alert-error can be a clone of .alert-danger
     "error": (
-        color: var(--#{$prefix}danger),
-        icon:
-          "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_34619_4370' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='12' height='12'%3E%3Cpath d='M14.8438 14.875C14.6562 15.0625 14.3125 15.0625 14.125 14.875L10 10.7188L5.84375 14.875C5.65625 15.0625 5.3125 15.0625 5.125 14.875C4.9375 14.6875 4.9375 14.3438 5.125 14.1562L9.28125 10L5.125 5.875C4.9375 5.6875 4.9375 5.34375 5.125 5.15625C5.3125 4.96875 5.65625 4.96875 5.84375 5.15625L10 9.3125L14.125 5.15625C14.3125 4.96875 14.6562 4.96875 14.8438 5.15625C15.0312 5.34375 15.0312 5.6875 14.8438 5.875L10.6875 10L14.8438 14.1562C15.0312 14.3438 15.0312 14.6875 14.8438 14.875Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_34619_4370)'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='white'/%3E%3C/svg%3E%0A",
-      ),
+      "color": var(--#{$prefix}danger),
+      "icon": "alert-danger",
+    ),
     "light": (
-      color: var(--#{$prefix}light-grey),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23595959'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}light-grey),
+      "icon": null,
     ),
     "dark": (
-      color: var(--#{$prefix}dark-grey),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}dark-grey),
+      "icon": null,
     ),
   );
 
-  //Sets colors (border and icon-background) and icons for each alert type
-  @each $key, $properties in $alert-colors-map {
-    $color: map-get($properties, color);
-    $icon: map-get($properties, icon);
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    color: #fff;
+  }
+
+  &:before {
+    width: 3rem;
+  }
 
+  //Sets border color and icon for each alert type
+  @each $key, $values in $alert-icons-map {
     &-#{$key} {
-      border-color: $color;
+      border-color: map-get($values, "color");
       border-width: 2px;
 
       &:before {
-        background-color: $color;
+        background-color: map-get($values, "color");
       }
 
-      &:after {
-        background-image: url($icon);
+      @if map-get($values, "icon") {
+        @include m.make-icon(
+          $name: map-get($values, "icon"),
+          $size: "md",
+          $pseudo: "after"
+        ) {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          margin: 0 0.75rem;
+        }
       }
     }
   }

package/src/components/bs5/inpageAlert/inpageAlert.stories.js

@@ -49,9 +49,9 @@ export default {
       },
       options: ["alert-success", "alert-info", "alert-warning", "alert-error"],
     },
-    alertType: {
-      name: "Alert Type",
-      description: `Type of the alert. i.g "Success", "Information", "Warning", "Error".`,
+    ariaLabel: {
+      name: "ARIA Label",
+      description: `Accessible label for the alert announced to screen readers. e.g "Success alert", "Information alert", "Warning alert", "Error alert".`,
     },
     headingTag: {
       name: "Heading Tag",
@@ -88,3 +88,54 @@ export const Dark = {
     },
   ],
 };
+
+/**
+ * All alert variants with proper accessibility.
+ * Each alert includes CSS-based icons and a visually-hidden span for screen readers.
+ */
+export const AllVariants = {
+  name: "All Alert Types (Accessibility)",
+  render: () => {
+    const alerts = [
+      {
+        variantClass: "alert-success",
+        ariaLabel: "Success alert",
+        heading: "Success Alert",
+        content: "<p>This action was completed successfully.</p>",
+      },
+      {
+        variantClass: "alert-info",
+        ariaLabel: "Information alert",
+        heading: "Information Alert",
+        content: "<p>Here is some important information for you to know.</p>",
+      },
+      {
+        variantClass: "alert-warning",
+        ariaLabel: "Warning alert",
+        heading: "Warning Alert",
+        content: "<p>Please be aware of this potential issue.</p>",
+      },
+      {
+        variantClass: "alert-error",
+        ariaLabel: "Error alert",
+        heading: "Error Alert",
+        content: "<p>An error occurred. Please try again.</p>",
+      },
+    ];
+
+    return alerts
+      .map(
+        (alertData) => `
+      <div class="mb-4">
+        ${new InpageAlert(alertData).html}
+      </div>
+    `
+      )
+      .join("");
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/bs5/pageLayout/{ThemeShowcase.stories.js → PaletteShowcase.stories.js}

@@ -1,34 +1,35 @@
 export default {
-  title: "5. Templates/Theme Showcase",
+  title: "5. Templates/Palette Showcase",
   render: (args) => {
     return args.content;
   },
   argTypes: {
-    themeClass: {
-      control: { type: 'select' },
-      options: ['', 'default', 'light', 'alt', 'dark', 'dark-alt'],
-      description: 'Theme class to apply to the content area',
+    paletteClass: {
+      control: { type: "select" },
+      options: ["", "default", "light", "alt", "dark", "dark-alt"],
+      description: "Palette class to apply to the content area",
     },
   },
   parameters: {
     layout: "padded",
     docs: {
       description: {
-        story: 'This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.',
+        story:
+          "This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.",
       },
     },
   },
 };
 
 /**
- * Default Theme
- * The default theme uses the base color scheme without additional background styling
+ * Default Palette
+ * The default palette uses the base color scheme without additional background styling
  */
-export const DefaultTheme = {
+export const DefaultPalette = {
   args: {
     content: `
       <div class="default p-4 mb-4 border">
-        <h2>Default Theme</h2>
+        <h2>Default Palette</h2>
         <p>This demonstrates the default theme palette. It provides a clean, neutral appearance suitable for most content.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -60,19 +61,19 @@ export const DefaultTheme = {
 };
 
 /**
- * Light Theme
- * The light theme provides a bright, clean appearance
+ * Light Palette
+ * The light palette provides a bright, clean appearance
  */
-export const LightTheme = {
+export const LightPalette = {
   args: {
     content: `
       <div class="light p-4 mb-4 border">
-        <h2>Light Theme</h2>
+        <h2>Light Palette</h2>
         <p>This demonstrates the light theme palette. It provides enhanced readability with a light background.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
         
-        <h3 class="mt-4">Theme Features</h3>
+        <h3 class="mt-4">Palette Features</h3>
         <ul>
           <li>Automatic color and background-color application</li>
           <li>Optimized contrast ratios</li>
@@ -84,14 +85,14 @@ export const LightTheme = {
 };
 
 /**
- * Alt Theme
+ * Alt Palette
  * The alt theme provides an alternative light styling
  */
-export const AltTheme = {
+export const AltPalette = {
   args: {
     content: `
       <div class="alt p-4 mb-4 border">
-        <h2>Alt Theme</h2>
+        <h2>Alt Palette</h2>
         <p>This demonstrates the alt theme palette. It provides a subtle alternative to the standard light theme.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -106,14 +107,14 @@ export const AltTheme = {
 };
 
 /**
- * Dark Theme
+ * Dark Palette
  * The dark theme provides a bold, high-contrast appearance
  */
-export const DarkTheme = {
+export const DarkPalette = {
   args: {
     content: `
       <div class="dark p-4 mb-4 border">
-        <h2>Dark Theme</h2>
+        <h2>Dark Palette</h2>
         <p>This demonstrates the dark theme palette. It provides excellent contrast and a modern appearance.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -128,14 +129,14 @@ export const DarkTheme = {
 };
 
 /**
- * Dark Alt Theme
+ * Dark Alt Palette
  * The dark alt theme provides an alternative dark styling
  */
-export const DarkAltTheme = {
+export const DarkAltPalette = {
   args: {
     content: `
       <div class="dark-alt p-4 mb-4 border">
-        <h2>Dark Alt Theme</h2>
+        <h2>Dark Alt Palette</h2>
         <p>This demonstrates the dark alt theme palette. It provides a variation of the dark theme with different background styling.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -161,21 +162,21 @@ export const DarkAltTheme = {
 };
 
 /**
- * Theme Comparison
- * Shows all themes in a single view for comparison
+ * Palette Comparison
+ * Shows all palettes in a single view for comparison
  */
-export const ThemeComparison = {
+export const PaletteComparison = {
   args: {
     content: `
       <div class="mb-4">
-        <h2>Theme Palette Comparison</h2>
-        <p>Compare all available theme classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
+        <h2>Palette Comparison</h2>
+        <p>Compare all available palette classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
       </div>
       
       <div class="row g-4">
         <div class="col-lg-6">
           <div class="default p-3 border">
-            <h3>Default Theme</h3>
+            <h3>Default Palette</h3>
             <p>Base theme with neutral styling.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -183,7 +184,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="light p-3 border">
-            <h3>Light Theme</h3>
+            <h3>Light Palette</h3>
             <p>Clean, bright appearance.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -191,7 +192,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="alt p-3 border">
-            <h3>Alt Theme</h3>
+            <h3>Alt Palette</h3>
             <p>Alternative light styling.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -199,7 +200,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="dark p-3 border">
-            <h3>Dark Theme</h3>
+            <h3>Dark Palette</h3>
             <p>High contrast, modern look.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -207,7 +208,7 @@ export const ThemeComparison = {
         
         <div class="col-12">
           <div class="dark-alt p-3 border">
-            <h3>Dark Alt Theme</h3>
+            <h3>Dark Alt Palette</h3>
             <p>Alternative dark styling with different background treatment.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -216,7 +217,7 @@ export const ThemeComparison = {
       
       <div class="mt-5">
         <h3>Background Utility Classes</h3>
-        <p>These utilities can be used independently of theme classes for specific background styling:</p>
+        <p>These utilities can be used independently of palette classes for specific background styling:</p>
         <div class="row g-3">
           <div class="col-md-3">
             <div class="bg-default p-2 text-center rounded">.bg-default</div>
@@ -230,9 +231,6 @@ export const ThemeComparison = {
           <div class="col-md-3">
             <div class="bg-dark p-2 text-center rounded text-white">.bg-dark</div>
           </div>
-          <div class="col-md-3">
-            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
-          </div>
           <div class="col-md-3">
             <div class="bg-default-shade p-2 text-center rounded">.bg-default-shade</div>
           </div>
@@ -242,6 +240,10 @@ export const ThemeComparison = {
           <div class="col-md-3">
             <div class="bg-light-alt-shade p-2 text-center rounded">.bg-light-alt-shade</div>
           </div>
+          <div class="col-md-3">
+            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
+          </div>
+
         </div>
       </div>
     `,

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -6,40 +6,36 @@ exports[`SearchInput > Renders as expected 1`] = `
 -->
 <div class="qld-search-input ">
     <input id="search" name="query" class="form-control" type="text" autocomplete="off"
-        aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  />
+        aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  placeholder="" />
     <button class="btn btn-primary" type="submit" id="search-button">
         <span class="btn-icon"></span>
         <span class="btn-label">Search</span>
     </button>
-    <div class="suggestions suggestions__group d-none">
-        <div class="default-suggestions">
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Popular services</strong>
-                <ul class="mt-2">
-                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
-                </ul>
-            </div>
-
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Browse by category</strong>
-                <ul class="mt-12 mb-0">
-                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
-                </ul>
-            </div>
-
-            <div class="suggestions-category">
-                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
-                    href="/queenslanders">Browse all categories</a>
+    
+    <div class="suggestions suggestions__group default">
+            <div class="default-suggestions">
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">Popular</strong>
+                    <ul>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave now</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
+                            <li><a tabindex="0" href="/queenslanders" class="view-more">View more</a></li>
+                    </ul>
+                </div>
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">Collection</strong>
+                    <ul>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
+                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
+                            <li><a tabindex="0" href="/queenslanders" class="view-more">View all</a></li>
+                    </ul>
+                </div>
             </div>
-        </div>
-        <div class="dynamic-suggestions"></div>
+            <div class="dynamic-suggestions" data-view-more="/queenslanders"></div>
     </div>
-    
 </div>"
 `;