govuk_publishing_components 65.1.0 → 65.2.0

data/node_modules/choices.js/README.md

@@ -1,4 +1,4 @@
-# Choices.js [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Build%20and%20test/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Bundle%20size%20checks/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![npm](https://img.shields.io/npm/v/choices.js.svg)](https://www.npmjs.com/package/choices.js)
+# Choices.js [![Actions Status](https://github.com/Choices-js/Choices/actions/workflows/unit-tests.yml/badge.svg)](https://github.com/Choices-js/Choices/actions) [![Actions Status](https://github.com/Choices-js/Choices/actions/workflows/bundlesize.yml/badge.svg)](https://github.com/Choices-js/Choices/actions) [![npm](https://img.shields.io/npm/v/choices.js.svg)](https://www.npmjs.com/package/choices.js)
 
 A vanilla, lightweight (~20kb gzipped 🎉), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
 
@@ -45,6 +45,7 @@ A vanilla, lightweight (~20kb gzipped 🎉), configurable select box/text input
 - [Callbacks](#callbacks)
 - [Events](#events)
 - [Methods](#methods)
+- [CSS custom properties](#css-custom-properties)
 - [Development](#development)
 - [License](#license)
 
@@ -64,8 +65,9 @@ yarn add choices.js
 
 From a [CDN](https://www.jsdelivr.com/package/npm/choices.js):
 
-**Note:** There is sometimes a delay before the latest version of Choices is reflected on the CDN.
-
+**Notes:**
+* There is sometimes a delay before the latest version of Choices is reflected on the CDN.
+* Examples below pin a version (v11.1.0). Check [latest release](https://www.jsdelivr.com/package/npm/choices.js) and update v11.1.0 to the latest tag before using.
 ```html
 <!-- Include base CSS (optional) -->
 <link
@@ -75,7 +77,7 @@ From a [CDN](https://www.jsdelivr.com/package/npm/choices.js):
 <!-- Or versioned -->
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/base.min.css"
+  href="https://cdn.jsdelivr.net/npm/choices.js@11.1.0/public/assets/styles/base.min.css"
 />
 
 <!-- Include Choices CSS -->
@@ -86,13 +88,13 @@ From a [CDN](https://www.jsdelivr.com/package/npm/choices.js):
 <!-- Or versioned -->
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"
+  href="https://cdn.jsdelivr.net/npm/choices.js@11.1.0/public/assets/styles/choices.min.css"
 />
 
 <!-- Include Choices JavaScript (latest) -->
 <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
 <!-- Or versioned -->
-<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/choices.js@11.1.0/public/assets/scripts/choices.min.js"></script>
 ```
 
 Or include Choices directly:
@@ -159,6 +161,7 @@ import "choices.js/public/assets/styles/choices.css";
     paste: true,
     searchEnabled: true,
     searchChoices: true,
+    searchDisabledChoices: false,
     searchFloor: 1,
     searchResultLimit: 4,
     searchFields: ['label', 'value'],
@@ -166,7 +169,7 @@ import "choices.js/public/assets/styles/choices.css";
     resetScrollPosition: true,
     shouldSort: true,
     shouldSortItems: false,
-    sorter: () => {...},
+    sorter: (a, b) => sortByAlpha,
     shadowRoot: null,
     placeholder: true,
     placeholderValue: null,
@@ -174,17 +177,18 @@ import "choices.js/public/assets/styles/choices.css";
     prependValue: null,
     appendValue: null,
     renderSelectedChoices: 'auto',
+    searchRenderSelectedChoices: true,
     loadingText: 'Loading...',
     noResultsText: 'No results found',
     noChoicesText: 'No choices to choose from',
     itemSelectText: 'Press to select',
     uniqueItemText: 'Only unique values can be added',
     customAddItemText: 'Only values matching specific conditions can be added',
-    addItemText: (value) => {
+    addItemText: (value, rawValue) => {
       return `Press Enter to add <b>"${value}"</b>`;
     },
     removeItemIconText: () => `Remove item`,
-    removeItemLabelText: (value) => `Remove item: ${value}`,
+    removeItemLabelText: (value, rawValue) => `Remove item: ${value}`,
     maxItemText: (maxItemCount) => {
       return `Only ${maxItemCount} values can be added`;
     },
@@ -217,6 +221,7 @@ import "choices.js/public/assets/styles/choices.css";
       selectedState: ['is-selected'],
       flippedState: ['is-flipped'],
       loadingState: ['is-loading'],
+      invalidState: ['is-invalid'],
       notice: ['choices__notice'],
       addChoice: ['choices__item--selectable', 'add-choice'],
       noResults: ['has-no-results'],
@@ -480,6 +485,14 @@ Pass an array of objects:
 
 **Usage:** Whether choices should be filtered by input or not. If `false`, the search event will still emit, but choices will not be filtered.
 
+### searchDisabledChoices
+
+**Type:** `Boolean` **Default:** `false`
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** Whether disabled choices should be included in search results. If `true`, disabled choices will appear in search results but still cannot be selected. This is useful when you want users to see what options exist but are currently unavailable. Placeholders are always excluded from search results regardless of this setting.
+
 ### searchFields
 
 **Type:** `Array/String` **Default:** `['label', 'value']`
@@ -596,7 +609,7 @@ const example = new Choices(element, {
   sorter: function(a, b) {
     return b.label.length - a.label.length;
   },
-};
+});
 ```
 
 ### placeholder
@@ -659,6 +672,23 @@ For backward compatibility, `<option value="">This is a placeholder</option>` an
 
 **Usage:** Whether selected choices should be removed from the list. By default choices are removed when they are selected in multiple select box. To always render choices pass `always`.
 
+### searchRenderSelectedChoices
+
+**Type:** `Boolean` **Default:** `true'`
+
+**Input types affected:** `select-multiple`
+
+**Usage:** Whether selected choices should be removed from the list during search.
+
+**Example:**
+
+```js
+// Hide selected choices from search results
+const example = new Choices(element, {
+  searchRenderSelectedChoices: false,
+});
+```
+
 ### loadingText
 
 **Type:** `String` **Default:** `Loading...`
@@ -693,45 +723,47 @@ For backward compatibility, `<option value="">This is a placeholder</option>` an
 
 ### addItemText
 
-**Type:** `String/Function` **Default:** `Press Enter to add "${value}"`
+**Type:** `String/Function` **Default:** `Press Enter to add "${value}"` **Arguments:** `value`, `valueRaw`
 
 **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Usage:** The text that is shown when a user has inputted a new item but has not pressed the enter key. To access the current input value, pass a function with a `value` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example), otherwise pass a string.
+**Usage:** The text that is shown when a user has inputted a new item but has not pressed the enter key. To access the current input value, pass a function with a `value` argument (see the [default config](https://github.com/Choices-js/Choices#setup) for an example), otherwise pass a string.
 
 Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
 
 ### removeItemIconText
 
-**Type:** `String/Function` **Default:** `Remove item"`
+**Type:** `String/Function` **Default:** `Remove item"` **Arguments:** `value`, `valueRaw`, `item`
 
 **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Usage:** The text/icon for the remove button. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
+**Usage:** The text/icon for the remove button. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/Choices-js/Choices#setup] for an example), otherwise pass a string.
+To access the item's label, use the 3rd argument. *Note*; this label is not escaped.
 
 Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
 
 ### removeItemLabelText
 
-**Type:** `String/Function` **Default:** `Remove item: ${value}"`
+**Type:** `String/Function` **Default:** `Remove item: ${value}"` **Arguments:** `value`, `valueRaw`, `item`
 
 **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Usage:** The text for the remove button's aria label. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
+**Usage:** The text for the remove button's aria label. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/Choices-js/Choices#setup] for an example), otherwise pass a string.
+To access the item's label, use the 3rd argument. *Note*; this label is not escaped.
 
 Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
 
 ### maxItemText
 
-**Type:** `String/Function` **Default:** `Only ${maxItemCount} values can be added`
+**Type:** `String/Function` **Default:** `Only ${maxItemCount} values can be added` **Arguments:** `maxItemCount`
 
 **Input types affected:** `text`
 
-**Usage:** The text that is shown when a user has focus on the input but has already reached the [max item count](https://github.com/jshjohnson/Choices#maxitemcount). To access the max item count, pass a function with a `maxItemCount` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example), otherwise pass a string.
+**Usage:** The text that is shown when a user has focus on the input but has already reached the [max item count](https://github.com/Choices-js/Choices#maxitemcount). To access the max item count, pass a function with a `maxItemCount` argument (see the [default config](https://github.com/Choices-js/Choices#setup) for an example), otherwise pass a string.
 
 ### valueComparer
 
-**Type:** `Function` **Default:** `strict equality`
+**Type:** `Function` **Default:** `strict equality` **Arguments:** `value1`, `value2`
 
 **Input types affected:** `select-one`, `select-multiple`
 
@@ -742,7 +774,7 @@ Return type must be safe to insert into HTML (ie use the 1st argument which is s
 ```js
 const example = new Choices(element, {
   valueComparer: (a, b) => value.trim() === b.trim(),
-};
+});
 ```
 
 ### labelId
@@ -784,6 +816,7 @@ classNames: {
   selectedState: ['is-selected'],
   flippedState: ['is-flipped'],
   loadingState: ['is-loading'],
+  invalidState: ['is-invalid'],
   notice: ['choices__notice'],
   addChoice: ['choices__item--selectable', 'add-choice'],
   noResults: ['has-no-results'],
@@ -809,11 +842,11 @@ classNames: {
 
 ### callbackOnCreateTemplates(strToEl: (str: string) => HTMLElement, escapeForTemplate: (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string, getClassNames: (s: Array<string> | string) => string)
 
-**Type:** `Function` **Default:** `null` **Arguments:** `strToEl`, `escapeForTemplate`
+**Type:** `Function` **Default:** `null` **Arguments:** `strToEl`, `escapeForTemplate`, `getClassNames`
 
 **Input types affected:** `text`, `select-one`, `select-multiple`
 
-**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined [here](https://github.com/Choices-js/Choices/blob/master/src/scripts/templates.ts).
+**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined [here](https://github.com/Choices-js/Choices/blob/main/src/scripts/templates.ts).
 If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
 original template function.
 
@@ -837,36 +870,39 @@ const example = new Choices(element, {
 or more complex:
 
 ```js
+// StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
+// EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
+// GetClassNamesFn = (s: string | Array<string>) => string;
 const example = new Choices(element, {
-  callbackOnCreateTemplates: function(strToEl, escapeForTemplate, getClassNames) {
+  callbackOnCreateTemplates: function(strToEl /*:StrToEl*/, escapeForTemplate /*:EscapeForTemplateFn*/, getClassNames /*:GetClassNamesFn*/) {
     return {
       item: ({ classNames }, data) => {
-        return template(`
+        return strToEl(`
           <div class="${getClassNames(classNames.item).join(' ')} ${
           getClassNames(data.highlighted
             ? classNames.highlightedState
             : classNames.itemSelectable).join(' ')
         } ${
           data.placeholder ? classNames.placeholder : ''
-        }" data-item data-id="${data.id}" data-value="${escapeForTemplate(data.value)}" ${
+        }" data-item data-id="${data.id}" data-value="${escapeForTemplate(true, data.value)}" ${
           data.active ? 'aria-selected="true"' : ''
         } ${data.disabled ? 'aria-disabled="true"' : ''}>
-            <span>&bigstar;</span> ${escapeForTemplate(data.label)}
+            <span>&bigstar;</span> ${escapeForTemplate(true, data.label)}
           </div>
         `);
       },
       choice: ({ classNames }, data) => {
-        return template(`
+        return strToEl(`
           <div class="${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
           getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
         }" data-select-text="${this.config.itemSelectText}" data-choice ${
           data.disabled
             ? 'data-choice-disabled aria-disabled="true"'
             : 'data-choice-selectable'
-        } data-id="${data.id}" data-value="${escapeForTemplate(data.value)}" ${
+        } data-id="${data.id}" data-value="${escapeForTemplate(true, data.value)}" ${
           data.groupId > 0 ? 'role="treeitem"' : 'role="option"'
         }>
-            <span>&bigstar;</span> ${escapeForTemplate(data.label)}
+            <span>&bigstar;</span> ${escapeForTemplate(true, data.label)}
           </div>
         `);
       },
@@ -1258,7 +1294,7 @@ example.setChoiceByValue('Two'); // Choice with value of 'Two' has now been sele
 
 ## Browser compatibility
 
-Choices is compiled using [Babel](https://babeljs.io/) targeting browsers [with more than 1% of global usage](https://github.com/jshjohnson/Choices/blob/master/.browserslistrc) and expecting that features [listed below](https://github.com/jshjohnson/Choices/blob/master/.eslintrc.json#L62) are available or polyfilled in browser.
+Choices is compiled using [Babel](https://babeljs.io/) targeting browsers [with more than 1% of global usage](https://github.com/Choices-js/Choices/blob/main/.browserslistrc) and expecting that features [listed below](https://github.com/Choices-js/Choices/blob/main/.eslintrc.json#L62) are available or polyfilled in browser.
 You may see exact list of target browsers by running `npm exec browserslist` within this repository folder.
 If you need to support a browser that does not have one of the features listed below,
 I suggest including a polyfill from [cdnjs.cloudflare.com/polyfill](https://cdnjs.cloudflare.com/polyfill):
@@ -1286,6 +1322,80 @@ Element.prototype.dataset
 Element.prototype.replaceChildren
 ```
 
+## CSS custom properties
+
+Since version `11.2`, you are able to customize the behavior and CSS of Choices.js using the following
+[custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties).
+
+| Property                          | Default                                   | Description                                                                 |
+|-----------------------------------|-------------------------------------------|-----------------------------------------------------------------------------|
+| `--choices-darken`                | `black`                                   | Darken color used within the color-mix                                      |
+| `--choices-lighten`               | `white`                                   | Ligten color used within the color-mix                                      |
+| `--choices-bg-color`              | `#f9f9f9`                                 | Background color of the choices element                                     |
+| `--choices-bg-color-disabled`     | `#eaeaea`                                 | Background color of a disabled choices element                              |
+| `--choices-bg-color-dropdown`     | `#fff`                                    | Background color of the dropdown                                            |
+| `--choices-text-color`            | `#333`                                    | Text color of choices                                                       |
+| `--choices-keyline-color`         | `#ddd`                                    | Border-colors within choices                                                |
+| `--choices-primary-color`         | `#005F75`                                 | Primary color                                                               |
+| `--choices-disabled-color`        | `#eaeaea`                                 | Background color of disabled items                                          |
+| `--choices-item-disabled-color`   | `#fff`                                    | Text color of disabled items                                                |
+| `--choices-invalid-color`         | `#d33141`                                 | Border color of the invalid state                                           |
+| `--choices-highlighted-color`     | `#f2f2f2`                                 | Highlight background of the choices items                                   |
+| `--choices-highlight-color`       | `#005F75`                                 | Focus color of the choices button                                           |
+| `--choices-font-size-lg`          | `16px`                                    | Basic font size for choices                                                 |
+| `--choices-font-size-md`          | `14px`                                    | Font size for medium choices items, e.g. the input field                    |
+| `--choices-font-size-sm`          | `12px`                                    | Font size for the small choices items, e.g. select multiple or explanations |
+| `--choices-guttering`             | `24px`                                    | Margin-Bottom of the choices wrapper                                        |
+| `--choices-border-radius`         | `2.5px`                                   | Border-radius of the choices element                                        |
+| `--choices-border-radius-item`    | `20px`                                    | Border-radius of the choices items                                          |
+| `--choices-z-index`               | `1`                                       | z-index of the active choices dropdown                                      |
+| `--choices-input-height`          | `44px`                                    | Height of the choices inner element                                         |
+| `--choices-width`                 | `100%`                                    | Width of the choices inner element                                          |
+| `--choices-base-border`           | `1px solid var( --choices-keyline-color)` | Bottom-border of the choices inner element                                  |
+| `--choices-multiple-item-margin`  | `3.75px`                                  | Margin of the dropdown items (multiple mode)                                |
+| `--choices-multiple-item-padding` | `4px 10px`                                | Padding of the dropdown items (multiple mode)                               |
+| `--choices-dropdown-item-padding` | `10px`                                    | Padding of the choices dropdown items                                       |
+| `--choices-list-single-padding`   | `4px 16px 4px 4px`                        | Padding of the listbox description                                          |
+| `--choices-input-margin-bottom`   | `5px`                                     | Margin-bottom of the choices input (text inputs)                            |
+| `--choices-input-padding`         | `4px 0 4px 2px`                           | Padding of the choices input                                                |
+| `--choices-inner-padding`         | `7.5px 7.5px 3.75px`                      | Padding of the choices inner element                                        |
+| `--choices-inner-one-padding`     | `7.5px`                                   | Padding of the choices inner element (Single select input)                  |
+| `--choices-arrow-size`            | `5px`                                     | Size of the choices dropdown symbol                                         |
+| `--choices-arrow-margin-top`      | `-2.5px`                                  | Top offset of the dropdown symbol                                           |
+| `--choices-arrow-margin-top-open` | `-7.5px`                                  | Top offset of the active dropdown symbol                                    |
+| `--choices-arrow-right`           | `11.5px`                                  | Right offset of the dropdown symbol                                         |
+| `--choices-icon-cross`            | `url("...")`                              | Button image                                                                |
+| `--choices-icon-cross-inverse`    | `url("...")`                              | Button image (inversed color)                                               |
+| `--choices-button-offset`         | `8px`                                     | Button offset                                                               |
+| `--choices-button-dimension`      | `8px`                                     | Button background size                                                      |
+| `--choices-button-line-height`    | `1`                                       | Button line height                                                          |
+| `--choices-button-border-radius`  | `0`                                       | Button border-radius                                                        |
+| `--choices-button-opacity`        | `0.75`                                    | Button opacity                                                              |
+| `--choices-button-opacity-hover`  | `1`                                       | Button opacity on hover                                                     |
+| `--choices-placeholder-opacity`   | `0.5`                                     | Placeholder opacity                                                         |
+
+### Dark mode example
+
+The current demo page uses the following variables for its dark mode
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --choices-primary-color: #38daff;
+    --choices-item-color: black;
+    --choices-bg-color: #101010;
+    --choices-bg-color-dropdown: #101010;
+    --choices-keyline-color: #3b3e40;
+    --choices-bg-color-disabled: #181a1b;
+    --choices-item-disabled-color: #eee;
+    --choices-disabled-color: #2d2d2d;
+    --choices-highlighted-color: #16292d;
+    --choices-icon-cross: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+    --choices-icon-cross-inverse: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+  }
+}
+```
+
 ## Development
 
 To setup a local environment: clone this repo, navigate into its directory in a terminal window and run the following command:

data/node_modules/choices.js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "11.1.0",
+  "version": "11.2.1",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.js",
   "module": "./public/assets/scripts/choices.mjs",
@@ -71,7 +71,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jshjohnson/Choices.git"
+    "url": "https://github.com/Choices-js/Choices.git"
   },
   "author": "Josh Johnson",
   "license": "MIT",
@@ -82,9 +82,9 @@
     "src"
   ],
   "bugs": {
-    "url": "https://github.com/jshjohnson/Choices/issues"
+    "url": "https://github.com/Choices-js/Choices/issues"
   },
-  "homepage": "https://github.com/jshjohnson/Choices#readme",
+  "homepage": "https://github.com/Choices-js/Choices#readme",
   "keywords": [
     "customisable",
     "input",
@@ -101,18 +101,17 @@
     "@babel/preset-typescript": "^7.24.7",
     "@playwright/test": "^1.46.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-eslint": "^9.0.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/chai": "^4.3.17",
-    "@types/node": "^22.2.0",
+    "@types/node": "^22.12.0",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.20",
-    "bundlesize": "^0.18.2",
+    "bundlesize2": "^0.0.35",
     "chai": "^5.1.1",
     "cross-process-lock": "^2.1.1",
     "csso-cli": "^4.0.2",
@@ -125,9 +124,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-sort-class-members": "^1.20.0",
     "eslint-plugin-tree-shaking": "^1.12.2",
-    "husky": "^9.1.4",
     "jsdom": "^24.1.1",
-    "lint-staged": "^15.2.7",
     "nodemon": "^3.1.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.41",
@@ -142,9 +139,9 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
+    "typescript": "5.5.x",
     "typescript-eslint": "^8.0.1",
-    "vitest": "^2.0.5"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "fuse.js": "^7.0.0"