Merge branch 'master' into chore()-update-roadmap-oct-2025-release

Author: ChronosSF

.storybook/preview.ts

@@ -164,7 +164,7 @@ export default {
   },
   parameters: {
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
   },
   decorators: [themeProvider, withActions, localeProvider],

package-lock.json

@@ -60,14 +60,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.2.6",
+    "@biomejs/biome": "~2.3.2",
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/web-components-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.1",
+    "@storybook/addon-docs": "^10.0.1",
+    "@storybook/addon-links": "^10.0.1",
+    "@storybook/web-components-vite": "^10.0.1",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -80,11 +80,11 @@
     "custom-element-vs-code-integration": "^1.5.0",
     "globby": "^15.0.0",
     "husky": "^9.1.7",
-    "ig-typedoc-theme": "^6.2.3",
+    "ig-typedoc-theme": "^7.0.0",
     "igniteui-i18n-resources": "0.6.0-alpha.4",
-    "igniteui-theming": "^21.0.2",
+    "igniteui-theming": "^22.1.0",
     "keep-a-changelog": "^2.7.1",
-    "lint-staged": "^16.2.5",
+    "lint-staged": "^16.2.6",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
@@ -94,23 +94,23 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.93.2",
     "sinon": "^21.0.0",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.1",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.1",
     "ts-lit-plugin": "^2.0.2",
     "tslib": "^2.8.1",
-    "typedoc": "~0.27.9",
-    "typedoc-plugin-localization": "^3.0.6",
-    "typescript": "^5.8.3",
-    "vite": "^7.1.11"
+    "typedoc": "~0.28.14",
+    "typedoc-plugin-localization": "^3.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",
     "marked": "^16.4.1",
     "marked-shiki": "^1.2.1",
