build(deps): Bumped to latest Typescript (#2156)

* build(deps): Bumped to latest Typescript

- Fixed some type errors that were introduced by the new version of Typescript.
- Fixed some SCSS linting errors that were introduced by the new version of the SCSS linter.

Author: rkaraivanov

package-lock.json

@@ -64,10 +64,10 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^10.3.0",
-    "@storybook/addon-docs": "^10.3.0",
-    "@storybook/addon-links": "^10.3.0",
-    "@storybook/web-components-vite": "^10.3.0",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-links": "^10.3.3",
+    "@storybook/web-components-vite": "^10.3.3",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.5",
     "@web/test-runner": "^0.20.2",
@@ -93,21 +93,21 @@
     "rimraf": "^6.1.3",
     "sass-embedded": "~1.93.3",
     "sinon": "^21.0.3",
-    "storybook": "^10.3.0",
-    "stylelint": "^17.4.0",
+    "storybook": "^10.3.3",
+    "stylelint": "^17.5.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^7.0.0",
     "ts-lit-plugin": "^2.0.2",
     "tslib": "^2.8.1",
-    "typedoc": "~0.28.17",
+    "typedoc": "~0.28.18",
     "typedoc-plugin-localization": "^3.1.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1"
+    "typescript": "^6.0.2",
+    "vite": "^8.0.2"
   },
   "peerDependencies": {
     "dompurify": "^3.3.3",
-    "marked": "^17.0.4",
+    "marked": "^17.0.5",
     "marked-shiki": "^1.2.1",
     "shiki": "^4.0.2"
   },
@@ -129,6 +129,9 @@
   },
   "customElements": "custom-elements.json",
   "overrides": {
-    "storybook": "$storybook"
+    "storybook": "$storybook",
+    "madge": {
+      "typescript": "$typescript"
+    }
   }
 }

package.json

@@ -26,26 +26,26 @@ const RELEASE_FILES = [
 ];
 
 async function runTask(tag, cmd) {
-  const frames = ['   ', '.  ', '.. ', '...'];
+  const frames = ['◑', '◒', '◐', '◓'];
   let frame = 0;
 
-  const writeProgress = (dots) =>
-    report.stdout.info(`\r[${tag}] Processing${dots}`);
+  const writeProgress = (progress) =>
+    report.stdout.plain(`\r${report.format.magentaBright(progress)}  ${tag}`);
 
   writeProgress(frames[0]);
   const timer = setInterval(() => {
     frame = (frame + 1) % frames.length;
     writeProgress(frames[frame]);
-  }, 300);
+  }, 120);
 
   try {
     await cmd();
     clearInterval(timer);
     report.stdout.clearLine();
-    report.success(`[${tag}] Done!`);
+    report.stdout.plain(report.format.greenBright(`[${tag}] ✔\n`));
   } catch (e) {
     clearInterval(timer);
-    report.error(`[${tag}] Failed with: ${e.stderr || e.message}`);
+    report.error(`\n[${tag}] ✖\n${e.stderr || e.message}`);
     process.exit(1);
   }
 }

scripts/build.mjs

@@ -17,5 +17,24 @@ export default {
     success: (s) => stdout.write(styleText('green', s)),
     warn: (s) => stdout.write(styleText('yellow', s)),
     info: (s) => stdout.write(styleText('cyan', s)),
+    plain: (s) => stdout.write(s),
+  },
+  format: {
+    black: (s) => styleText('black', s),
+    red: (s) => styleText('red', s),
+    green: (s) => styleText('green', s),
+    yellow: (s) => styleText('yellow', s),
+    blue: (s) => styleText('blue', s),
+    magenta: (s) => styleText('magenta', s),
+    cyan: (s) => styleText('cyan', s),
+    white: (s) => styleText('white', s),
+    gray: (s) => styleText('gray', s),
+    redBright: (s) => styleText('redBright', s),
+    greenBright: (s) => styleText('greenBright', s),
+    yellowBright: (s) => styleText('yellowBright', s),
+    blueBright: (s) => styleText('blueBright', s),
+    magentaBright: (s) => styleText('magentaBright', s),
+    cyanBright: (s) => styleText('cyanBright', s),
+    whiteBright: (s) => styleText('whiteBright', s),
   },
 };

scripts/report.mjs

