@carbon/web-components 2.23.0 → 2.24.0

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

@@ -85,15 +85,20 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly offsetTop: number;
     readonly offsetWidth: number;
     outerText: string;
+    popover: string | null;
     spellcheck: boolean;
     title: string;
     translate: boolean;
+    writingSuggestions: string;
     attachInternals(): ElementInternals;
     click(): void;
-    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-    removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+    hidePopover(): void;
+    showPopover(): void;
+    togglePopover(force?: 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;
     className: string;
@@ -101,7 +106,9 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly clientLeft: number;
     readonly clientTop: number;
     readonly clientWidth: number;
+    readonly currentCSSZoom: number;
     id: string;
+    innerHTML: string;
     readonly localName: string;
     readonly namespaceURI: string | null;
     onfullscreenchange: ((this: Element, ev: Event) => any) | null;
@@ -118,9 +125,12 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     slot: string;
     readonly tagName: string;
     attachShadow(init: ShadowRootInit): ShadowRoot;
-    closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-    closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+    checkVisibility(options?: CheckVisibilityOptions): boolean;
+    closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+    closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+    closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
     closest<E extends Element = Element>(selectors: string): E | null;
+    computedStyleMap(): StylePropertyMapReadOnly;
     getAttribute(qualifiedName: string): string | null;
     getAttributeNS(namespace: string | null, localName: string): string | null;
     getAttributeNames(): string[];
@@ -129,39 +139,44 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     getBoundingClientRect(): DOMRect;
     getClientRects(): DOMRectList;
     getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-    getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
-    getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+    getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
     getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
     getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
     getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
     getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    getHTML(options?: GetHTMLOptions): string;
     hasAttribute(qualifiedName: string): boolean;
     hasAttributeNS(namespace: string | null, localName: string): boolean;
     hasAttributes(): boolean;
     hasPointerCapture(pointerId: number): boolean;
     insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
-    insertAdjacentHTML(position: InsertPosition, text: string): void;
+    insertAdjacentHTML(position: InsertPosition, string: string): void;
     insertAdjacentText(where: InsertPosition, data: string): void;
     matches(selectors: string): boolean;
     releasePointerCapture(pointerId: number): void;
     removeAttribute(qualifiedName: string): void;
     removeAttributeNS(namespace: string | null, localName: string): void;
     removeAttributeNode(attr: Attr): Attr;
-    requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
-    requestPointerLock(): void;
-    scroll(options?: ScrollToOptions | undefined): void;
+    requestFullscreen(options?: FullscreenOptions): Promise<void>;
+    requestPointerLock(options?: PointerLockOptions): Promise<void>;
+    scroll(options?: ScrollToOptions): void;
     scroll(x: number, y: number): void;
-    scrollBy(options?: ScrollToOptions | undefined): void;
+    scrollBy(options?: ScrollToOptions): void;
     scrollBy(x: number, y: number): void;
-    scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-    scrollTo(options?: ScrollToOptions | undefined): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+    scrollTo(options?: ScrollToOptions): void;
     scrollTo(x: number, y: number): void;
     setAttribute(qualifiedName: string, value: string): void;
     setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
     setAttributeNode(attr: Attr): Attr | null;
     setAttributeNodeNS(attr: Attr): Attr | null;
+    setHTMLUnsafe(html: string): void;
     setPointerCapture(pointerId: number): void;
-    toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+    toggleAttribute(qualifiedName: string, force?: boolean): boolean;
     webkitMatchesSelector(selectors: string): boolean;
     readonly baseURI: string;
     readonly childNodes: NodeListOf<ChildNode>;
@@ -177,41 +192,43 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly previousSibling: ChildNode | null;
     textContent: string | null;
     appendChild<T_1 extends Node>(node: T_1): T_1;
-    cloneNode(deep?: boolean | undefined): Node;
+    cloneNode(deep?: boolean): Node;
     compareDocumentPosition(other: Node): number;
     contains(other: Node | null): boolean;
-    getRootNode(options?: GetRootNodeOptions | undefined): Node;
+    getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
-    insertBefore<T_2 extends Node>(node: T_2, child: Node | null): T_2;
+    insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
     isDefaultNamespace(namespace: string | null): boolean;
     isEqualNode(otherNode: Node | null): boolean;
     isSameNode(otherNode: Node | null): boolean;
     lookupNamespaceURI(prefix: string | null): string | null;
     lookupPrefix(namespace: string | null): string | null;
     normalize(): void;
-    removeChild<T_3 extends Node>(child: T_3): T_3;
-    replaceChild<T_4 extends Node>(node: Node, child: T_4): T_4;
-    readonly ATTRIBUTE_NODE: number;
-    readonly CDATA_SECTION_NODE: number;
-    readonly COMMENT_NODE: number;
-    readonly DOCUMENT_FRAGMENT_NODE: number;
-    readonly DOCUMENT_NODE: number;
-    readonly DOCUMENT_POSITION_CONTAINED_BY: number;
-    readonly DOCUMENT_POSITION_CONTAINS: number;
-    readonly DOCUMENT_POSITION_DISCONNECTED: number;
-    readonly DOCUMENT_POSITION_FOLLOWING: number;
-    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
-    readonly DOCUMENT_POSITION_PRECEDING: number;
-    readonly DOCUMENT_TYPE_NODE: number;
-    readonly ELEMENT_NODE: number;
-    readonly ENTITY_NODE: number;
-    readonly ENTITY_REFERENCE_NODE: number;
-    readonly NOTATION_NODE: number;
-    readonly PROCESSING_INSTRUCTION_NODE: number;
-    readonly TEXT_NODE: number;
+    removeChild<T_1 extends Node>(child: T_1): T_1;
+    replaceChild<T_1 extends Node>(node: Node, child: T_1): T_1;
+    readonly ELEMENT_NODE: 1;
+    readonly ATTRIBUTE_NODE: 2;
+    readonly TEXT_NODE: 3;
+    readonly CDATA_SECTION_NODE: 4;
+    readonly ENTITY_REFERENCE_NODE: 5;
+    readonly ENTITY_NODE: 6;
+    readonly PROCESSING_INSTRUCTION_NODE: 7;
+    readonly COMMENT_NODE: 8;
+    readonly DOCUMENT_NODE: 9;
+    readonly DOCUMENT_TYPE_NODE: 10;
+    readonly DOCUMENT_FRAGMENT_NODE: 11;
+    readonly NOTATION_NODE: 12;
+    readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+    readonly DOCUMENT_POSITION_PRECEDING: 2;
+    readonly DOCUMENT_POSITION_FOLLOWING: 4;
+    readonly DOCUMENT_POSITION_CONTAINS: 8;
+    readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
     dispatchEvent(event: Event): boolean;
     ariaAtomic: string | null;
     ariaAutoComplete: string | null;
+    ariaBrailleLabel: string | null;
+    ariaBrailleRoleDescription: string | null;
     ariaBusy: string | null;
     ariaChecked: string | null;
     ariaColCount: string | null;
@@ -219,6 +236,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     ariaColIndexText: string | null;
     ariaColSpan: string | null;
     ariaCurrent: string | null;
+    ariaDescription: string | null;
     ariaDisabled: string | null;
     ariaExpanded: string | null;
     ariaHasPopup: string | null;
@@ -250,32 +268,33 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     ariaValueNow: string | null;
     ariaValueText: string | null;
     role: string | null;
-    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-    getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-    after(...nodes: (string | Node)[]): void;
-    before(...nodes: (string | Node)[]): void;
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+    getAnimations(options?: GetAnimationsOptions): Animation[];
+    after(...nodes: (Node | string)[]): void;
+    before(...nodes: (Node | string)[]): void;
     remove(): void;
-    replaceWith(...nodes: (string | Node)[]): void;
-    innerHTML: string;
+    replaceWith(...nodes: (Node | string)[]): void;
     readonly nextElementSibling: Element | null;
     readonly previousElementSibling: Element | null;
     readonly childElementCount: number;
     readonly children: HTMLCollection;
     readonly firstElementChild: Element | null;
     readonly lastElementChild: Element | null;
-    append(...nodes: (string | Node)[]): void;
-    prepend(...nodes: (string | Node)[]): void;
-    querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
-    querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
-    querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-    querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
-    querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
-    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-    replaceChildren(...nodes: (string | Node)[]): void;
+    append(...nodes: (Node | string)[]): void;
+    prepend(...nodes: (Node | string)[]): void;
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    replaceChildren(...nodes: (Node | string)[]): void;
     readonly assignedSlot: HTMLSlotElement | null;
-    oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-    oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-    onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    readonly attributeStyleMap: StylePropertyMap;
     readonly style: CSSStyleDeclaration;
     contentEditable: string;
     enterKeyHint: string;
@@ -288,6 +307,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
     onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
     oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -295,8 +315,12 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
     onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
     oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
     ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
     ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
     ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
@@ -329,6 +353,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
     onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
     onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
     onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -340,11 +365,12 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
     onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
     onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
     onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -374,9 +400,9 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
     autofocus: boolean;
     readonly dataset: DOMStringMap;
-    nonce?: string | undefined;
+    nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions | undefined): void;
+    focus(options?: FocusOptions): void;
 }) & T;
 export default ValidityMixin;

