Merge 8446581c3d08c7ac0633e039aaf5e33084710925 into 4189b3075c003b2d5dc9335195be7b750dfc2526

Bumps the github-actions group with 1 update: [github/codeql-action](https://github.com/github/codeql-action).


Updates `github/codeql-action` from 3.30.3 to 3.30.5
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](192325c861...3599b3baa1)

---
updated-dependencies:
- dependency-name: github/codeql-action
  dependency-version: 3.30.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: github-actions
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/codeql.yml

@@ -29,16 +29,16 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           category: "/language:javascript"

.github/workflows/scorecard.yml

@@ -73,6 +73,6 @@ jobs:
       # Upload the results to GitHub's code scanning dashboard (optional).
       # Commenting out will disable upload of results to your repo's Code Scanning dashboard
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/upload-sarif@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           sarif_file: results.sarif

package-lock.json

@@ -43,7 +43,7 @@
         "bundlewatch": "^0.4.1",
         "clean-css-cli": "^5.6.3",
         "clipboard": "^2.0.11",
-        "cross-env": "^10.0.0",
+        "cross-env": "^10.1.0",
         "eslint": "8.57.1",
         "eslint-config-xo": "0.45.0",
         "eslint-plugin-html": "^8.1.3",
@@ -52,7 +52,7 @@
         "eslint-plugin-unicorn": "56.0.1",
         "find-unused-sass-variables": "^6.1.0",
         "github-slugger": "^2.0.0",
-        "globby": "^14.1.0",
+        "globby": "^15.0.0",
         "hammer-simulator": "0.0.1",
         "htmlparser2": "^10.0.0",
         "image-size": "^2.0.2",
@@ -2196,9 +2196,9 @@
       }
     },
     "node_modules/@cacheable/memory/node_modules/keyv": {
-      "version": "5.5.2",
+      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.3.tgz",
-      "integrity": "sha512-TXcFHbmm/z7MGd1u9ASiCSfTS+ei6Z8B3a5JHzx3oPa/o7QzWVtPRpc4KGER5RR469IC+/nfg4U5YLIuDUua2g==",
+      "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4322,9 +4322,9 @@
       "license": "MIT"
     },
     "node_modules/@sindresorhus/merge-streams": {
-      "version": "2.3.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
-      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4552,9 +4552,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "18.19.127",
+      "version": "18.19.128",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.127.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.128.tgz",
-      "integrity": "sha512-gSjxjrnKXML/yo0BO099uPixMqfpJU0TKYjpfLU7TrtA2WWDki412Np/RSTPRil1saKBhvVVKzVx/p/6p94nVA==",
+      "integrity": "sha512-m7wxXGpPpqxp2QDi/rpih5O772APRuBIa/6XiGqLNoM1txkjI8Sz1V4oSXJxQLTz/yP5mgy9z6UXEO6/lP70Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5322,9 +5322,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.30.1",
+      "version": "0.30.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.30.1.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.30.2.tgz",
-      "integrity": "sha512-2XabsR1u0/B6OoKy57/xJmPkQiUvdoV93oW4ww+Xjee7C2er/O5U77lvqycDkT2VQDtfjYcjw8ZV8GDaoqwjHQ==",
+      "integrity": "sha512-0pE4RQ4UQi1jKY6p7u6i1Tkzqmu+d+/tHS7Q7rKunWLB9WyilBTpHHpXzPNMDj5hTbK0B0PTLSz07yqMBiF6xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5442,9 +5442,9 @@
       }
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.7",
+      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.7.tgz",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.9.tgz",
-      "integrity": "sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==",
+      "integrity": "sha512-hY/u2lxLrbecMEWSB0IpGzGyDyeoMFQhCvZd2jGFSE5I17Fh01sYUBPCJtkWERw7zrac9+cIghxm/ytJa2X8iA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -5804,9 +5804,9 @@
       }
     },
     "node_modules/cacheable/node_modules/keyv": {
-      "version": "5.5.2",
+      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.3.tgz",
-      "integrity": "sha512-TXcFHbmm/z7MGd1u9ASiCSfTS+ei6Z8B3a5JHzx3oPa/o7QzWVtPRpc4KGER5RR469IC+/nfg4U5YLIuDUua2g==",
+      "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6512,9 +6512,9 @@
       }
     },
     "node_modules/cross-env": {
-      "version": "10.0.0",
+      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
-      "integrity": "sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q==",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7090,9 +7090,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.224",
+      "version": "1.5.227",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.224.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.227.tgz",
-      "integrity": "sha512-kWAoUu/bwzvnhpdZSIc6KUyvkI1rbRXMT0Eq8pKReyOyaPZcctMli+EgvcN1PAvwVc7Tdo4Fxi2PsLNDU05mdg==",
+      "integrity": "sha512-ITxuoPfJu3lsNWUi2lBM2PaBPYgH3uqmxut5vmBxgYvyI4AlJ6P3Cai1O76mOrkJCBzq0IxWg/NtqOrpu/0gKA==",
       "dev": true,
       "license": "ISC"
     },