@@ -37,7 +37,7 @@ describe('Key bindings controller', () => {
         constructor() {
           super();
           addKeybindings(this, {
-            skip: () => this.hidden,
+            skip: () => !!this.hidden,
           })
             .setActivateHandler(this.handleKeyboardEvent)
             .set('a', this.handleKeyboardEvent, { triggers: ['keydown'] })

src/components/common/controllers/key-bindings.spec.ts

@@ -595,7 +595,7 @@ export function bindIf<T>(assertion: unknown, value: T): NonNullable<T> {
     : (nothing as NonNullable<T>);
 }
 
-let pool: Uint8Array;
+let pool: Uint8Array<ArrayBuffer>;
 let poolOffset: number;
 const urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';

src/components/common/util.ts

@@ -25,7 +25,7 @@ function* matchText(
   for (const node of nodes) {
     if (node.textContent) {
       for (const match of node.textContent.matchAll(regexp)) {
-        const [[start, end]] = match.indices!;
+        const [start, end] = match.indices![0]!;
         yield { node, indices: [start, end] } satisfies Match;
       }
     }

src/components/highlight/service.ts

@@ -157,7 +157,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-
 :host([readonly]:not([outlined]):focus-within) {
     :not([part~='filled']) {
         input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
@@ -217,13 +216,27 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([outlined],[type='search'],[aria-haspopup='dialog'],[role='combobox'])[readonly]) {
+:host(
+    :not(
+        [outlined],
+        [type='search'],
+        [aria-haspopup='dialog'],
+        [role='combobox']
+    )[readonly]
+) {
     [part~='container'] {
         background: var-get($theme, 'box-background-focus');
     }
 }
 
-:host(:not([outlined],[type='search'],[aria-haspopup='dialog'],[role='combobox'])[readonly]:hover) {
+:host(
+    :not(
+            [outlined],
+            [type='search'],
+            [aria-haspopup='dialog'],
+            [role='combobox']
+        )[readonly]:hover
+) {
     [part~='container'] {
         background: var-get($theme, 'box-background-focus');
         border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -246,7 +259,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 :host(:not([outlined]):focus-within),
-:host(:not([outlined],[aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) {
+:host(
+    :not(
+            [outlined],
+            [aria-haspopup='dialog'],
+            [role='combobox']
+        )[readonly]:focus-within
+) {
     [part~='container'] {
         background: var-get($theme, 'box-background-focus');
         border-bottom-color: var-get($theme, 'focused-bottom-line-color');
@@ -259,18 +278,26 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([outlined],[aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) {
+:host(
+    :not(
+            [outlined],
+            [aria-haspopup='dialog'],
+            [role='combobox']
+        )[readonly]:focus-within
+) {
     [part='label'] {
         @include type-style('caption');
 
         translate: 0 -73%;
     }
 }
 
-:host(:not([outlined],[disabled],[readonly]):state(ig-invalid)),
-:host(:not([outlined],[disabled],[readonly]):state(ig-invalid):focus-within),
-:host(:not([disabled],[outlined])[role='combobox']:state(ig-invalid)),
-:host(:not([disabled],[outlined])[role='combobox']:state(ig-invalid):focus-within) {
+:host(:not([outlined], [disabled], [readonly]):state(ig-invalid)),
+:host(:not([outlined], [disabled], [readonly]):state(ig-invalid):focus-within),
+:host(:not([disabled], [outlined])[role='combobox']:state(ig-invalid)),
+:host(
+    :not([disabled], [outlined])[role='combobox']:state(ig-invalid):focus-within
+) {
     [part~='container'] {
         border-color: var-get($theme, 'error-secondary-color');
 
@@ -332,6 +359,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
         padding-top: pad-block(rem(20px));
         padding-bottom: pad-block(rem(6px));
     }
+
+    [part='notch'] {
+        border: none;
+    }
 }
 
 :host([outlined][type='search']:focus-within) {
@@ -434,7 +465,9 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly]:hover) {
+:host(
+    :not([aria-haspopup='dialog'], [role='combobox'])[outlined][readonly]:hover
+) {
     [part='notch'],
     [part='start'],
     [part='end'],
@@ -447,7 +480,12 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly]:focus-within) {
+:host(
+    :not(
+            [aria-haspopup='dialog'],
+            [role='combobox']
+        )[outlined][readonly]:focus-within
+) {
     [part='notch'],
     [part='start'],
     [part='end'],
@@ -460,7 +498,9 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not(:state(ig-invalid),[type='search'])[readonly][outlined]:focus-within) {
+:host(
+    :not(:state(ig-invalid), [type='search'])[readonly][outlined]:focus-within
+) {
     :not([part~='filled']) {
         input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
             translate: 0;
@@ -542,7 +582,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'],[aria-haspopup='dialog'],[role='combobox'])[outlined]:focus-within) {
+:host(
+    :not(
+            [type='search'],
+            [aria-haspopup='dialog'],
+            [role='combobox']
+        )[outlined]:focus-within
+) {
     [part='notch'] {
         border: {
             width: $active-border-width;
@@ -570,10 +616,14 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'],[readonly])[outlined]:state(ig-invalid)),
-:host(:not([type='search'],[readonly])[outlined]:state(ig-invalid):focus-within),
+:host(:not([type='search'], [readonly])[outlined]:state(ig-invalid)),
+:host(
+    :not([type='search'], [readonly])[outlined]:state(ig-invalid):focus-within
+),
 :host(:not([disabled])[role='combobox'][outlined]:state(ig-invalid)),
-:host(:not([disabled])[role='combobox'][outlined]:state(ig-invalid):focus-within) {
+:host(
+    :not([disabled])[role='combobox'][outlined]:state(ig-invalid):focus-within
+) {
     [part='start'],
     [part='notch'],
     [part='filler'],
@@ -587,8 +637,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([disabled])[role='combobox'][outlined]:state(ig-invalid):focus-within) {
-     :not([part~='filled']) {
+:host(
+    :not([disabled])[role='combobox'][outlined]:state(ig-invalid):focus-within
+) {
+    :not([part~='filled']) {
         input:not(:placeholder-shown) + [part='notch'] {
             border-width: $active-border-width;
         }
@@ -603,7 +655,11 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 :host(:not([disabled], [readonly])[role='combobox'][outlined]:focus-within),
-:host(:not([disabled], [readonly])[role='combobox'][outlined]:state(ig-invalid):focus-within) {
+:host(
+    :not([disabled], [readonly])[role='combobox'][outlined]:state(
+            ig-invalid
+        ):focus-within
+) {
     :not([part~='filled']) {
         input:not(:placeholder-shown) + [part='notch'] {
             border-top: $idle-border-width solid transparent;
@@ -615,8 +671,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-
-:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not([disabled], [readonly]):state(ig-invalid)),
 :host(:not([disabled])[role='combobox']:state(ig-invalid)) {
     [part='label'] {
         color: var-get($theme, 'error-secondary-color');
@@ -642,12 +697,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host([type='search'][outlined]) {
-    [part='notch'] {
-        border: none;
-    }
-}
-
 :host(:disabled),
 :host([disabled]) {
     [part~='input'],