package/lib/globals/settings.d.ts

@@ -11,5 +11,5 @@ declare const prefix = "cds";
  * A selector selecting tabbable nodes.
  * Borrowed from `carbon-angular`. tabbable === focusable.
  */
-declare const selectorTabbable: string;
+declare const selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],\n  cds-accordion-item,\n  cds-button,\n  cds-breadcrumb-link,\n  cds-checkbox,\n  cds-code-snippet,\n  cds-combo-box,\n  cds-content-switcher-item,\n  cds-copy-button,\n  cds-table-header-row,\n  cds-table-row,\n  cds-table-toolbar-search,\n  cds-date-picker-input,\n  cds-dropdown,\n  cds-input,\n  cds-link,\n  cds-number-input,\n  cds-modal,\n  cds-modal-close-button,\n  cds-multi-select,\n  cds-inline-notification,\n  cds-toast-notification,\n  cds-overflow-menu,\n  cds-overflow-menu-item,\n  cds-page-sizes-select,\n  cds-pages-select,\n  cds-progress-step,\n  cds-radio-button,\n  cds-search,\n  cds-slider,\n  cds-slider-input,\n  cds-structured-list,\n  cds-tab,\n  cds-filter-tag,\n  cds-textarea,\n  cds-text-input,\n  cds-clickable-tile,\n  cds-expandable-tile,\n  cds-radio-tile,\n  cds-selectable-tile,\n  cds-toggle,\n  cds-tooltip,\n  cds-tooltip-definition,\n  cds-tooltip-icon,\n  cds-header-menu,\n  cds-header-menu-button,\n  cds-header-menu-item,\n  cds-header-name,\n  cds-header-nav-item,\n  cds-side-nav-link,\n  cds-side-nav-menu,\n  cds-side-nav-menu-item\n";
 export { prefix, selectorTabbable };