-    "shiki": "^3.13.0"
+    "shiki": "^3.14.0"
   },
   "browserslist": [
     "defaults"

package.json

@@ -1,11 +1,17 @@
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { create } from 'browser-sync';
 import watch from 'node-watch';
 import { Application } from 'typedoc';
 import report from './report.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const toPosix = (p) => p.replace(/\\/g, '/');
 const browserSync = create();
-const ROOT = path.join.bind(null, path.resolve('./'));
+const ROOT = (...segments) =>
+  toPosix(path.resolve(__dirname, '..', ...segments));
 
 const TYPEDOC = {
   PLUGINS: {
@@ -99,6 +105,7 @@ async function main() {
     entryPointStrategy,
     plugin: [TYPEDOC.PLUGINS.THEME, TYPEDOC.PLUGINS.LOCALIZATION],
     theme: 'igtheme',
+    router: 'structure',
     excludePrivate: true,
     excludeProtected: true,
     excludeNotDocumented: true,

scripts/build-typedoc.js

@@ -1,19 +1,19 @@
 import { stdout } from 'node:process';
-import { format } from 'node:util';
+import { format, styleText } from 'node:util';
 
 export default {
-  error: (s) => console.error('\x1b[31m%s\x1b[0m', s),
-  success: (s) => console.info('\x1b[32m%s\x1b[0m', s),
-  warn: (s) => console.warn('\x1b[33m%s\x1b[0m', s),
-  info: (s) => console.info('\x1b[36m%s\x1b[0m', s),
+  error: (s) => console.error(styleText('red', s)),
+  success: (s) => console.info(styleText('green', s)),
+  warn: (s) => console.warn(styleText('yellow', s)),
+  info: (s) => console.info(styleText('cyan', s)),
 
   stdout: {
     clearLine: () => {
       stdout.clearLine(0);
       stdout.cursorTo(0);
     },
-    success: (s) => stdout.write(format('\x1b[32m%s\x1b[0m', s)),
-    warn: (s) => stdout.write(format('\x1b[33m%s\x1b[0m', s)),
-    info: (s) => stdout.write(format('\x1b[36m%s\x1b[0m', s)),
+    success: (s) => stdout.write(format(styleText('green', s))),
+    warn: (s) => stdout.write(format(styleText('yellow', s))),
+    info: (s) => stdout.write(format(styleText('cyan', s))),
   },
 };

scripts/report.mjs

@@ -72,4 +72,27 @@ describe('Badge', () => {
       `<igc-badge shape="rounded" variant="primary"></igc-badge>`
     );
   });
+
+  it('can be a dot badge', async () => {
+    const el = await fixture<IgcBadgeComponent>(
+      html`<igc-badge dot></igc-badge>`
+    );
+
+    expect(el.dot).to.be.true;
+
+    el.dot = false;
+    await elementUpdated(el);
+    expect(el).dom.to.equal(
+      `<igc-badge shape="rounded" variant="primary"></igc-badge>`
+    );
+  });
+
+  it('dot badge works with all variants', async () => {
+    const el = await fixture<IgcBadgeComponent>(
+      html`<igc-badge dot variant="success"></igc-badge>`
+    );
+
+    expect(el.dot).to.be.true;
+    expect(el.variant).to.equal('success');
+  });
 });

src/components/badge/badge.spec.ts

@@ -2,7 +2,9 @@ import { html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
+import { addSlotController } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { partMap } from '../common/part-map.js';
 import type { BadgeShape, StyleVariant } from '../types.js';
 import { styles } from './themes/badge.base.css.js';
 import { styles as shared } from './themes/shared/badge.common.css.js';
@@ -27,6 +29,21 @@ export default class IgcBadgeComponent extends LitElement {
     registerComponent(IgcBadgeComponent);
   }
 
+  private _iconPart = false;
+
+  private readonly _slots = addSlotController(this, {
+    onChange: this._handleSlotChange,
+  });
+
+  protected _handleSlotChange(): void {
+    const assignedNodes = this._slots.getAssignedNodes('[default]', true);
+    this._iconPart = assignedNodes.some(
+      (node) =>
+        node.nodeType === Node.ELEMENT_NODE &&
+        (node as Element).tagName.toLowerCase() === 'igc-icon'
+    );
+  }
+
   private readonly _internals = addInternalsController(this, {
     initialARIA: { role: 'status' },
   });
@@ -52,6 +69,13 @@ export default class IgcBadgeComponent extends LitElement {
   @property({ reflect: true })
   public shape: BadgeShape = 'rounded';
 
+  /**
+   * Sets whether to render a dot type badge.
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public dot = false;
+
   constructor() {
     super();
     addThemingController(this, all);
@@ -65,7 +89,7 @@ export default class IgcBadgeComponent extends LitElement {
 
   protected override render() {
     return html`
-      <span part="base">
+      <span part=${partMap({ base: true, icon: this._iconPart })}>
         <slot></slot>
       </span>
     `;

src/components/badge/badge.ts

@@ -2,53 +2,56 @@
 @use 'styles/utilities' as *;
 
 :host {
-    --size: #{rem(22px)};
-    --_badge-size: var(--size);
-
     width: fit-content;
     height: fit-content;
     display: inline-flex;
-    font-weight: 500;
     vertical-align: top;
 }
 
-[part='base'] {
-    @include type-style('caption');
-
+[part~='base'] {
     display: inline-flex;
-    min-width: var(--size);
-    min-height: var(--size);
+    min-width: var(--_badge-size);
+    min-height: var(--_badge-size);
     justify-content: center;
     align-items: center;
     overflow: hidden;
     white-space: nowrap;
+    font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
+    font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
+    line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
+    letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
+    text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
 }
 
-::slotted(*) {
-    --size: calc(var(--_badge-size) / 2) !important;
+:host(:not(:empty, [dot])) [part='base'] {
+    padding-inline: pad-inline(rem(4px), rem(6px), rem(8px));
 }
 
-:host(:not(:empty)) [part='base'] {
-    padding-inline: rem(4px);
-}
-
-:host([variant='info']) [part='base'] {
+:host([variant='info']) [part~='base'] {
     background: color(info, 500);
 }
 
-:host([variant='success']) [part='base'] {
+:host([variant='success']) [part~='base'] {
     background: color(success, 500);
 }
 
-:host([variant='warning']) [part='base'] {
+:host([variant='warning']) [part~='base'] {
     background: color(warn, 500);
+    color: contrast-color(warn, 500);
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        color: contrast-color(warn, 500);
+    }
 }
 
-:host([variant='danger']) [part='base'] {
+:host([variant='danger']) [part~='base'] {
     background: color(error, 500);
+    color: contrast-color(error, 900);
 }
 
 :host([shape='rounded']),
-:host([shape='rounded']) [part='base'] {
-    border-radius: calc(var(--size) * 2);
+:host([shape='rounded']) [part~='base'],
+:host([dot]) [part~='base'] {
+    border-radius: calc(var(--_badge-size) * 2);
 }

src/components/badge/themes/badge.base.scss

@@ -7,3 +7,12 @@ $theme: $indigo;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
 }
+
+:host([variant='warning']) [part~='base'] {
+    color: color(gray, 50);
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        color: color(gray, 50);
+    }
+}

src/components/badge/themes/dark/badge.indigo.scss

@@ -1,8 +1,5 @@
 @use 'styles/utilities' as *;
-@use '../light/themes' as *;
 
-$theme: $bootstrap;
-
-:host([outlined]) [part='base'] {
-    box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+:host([variant='danger']) [part~='base'] {
+    color: contrast-color(error, 100);
 }