@carbon/web-components 2.40.1 → 2.41.0-rc.0

package/lib/globals/mixins/host-listener.d.ts

@@ -22,6 +22,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
+        autocorrect: boolean;
         dir: string;
         draggable: boolean;
         hidden: boolean;
@@ -43,13 +44,14 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean): boolean;
+        togglePopover(options?: boolean): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         readonly attributes: NamedNodeMap;
-        readonly classList: DOMTokenList;
+        get classList(): DOMTokenList;
+        set classList(value: string);
         className: string;
         readonly clientHeight: number;
         readonly clientLeft: number;
@@ -64,7 +66,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onfullscreenerror: ((this: Element, ev: Event) => any) | null;
         outerHTML: string;
         readonly ownerDocument: Document;
-        readonly part: DOMTokenList;
+        get part(): DOMTokenList;
+        set part(value: string);
         readonly prefix: string | null;
         readonly scrollHeight: number;
         scrollLeft: number;
@@ -127,6 +130,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         setPointerCapture(pointerId: number): void;
         toggleAttribute(qualifiedName: string, force?: boolean): boolean;
         webkitMatchesSelector(selectors: string): boolean;
+        get textContent(): string;
+        set textContent(value: string | null);
         readonly baseURI: string;
         readonly childNodes: NodeListOf<ChildNode>;
         readonly firstChild: ChildNode | null;
@@ -139,9 +144,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         readonly parentElement: HTMLElement | null;
         readonly parentNode: ParentNode | null;
         readonly previousSibling: ChildNode | null;
-        textContent: string | null;
         appendChild<T_1 extends Node>(node: T_1): T_1;
-        cloneNode(deep?: boolean): Node;
+        cloneNode(subtree?: boolean): Node;
         compareDocumentPosition(other: Node): number;
         contains(other: Node | null): boolean;
         getRootNode(options?: GetRootNodeOptions): Node;
@@ -174,6 +178,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
         readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
         dispatchEvent(event: Event): boolean;
+        ariaActiveDescendantElement: Element | null;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;
         ariaBrailleLabel: string | null;
@@ -184,25 +189,33 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         ariaColIndex: string | null;
         ariaColIndexText: string | null;
         ariaColSpan: string | null;
+        ariaControlsElements: ReadonlyArray<Element> | null;
         ariaCurrent: string | null;
+        ariaDescribedByElements: ReadonlyArray<Element> | null;
         ariaDescription: string | null;
+        ariaDetailsElements: ReadonlyArray<Element> | null;
         ariaDisabled: string | null;
+        ariaErrorMessageElements: ReadonlyArray<Element> | null;
         ariaExpanded: string | null;
+        ariaFlowToElements: ReadonlyArray<Element> | null;
         ariaHasPopup: string | null;
         ariaHidden: string | null;
         ariaInvalid: string | null;
         ariaKeyShortcuts: string | null;
         ariaLabel: string | null;
+        ariaLabelledByElements: ReadonlyArray<Element> | null;
         ariaLevel: string | null;
         ariaLive: string | null;
         ariaModal: string | null;
         ariaMultiLine: string | null;
         ariaMultiSelectable: string | null;
         ariaOrientation: string | null;
+        ariaOwnsElements: ReadonlyArray<Element> | null;
         ariaPlaceholder: string | null;
         ariaPosInSet: string | null;
         ariaPressed: string | null;
         ariaReadOnly: string | null;
+        ariaRelevant: string | null;
         ariaRequired: string | null;
         ariaRoleDescription: string | null;
         ariaRowCount: string | null;