package/lib/index.d.ts

@@ -165,3 +165,4 @@ export { default as CDSSwitcher } from './components/ui-shell/switcher';
 export { default as CDSSwitcherItem } from './components/ui-shell/switcher-item';
 export { default as CDSSwitcherDivider } from './components/ui-shell/switcher-divider';
 export { default as CDSStack } from './components/stack/stack';
+export { default as CDSHeading } from './components/heading/heading';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -56,18 +56,14 @@
     "start": "yarn storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "//test": "gulp test && yarn test:integration",
-    "//test:integration": "yarn test:integration:build && yarn test:integration:ui",
-    "//test:integration:build": "jest -c tests/integration/build/jest.config.js --runInBand",
-    "//test:integration:ui": "jest -c tests/integration/ui/jest.config.js --runInBand",
-    "//test:unit": "gulp test:unit",
-    "//test:unit:updateSnapshot": "gulp test:unit --update-snapshot",
+    "test": "web-test-runner \"src/components/**/__tests__/**/*.js\" --node-resolve",
+    "test:updateSnapshots": "yarn test --update-snapshots",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "visual-snapshot": "yarn percy storybook:start ./storybook-static",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/styles": "^1.75.0",
+    "@carbon/styles": "^1.76.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
     "flatpickr": "4.6.13",
