@qld-gov-au/qgds-bootstrap5 2.0.6 → 2.0.8

package/dist/components/bs5/searchInput/searchInput.hbs

@@ -4,7 +4,10 @@
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
         aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
-
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
     {{#if suggestions}}
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
@@ -36,8 +39,5 @@
         <div class="dynamic-suggestions"></div>
     </div>
     {{/if}}
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
-        <span class="btn-label">{{ buttonLabel }}</span>
-    </button>
+    
 </div>

package/dist/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/qld-gov-au/qgds-bootstrap5"
   },
   "main": "index.js",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "husky && npm run build",
     "start": "npm run build",
     "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' --ignore-pattern 'src/js/handlebars.partials.js' .",
     "build": "node esbuild.js",
@@ -21,7 +24,7 @@
     "test:testrunner": "sleep 2 && mocha --timeout 10000 --require ./test/testServer.test.js ",
     "watch": "node esbuild.js --watch",
     "serve": "http-server dist -p 8080",
-    "serve:test": "http-server dist -p 8081 --silent",
+    "serve:test": "http-server . -p 8081 --silent",
     "dev-storybook": "npm-run-all --parallel watch storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:themes": "ENABLE_DYNAMIC_THEME=true storybook dev -p 6006",
@@ -50,38 +53,34 @@
     "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/json": "^0.13.2",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/cli": "^8.6.14",
-    "@storybook/html": "^8.6.14",
-    "@storybook/html-vite": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@stylistic/eslint-plugin-js": "2.1.0",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/addon-themes": "^9.1.13",
+    "@storybook/cli": "^9.1.13",
+    "@storybook/html-vite": "^9.1.13",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
     "chai": "^5.2.0",
     "chalk": "^5.3.0",
-    "chromatic": "^11.28.2",
-    "esbuild": "0.25.5",
+    "chromatic": "^13.3.1",
+    "esbuild": "0.25.11",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "8.57.0",
-    "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint": "9.38.0",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-storybook": "^9.1.13",
+    "globals": "16.4.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
@@ -91,17 +90,16 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.37",
     "postcss": "^8.5.4",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",
     "sass": "^1.89.2",
-    "selenium-webdriver": "^4.32.0",
-    "storybook": "^8.6.14",
-    "storybook-addon-deep-controls": "^0.9.2",
+    "selenium-webdriver": "^4.33.0",
+    "storybook": "^9.1.13",
+    "storybook-addon-deep-controls": "^0.9.5",
     "vite": "^6.3.5",
-    "vitest": "^3.2.4",
-    "watch": "^1.0.2"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

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

@@ -0,0 +1 @@
+{}

package/dist/sample-data/header/header.variant.coBrand.data.json

@@ -1,6 +1,8 @@
 {
   "isCoBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "default",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -15,25 +17,20 @@
     ]
   },
   "mainContent": {
+    "palette": "dark",
     "url": "https://qld.gov.au",
     "logo": null,
     "secondaryLogo": null,
-    "siteTitle": "Department of Seniors, Disability Services and Aboriginal and Torres Strait Islander Partnerships",
-    "subline": ""
+    "siteTitle": "Cairns and Hinterland",
+    "subline": "Hospital and Health Service"
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.endorsed.data.json

@@ -1,6 +1,8 @@
 {
   "isEndorsedBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "default",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -108,6 +110,7 @@
     ]
   },
   "mainContent": {
+    "palette": "dark-alt",
     "url": "https://qld.gov.au",
     "logo": {
       "src": "assets/img/endorsed.svg",
@@ -121,18 +124,12 @@
     "subline": ""
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.masterBrand.data.json

@@ -1,5 +1,6 @@
 {
   "isMasterBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
     "palette": "dark",
     "globalLink": {
@@ -119,18 +120,12 @@
   },
 
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.standAlone.data.json

@@ -1,6 +1,8 @@
 {
   "isStandaloneBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "dark-alt",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -110,6 +112,7 @@
     ]
   },
   "mainContent": {
+    "palette": "default",
     "url": "https://qld.gov.au",
     "siteTitle": "Standalone example",
     "subLine": "",
@@ -123,18 +126,12 @@
     }
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.subBrand.data.json

@@ -1,6 +1,8 @@
 {
   "isSubBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "dark",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -22,25 +24,20 @@
     ]
   },
   "mainContent": {
+    "palette": "default",
     "url": "https://qld.gov.au",
     "logoPath": "",
     "secondaryLogoPath": "",
-    "siteTitle": "For government",
-    "subline": "Hospital and Health Service"
+    "siteTitle": "Department of Seniors, Disability Services and Aboriginal and Torres Strait Islander Partnerships",
+    "subline": ""
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

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

@@ -28,8 +28,7 @@
       {
         "tab_text": "Tab label 4",
         "title": "Section Heading Item 4",
-        "content": "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        "disabled": true
+        "content": "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>"
       },
       {
         "tab_text": "Tab label 5",

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

@@ -0,0 +1 @@
+{}

package/esbuild.js

@@ -48,6 +48,11 @@ const buildConfig = {
       in: "./src/js/handlebars.helpers.js",
       out: "./assets/js/handlebars.helpers.bundle",
     },
+    {
+      //Deprecated init is where it should be at
+      in: "./src/js/handlebars.init.js",
+      out: "./assets/js/handlebars.partials",
+    },
     {
       in: "./src/js/handlebars.init.js",
       out: "./assets/js/handlebars.init.min",
@@ -70,11 +75,18 @@ const buildConfig = {
     versionPlugin(),
     QDGScleanFolders(),
     handlebarsPlugin(),
+    //https://github.com/twbs/bootstrap/issues/40962 bootstrap 5.x is not ready for sass 1.80, so silence what we can't change (review 2026)
     sassPlugin({
-      //Hide sass deprecation warnings with a quiet flag...  npm run build -- --quiet
-      silenceDeprecations: argv.quiet
-        ? ["import", "global-builtin", "mixed-decls", "color-functions"]
-        : [],
+      silenceDeprecations: [
+        "legacy-js-api",
+        "mixed-decls",
+        "color-functions",
+        "global-builtin",
+        "import",
+      ],
+      indentType: "space",
+      indentWidth: 2,
+      loadPaths: ["./node_modules"],
     }),
     QDGSbuildLog(),
   ],

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/qld-gov-au/qgds-bootstrap5"
   },
   "main": "index.js",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "husky && npm run build",
     "start": "npm run build",
     "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' --ignore-pattern 'src/js/handlebars.partials.js' .",
     "build": "node esbuild.js",
@@ -21,7 +24,7 @@
     "test:testrunner": "sleep 2 && mocha --timeout 10000 --require ./test/testServer.test.js ",
     "watch": "node esbuild.js --watch",
     "serve": "http-server dist -p 8080",
-    "serve:test": "http-server dist -p 8081 --silent",
+    "serve:test": "http-server . -p 8081 --silent",
     "dev-storybook": "npm-run-all --parallel watch storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:themes": "ENABLE_DYNAMIC_THEME=true storybook dev -p 6006",
@@ -50,38 +53,34 @@
     "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/json": "^0.13.2",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/cli": "^8.6.14",
-    "@storybook/html": "^8.6.14",
-    "@storybook/html-vite": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@stylistic/eslint-plugin-js": "2.1.0",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/addon-themes": "^9.1.13",
+    "@storybook/cli": "^9.1.13",
+    "@storybook/html-vite": "^9.1.13",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
     "chai": "^5.2.0",
     "chalk": "^5.3.0",
-    "chromatic": "^11.28.2",
-    "esbuild": "0.25.5",
+    "chromatic": "^13.3.1",
+    "esbuild": "0.25.11",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "8.57.0",
-    "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint": "9.38.0",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-storybook": "^9.1.13",
+    "globals": "16.4.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
@@ -91,17 +90,16 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.37",
     "postcss": "^8.5.4",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",
     "sass": "^1.89.2",
-    "selenium-webdriver": "^4.32.0",
-    "storybook": "^8.6.14",
-    "storybook-addon-deep-controls": "^0.9.2",
+    "selenium-webdriver": "^4.33.0",
+    "storybook": "^9.1.13",
+    "storybook-addon-deep-controls": "^0.9.5",
     "vite": "^6.3.5",
-    "vitest": "^3.2.4",
-    "watch": "^1.0.2"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

package/pom.xml

@@ -12,8 +12,8 @@
 
     <properties>
         <frontend-maven-plugin.version>1.15.0</frontend-maven-plugin.version>
-        <node.version>v20.12.0</node.version>
-        <npm.version>10.5.0</npm.version>
+        <node.version>v22.19.0</node.version>
+        <npm.version>10.9.3</npm.version>
     </properties>
 
     <build>
@@ -107,7 +107,7 @@
                         <goals>
                             <goal>npm</goal>
                         </goals>
-                        <phase>storybook</phase>
+                        <phase>package</phase>
                         <configuration>
                             <arguments>run build-storybook</arguments>
                         </configuration>

package/src/components/bs5/accordion/Accordion.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as AccordionStories from "./accordion.stories";
 import defaultdata from "./accordion.data.json";
 import "../../../stories/documentation/storybook-documentation.scss";

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

@@ -20,6 +20,9 @@ export default {
       options: ["h2", "h3", "h4", "h5", "h6"],
     },
   },
+  globals: {
+    backgrounds: { value: "default" },
+  },
 
   /**
    * Additional parameters for the story.
@@ -36,13 +39,18 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6276-45691&mode=design&t=crJKtPwMG2IcZf5E-4",
     },
+    backgrounds: {
+      disable: false,
+    },
   },
 };
 
 /**
  * Default Accordion story
  */
-export const Default = {};
+export const Default = {
+  globals: { backgrounds: { value: "default" } },
+};
 
 /**
  * Accordion in 'Light' colour theme.
@@ -57,11 +65,8 @@ export const Light = {
       2: { ...defaultdata.accordionItems[2], id: "light-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
+  globals: {
+    backgrounds: { value: "light" },
   },
   decorators: [
     (Story) => {
@@ -89,11 +94,8 @@ export const Alternative = {
       2: { ...defaultdata.accordionItems[2], id: "alt-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
+  globals: {
+    backgrounds: { value: "alt" },
   },
   decorators: [
     (Story) => {
@@ -121,11 +123,8 @@ export const Dark = {
       2: { ...defaultdata.accordionItems[2], id: "dark-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
+  globals: {
+    backgrounds: { value: "dark" },
   },
   decorators: [
     (Story) => {
@@ -153,12 +152,8 @@ export const DarkAlternative = {
       2: { ...defaultdata.accordionItems[2], id: "dark-alt-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
+
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/backToTop/backToTop.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as BackToTopStories from "./backToTop.stories";
 
 <Meta of={BackToTopStories} />

package/src/components/bs5/banner/Banner.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as BannerStories from "./banner.stories";
 import defaultdata from "./banner.data.json";
 

package/src/components/bs5/banner/banner.scss

@@ -283,7 +283,7 @@
     }
   }
 
-  /* 
+  /*
     Banner Images are static hero images that sit with the content.
 
     Banner Images have several variants:
@@ -478,7 +478,7 @@
   }
 
   .banner-abstract {
-    margin: 1rem 0 0 0;
+    margin: 1.25rem 0 0 0;
     max-width: 50rem; //To make readable. Clips line length for very wide viewports.
     color: var(--#{$prefix}banner-abstract-color);
 

package/src/components/bs5/blockquote/Blockquote.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as BlockquoteStories from "./blockquote.stories";
 
 <Meta of={BlockquoteStories} />

package/src/components/bs5/blockquote/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/breadcrumbs/Breadcrumbs.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as BreadcrumbsStories from "./breadcrumbs.stories";
 import defaultdata from "./breadcrumbs.data.json";
 

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

@@ -99,7 +99,6 @@ $expander-icon-color: $qld-light-link;
     pointer-events: none;
     width: 360px;
     border-radius: 4px;
-    /* Transition properties */
     transition: max-height 0.5s ease-out;
   }
   .breadcrumb-vertical {
@@ -124,7 +123,9 @@ $expander-icon-color: $qld-light-link;
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
-    &:focus {
+
+    //Handle outline offset when focused
+    &:focus-within {
       overflow: initial;
     }
   }
@@ -137,6 +138,10 @@ $expander-icon-color: $qld-light-link;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &:focus {
+      overflow: initial;
+    }
   }
   // Override Bootstrap's default :before pseudo element
   &:before {