@@ -8603,6 +8603,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.0.tgz",
+      "integrity": "sha512-xPypGGincdfyl/AiSGa7GjXLkvld9V7GjZlowup9SHIJnQnHLFiLODCd/DqKOp0PBagbHJ68r1KJI9Mut7m4sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -8836,21 +8846,21 @@
       }
     },
     "node_modules/globby": {
-      "version": "14.1.0",
+      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-15.0.0.tgz",
-      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "integrity": "sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@sindresorhus/merge-streams": "^2.1.0",
+        "@sindresorhus/merge-streams": "^4.0.0",
         "fast-glob": "^3.3.3",
-        "ignore": "^7.0.3",
+        "ignore": "^7.0.5",
         "path-type": "^6.0.0",
         "slash": "^5.1.0",
         "unicorn-magic": "^0.3.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -9915,13 +9925,14 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.1.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.1.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "integrity": "sha512-Gn8BWUdrTzf9XUJAvqIYP7QnSC3mKs8QjQdGdJ7HmBemzZo14wj/OVmmAwgxDX/7WhFEjboybL4VhXGIQYPlOA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
+        "generator-function": "^2.0.0",
         "get-proto": "^1.0.0",
         "has-tostringtag": "^1.0.2",
         "safe-regex-test": "^1.1.0"
@@ -10521,16 +10532,16 @@
       }
     },
     "node_modules/jest-diff": {
-      "version": "30.1.2",
+      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.2.0.tgz",
-      "integrity": "sha512-4+prq+9J61mOVXCa4Qp8ZjavdxzrWQXrI80GNxP8f4tkI2syPuPrJgdRPZRrfUTRvIoUwcmNLbqEJy9W800+NQ==",
+      "integrity": "sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/diff-sequences": "30.0.1",
         "@jest/get-type": "30.1.0",
         "chalk": "^4.1.2",
-        "pretty-format": "30.0.5"
+        "pretty-format": "30.2.0"
       },
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
@@ -14834,9 +14845,9 @@
       }
     },
     "node_modules/pretty-format": {
-      "version": "30.0.5",
+      "version": "30.2.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
-      "integrity": "sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==",
+      "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -18971,9 +18982,9 @@
       }
     },
     "node_modules/vscode-css-languageservice": {
-      "version": "6.3.7",
+      "version": "6.3.8",
-      "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-6.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-6.3.8.tgz",
-      "integrity": "sha512-5TmXHKllPzfkPhW4UE9sODV3E0bIOJPOk+EERKllf2SmAczjfTmYeq5txco+N3jpF8KIZ6loj/JptpHBQuVQRA==",
+      "integrity": "sha512-dBk/9ullEjIMbfSYAohGpDOisOVU1x2MQHOeU12ohGJQI7+r0PCimBwaa/pWpxl/vH4f7ibrBfxIZY3anGmHKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -18984,9 +18995,9 @@
       }
     },
     "node_modules/vscode-html-languageservice": {
-      "version": "5.5.1",
+      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-5.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-5.5.2.tgz",
-      "integrity": "sha512-/ZdEtsZ3OiFSyL00kmmu7crFV9KwWR+MgpzjsxO60DQH7sIfHZM892C/E4iDd11EKocr+NYuvOA4Y7uc3QzLEA==",
+      "integrity": "sha512-QpaUhCjvb7U/qThOzo4V6grwsRE62Jk/vf8BRJZoABlMw3oplLB5uovrvcrLO9vYhkeMiSjyqLnCxbfHzzZqmw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -132,7 +132,7 @@
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "eslint": "8.57.1",
     "eslint-config-xo": "0.45.0",
     "eslint-plugin-html": "^8.1.3",
@@ -141,7 +141,7 @@
     "eslint-plugin-unicorn": "56.0.1",
     "find-unused-sass-variables": "^6.1.0",
     "github-slugger": "^2.0.0",
-    "globby": "^14.1.0",
+    "globby": "^15.0.0",
     "hammer-simulator": "0.0.1",
     "htmlparser2": "^10.0.0",
     "image-size": "^2.0.2",

scss/forms/_floating-labels.scss

@@ -36,21 +36,23 @@
       color: transparent;
     }
 
