Merge branch 'master' into sivanova/select-theming

Author: rkaraivanov

package-lock.json

@@ -60,14 +60,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.3.2",
-    "@custom-elements-manifest/analyzer": "^0.10.10",
+    "@biomejs/biome": "~2.3.3",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@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",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-docs": "^10.0.4",
+    "@storybook/addon-links": "^10.0.4",
+    "@storybook/web-components-vite": "^10.0.4",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -91,10 +91,10 @@
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "rimraf": "^6.0.1",
-    "sass-embedded": "~1.93.2",
+    "rimraf": "^6.1.0",
+    "sass-embedded": "~1.93.3",
     "sinon": "^21.0.0",
-    "storybook": "^10.0.1",
+    "storybook": "^10.0.4",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
@@ -104,7 +104,7 @@
     "typedoc": "~0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12"
+    "vite": "^7.2.0"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",

package.json

@@ -24,7 +24,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessageAttachment,
 } from './types.js';
-import { getChatAcceptedFiles, getIconName } from './utils.js';
+import { adoptPageStyles, getChatAcceptedFiles, getIconName } from './utils.js';
 
 type DefaultInputRenderers = {
   input: ChatTemplateRenderer<ChatInputRenderContext>;
@@ -119,6 +119,12 @@ export default class IgcChatInputComponent extends LitElement {
     addThemingController(this, all);
   }
 
+  protected override firstUpdated(): void {
+    if (this._state.options?.adoptRootStyles) {
+      adoptPageStyles(this);
+    }
+  }
+
   /** @internal */
   public focusInput(): void {
     this._textInputElement.focus();

src/components/chat/chat-input.ts

@@ -19,7 +19,7 @@ import type {
   ChatTemplateRenderer,
   IgcChatMessage,
 } from './types.js';
-import { chatMessageAdoptPageStyles } from './utils.js';
+import { adoptPageStyles } from './utils.js';
 
 const LIKE_INACTIVE = 'thumb_up_inactive';
 const LIKE_ACTIVE = 'thumb_up_active';
@@ -89,7 +89,7 @@ export default class IgcChatMessageComponent extends LitElement {
 
   protected override firstUpdated(): void {
     if (this._state.options?.adoptRootStyles) {
-      chatMessageAdoptPageStyles(this);
+      adoptPageStyles(this);
     }
   }
 

src/components/chat/chat-message.ts

@@ -105,7 +105,8 @@ const Slots = setSlots(
   'suggestions',
   'suggestions-actions',
   'suggestion',
-  'empty-state'
+  'empty-state',
+  'typing-indicator'
 );
 
 /**
@@ -133,6 +134,7 @@ const Slots = setSlots(
  * @slot suggestions-actions - Slot for rendering additional actions.
  * @slot suggestion - Slot for rendering a single suggestion item.
  * @slot empty-state - Slot shown when there are no messages.
+ * @slot typing-indicator - Slot for the "is typing" indicator.
  *
  * @csspart chat-container - Styles the main chat container.
  * @csspart header - Styles the chat header container.
@@ -413,7 +415,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
         ${this._state.options?.isTyping
           ? html`
               <div part="typing-indicator">
-                ${this._getRenderer('typingIndicator')(ctx)}
+                <slot name="typing-indicator"
+                  >${this._getRenderer('typingIndicator')(ctx)}</slot
+                >
               </div>
             `
           : nothing}

src/components/chat/chat.ts

@@ -234,6 +234,8 @@ export interface ChatRenderers {
   messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;
   /**
    * Custom renderer for the "is typing" indicator.
+   *
+   * @deprecated since 6.4.0. Use the `typing-indicator` slot.
    */
   typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;
   /**

src/components/chat/types.ts

@@ -1,6 +1,5 @@
 import { adoptStyles, type LitElement } from 'lit';
 import { last } from '../common/util.js';
-import type IgcChatMessageComponent from './chat-message.js';
 import type { IgcChatMessageAttachment } from './types.js';
 
 export type ChatAcceptedFileTypes = {
@@ -110,9 +109,7 @@ export function isImageAttachment(
   );
 }
 
-export function chatMessageAdoptPageStyles(
-  message: IgcChatMessageComponent
-): void {
+export function adoptPageStyles(element: LitElement): void {
   const sheets: CSSStyleSheet[] = [];
 
   for (const sheet of document.styleSheets) {
@@ -129,6 +126,6 @@ export function chatMessageAdoptPageStyles(
     } catch {}
   }
 
-  const ctor = message.constructor as typeof LitElement;
-  adoptStyles(message.shadowRoot!, [...ctor.elementStyles, ...sheets]);
+  const ctor = element.constructor as typeof LitElement;
+  adoptStyles(element.shadowRoot!, [...ctor.elementStyles, ...sheets]);
 }

src/components/chat/utils.ts

@@ -969,7 +969,6 @@ describe('Date picker', () => {
 
     it('issue 1884 - should emit igcChange event in dialog mode after clearing the value and losing focus', async () => {
       const eventSpy = spy(picker, 'emitEvent');
-      // const nativeInput = dateTimeInput.renderRoot.querySelector('input')!;
 
       // Dropdown mode
 

src/components/date-picker/date-picker.spec.ts

@@ -297,6 +297,11 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   // #region General properties
 
+  /* @tsTwoWayProperty(true, "igcChange", "detail", false) */
+  /**
+   * The value of the picker
+   * @attr
+   */
   @property({ converter: convertToDateRange })
   public set value(value: DateRangeValue | string | null | undefined) {
     this._formValue.setValueAndFormState(convertToDateRange(value));

src/components/date-range-picker/date-range-picker.ts

@@ -2,6 +2,9 @@
 @use 'styles/utilities' as *;
 
 :host {
+    --transition-duration: 350ms;
+
+    display: contents;
     border-style: none;
     padding: unset;
 }
@@ -80,9 +83,11 @@ dialog::backdrop {
     z-index: 10005;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 350ms ease-out;
+    transition: opacity var(--transition-duration) ease-out;
 }
 
-:host([open]) [part='backdrop'] {
-    opacity: 1;
+:host([open]) {
+    [part='backdrop'] {
+        opacity: 1;
+    }
 }