@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.5

package/es/components/tile/clickable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickable-tile.js","names":["classMap","property","customElement","prefix","BXLink","TILE_COLOR_SCHEME","styles","BXClickableTile","_decorate","_initialize","_BXLink","constructor","args","F","d","kind","key","value","_classes","colorScheme","disabled","decorators","attribute","reflect","REGULAR","static"],"sources":["components/tile/clickable-tile.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 { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport BXLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass BXClickableTile extends BXLink {\n  protected get _classes() {\n    const { colorScheme, disabled } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  static styles = styles;\n}\n\nexport default BXClickableTile;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;;AAEhC;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,eAAe,GAAAC,SAAA,EADpBN,aAAa,CAAE,GAAEC,MAAO,iBAAgB,CAAC,aAAAM,WAAA,EAAAC,OAAA;EAA1C,MACMH,eAAe,SAAAG,OAAA,CAAgB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAyBrC;EAAC;IAAAI,CAAA,EAzBKN,eAAe;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACnB,SAAAC,SAAA,EAAyB;QACvB,MAAM;UAAEC,WAAW;UAAEC;QAAS,CAAC,GAAG,IAAI;QACtC,OAAOpB,QAAQ,CAAC;UACd,CAAE,GAAEG,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,kBAAiB,GAAGiB,QAAQ;UACvC,CAAE,GAAEjB,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,mBAAkB,GAAG,IAAI;UACpC,CAAE,GAAEA,MAAO,WAAUgB,WAAY,EAAC,GAAGA;QACvC,CAAC,CAAC;MACJ;;MAEA;AACF;AACA;IAFE;MAAAJ,IAAA;MAAAM,UAAA,GAGCpB,QAAQ,CAAC;QAAEqB,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAP,GAAA;MAAAC,MAAA;QAAA,OACzCZ,iBAAiB,CAACmB,OAAO;MAAA;IAAA;MAAAT,IAAA;MAAAM,UAAA,GAKtCpB,QAAQ,CAAC;QAAEqB,SAAS,EAAE;MAAY,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OAC1B,QAAQ;MAAA;IAAA;MAAAF,IAAA;MAAAU,MAAA;MAAAT,GAAA;MAAAC,MAAA;QAAA,OAEHX,MAAM;MAAA;IAAA;EAAA;AAAA,GAxBMF,MAAM;AA2BpC,eAAeG,eAAe"}
+{"version":3,"file":"clickable-tile.js","names":["classMap","property","customElement","prefix","CDSLink","TILE_COLOR_SCHEME","styles","CDSClickableTile","_decorate","_initialize","_CDSLink","constructor","args","F","d","kind","key","value","_classes","colorScheme","disabled","decorators","attribute","reflect","REGULAR","static"],"sources":["components/tile/clickable-tile.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 { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  protected get _classes() {\n    const { colorScheme, disabled } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,OAAO,MAAM,cAAc;AAClC,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;;AAEhC;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,gBAAgB,GAAAC,SAAA,EADrBN,aAAa,CAAE,GAAEC,MAAO,iBAAgB,CAAC,aAAAM,WAAA,EAAAC,QAAA;EAA1C,MACMH,gBAAgB,SAAAG,QAAA,CAAiB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAyBvC;EAAC;IAAAI,CAAA,EAzBKN,gBAAgB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACpB,SAAAC,SAAA,EAAyB;QACvB,MAAM;UAAEC,WAAW;UAAEC;QAAS,CAAC,GAAG,IAAI;QACtC,OAAOpB,QAAQ,CAAC;UACd,CAAE,GAAEG,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,kBAAiB,GAAGiB,QAAQ;UACvC,CAAE,GAAEjB,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,mBAAkB,GAAG,IAAI;UACpC,CAAE,GAAEA,MAAO,WAAUgB,WAAY,EAAC,GAAGA;QACvC,CAAC,CAAC;MACJ;;MAEA;AACF;AACA;IAFE;MAAAJ,IAAA;MAAAM,UAAA,GAGCpB,QAAQ,CAAC;QAAEqB,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAP,GAAA;MAAAC,MAAA;QAAA,OACzCZ,iBAAiB,CAACmB,OAAO;MAAA;IAAA;MAAAT,IAAA;MAAAM,UAAA,GAKtCpB,QAAQ,CAAC;QAAEqB,SAAS,EAAE;MAAY,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OAC1B,QAAQ;MAAA;IAAA;MAAAF,IAAA;MAAAU,MAAA;MAAAT,GAAA;MAAAC,MAAA;QAAA,OAEHX,MAAM;MAAA;IAAA;EAAA;AAAA,GAxBOF,OAAO;AA2BtC,eAAeG,gBAAgB"}

package/es/components/tile/expandable-tile.d.ts

@@ -8,7 +8,7 @@
  */
 import { LitElement } from 'lit';
 import { TILE_COLOR_SCHEME } from './defs';
-declare const BXExpandableTile_base: {
+declare const CDSExpandableTile_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
@@ -319,9 +319,7 @@ declare const BXExpandableTile_base: {
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined; /**
-                 * The color scheme.
-                 */
+                options?: boolean | AddEventListenerOptions | undefined;
             };
         };
     };
@@ -640,7 +638,7 @@ declare const BXExpandableTile_base: {
  *   Cancellation of this event stops changing the user-initiated change in expanded state.
  * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.
  */
-declare class BXExpandableTile extends BXExpandableTile_base {
+declare class CDSExpandableTile extends CDSExpandableTile_base {
     /**
      * The computed height of the below-the-fold content.
      */
@@ -677,6 +675,6 @@ declare class BXExpandableTile extends BXExpandableTile_base {
     static get eventToggle(): string;
     static styles: any;
 }
-export default BXExpandableTile;
+export default CDSExpandableTile;
 
 //# sourceMappingURL=expandable-tile.d.ts.map

package/es/components/tile/expandable-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/expandable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yEAwEzC;;mBAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtEL;;;;;;;;GAQG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IACtE;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;;OAIG;IACH,OAAO,CAAC,oCAAoC;IAiB5C,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,YAAY,CAIlB;IAEF;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB,MAAM;IAqCN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"expandable-tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof BXExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXExpandableTile;\n"]}
+{"version":3,"sources":["components/tile/expandable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI3C;;;;;;;;GAQG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;IACvE;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;;OAIG;IACH,OAAO,CAAC,oCAAoC;IAiB5C,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,YAAY,CAIlB;IAEF;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB,MAAM;IAqCN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"expandable-tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof CDSExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSExpandableTile;\n"]}

package/es/components/tile/expandable-tile.js

@@ -21,7 +21,7 @@ import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from "././tile.css.js";
-import { classMap } from 'lit/directives/class-map';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
  * Expandable tile.
@@ -32,15 +32,15 @@ import { classMap } from 'lit/directives/class-map';
  *   Cancellation of this event stops changing the user-initiated change in expanded state.
  * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.
  */
-let BXExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)], function (_initialize, _HostListenerMixin) {
-  class BXExpandableTile extends _HostListenerMixin {
+let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)], function (_initialize, _HostListenerMixin) {
+  class CDSExpandableTile extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXExpandableTile,
+    F: CDSExpandableTile,
     d: [{
       kind: "field",
       key: "_belowTheContentHeight",
@@ -215,5 +215,5 @@ let BXExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)], f
     }]
   };
 }, HostListenerMixin(FocusMixin(LitElement)));
