@carbon/web-components 2.0.0-rc.2 → 2.0.0-rc.4

package/custom-elements.json

@@ -3464,25 +3464,12 @@
       "path": "./src/components/data-table/table-toolbar.ts",
       "description": "Table toolbar.",
       "attributes": [
-        {
-          "name": "flipped",
-          "description": "Boolean to reflect the overflow menu body",
-          "type": "boolean",
-          "default": "true"
-        },
         {
           "name": "size",
           "description": "Toolbar size"
         }
       ],
       "properties": [
-        {
-          "name": "flipped",
-          "attribute": "flipped",
-          "description": "Boolean to reflect the overflow menu body",
-          "type": "boolean",
-          "default": "true"
-        },
         {
           "name": "size",
           "attribute": "size",
@@ -7307,6 +7294,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "max-count",
           "description": "Max character count allowed for input. This is needed in order for enableCounter to display"
@@ -7323,12 +7316,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "invalid-text",
-          "description": "Message which is displayed if the value is invalid.",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "hide-label",
           "description": "Specify whether you want the underlying label to be visually hidden",
@@ -7525,6 +7512,13 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "invalidText",
+          "attribute": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "maxCount",
           "attribute": "max-count",
@@ -7544,13 +7538,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "invalidText",
-          "attribute": "invalid-text",
-          "description": "Message which is displayed if the value is invalid.",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "hideLabel",
           "attribute": "hide-label",
@@ -8990,6 +8977,34 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "helper-text",
+          "description": "The helper text."
+        },
+        {
+          "name": "warn",
+          "description": "Specify whether the control is currently in warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warn-text",
+          "description": "Provide the text that is displayed when the control is in warning state",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "invalid",
+          "description": "Specify if the currently value is invalid.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "name",
           "description": "The `name` attribute for the `<input>` for selection.",
@@ -9041,6 +9056,39 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "helperText",
+          "attribute": "helper-text",
+          "description": "The helper text."
+        },
+        {
+          "name": "warn",
+          "attribute": "warn",
+          "description": "Specify whether the control is currently in warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warnText",
+          "attribute": "warn-text",
+          "description": "Provide the text that is displayed when the control is in warning state",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Specify if the currently value is invalid.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalidText",
+          "attribute": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -9114,6 +9162,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "invalid",
+          "description": "Specify if the currently value is invalid.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label-position",
           "description": "The label position.",
@@ -9185,6 +9239,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Specify if the currently value is invalid.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelPosition",
           "attribute": "label-position",
@@ -9994,6 +10055,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "warn",
+          "description": "true to specify if the control should display warn icon and text.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "max",
           "description": "The maximum value.",
@@ -10042,6 +10109,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "warn",
+          "attribute": "warn",
+          "description": "true to specify if the control should display warn icon and text.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "max",
           "attribute": "max",
@@ -10159,6 +10233,24 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "warn",
+          "description": "true to specify if the control should display warn icon and text.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warn-text",
+          "description": "Provide the text that is displayed when the control is in warning state",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "step",
           "description": "The snapping step of the value.",
@@ -10172,6 +10264,10 @@
         {
           "name": "value",
           "description": "The value."
+        },
+        {
+          "name": "isValid",
+          "description": "is slide input valid"
         }
       ],
       "properties": [
@@ -10254,6 +10350,27 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "invalidText",
+          "attribute": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "warn",
+          "attribute": "warn",
+          "description": "true to specify if the control should display warn icon and text.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warnText",
+          "attribute": "warn-text",
+          "description": "Provide the text that is displayed when the control is in warning state",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "step",
           "attribute": "step",
@@ -10271,6 +10388,11 @@
           "attribute": "value",
           "description": "The value."
         },
+        {
+          "name": "isValid",
+          "attribute": "isValid",
+          "description": "is slide input valid"
+        },
         {
           "name": "shadowRootOptions",
           "type": "{ delegatesFocus: boolean; mode: ShadowRootMode; }",
@@ -10830,6 +10952,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "max-count",
           "description": "Max character count allowed for input. This is needed in order for enableCounter to display"
@@ -10846,12 +10974,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "invalid-text",
-          "description": "Message which is displayed if the value is invalid.",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "hide-label",
           "description": "Specify whether you want the underlying label to be visually hidden",
@@ -11002,6 +11124,13 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "invalidText",
+          "attribute": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "maxCount",
           "attribute": "max-count",
@@ -11021,13 +11150,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "invalidText",
-          "attribute": "invalid-text",
-          "description": "Message which is displayed if the value is invalid.",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "hideLabel",
           "attribute": "hide-label",
@@ -11241,6 +11363,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "max-count",
           "description": "Max character count allowed for input. This is needed in order for enableCounter to display"
@@ -11257,12 +11385,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "invalid-text",
-          "description": "Message which is displayed if the value is invalid.",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "hide-label",
           "description": "Specify whether you want the underlying label to be visually hidden",
@@ -11432,6 +11554,13 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "invalidText",
+          "attribute": "invalid-text",
+          "description": "Message which is displayed if the value is invalid.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "maxCount",
           "attribute": "max-count",
@@ -11451,13 +11580,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "invalidText",
-          "attribute": "invalid-text",
-          "description": "Message which is displayed if the value is invalid.",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "hideLabel",
           "attribute": "hide-label",
@@ -12574,6 +12696,18 @@
           "name": "active",
           "description": "Specify whether the action is currently active"
         },
+        {
+          "name": "panel-id",
+          "description": "Specify which header panel the button is associated with."
+        },
+        {
+          "name": "button-label-active",
+          "description": "The `aria-label` attribute for the button in its active state."
+        },
+        {
+          "name": "button-label-inactive",
+          "description": "The `aria-label` attribute for the button in its inactive state."
+        },
         {
           "name": "autofocus",
           "description": "`true` if the button should have input focus when the page loads.",
@@ -12702,6 +12836,21 @@
           "attribute": "active",
           "description": "Specify whether the action is currently active"
         },
+        {
+          "name": "panelId",
+          "attribute": "panel-id",
+          "description": "Specify which header panel the button is associated with."
+        },
+        {
+          "name": "buttonLabelActive",
+          "attribute": "button-label-active",
+          "description": "The `aria-label` attribute for the button in its active state."
+        },
+        {
+          "name": "buttonLabelInactive",
+          "attribute": "button-label-inactive",
+          "description": "The `aria-label` attribute for the button in its inactive state."
+        },
         {
           "name": "autofocus",
           "attribute": "autofocus",
@@ -12974,6 +13123,16 @@
           "description": "Link `href`.",
           "type": "string"
         },
+        {
+          "name": "rel",
+          "description": "The link type.",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "The link target.",
+          "type": "string"
+        },
         {
           "name": "title",
           "description": "The title.",
@@ -13003,6 +13162,18 @@
           "description": "Link `href`.",
           "type": "string"
         },
+        {
+          "name": "rel",
+          "attribute": "rel",
+          "description": "The link type.",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "The link target.",
+          "type": "string"
+        },
         {
           "name": "title",
           "attribute": "title",
@@ -13167,6 +13338,16 @@
           "description": "Link `href`.",
           "type": "string"
         },
+        {
+          "name": "rel",
+          "description": "The link type.",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "The link target.",
+          "type": "string"
+        },
         {
           "name": "title",
           "description": "The title.",
@@ -13196,6 +13377,18 @@
           "description": "Link `href`.",
           "type": "string"
         },
+        {
+          "name": "rel",
+          "attribute": "rel",
+          "description": "The link type.",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "The link target.",
+          "type": "string"
+        },
         {
           "name": "title",
           "attribute": "title",
@@ -13365,6 +13558,16 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "rel",
+          "description": "The link type.",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "The link target.",
+          "type": "string"
+        },
         {
           "name": "large",
           "description": "Specify if this is a large variation of the side nav link",
@@ -13392,6 +13595,18 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "rel",
+          "attribute": "rel",
+          "description": "The link type.",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "The link target.",
+          "type": "string"
+        },
         {
           "name": "large",
           "attribute": "large",

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

@@ -1 +1 @@
-{"version":3,"sources":["components/accordion/accordion-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAGnD,OAAO,EAAE,yBAAyB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBrC;;;;;;;;;;;;GAYG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IACnD;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAA4B;IAEvD;;OAEG;IACH,OAAO,CAAC,eAAe,CAAuB;IAE9C;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAwClC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAI3B;IAEF;;OAEG;IAGH,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;IAwCN;;;;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,KAAK,wBAAwB,WAElC;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"accordion-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\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, customElement } from 'lit/decorators.js';\nimport ChevronRight16 from '@carbon/icons/lib/chevron--right/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport Handle from '../../globals/internal/handle';\nimport { ACCORDION_ITEM_BREAKPOINT } from './defs';\nimport styles from './accordion.scss';\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 expando The expando button.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart content The content.\n */\n@customElement(`${prefix}-accordion-item`)\nclass CDSAccordionItem extends FocusMixin(LitElement) {\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      const { selectorAccordionContent } = this\n        .constructor as typeof CDSAccordionItem;\n\n      !this.open\n        ? this.setAttribute('expanding', '')\n        : this.setAttribute('collapsing', '');\n      this.shadowRoot!.querySelector(\n        selectorAccordionContent\n      )!.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  // @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    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=\"${String(Boolean(open))}\"\n        @click=\"${handleClickExpando}\"\n        @keydown=\"${handleKeydownExpando}\">\n        ${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 id=\"content\" part=\"content\" class=\"${contentClasses}\">\n        <slot></slot>\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 get selectorAccordionContent() {\n    return `.${prefix}--accordion__content`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAccordionItem;\n"]}
+{"version":3,"sources":["components/accordion/accordion-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,yBAAyB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBrC;;;;;;;;;;;;GAYG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IACnD;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAC,CAA4B;IAEvD;;OAEG;IACH,OAAO,CAAC,eAAe,CAAuB;IAE9C;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAwClC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAI3B;IAEF;;OAEG;IAGH,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;IAwCN;;;;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,KAAK,wBAAwB,WAElC;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"accordion-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\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 } from 'lit/decorators.js';\nimport ChevronRight16 from '@carbon/icons/lib/chevron--right/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport Handle from '../../globals/internal/handle';\nimport { ACCORDION_ITEM_BREAKPOINT } from './defs';\nimport styles from './accordion.scss';\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 expando The expando button.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart content The content.\n */\n@customElement(`${prefix}-accordion-item`)\nclass CDSAccordionItem extends FocusMixin(LitElement) {\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      const { selectorAccordionContent } = this\n        .constructor as typeof CDSAccordionItem;\n\n      !this.open\n        ? this.setAttribute('expanding', '')\n        : this.setAttribute('collapsing', '');\n      this.shadowRoot!.querySelector(\n        selectorAccordionContent\n      )!.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  // @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    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        ${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 id=\"content\" part=\"content\" class=\"${contentClasses}\">\n        <slot></slot>\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 get selectorAccordionContent() {\n    return `.${prefix}--accordion__content`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAccordionItem;\n"]}

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

@@ -14,12 +14,13 @@ let _ = t => t,
 
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import ChevronRight16 from "../../icons/chevron--right/16";
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { ACCORDION_ITEM_BREAKPOINT } from './defs';
 import styles from "././accordion.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { ACCORDION_ITEM_BREAKPOINT };
 
 /**
@@ -254,7 +255,7 @@ let CDSAccordionItem = _decorate([customElement(`${prefix}-accordion-item`)], fu
       <div id="content" part="content" class="${0}">
         <slot></slot>
       </div>
-    `), disabled, prefix, String(Boolean(open)), handleClickExpando, handleKeydownExpando, ChevronRight16({
+    `), disabled, prefix, open, handleClickExpando, handleKeydownExpando, ChevronRight16({
           part: 'expando-icon',
           class: `${prefix}--accordion__arrow`
         }), prefix, title, contentClasses);