@@ -77,11 +73,13 @@
   },
   "devDependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.55.0",
-    "@carbon/layout": "^11.29.0",
-    "@carbon/motion": "^11.24.0",
+    "@carbon/icons": "^11.56.0",
+    "@carbon/layout": "^11.30.0",
+    "@carbon/motion": "^11.25.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.37.0",
+    "@open-wc/testing": "^4.0.0",
+    "@playwright/test": "^1.36.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -95,11 +93,11 @@
     "@storybook/blocks": "^8.4.7",
     "@storybook/web-components": "^8.4.7",
     "@storybook/web-components-vite": "^8.4.7",
-    "@types/bluebird": "^3.5.36",
-    "@types/jasmine": "^5.0.0",
-    "@types/jest": "^29.2.3",
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.11.9",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
@@ -118,7 +116,7 @@
     "storybook": "^8.4.7",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "temp": "^0.9.0",
-    "typescript-config-carbon": "^0.2.0",
+    "typescript-config-carbon": "^0.5.0",
     "vite": "^5.0.7",
     "web-component-analyzer": "2.0.0"
   },
@@ -138,5 +136,5 @@
       }
     ]
   },
-  "gitHead": "fd1b7ab668473833c250488e0f7fc4feb55f1d88"
+  "gitHead": "2a32901cb1c74c149164122f0742305440716d35"
 }

package/scss/components/ai-label/ai-label-story.scss

@@ -56,64 +56,6 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
   margin-block-end: $spacing-05;
 }
 
-.ai-label-tile-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-
-  #{$prefix}-expandable-tile,
-  #{$prefix}-selectable-tile,
-  #{$prefix}-clickable-tile,
-  #{$prefix}-tile {
-    margin-block-end: $spacing-09;
-    margin-inline-end: $spacing-09;
-    max-inline-size: 320px;
-  }
-
-  #{$prefix}-expandable-tile,
-  #{$prefix}-selectable-tile .tile-container,
-  #{$prefix}-clickable-tile .tile-container,
-  #{$prefix}-tile {
-    padding-block-end: 90px;
-  }
-}
-
-.ai-label-tile-container h4 {
-  margin-block-end: $spacing-05;
-}
-
-.ai-label-tile-container .ai-data {
-  display: flex;
-  padding: $spacing-05 0;
-  margin-block-start: $spacing-05;
-}
-
-.ai-label-tile-container .data-container {
-  inline-size: 126px;
-}
-
-.ai-label-tile-container .data-container:first-of-type {
-  margin-inline-end: $spacing-05;
-}
-
-.ai-label-tile-container p {
-  @include type-style('body-01');
-}
-
-.ai-label-tile-container .data-container p {
-  @include type-style('label-02');
-}
-
-.ai-label-tile-container #{$prefix}-tile-below-the-fold-content {
-  padding-block-start: $spacing-05;
-}
-
-.ai-label-tile-container #{$prefix}-tile-below-the-fold-content p {
-  @include type-style('label-01');
-
-  margin: $spacing-03 0 50px;
-}
-
 #{$prefix}-radio-button-group:not(:first-of-type),
 #{$prefix}-checkbox-group:not(:first-of-type) {
   margin-block-start: $spacing-07;

package/scss/components/button/button.scss