-export default BXExpandableTile;
+export default CDSExpandableTile;
 //# sourceMappingURL=expandable-tile.js.map

package/es/components/tile/expandable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-tile.js","names":["LitElement","html","property","customElement","ifDefined","ChevronDown16","prefix","HostListener","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","classMap","BXExpandableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","target","assignedNodes","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","requestUpdate","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","Boolean","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","undefined","static"],"sources":["components/tile/expandable-tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof BXExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXExpandableTile;\n"],"mappings":"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"}
+{"version":3,"file":"expandable-tile.js","names":["LitElement","html","property","customElement","ifDefined","ChevronDown16","prefix","HostListener","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","classMap","CDSExpandableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","target","assignedNodes","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","requestUpdate","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","Boolean","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","undefined","static"],"sources":["components/tile/expandable-tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof CDSExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSExpandableTile;\n"],"mappings":"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"}

package/es/components/tile/radio-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/radio-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C;;;;GAIG;AACH,cACM,YAAa,SAAQ,cAAc;IACvC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAW;IAE/B;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB,MAAM;IAuCN;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;CACF;AAED,eAAe,YAAY,CAAC","file":"radio-tile.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 { html, svg } from 'lit';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div class=\"${prefix}--tile__checkmark\">\n          ${CheckmarkFilled16({\n            children: !checkmarkLabel\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"]}
+{"version":3,"sources":["components/tile/radio-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C;;;;GAIG;AACH,cACM,YAAa,SAAQ,cAAc;IACvC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAW;IAE/B;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB,MAAM;IAuCN;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;CACF;AAED,eAAe,YAAY,CAAC","file":"radio-tile.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 { html, svg } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div class=\"${prefix}--tile__checkmark\">\n          ${CheckmarkFilled16({\n            children: !checkmarkLabel\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"]}

package/es/components/tile/radio-tile.js

@@ -12,8 +12,8 @@ let _ = t => t,
  */
 
 import { html, svg } from 'lit';
-import { classMap } from 'lit-html/directives/class-map';
-import { ifDefined } from 'lit/directives/if-defined';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import SelectableTile from './selectable-tile';