+    &:focus::placeholder {
+      color: $input-placeholder-color;
+    }
+
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: $form-floating-input-padding-t;
+      @include form-floating-active-input-styles();
-      padding-bottom: $form-floating-input-padding-b;
     }
+
     // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
     &:-webkit-autofill {
-      padding-top: $form-floating-input-padding-t;
+      @include form-floating-active-input-styles();
-      padding-bottom: $form-floating-input-padding-b;
     }
   }
 
   > .form-select {
-    padding-top: $form-floating-input-padding-t;
+    @include form-floating-active-input-styles();
-    padding-bottom: $form-floating-input-padding-b;
     padding-left: $form-floating-padding-x;
   }
 
@@ -59,13 +61,23 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      transform: $form-floating-label-transform;
+      @include form-floating-active-label-styles();
+
+      &::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
     }
   }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      transform: $form-floating-label-transform;
+      @include form-floating-active-label-styles();
     }
   }
   > textarea:focus,
@@ -95,3 +107,22 @@
     color: $form-floating-label-disabled-color;
   }
 }
+
+// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
+.form-floating-always {
+  &.form-floating,
+  .form-floating {
+    .form-control {
+      @include form-floating-active-input-styles();
+
+      &::placeholder,
+      &:focus::placeholder {
+        color: $input-placeholder-color;
+      }
+    }
+
+    label {
+      @include form-floating-active-label-styles();
+    }
+  }
+}

scss/mixins/_forms.scss

@@ -1,6 +1,18 @@
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
 
+// scss-docs-start form-floating-mixins
+@mixin form-floating-active-input-styles() {
+  padding-top: $form-floating-input-padding-t;
+  padding-bottom: $form-floating-input-padding-b;
+}
+
+@mixin form-floating-active-label-styles() {
+  color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+  transform: $form-floating-label-transform;
+}
+// scss-docs-end form-floating-mixins
+
 // scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {

site/src/content/docs/forms/floating-labels.mdx

@@ -129,6 +129,19 @@ When using `.input-group` and `.form-floating` along with form validation, the `
     </div>
   </div>`} />
 
+## Always floating
+
+Make any `.form-control` always use a floating label with visible placeholder with the `.form-floating-always` modifier class. Visible placeholders use the default input `color`  and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects.
+
+<Example code={`<div class="form-floating form-floating-always mb-3">
+    <input type="email" class="form-control" id="alwaysFloatingInput" placeholder="name@example.com">
+    <label for="alwaysFloatingInput">Email address</label>
+  </div>
+  <div class="form-floating form-floating-always">
+    <input type="password" class="form-control" id="alwaysFloatingPassword" placeholder="••••••••">
+    <label for="alwaysFloatingPassword">Password</label>
+  </div>`} />
+
 ## Layout
 
 When working with the Bootstrap grid system, be sure to place form elements within column classes.
@@ -158,3 +171,9 @@ When working with the Bootstrap grid system, be sure to place form elements with
 ### Sass variables
 
 <ScssDocs name="form-floating-variables" file="scss/_variables.scss" />
+
+### Sass mixins
+
+<AddedIn version="5.4.0" />
+
+<ScssDocs name="form-floating-mixins" file="scss/mixins/_forms.scss" removeIndentation={false} />