@@ -100,9 +100,22 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,
-:host(#{$prefix}-button[kind='ghost']) .#{$prefix}--btn--ghost:active {
-  outline: none;
+:host(#{$prefix}-button[kind='ghost']) {
+  .#{$prefix}--btn--ghost {
+    &:hover,
+    &:active {
+      outline: none;
+    }
+
+    &.#{$prefix}--btn--icon-only {
+      padding-block-start: 0;
+
+      &.#{$prefix}--btn--selected,
+      &.#{$prefix}--btn--expressive {
+        padding: $spacing-03;
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-button-set),

package/scss/components/checkbox/checkbox.scss

@@ -68,6 +68,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-checkbox-group) {
   display: flex;
+  inline-size: 100%;
 }
 
 :host(#{$prefix}-checkbox-group) .#{$prefix}--checkbox-group--slug,
@@ -90,3 +91,10 @@ $css--plex: true !default;
 :host(#{$prefix}-checkbox[ai-label]) ::slotted(#{$prefix}-slug) {
   align-self: center;
 }
+
+:host(#{$prefix}-checkbox-group)
+  .#{$prefix}--checkbox-group--horizontal
+  ::slotted(#{$prefix}-checkbox) {
+  flex: none;
+  margin-inline-end: $spacing-05;
+}

package/scss/components/heading/heading.scss

@@ -0,0 +1,44 @@
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+:host(#{$prefix}-heading) {
+  display: block;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block-end: 0;
+    margin-block-start: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+    unicode-bidi: isolate;
+  }
+
+  h1 {
+    @include type-style('heading-06');
+  }
+
+  h2 {
+    @include type-style('heading-05');
+  }
+
+  h3 {
+    @include type-style('heading-04');
+  }
+
+  h4 {
+    @include type-style('heading-03');
+  }
+
+  h5 {
+    @include type-style('heading-02');
+  }
+
+  h6 {
+    @include type-style('heading-01');
+  }
+}

package/scss/components/loading/loading.scss

@@ -24,11 +24,11 @@ $css--plex: true !default;
   animation: none;
 }
 
-:host(#{$prefix}-loading[type='small']) {
+:host(#{$prefix}-loading[small]) {
   @extend .#{$prefix}--loading--small;
 }
 
-:host(#{$prefix}-loading[inactive]) {
+:host(#{$prefix}-loading:not([active])) {
   @extend .#{$prefix}--loading--stop;
 }
 

package/scss/components/text-input/text-input.scss

@@ -34,28 +34,14 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-text-input[show-password-visibility-toggle]) {
+:host(#{$prefix}-text-input[show-password-visibility-toggle])
   .#{$prefix}--text-input {
-    padding-inline-end: $spacing-08;
-  }
-
-  &[size='sm'] {
-    .#{$prefix}--text-input__invalid-icon {
-      inset-inline-end: $spacing-07;
-    }
-  }
-
-  &[size='md'] {
-    .#{$prefix}--text-input__invalid-icon {
-      inset-inline-end: $spacing-07;
-    }
-  }
+  padding-inline-end: $spacing-08;
+}
 
-  &[size='lg'] {
-    .#{$prefix}--text-input__invalid-icon {
-      inset-inline-end: $spacing-07;
-    }
-  }
+:host(#{$prefix}-text-input[show-password-visibility-toggle])
+  .#{$prefix}--text-input__invalid-icon {
+  inset-inline-end: $spacing-08;
 }
 
 :host(#{$prefix}-text-input[warn]),

package/scss/components/tile/tile-story.scss

@@ -54,8 +54,8 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
   }
 
   #{$prefix}-expandable-tile,
-  #{$prefix}-selectable-tile .tile-container,
-  #{$prefix}-clickable-tile .tile-container,
+  #{$prefix}-selectable-tile::part(link),
+  #{$prefix}-clickable-tile::part(link),
   #{$prefix}-tile {
     padding-block-end: 90px;
   }
@@ -65,6 +65,10 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
   margin-block-end: $spacing-05;
 }
 
+.ai-label-tile-container .bold {
+  font-weight: 600;
+}
+
 .ai-label-tile-container .ai-data {
   display: flex;
   padding: $spacing-05 0;
@@ -97,7 +101,22 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
   margin: $spacing-03 0 50px;
 }
 
-#{$prefix}-radio-button-group:not(:first-of-type),
-#{$prefix}-checkbox-group:not(:first-of-type) {
-  margin-block-start: $spacing-07;
+#{$prefix}-selectable-tile {
+  margin-block-end: $spacing-05;
+}
+
+.ai-label-selectable-tile-container #{$prefix}-tile-group > div {
+  display: flex;
+}
+
+.ai-label-selectable-tile-container #{$prefix}-tile-group > div > * {
+  inline-size: 33%;
+}
+
+.ai-label-selectable-tile-container #{$prefix}-tile-group #{$prefix}-radio-tile,
+.ai-label-selectable-tile-container
+  #{$prefix}-tile-group
+  #{$prefix}-selectable-tile {
+  block-size: 200px;
+  margin-inline-end: $spacing-05;
 }