package/es/components/tile/radio-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-tile.js","names":["html","svg","classMap","ifDefined","customElement","prefix","SelectableTile","CheckmarkFilled16","CDSRadioTile","_decorate","_initialize","_SelectableTile","constructor","args","F","d","kind","key","value","_handleChange","selected","name","eventRadioChange","dispatchEvent","CustomEvent","bubbles","composed","detail","render","colorScheme","checkmarkLabel","_inputType","inputType","handleChange","classes","_t","_","children","undefined","_t2","static"],"sources":["components/tile/radio-tile.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 { html, svg } from 'lit';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div class=\"${prefix}--tile__checkmark\">\n          ${CheckmarkFilled16({\n            children: !checkmarkLabel\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,GAAG,QAAQ,KAAK;AAC/B,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,SAAS,QAAQ,2BAA2B;AACrD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,iBAAiB,MAAM,kCAAwC;;AAEtE;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,YAAY,GAAAC,SAAA,EADjBL,aAAa,CAAE,GAAEC,MAAO,aAAY,CAAC,aAAAK,WAAA,EAAAC,eAAA;EAAtC,MACMH,YAAY,SAAAG,eAAA,CAAwB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAsE1C;EAAC;IAAAI,CAAA,EAtEKN,YAAY;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAIO,OAAO;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAH9B;AACF;AACA;;MAGE;AACF;AACA;MACE,SAAAC,cAAA,EAA0B;QACxB,IAAI,CAACC,QAAQ,GAAG,IAAI;QACpB,MAAM;UAAEA,QAAQ;UAAEC;QAAK,CAAC,GAAG,IAAI;QAC/B,MAAM;UAAEC;QAAiB,CAAC,GAAG,IAAI,CAACV,WAAkC;QACpE,IAAI,CAACW,aAAa,CAChB,IAAIC,WAAW,CAACF,gBAAgB,EAAE;UAChCG,OAAO,EAAE,IAAI;UACbC,QAAQ,EAAE,IAAI;UACdC,MAAM,EAAE;YACNP,QAAQ;YACRC;UACF;QACF,CAAC,CAAC,CACH;MACH;IAAC;MAAAL,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAU,OAAA,EAAS;QACP,MAAM;UACJC,WAAW;UACXC,cAAc;UACdT,IAAI;UACJD,QAAQ;UACRF,KAAK;UACLa,UAAU,EAAEC,SAAS;UACrBb,aAAa,EAAEc;QACjB,CAAC,GAAG,IAAI;QACR,MAAMC,OAAO,GAAGhC,QAAQ,CAAC;UACvB,CAAE,GAAEG,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,oBAAmB,GAAG,IAAI;UACrC,CAAE,GAAEA,MAAO,qBAAoB,GAAGe,QAAQ;UAC1C,CAAE,GAAEf,MAAO,WAAUwB,WAAY,EAAC,GAAGA;QACvC,CAAC,CAAC;QACF,OAAO7B,IAAI,CAAAmC,EAAA,KAAAA,EAAA,GAAAC,CAAC;AAChB;AACA,gBAAc,CAAY;AAC1B;AACA,iBAAe,CAAS;AACxB;AACA,gBAAc,CAAkB;AAChC,iBAAe,CAAmB;AAClC,mBAAiB,CAAW;AAC5B,kBAAgB,CAAe;AAC/B,kCAAgC,CAAU;AAC1C,sBAAoB,CAAS;AAC7B,YAAU,CAIG;AACb;AACA,sBAAoB,CAAS;AAC7B;AACA,KAAI,GAlBYJ,SAAS,EAER3B,MAAM,EAEPF,SAAS,CAACkB,IAAI,CAAC,EACdlB,SAAS,CAACe,KAAK,CAAC,EACdE,QAAQ,EACTa,YAAY,EACIC,OAAO,EACnB7B,MAAM,EAChBE,iBAAiB,CAAC;UAClB8B,QAAQ,EAAE,CAACP,cAAc,GACrBQ,SAAS,GACTrC,GAAG,CAAAsC,GAAA,KAAAA,GAAA,GAAAH,CAAC,UAAO,CAAiB,UAAQ,GAAvBN,cAAc;QACjC,CAAC,CAAC,EAEUzB,MAAM;MAG1B;;MAEA;AACF;AACA;IAFE;MAAAW,IAAA;MAAAwB,MAAA;MAAAvB,GAAA;MAAAC,KAAA,EAGA,SAAAI,iBAAA,EAA8B;QAC5B,OAAQ,GAAEjB,MAAO,sBAAqB;MACxC;IAAC;EAAA;AAAA,GArEwBC,cAAc;AAwEzC,eAAeE,YAAY"}
+{"version":3,"file":"radio-tile.js","names":["html","svg","classMap","ifDefined","customElement","prefix","SelectableTile","CheckmarkFilled16","CDSRadioTile","_decorate","_initialize","_SelectableTile","constructor","args","F","d","kind","key","value","_handleChange","selected","name","eventRadioChange","dispatchEvent","CustomEvent","bubbles","composed","detail","render","colorScheme","checkmarkLabel","_inputType","inputType","handleChange","classes","_t","_","children","undefined","_t2","static"],"sources":["components/tile/radio-tile.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 { html, svg } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div class=\"${prefix}--tile__checkmark\">\n          ${CheckmarkFilled16({\n            children: !checkmarkLabel\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"],"mappings":"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"}

package/es/components/tile/selectable-tile.d.ts

@@ -8,7 +8,7 @@
  */
 import { LitElement } from 'lit';
 import { TILE_COLOR_SCHEME } from './defs';
-declare const BXSelectableTile_base: {
+declare const CDSSelectableTile_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
@@ -635,7 +635,7 @@ declare const BXSelectableTile_base: {
  * @element cds-selectable-tile
  * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.
  */
-declare class BXSelectableTile extends BXSelectableTile_base {
+declare class CDSSelectableTile extends CDSSelectableTile_base {
     protected _inputNode: HTMLInputElement;
     /**
      * The `type` attribute of the `<input>`.
@@ -687,6 +687,6 @@ declare class BXSelectableTile extends BXSelectableTile_base {
     };
     static styles: any;
 }
-export default BXSelectableTile;
+export default CDSSelectableTile;
 
 //# sourceMappingURL=selectable-tile.d.ts.map

package/es/components/tile/selectable-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/selectable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAQ5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI3C;;;;;GAKG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IAEtE,SAAS,CAAC,UAAU,EAAG,gBAAgB,CAAC;IAExC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAc;IAElC;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAgBrB;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAMpB;IAEF;;OAEG;IAEH,cAAc,EAAG,MAAM,CAAC;IAExB;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,MAAM;IAmCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"selectable-tile.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, svg } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport HostListener from '../../globals/decorators/host-listener';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass BXSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n\n    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof BXSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\n  };\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default BXSelectableTile;\n"]}
+{"version":3,"sources":["components/tile/selectable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAQ5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI3C;;;;;GAKG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;IAEvE,SAAS,CAAC,UAAU,EAAG,gBAAgB,CAAC;IAExC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAc;IAElC;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAgBrB;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAMpB;IAEF;;OAEG;IAEH,cAAc,EAAG,MAAM,CAAC;IAExB;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,MAAM;IAmCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"selectable-tile.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, svg } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport HostListener from '../../globals/decorators/host-listener';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n\n    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\n  };\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"]}

package/es/components/tile/selectable-tile.js

@@ -33,15 +33,15 @@ import HostListener from '../../globals/decorators/host-listener';
  * @element cds-selectable-tile
  * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.
  */
-let BXSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)], function (_initialize, _HostListenerMixin) {
-  class BXSelectableTile extends _HostListenerMixin {
+let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)], function (_initialize, _HostListenerMixin) {
+  class CDSSelectableTile extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXSelectableTile,
+    F: CDSSelectableTile,
     d: [{
       kind: "field",
       decorators: [query('input')],
@@ -236,5 +236,5 @@ let BXSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)], f
     }]
   };
 }, HostListenerMixin(FocusMixin(LitElement)));