@@ -244,7 +257,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         replaceChildren(...nodes: (Node | string)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
         readonly attributeStyleMap: StylePropertyMap;
-        readonly style: CSSStyleDeclaration;
+        get style(): CSSStyleDeclaration;
+        set style(cssText: string);
         contentEditable: string;
         enterKeyHint: string;
         inputMode: string;
@@ -254,18 +268,19 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
         oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -313,6 +328,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
         onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -331,7 +347,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
         onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
         ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
         ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
         ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;

package/lib/globals/mixins/validity.d.ts

@@ -71,6 +71,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
+    autocorrect: boolean;
     dir: string;
     draggable: boolean;
     hidden: boolean;
@@ -92,13 +93,14 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     click(): void;
     hidePopover(): void;
     showPopover(): void;
-    togglePopover(force?: boolean): boolean;
+    togglePopover(options?: boolean): boolean;
     addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
     removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
     removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     readonly attributes: NamedNodeMap;
-    readonly classList: DOMTokenList;
+    get classList(): DOMTokenList;
+    set classList(value: string);
     className: string;
     readonly clientHeight: number;
     readonly clientLeft: number;
@@ -113,7 +115,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onfullscreenerror: ((this: Element, ev: Event) => any) | null;
     outerHTML: string;
     readonly ownerDocument: Document;
-    readonly part: DOMTokenList;
+    get part(): DOMTokenList;
+    set part(value: string);
     readonly prefix: string | null;
     readonly scrollHeight: number;
     scrollLeft: number;
@@ -176,6 +179,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     setPointerCapture(pointerId: number): void;
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
     webkitMatchesSelector(selectors: string): boolean;
+    get textContent(): string;
+    set textContent(value: string | null);
     readonly baseURI: string;
     readonly childNodes: NodeListOf<ChildNode>;
     readonly firstChild: ChildNode | null;
@@ -188,9 +193,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly parentElement: HTMLElement | null;
     readonly parentNode: ParentNode | null;
     readonly previousSibling: ChildNode | null;
-    textContent: string | null;
     appendChild<T_1 extends Node>(node: T_1): T_1;
-    cloneNode(deep?: boolean): Node;
+    cloneNode(subtree?: boolean): Node;
     compareDocumentPosition(other: Node): number;
     contains(other: Node | null): boolean;
     getRootNode(options?: GetRootNodeOptions): Node;
@@ -223,6 +227,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
     readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
     dispatchEvent(event: Event): boolean;
+    ariaActiveDescendantElement: Element | null;
     ariaAtomic: string | null;
     ariaAutoComplete: string | null;
     ariaBrailleLabel: string | null;
@@ -233,25 +238,33 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     ariaColIndex: string | null;
     ariaColIndexText: string | null;
     ariaColSpan: string | null;
+    ariaControlsElements: ReadonlyArray<Element> | null;
     ariaCurrent: string | null;
+    ariaDescribedByElements: ReadonlyArray<Element> | null;
     ariaDescription: string | null;
+    ariaDetailsElements: ReadonlyArray<Element> | null;
     ariaDisabled: string | null;
+    ariaErrorMessageElements: ReadonlyArray<Element> | null;
     ariaExpanded: string | null;
+    ariaFlowToElements: ReadonlyArray<Element> | null;
     ariaHasPopup: string | null;
     ariaHidden: string | null;
     ariaInvalid: string | null;
     ariaKeyShortcuts: string | null;
     ariaLabel: string | null;
+    ariaLabelledByElements: ReadonlyArray<Element> | null;
     ariaLevel: string | null;
     ariaLive: string | null;
     ariaModal: string | null;
     ariaMultiLine: string | null;
     ariaMultiSelectable: string | null;
     ariaOrientation: string | null;
+    ariaOwnsElements: ReadonlyArray<Element> | null;
     ariaPlaceholder: string | null;
     ariaPosInSet: string | null;
     ariaPressed: string | null;
     ariaReadOnly: string | null;
+    ariaRelevant: string | null;
     ariaRequired: string | null;
     ariaRoleDescription: string | null;
     ariaRowCount: string | null;
@@ -293,7 +306,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     replaceChildren(...nodes: (Node | string)[]): void;
     readonly assignedSlot: HTMLSlotElement | null;
     readonly attributeStyleMap: StylePropertyMap;
-    readonly style: CSSStyleDeclaration;
+    get style(): CSSStyleDeclaration;
+    set style(cssText: string);
     contentEditable: string;
     enterKeyHint: string;
     inputMode: string;
@@ -303,18 +317,19 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
     onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
     oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
     oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -362,6 +377,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
     onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -380,7 +396,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
     onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
     ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
     ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
     ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.40.1",
+  "version": "2.41.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/styles": "^1.92.0",
+    "@carbon/styles": "^1.93.0-rc.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit/context": "^1.1.3",
@@ -77,7 +77,7 @@
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/icons": "^11.69.0",
+    "@carbon/icons": "^11.70.0-rc.0",
     "@carbon/layout": "^11.43.0",
     "@carbon/motion": "^11.37.0",
     "@juggle/resize-observer": "^3.4.0",
@@ -102,7 +102,7 @@
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "autoprefixer": "^10.4.0",
     "cssnano": "^7.1.0",
-    "globby": "^14.0.2",
+    "globby": "^15.0.0",
     "read-package-up": "^11.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
@@ -130,5 +130,5 @@
       }
     ]
   },
-  "gitHead": "e39cfbc6c3bd04254504ef6a370f5459c1599ac0"
+  "gitHead": "dff507858b43de91b300a98fa1bec24d38aaeb48"
 }

package/scss/components/modal/modal.scss

@@ -38,6 +38,12 @@
 
 :host(#{$prefix}-modal) {
   @extend .#{$prefix}--modal;
+
+  opacity: 0;
+  transition:
+    opacity $duration-moderate-02 motion(exit, expressive),
+    visibility 0ms linear $duration-moderate-02;
+  visibility: hidden;
 }
 
 :host(#{$prefix}-modal[full-width]) {

package/scss/components/tile/tile.scss

@@ -76,8 +76,8 @@ $css--plex: true !default;
     @extend .#{$prefix}--tile--icon;
   }
 
-  ::slotted(#{$prefix}-ai-label),
-  ::slotted(#{$prefix}-slug) {
+  ::slotted([slot='ai-label']),
+  ::slotted([slot='slug']) {
     pointer-events: none;
   }
 }
@@ -210,8 +210,8 @@ $css--plex: true !default;
 :host(#{$prefix}-selectable-tile),
 :host(#{$prefix}-radio-tile) {
   ::slotted([slot='decorator']),
-  ::slotted(#{$prefix}-ai-label),
-  ::slotted(#{$prefix}-slug) {
+  ::slotted([slot='ai-label']),
+  ::slotted([slot='slug']) {
     position: absolute;
     inset-block-start: $spacing-05;
     inset-inline-end: $spacing-05;
@@ -219,10 +219,10 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-radio-tile[selected]) ::slotted([slot='decorator']),
-:host(#{$prefix}-radio-tile[selected]) ::slotted(#{$prefix}-ai-label),
+:host(#{$prefix}-radio-tile[selected]) ::slotted([slot='ai-label']),
 :host(#{$prefix}-selectable-tile) ::slotted([slot='decorator']),
-:host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-ai-label),
-:host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-slug) {
+:host(#{$prefix}-selectable-tile) ::slotted([slot='ai-label']),
+:host(#{$prefix}-selectable-tile) ::slotted([slot='slug']) {
   inset-inline-end: $spacing-08;
   transition: inset-inline-end $duration-fast-02 motion(standard, productive);
 }