@carbon/web-components 2.62.0-rc.0 → 2.62.0

package/es/components/accordion/accordion-item.d.ts

@@ -44,10 +44,6 @@ declare class CDSAccordionItem extends CDSAccordionItem_base {
      * Handler for the `click` event on the expando button.
      */
     private _handleClickExpando;
-    /**
-     * Handler for the `keydown` event on the expando button.
-     */
-    private _handleKeydownExpando;
     /**
      * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.
      */

package/es/components/accordion/accordion-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,yBAAyB,EAAE,CAAC;;;;AAqBrC;;;;;;;;;;GAUG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IACnD;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAkB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAA4B;IAEvD;;OAEG;IACH,OAAO,CAAC,eAAe,CAAuB;IAE9C;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAqClC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAI3B;IAEF;;OAEG;IAIH,OAAO,CAAC,eAAe,CAYrB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAWjB,oBAAoB;IAMpB,MAAM;IA2CN;;;;OAIG;IACH,MAAM,KAAK,mBAAmB;;;MAK7B;IAED;;;;OAIG;IACH,MAAM,KAAK,iBAAiB;;;MAK3B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,yBAAyB,EAAE,CAAC;;;;AAqBrC;;;;;;;;;;GAUG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IACnD;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAkB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAA4B;IAEvD;;OAEG;IACH,OAAO,CAAC,eAAe,CAAuB;IAE9C;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAqClC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IAIH,OAAO,CAAC,eAAe,CAYrB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAWjB,oBAAoB;IAMpB,MAAM;IAyCN;;;;OAIG;IACH,MAAM,KAAK,mBAAmB;;;MAK7B;IAED;;;;OAIG;IACH,MAAM,KAAK,iBAAiB;;;MAK3B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC"}

package/es/components/accordion/accordion-item.js

@@ -52,9 +52,6 @@ let CDSAccordionItem = class CDSAccordionItem extends FocusMixin(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._hObserveResize = null;
-		this._handleKeydownExpando = ({ key }) => {
-			if (this.open && (key === "Esc" || key === "Escape")) this._handleUserInitiatedToggle(false);
-		};
 		this._resizeObserver = new ResizeObserver((records) => {
 			const { width } = records[records.length - 1].contentRect;
 			const { _sizesBreakpoints: sizesBreakpoints } = this.constructor;
@@ -104,7 +101,7 @@ let CDSAccordionItem = class CDSAccordionItem extends FocusMixin(LitElement) {
 		if (this._hObserveResize) this._hObserveResize = this._hObserveResize.release();
 	}
 	render() {
-		const { disabled, title, open, _currentBreakpoint: currentBreakpoint, _handleClickExpando: handleClickExpando, _handleKeydownExpando: handleKeydownExpando } = this;
+		const { disabled, title, open, _currentBreakpoint: currentBreakpoint, _handleClickExpando: handleClickExpando } = this;
 		const { _classesBreakpoints: classesBreakpoints } = this.constructor;
 		const { [currentBreakpoint]: classBreakpoint } = classesBreakpoints;
 		const contentClasses = classMap({
@@ -119,8 +116,7 @@ let CDSAccordionItem = class CDSAccordionItem extends FocusMixin(LitElement) {
         class="${"cds"}--accordion__heading"
         aria-controls="content"
         aria-expanded="${open}"
-        @click="${handleClickExpando}"
-        @keydown="${handleKeydownExpando}">
+        @click="${handleClickExpando}">
         ${iconLoader(ChevronRight16, {
 			part: "expando-icon",
 			class: `cds--accordion__arrow`

package/es/components/accordion/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","names":["styles","customElement"],"sources":["../../../src/components/accordion/accordion-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport FocusMixin from '../../globals/mixins/focus';\nimport Handle from '../../globals/internal/handle';\nimport { ACCORDION_ITEM_BREAKPOINT } from './defs';\nimport styles from './accordion.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { ACCORDION_ITEM_BREAKPOINT };\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Accordion item.\n *\n * @element cds-accordion-item\n * @fires cds-accordion-item-beingtoggled\n *   The custom event fired before this accordion item is being toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of toggling this accordion item.\n * @fires cds-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture.\n * @csspart title The title.\n * @csspart content The content.\n */\n@customElement(`${prefix}-accordion-item`)\nclass CDSAccordionItem extends FocusMixin(LitElement) {\n  /**\n   * The accordion content container.\n   */\n  @query(`.${prefix}--accordion__content`)\n  private _accordionContent!: HTMLDivElement;\n\n  /**\n   * The current breakpoint.\n   */\n  private _currentBreakpoint?: ACCORDION_ITEM_BREAKPOINT;\n\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * Handles user-initiated toggle request of this accordion item.\n   *\n   * @param open The new open state.\n   */\n  private _handleUserInitiatedToggle(open = !this.open) {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSAccordionItem).eventBeforeToggle,\n          init\n        )\n      )\n    ) {\n      if (!this.open) {\n        this.setAttribute('expanding', '');\n      } else {\n        this.setAttribute('collapsing', '');\n      }\n      this._accordionContent?.addEventListener('animationend', () => {\n        this.removeAttribute('expanding');\n        this.removeAttribute('collapsing');\n      });\n\n      this.open = open;\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSAccordionItem).eventToggle,\n          init\n        )\n      );\n    }\n  }\n\n  /**\n   * Handler for the `click` event on the expando button.\n   */\n  private _handleClickExpando() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the expando button.\n   */\n  private _handleKeydownExpando = ({ key }: KeyboardEvent) => {\n    if (this.open && (key === 'Esc' || key === 'Escape')) {\n      this._handleUserInitiatedToggle(false);\n    }\n  };\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(\n    (records: ResizeObserverEntry[]) => {\n      const { width } = records[records.length - 1].contentRect;\n      const { _sizesBreakpoints: sizesBreakpoints } = this\n        .constructor as typeof CDSAccordionItem;\n      this._currentBreakpoint = Object.keys(sizesBreakpoints)\n        .sort((lhs, rhs) => sizesBreakpoints[rhs] - sizesBreakpoints[lhs])\n        .find(\n          (size) => width >= sizesBreakpoints[size]\n        ) as ACCORDION_ITEM_BREAKPOINT;\n      this.requestUpdate();\n    }\n  );\n\n  /**\n   * `true` if the accordion item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the accordion item should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The title text.\n   */\n  @property({ attribute: 'title' })\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n    this._hObserveResize = observeResize(this._resizeObserver, this);\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      title,\n      open,\n      _currentBreakpoint: currentBreakpoint,\n      _handleClickExpando: handleClickExpando,\n      _handleKeydownExpando: handleKeydownExpando,\n    } = this;\n    const { _classesBreakpoints: classesBreakpoints } = this\n      .constructor as typeof CDSAccordionItem;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const { [currentBreakpoint!]: classBreakpoint } = classesBreakpoints;\n    const contentClasses = classMap({\n      [classBreakpoint]: classBreakpoint,\n      [`${prefix}--accordion__content`]: true,\n    });\n    return html`\n      <button\n        ?disabled=\"${disabled}\"\n        type=\"button\"\n        part=\"expando\"\n        class=\"${prefix}--accordion__heading\"\n        aria-controls=\"content\"\n        aria-expanded=\"${open}\"\n        @click=\"${handleClickExpando}\"\n        @keydown=\"${handleKeydownExpando}\">\n        ${iconLoader(ChevronRight16, {\n          part: 'expando-icon',\n          class: `${prefix}--accordion__arrow`,\n        })}\n        <div part=\"title\" class=\"${prefix}--accordion__title\">\n          <slot name=\"title\">${title}</slot>\n        </div>\n      </button>\n      <div class=\"${prefix}--accordion__wrapper\" part=\"wrapper\">\n        <div id=\"content\" part=\"content\" class=\"${contentClasses}\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The CSS classes for breakpoints.\n   *\n   * @private\n   */\n  static get _classesBreakpoints() {\n    return {\n      [ACCORDION_ITEM_BREAKPOINT.SMALL]: `${prefix}-ce--accordion__content--${ACCORDION_ITEM_BREAKPOINT.SMALL}`,\n      [ACCORDION_ITEM_BREAKPOINT.MEDIUM]: `${prefix}-ce--accordion__content--${ACCORDION_ITEM_BREAKPOINT.MEDIUM}`,\n    };\n  }\n\n  /**\n   * The breakpoints.\n   *\n   * @private\n   */\n  static get _sizesBreakpoints() {\n    return {\n      [ACCORDION_ITEM_BREAKPOINT.SMALL]: 480,\n      [ACCORDION_ITEM_BREAKPOINT.MEDIUM]: 640,\n    };\n  }\n\n  /**\n   * The name of the custom event fired before this accordion item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this accordion item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-accordion-item-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this accordion item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-accordion-item-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAccordionItem;\n"],"mappings":"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"}
+{"version":3,"file":"accordion-item.js","names":["styles","customElement"],"sources":["../../../src/components/accordion/accordion-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport FocusMixin from '../../globals/mixins/focus';\nimport Handle from '../../globals/internal/handle';\nimport { ACCORDION_ITEM_BREAKPOINT } from './defs';\nimport styles from './accordion.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { ACCORDION_ITEM_BREAKPOINT };\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Accordion item.\n *\n * @element cds-accordion-item\n * @fires cds-accordion-item-beingtoggled\n *   The custom event fired before this accordion item is being toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of toggling this accordion item.\n * @fires cds-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture.\n * @csspart title The title.\n * @csspart content The content.\n */\n@customElement(`${prefix}-accordion-item`)\nclass CDSAccordionItem extends FocusMixin(LitElement) {\n  /**\n   * The accordion content container.\n   */\n  @query(`.${prefix}--accordion__content`)\n  private _accordionContent!: HTMLDivElement;\n\n  /**\n   * The current breakpoint.\n   */\n  private _currentBreakpoint?: ACCORDION_ITEM_BREAKPOINT;\n\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * Handles user-initiated toggle request of this accordion item.\n   *\n   * @param open The new open state.\n   */\n  private _handleUserInitiatedToggle(open = !this.open) {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSAccordionItem).eventBeforeToggle,\n          init\n        )\n      )\n    ) {\n      if (!this.open) {\n        this.setAttribute('expanding', '');\n      } else {\n        this.setAttribute('collapsing', '');\n      }\n      this._accordionContent?.addEventListener('animationend', () => {\n        this.removeAttribute('expanding');\n        this.removeAttribute('collapsing');\n      });\n\n      this.open = open;\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSAccordionItem).eventToggle,\n          init\n        )\n      );\n    }\n  }\n\n  /**\n   * Handler for the `click` event on the expando button.\n   */\n  private _handleClickExpando() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(\n    (records: ResizeObserverEntry[]) => {\n      const { width } = records[records.length - 1].contentRect;\n      const { _sizesBreakpoints: sizesBreakpoints } = this\n        .constructor as typeof CDSAccordionItem;\n      this._currentBreakpoint = Object.keys(sizesBreakpoints)\n        .sort((lhs, rhs) => sizesBreakpoints[rhs] - sizesBreakpoints[lhs])\n        .find(\n          (size) => width >= sizesBreakpoints[size]\n        ) as ACCORDION_ITEM_BREAKPOINT;\n      this.requestUpdate();\n    }\n  );\n\n  /**\n   * `true` if the accordion item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the accordion item should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The title text.\n   */\n  @property({ attribute: 'title' })\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n    this._hObserveResize = observeResize(this._resizeObserver, this);\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      title,\n      open,\n      _currentBreakpoint: currentBreakpoint,\n      _handleClickExpando: handleClickExpando,\n    } = this;\n    const { _classesBreakpoints: classesBreakpoints } = this\n      .constructor as typeof CDSAccordionItem;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const { [currentBreakpoint!]: classBreakpoint } = classesBreakpoints;\n    const contentClasses = classMap({\n      [classBreakpoint]: classBreakpoint,\n      [`${prefix}--accordion__content`]: true,\n    });\n    return html`\n      <button\n        ?disabled=\"${disabled}\"\n        type=\"button\"\n        part=\"expando\"\n        class=\"${prefix}--accordion__heading\"\n        aria-controls=\"content\"\n        aria-expanded=\"${open}\"\n        @click=\"${handleClickExpando}\">\n        ${iconLoader(ChevronRight16, {\n          part: 'expando-icon',\n          class: `${prefix}--accordion__arrow`,\n        })}\n        <div part=\"title\" class=\"${prefix}--accordion__title\">\n          <slot name=\"title\">${title}</slot>\n        </div>\n      </button>\n      <div class=\"${prefix}--accordion__wrapper\" part=\"wrapper\">\n        <div id=\"content\" part=\"content\" class=\"${contentClasses}\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The CSS classes for breakpoints.\n   *\n   * @private\n   */\n  static get _classesBreakpoints() {\n    return {\n      [ACCORDION_ITEM_BREAKPOINT.SMALL]: `${prefix}-ce--accordion__content--${ACCORDION_ITEM_BREAKPOINT.SMALL}`,\n      [ACCORDION_ITEM_BREAKPOINT.MEDIUM]: `${prefix}-ce--accordion__content--${ACCORDION_ITEM_BREAKPOINT.MEDIUM}`,\n    };\n  }\n\n  /**\n   * The breakpoints.\n   *\n   * @private\n   */\n  static get _sizesBreakpoints() {\n    return {\n      [ACCORDION_ITEM_BREAKPOINT.SMALL]: 480,\n      [ACCORDION_ITEM_BREAKPOINT.MEDIUM]: 640,\n    };\n  }\n\n  /**\n   * The name of the custom event fired before this accordion item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this accordion item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-accordion-item-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this accordion item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-accordion-item-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAccordionItem;\n"],"mappings":"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"}