-export default BXSelectableTile;
+export default CDSSelectableTile;
 //# sourceMappingURL=selectable-tile.js.map

package/es/components/tile/selectable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable-tile.js","names":["classMap","LitElement","html","svg","property","customElement","query","ifDefined","Checkbox16","CheckboxCheckedFilled16","prefix","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","HostListener","BXSelectableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","undefined","_t2","_t3","event","attribute","reflect","REGULAR","type","Boolean","render","colorScheme","name","_inputType","inputType","handleChange","classes","_t4","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/tile/selectable-tile.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, svg } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport HostListener from '../../globals/decorators/host-listener';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass BXSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n\n    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof BXSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\n  };\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default BXSelectableTile;\n"],"mappings":"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"}
+{"version":3,"file":"selectable-tile.js","names":["classMap","LitElement","html","svg","property","customElement","query","ifDefined","Checkbox16","CheckboxCheckedFilled16","prefix","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","HostListener","CDSSelectableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","undefined","_t2","_t3","event","attribute","reflect","REGULAR","type","Boolean","render","colorScheme","name","_inputType","inputType","handleChange","classes","_t4","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/tile/selectable-tile.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, svg } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport HostListener from '../../globals/decorators/host-listener';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n\n    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\n  };\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":"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"}

package/es/components/tile/tile.css.js

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  ".cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--tile-group html,:host(cds-tile-group) html{font-size:100%}.cds--tile-group body,:host(cds-tile-group) body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--tile-group code,:host(cds-tile-group) code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--tile-group strong,:host(cds-tile-group) strong{font-weight:600}.cds--tile,:host(cds-expandable-tile),:host(cds-tile){position:relative;display:block;min-width:8rem;min-height:4rem;padding:1rem;background-color:var(--cds-layer);outline:2px solid transparent;outline-offset:-2px;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--tile:focus,:focus:host(cds-expandable-tile),:focus:host(cds-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile:focus,:focus:host(cds-expandable-tile),:focus:host(cds-tile){outline-style:dotted}}.cds--tile--light,:host(cds-expandable-tile[color-scheme=light]),:host(cds-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds--tile--clickable,.cds--tile--selectable,:host(cds-clickable-tile) .cds--tile--clickable{cursor:pointer;transition:150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--clickable:hover,.cds--tile--selectable:hover{background:var(--cds-layer-hover)}.cds--tile--clickable,:host(cds-clickable-tile) .cds--tile--clickable{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable html{font-size:100%}.cds--tile--clickable body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--tile--clickable code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--tile--clickable strong{font-weight:600}.cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile--clickable:focus{outline-style:dotted}}.cds--tile--clickable:focus .cds--tile__checkmark,.cds--tile--clickable:hover .cds--tile__checkmark{opacity:1}.cds--tile--expandable::-moz-focus-inner,:host(cds-expandable-tile)::-moz-focus-inner{border:0}.cds--tile--clickable:active,.cds--tile--clickable:hover,.cds--tile--clickable:visited,.cds--tile--clickable:visited:hover{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable.cds--link--disabled,.cds--tile--clickable:hover.cds--link--disabled{display:block;padding:1rem;background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--tile--selectable{padding-right:3rem;border:1px solid transparent}.cds--tile__checkmark{position:absolute;top:1rem;right:1rem;height:1rem;border:none;background:0 0;opacity:0;transition:110ms cubic-bezier(.2,0,.38,.9)}.cds--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-secondary,#525252)}.cds--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile__checkmark:focus{outline-style:dotted}}.cds--tile__checkmark--persistent{opacity:1}.cds--tile__chevron,:host(cds-selectable-tile) .cds--tile__chevron{position:absolute;right:0;bottom:0;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center}.cds--tile__chevron svg{fill:var(--cds-icon-primary,#161616);transform-origin:center;transition:110ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--tile__chevron svg{transition:none}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile__chevron svg{fill:ButtonText}}.cds--tile__chevron--interactive{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:absolute;right:0;bottom:0;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center}.cds--tile__chevron--interactive *,.cds--tile__chevron--interactive ::after,.cds--tile__chevron--interactive ::before{box-sizing:inherit}.cds--tile__chevron--interactive::-moz-focus-inner{border:0}.cds--tile__chevron--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.cds--tile__chevron--interactive:hover{background-color:var(--cds-layer-hover);cursor:pointer}.cds--tile--expandable,:host(cds-expandable-tile){position:relative;overflow:hidden;width:100%;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left;transition:max-height 150ms cubic-bezier(.2,0,.38,.9);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--tile--expandable:hover,:hover:host(cds-expandable-tile){background:var(--cds-layer-hover)}.cds--tile--expandable--interactive:host(cds-expandable-tile),.cds--tile--expandable.cds--tile--expandable--interactive{cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--expandable--interactive:hover:host(cds-expandable-tile),.cds--tile--expandable.cds--tile--expandable--interactive:hover{background-color:var(--cds-layer)}.cds--tile--expandable--interactive:focus:host(cds-expandable-tile),.cds--tile--expandable.cds--tile--expandable--interactive:focus{outline:0}.cds--tile--expandable--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile--expandable--interactive:focus{outline-style:dotted}}.cds--tile-content__above-the-fold,:host(cds-expandable-tile) ::slotted(cds-tile-above-the-fold-content){display:block}.cds--tile-content__below-the-fold,:host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content){display:block;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:hidden}.cds--tile--is-expanded,:host(cds-expandable-tile)[expanded]{overflow:visible;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile--is-expanded .cds--tile__chevron svg,:host(cds-expandable-tile)[expanded] .cds--tile__chevron svg{transform:rotate(180deg)}.cds--tile--is-expanded .cds--tile-content__below-the-fold,.cds--tile--is-expanded :host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile)[expanded] .cds--tile-content__below-the-fold,:host(cds-expandable-tile)[expanded] ::slotted(cds-tile-below-the-fold-content){opacity:1;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:inherit}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tile--is-expanded .cds--tile-content__below-the-fold,.cds--tile--is-expanded :host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile)[expanded] .cds--tile-content__below-the-fold,:host(cds-expandable-tile)[expanded] ::slotted(cds-tile-below-the-fold-content){overflow-y:auto}}}.cds--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}.cds--tile--is-selected .cds--tile__checkmark{opacity:1}.cds--tile--is-selected .cds--tile__checkmark svg{fill:var(--cds-icon-primary,#161616)}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile--is-selected .cds--tile__checkmark svg{fill:ButtonText}}.cds--tile-content{width:100%;height:100%}.cds--tile-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline-style:dotted}}.cds--tile--disabled.cds--tile--selectable{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--tile--disabled.cds--tile--selectable.cds--tile--light,.cds--tile--disabled.cds--tile--selectable:host(cds-expandable-tile[color-scheme=light]),.cds--tile--disabled.cds--tile--selectable:host(cds-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds--tile--disabled.cds--tile--is-selected{border-color:var(--cds-button-disabled,#c6c6c6)}.cds--tile--disabled .cds--tile__checkmark svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tile--is-selected .cds--tile__checkmark svg,.cds--tile__checkmark svg,.cds--tile__chevron svg{fill:ButtonText}}.cds--link,:host(cds-tile) ::slotted(.cds--link){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:inline-flex;color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline:0;text-decoration:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.cds--link *,.cds--link ::after,.cds--link ::before,:host(cds-tile) ::slotted(.cds--link) *,:host(cds-tile) ::slotted(.cds--link) ::after,:host(cds-tile) ::slotted(.cds--link) ::before{box-sizing:inherit}.cds--link:hover,:host(cds-tile) :hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce));text-decoration:underline}.cds--link:active,.cds--link:active:visited,.cds--link:active:visited:hover,:host(cds-tile) :active::slotted(.cds--link){color:var(--cds-text-primary,#161616);text-decoration:underline}.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline:1px solid var(--cds-focus,#0f62fe);outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe))}@media screen and (prefers-contrast){.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline-style:dotted}}.cds--link:visited,:host(cds-tile) :visited::slotted(.cds--link){color:var(--cds-link-primary,#0f62fe)}.cds--link:visited:hover,:host(cds-tile) :visited:hover::slotted(.cds--link){color:var(--cds-link-primary-hover,#0043ce)}.cds--link--disabled,.cds--link--disabled:hover{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;font-weight:400;text-decoration:none}.cds--link--disabled *,.cds--link--disabled ::after,.cds--link--disabled ::before,.cds--link--disabled:hover *,.cds--link--disabled:hover ::after,.cds--link--disabled:hover ::before{box-sizing:inherit}.cds--link.cds--link--visited:visited,:host(cds-tile) .cds--link--visited:visited::slotted(.cds--link){color:var(--cds-link-visited,#8a3ffc)}.cds--link.cds--link--visited:visited:hover,:host(cds-tile) .cds--link--visited:visited:hover::slotted(.cds--link){color:var(--cds-link-primary-hover,#0043ce)}.cds--link.cds--link--inline,:host(cds-tile) .cds--link--inline::slotted(.cds--link){display:inline;text-decoration:underline}.cds--link.cds--link--inline:focus,.cds--link.cds--link--inline:visited,:host(cds-tile) .cds--link--inline:focus::slotted(.cds--link),:host(cds-tile) .cds--link--inline:visited::slotted(.cds--link){text-decoration:none}.cds--link--disabled.cds--link--inline{text-decoration:underline}.cds--link--sm,.cds--link--sm.cds--link--disabled:hover{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px)}.cds--link--lg,.cds--link--lg.cds--link--disabled:hover{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);line-height:var(--cds-body-compact-02-line-height,1.375);letter-spacing:var(--cds-body-compact-02-letter-spacing,0)}.cds--link__icon{display:inline-flex;align-self:center;margin-left:.5rem}@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;left:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;left:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host(cds-tile-group){background:0 0}:host(cds-tile-group) fieldset{border:none}:host(cds-clickable-tile){display:grid;outline:0}:host(cds-clickable-tile) .cds--link--disabled{display:block}:host(cds-clickable-tile) .cds--tile,:host(cds-clickable-tile) :host(cds-expandable-tile),:host(cds-clickable-tile) :host(cds-tile){padding:1rem;outline:2px solid transparent}:host(cds-clickable-tile) .cds--tile--clickable{transition:150ms cubic-bezier(.2,0,.38,.9)}:host(cds-clickable-tile) .cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-clickable-tile) .cds--tile--clickable:focus{outline-style:dotted}}:host(cds-clickable-tile):hover .cds--tile--clickable{color:inherit}:host(cds-radio-tile){display:block;outline:0;margin-bottom:.5rem}:host(cds-selectable-tile){display:content;outline:0}:host(cds-radio-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark,:host(cds-selectable-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark{opacity:1}:host(cds-expandable-tile) .cds-ce--expandable-tile--below-the-fold-content{max-height:0;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile)[expanded] ::slotted(cds-tile-below-the-fold-content){opacity:1;transition:110ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile)[with-interactive]{cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile)[with-interactive]:hover{background-color:var(--cds-layer)}:host(cds-expandable-tile)[with-interactive]:focus{outline:0}:host(cds-expandable-tile):not([with-interactive]) .cds--tile__chevron{background:0 0;border:none;outline:0;cursor:pointer}",
+  ".cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--tile-group html,:host(cds-tile-group) html{font-size:100%}.cds--tile-group body,:host(cds-tile-group) body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--tile-group code,:host(cds-tile-group) code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--tile-group strong,:host(cds-tile-group) strong{font-weight:600}.cds--tile,:host(cds-expandable-tile),:host(cds-tile){position:relative;display:block;min-width:8rem;min-height:4rem;padding:1rem;background-color:var(--cds-layer);outline:2px solid transparent;outline-offset:-2px;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--tile:focus,:focus:host(cds-expandable-tile),:focus:host(cds-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile:focus,:focus:host(cds-expandable-tile),:focus:host(cds-tile){outline-style:dotted}}.cds--tile--light,:host(cds-expandable-tile[color-scheme=light]),:host(cds-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds--tile--clickable,.cds--tile--selectable,:host(cds-clickable-tile) .cds--tile--clickable{cursor:pointer;transition:150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--clickable:hover,.cds--tile--selectable:hover{background:var(--cds-layer-hover)}.cds--tile--clickable,:host(cds-clickable-tile) .cds--tile--clickable{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable html{font-size:100%}.cds--tile--clickable body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--tile--clickable code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--tile--clickable strong{font-weight:600}.cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile--clickable:focus{outline-style:dotted}}.cds--tile--clickable:focus .cds--tile__checkmark,.cds--tile--clickable:hover .cds--tile__checkmark{opacity:1}.cds--tile--expandable::-moz-focus-inner,:host(cds-expandable-tile)::-moz-focus-inner{border:0}.cds--tile--clickable:active,.cds--tile--clickable:hover,.cds--tile--clickable:visited,.cds--tile--clickable:visited:hover{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable.cds--link--disabled,.cds--tile--clickable:hover.cds--link--disabled{display:block;padding:1rem;background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--tile--selectable{padding-right:3rem;border:1px solid transparent}.cds--tile__checkmark{position:absolute;top:1rem;right:1rem;height:1rem;border:none;background:0 0;opacity:0;transition:110ms cubic-bezier(.2,0,.38,.9)}.cds--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-secondary,#525252)}.cds--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile__checkmark:focus{outline-style:dotted}}.cds--tile__checkmark--persistent{opacity:1}.cds--tile__chevron,:host(cds-selectable-tile) .cds--tile__chevron{position:absolute;right:0;bottom:0;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center}.cds--tile__chevron svg{fill:var(--cds-icon-primary,#161616);transform-origin:center;transition:110ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--tile__chevron svg{transition:none}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile__chevron svg{fill:ButtonText}}.cds--tile__chevron--interactive{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:absolute;right:0;bottom:0;display:flex;width:3rem;height:3rem;align-items:center;justify-content:center}.cds--tile__chevron--interactive *,.cds--tile__chevron--interactive ::after,.cds--tile__chevron--interactive ::before{box-sizing:inherit}.cds--tile__chevron--interactive::-moz-focus-inner{border:0}.cds--tile__chevron--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.cds--tile__chevron--interactive:hover{background-color:var(--cds-layer-hover);cursor:pointer}.cds--tile--expandable,:host(cds-expandable-tile){position:relative;overflow:hidden;width:100%;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left;transition:max-height 150ms cubic-bezier(.2,0,.38,.9);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--tile--expandable:hover,:hover:host(cds-expandable-tile){background:var(--cds-layer-hover)}.cds--tile--expandable--interactive:host(cds-expandable-tile),.cds--tile--expandable.cds--tile--expandable--interactive{cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--expandable--interactive:hover:host(cds-expandable-tile),.cds--tile--expandable.cds--tile--expandable--interactive:hover{background-color:var(--cds-layer)}.cds--tile--expandable--interactive:focus:host(cds-expandable-tile),.cds--tile--expandable.cds--tile--expandable--interactive:focus{outline:0}.cds--tile--expandable--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile--expandable--interactive:focus{outline-style:dotted}}.cds--tile-content__above-the-fold,:host(cds-expandable-tile) ::slotted(cds-tile-above-the-fold-content){display:block}.cds--tile-content__below-the-fold,:host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content){display:block;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:hidden}.cds--tile--is-expanded,:host(cds-expandable-tile[expanded]){overflow:visible;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile--is-expanded .cds--tile__chevron svg,:host(cds-expandable-tile[expanded]) .cds--tile__chevron svg{transform:rotate(180deg)}.cds--tile--is-expanded .cds--tile-content__below-the-fold,.cds--tile--is-expanded :host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile[expanded]) .cds--tile-content__below-the-fold,:host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content){opacity:1;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:inherit}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tile--is-expanded .cds--tile-content__below-the-fold,.cds--tile--is-expanded :host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile[expanded]) .cds--tile-content__below-the-fold,:host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content){overflow-y:auto}}}.cds--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}.cds--tile--is-selected .cds--tile__checkmark{opacity:1}.cds--tile--is-selected .cds--tile__checkmark svg{fill:var(--cds-icon-primary,#161616)}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile--is-selected .cds--tile__checkmark svg{fill:ButtonText}}.cds--tile-content{width:100%;height:100%}.cds--tile-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline-style:dotted}}.cds--tile--disabled.cds--tile--selectable{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--tile--disabled.cds--tile--selectable.cds--tile--light,.cds--tile--disabled.cds--tile--selectable:host(cds-expandable-tile[color-scheme=light]),.cds--tile--disabled.cds--tile--selectable:host(cds-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds--tile--disabled.cds--tile--is-selected{border-color:var(--cds-button-disabled,#c6c6c6)}.cds--tile--disabled .cds--tile__checkmark svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tile--is-selected .cds--tile__checkmark svg,.cds--tile__checkmark svg,.cds--tile__chevron svg{fill:ButtonText}}.cds--link,:host(cds-tile) ::slotted(.cds--link){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:inline-flex;color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline:0;text-decoration:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.cds--link *,.cds--link ::after,.cds--link ::before,:host(cds-tile) ::slotted(.cds--link) *,:host(cds-tile) ::slotted(.cds--link) ::after,:host(cds-tile) ::slotted(.cds--link) ::before{box-sizing:inherit}.cds--link:hover,:host(cds-tile) :hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce));text-decoration:underline}.cds--link:active,.cds--link:active:visited,.cds--link:active:visited:hover,:host(cds-tile) :active::slotted(.cds--link){color:var(--cds-text-primary,#161616);text-decoration:underline}.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline:1px solid var(--cds-focus,#0f62fe);outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe))}@media screen and (prefers-contrast){.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline-style:dotted}}.cds--link:visited,:host(cds-tile) :visited::slotted(.cds--link){color:var(--cds-link-primary,#0f62fe)}.cds--link:visited:hover,:host(cds-tile) :visited:hover::slotted(.cds--link){color:var(--cds-link-primary-hover,#0043ce)}.cds--link--disabled,.cds--link--disabled:hover{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;font-weight:400;text-decoration:none}.cds--link--disabled *,.cds--link--disabled ::after,.cds--link--disabled ::before,.cds--link--disabled:hover *,.cds--link--disabled:hover ::after,.cds--link--disabled:hover ::before{box-sizing:inherit}.cds--link.cds--link--visited:visited,:host(cds-tile) .cds--link--visited:visited::slotted(.cds--link){color:var(--cds-link-visited,#8a3ffc)}.cds--link.cds--link--visited:visited:hover,:host(cds-tile) .cds--link--visited:visited:hover::slotted(.cds--link){color:var(--cds-link-primary-hover,#0043ce)}.cds--link.cds--link--inline,:host(cds-tile) .cds--link--inline::slotted(.cds--link){display:inline;text-decoration:underline}.cds--link.cds--link--inline:focus,.cds--link.cds--link--inline:visited,:host(cds-tile) .cds--link--inline:focus::slotted(.cds--link),:host(cds-tile) .cds--link--inline:visited::slotted(.cds--link){text-decoration:none}.cds--link--disabled.cds--link--inline{text-decoration:underline}.cds--link--sm,.cds--link--sm.cds--link--disabled:hover{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px)}.cds--link--lg,.cds--link--lg.cds--link--disabled:hover{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);line-height:var(--cds-body-compact-02-line-height,1.375);letter-spacing:var(--cds-body-compact-02-letter-spacing,0)}.cds--link__icon{display:inline-flex;align-self:center;margin-left:.5rem}@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;left:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;left:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host(cds-tile){--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}:host(cds-tile-group){background:0 0}:host(cds-tile-group) fieldset{border:none}:host(cds-clickable-tile){--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6);display:grid;outline:0}:host(cds-clickable-tile) .cds--link--disabled{display:block}:host(cds-clickable-tile) .cds--tile,:host(cds-clickable-tile) :host(cds-expandable-tile),:host(cds-clickable-tile) :host(cds-tile){padding:1rem;outline:2px solid transparent}:host(cds-clickable-tile) .cds--tile--clickable{transition:150ms cubic-bezier(.2,0,.38,.9)}:host(cds-clickable-tile) .cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-clickable-tile) .cds--tile--clickable:focus{outline-style:dotted}}:host(cds-clickable-tile):hover .cds--tile--clickable{color:inherit}:host(cds-radio-tile){--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6);display:block;outline:0;margin-bottom:.5rem}:host(cds-selectable-tile){--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6);display:content;outline:0}:host(cds-radio-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark,:host(cds-selectable-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark{opacity:1}:host(cds-expandable-tile){--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}:host(cds-expandable-tile) .cds-ce--expandable-tile--below-the-fold-content{max-height:0;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content){opacity:1;transition:110ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[with-interactive]){cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[with-interactive]):hover{background-color:var(--cds-layer)}:host(cds-expandable-tile[with-interactive]):focus{outline:0}:host(cds-expandable-tile:not([with-interactive])) .cds--tile__chevron{background:0 0;border:none;outline:0;cursor:pointer}",
 ]);

package/es/components/tile/tile.d.ts

@@ -14,7 +14,7 @@ export { TILE_COLOR_SCHEME };
  *
  * @element cds-tile
  */
-declare class BXTile extends LitElement {
+declare class CDSTile extends LitElement {
     /**
      * The color scheme.
      */
@@ -23,6 +23,6 @@ declare class BXTile extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }
-export default BXTile;
+export default CDSTile;
 
 //# sourceMappingURL=tile.d.ts.map

package/es/components/tile/tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;GAIG;AACH,cACM,MAAO,SAAQ,UAAU;IAC7B;;OAEG;IAEH,WAAW,oBAA6B;IAExC,OAAO;IAUP,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,MAAM,CAAC","file":"tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-tile\n */\n@customElement(`${prefix}-tile`)\nclass BXTile extends LitElement {\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  updated() {\n    const anchorTag = this.querySelector('a');\n\n    if (anchorTag) {\n      anchorTag?.classList.add(`${prefix}--link`);\n      anchorTag.before(document.createElement('br'));\n      anchorTag.before(document.createElement('br'));\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTile;\n"]}
+{"version":3,"sources":["components/tile/tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG3C,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;GAIG;AACH,cACM,OAAQ,SAAQ,UAAU;IAC9B;;OAEG;IAEH,WAAW,oBAA6B;IAExC,OAAO;IAUP,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC","file":"tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-tile\n */\n@customElement(`${prefix}-tile`)\nclass CDSTile extends LitElement {\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  updated() {\n    const anchorTag = this.querySelector('a');\n\n    if (anchorTag) {\n      anchorTag?.classList.add(`${prefix}--link`);\n      anchorTag.before(document.createElement('br'));\n      anchorTag.before(document.createElement('br'));\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTile;\n"]}

package/es/components/tile/tile.js

@@ -22,15 +22,15 @@ export { TILE_COLOR_SCHEME };
  *
  * @element cds-tile
  */
-let BXTile = _decorate([customElement(`${prefix}-tile`)], function (_initialize, _LitElement) {
-  class BXTile extends _LitElement {
+let CDSTile = _decorate([customElement(`${prefix}-tile`)], function (_initialize, _LitElement) {
+  class CDSTile extends _LitElement {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXTile,
+    F: CDSTile,
     d: [{
       kind: "field",
       decorators: [property({
@@ -73,5 +73,5 @@ let BXTile = _decorate([customElement(`${prefix}-tile`)], function (_initialize,
     }]
   };
 }, LitElement);
-export default BXTile;
+export default CDSTile;
 //# sourceMappingURL=tile.js.map

package/es/components/tile/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","names":["LitElement","html","property","customElement","prefix","TILE_COLOR_SCHEME","styles","BXTile","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","attribute","reflect","key","value","REGULAR","updated","anchorTag","querySelector","classList","add","before","document","createElement","render","_t","_","static"],"sources":["components/tile/tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-tile\n */\n@customElement(`${prefix}-tile`)\nclass BXTile extends LitElement {\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  updated() {\n    const anchorTag = this.querySelector('a');\n\n    if (anchorTag) {\n      anchorTag?.classList.add(`${prefix}--link`);\n      anchorTag.before(document.createElement('br'));\n      anchorTag.before(document.createElement('br'));\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTile;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;AAEhC,SAASD,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA;AAJA,IAMME,MAAM,GAAAC,SAAA,EADXL,aAAa,CAAE,GAAEC,MAAO,OAAM,CAAC,aAAAK,WAAA,EAAAC,WAAA;EAAhC,MACMH,MAAM,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAsBhC;EAAC;IAAAI,CAAA,EAtBKN,MAAM;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAITd,QAAQ,CAAC;QAAEe,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACzCf,iBAAiB,CAACgB,OAAO;MAAA;IAAA;MAAAN,IAAA;MAAAI,GAAA;MAAAC,KAAA;MAJvC;AACF;AACA;;MAIE,SAAAE,QAAA,EAAU;QACR,MAAMC,SAAS,GAAG,IAAI,CAACC,aAAa,CAAC,GAAG,CAAC;QAEzC,IAAID,SAAS,EAAE;UACbA,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEE,SAAS,CAACC,GAAG,CAAE,GAAEtB,MAAO,QAAO,CAAC;UAC3CmB,SAAS,CAACI,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC,IAAI,CAAC,CAAC;UAC9CN,SAAS,CAACI,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC,IAAI,CAAC,CAAC;QAChD;MACF;IAAC;MAAAd,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAED,SAAAU,OAAA,EAAS;QACP,OAAO7B,IAAI,CAAA8B,EAAA,KAAAA,EAAA,GAAAC,CAAC,iBAAe;MAC7B;IAAC;MAAAjB,IAAA;MAAAkB,MAAA;MAAAd,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GArBHN,UAAU;AAwB/B,eAAeO,MAAM"}
+{"version":3,"file":"tile.js","names":["LitElement","html","property","customElement","prefix","TILE_COLOR_SCHEME","styles","CDSTile","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","attribute","reflect","key","value","REGULAR","updated","anchorTag","querySelector","classList","add","before","document","createElement","render","_t","_","static"],"sources":["components/tile/tile.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-tile\n */\n@customElement(`${prefix}-tile`)\nclass CDSTile extends LitElement {\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  updated() {\n    const anchorTag = this.querySelector('a');\n\n    if (anchorTag) {\n      anchorTag?.classList.add(`${prefix}--link`);\n      anchorTag.before(document.createElement('br'));\n      anchorTag.before(document.createElement('br'));\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTile;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;AAEhC,SAASD,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA;AAJA,IAMME,OAAO,GAAAC,SAAA,EADZL,aAAa,CAAE,GAAEC,MAAO,OAAM,CAAC,aAAAK,WAAA,EAAAC,WAAA;EAAhC,MACMH,OAAO,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAsBjC;EAAC;IAAAI,CAAA,EAtBKN,OAAO;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIVd,QAAQ,CAAC;QAAEe,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACzCf,iBAAiB,CAACgB,OAAO;MAAA;IAAA;MAAAN,IAAA;MAAAI,GAAA;MAAAC,KAAA;MAJvC;AACF;AACA;;MAIE,SAAAE,QAAA,EAAU;QACR,MAAMC,SAAS,GAAG,IAAI,CAACC,aAAa,CAAC,GAAG,CAAC;QAEzC,IAAID,SAAS,EAAE;UACbA,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEE,SAAS,CAACC,GAAG,CAAE,GAAEtB,MAAO,QAAO,CAAC;UAC3CmB,SAAS,CAACI,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC,IAAI,CAAC,CAAC;UAC9CN,SAAS,CAACI,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC,IAAI,CAAC,CAAC;QAChD;MACF;IAAC;MAAAd,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAED,SAAAU,OAAA,EAAS;QACP,OAAO7B,IAAI,CAAA8B,EAAA,KAAAA,EAAA,GAAAC,CAAC,iBAAe;MAC7B;IAAC;MAAAjB,IAAA;MAAAkB,MAAA;MAAAd,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GArBFN,UAAU;AAwBhC,eAAeO,OAAO"}