@carbon/web-components 2.52.0 → 2.53.0

package/es/components/shape-indicator/defs.js

@@ -62,7 +62,7 @@ let SHAPE_INDICATOR_KIND = /* @__PURE__ */ function(SHAPE_INDICATOR_KIND) {
 	SHAPE_INDICATOR_KIND["DRAFT"] = "draft";
 	return SHAPE_INDICATOR_KIND;
 }({});
-
 //#endregion
 export { SHAPE_INDICATOR_KIND };
+
 //# sourceMappingURL=defs.js.map

package/es/components/shape-indicator/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/shape-indicator/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\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\n/**\n * Shape indicator kinds.\n */\nexport enum SHAPE_INDICATOR_KIND {\n  /**\n   * Failed status\n   */\n  FAILED = 'failed',\n  /**\n   * Critical status\n   */\n  CRITICAL = 'critical',\n  /**\n   * High severity\n   */\n  HIGH = 'high',\n  /**\n   * Medium severity\n   */\n  MEDIUM = 'medium',\n  /**\n   * Low severity\n   */\n  LOW = 'low',\n  /**\n   * Cautious status\n   */\n  CAUTIOUS = 'cautious',\n  /**\n   * Undefined status\n   */\n  UNDEFINED = 'undefined',\n  /**\n   * Stable status\n   */\n  STABLE = 'stable',\n  /**\n   * Informative status\n   */\n  INFORMATIVE = 'informative',\n  /**\n   * Incomplete status\n   */\n  INCOMPLETE = 'incomplete',\n  /**\n   * Draft status\n   */\n  DRAFT = 'draft',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,sEAAL;;;;AAIL;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/shape-indicator/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\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\n/**\n * Shape indicator kinds.\n */\nexport enum SHAPE_INDICATOR_KIND {\n  /**\n   * Failed status\n   */\n  FAILED = 'failed',\n  /**\n   * Critical status\n   */\n  CRITICAL = 'critical',\n  /**\n   * High severity\n   */\n  HIGH = 'high',\n  /**\n   * Medium severity\n   */\n  MEDIUM = 'medium',\n  /**\n   * Low severity\n   */\n  LOW = 'low',\n  /**\n   * Cautious status\n   */\n  CAUTIOUS = 'cautious',\n  /**\n   * Undefined status\n   */\n  UNDEFINED = 'undefined',\n  /**\n   * Stable status\n   */\n  STABLE = 'stable',\n  /**\n   * Informative status\n   */\n  INFORMATIVE = 'informative',\n  /**\n   * Incomplete status\n   */\n  INCOMPLETE = 'incomplete',\n  /**\n   * Draft status\n   */\n  DRAFT = 'draft',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,YAAA;;;;AAIA,sBAAA,cAAA;;;;AAIA,sBAAA,UAAA;;;;AAIA,sBAAA,YAAA;;;;AAIA,sBAAA,SAAA;;;;AAIA,sBAAA,cAAA;;;;AAIA,sBAAA,eAAA;;;;AAIA,sBAAA,YAAA;;;;AAIA,sBAAA,iBAAA;;;;AAIA,sBAAA,gBAAA;;;;AAIA,sBAAA,WAAA;;KACD"}

package/es/components/shape-indicator/shape-indicator.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import shape_indicator_default$1 from "./shape-indicator.scss.js";
-import { SHAPE_INDICATOR_KIND } from "./defs.js";
+import "./defs.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import Critical from "@carbon/icons/es/critical/index.js";
@@ -20,7 +20,6 @@ import LowSeverity from "@carbon/icons/es/low-severity/index.js";
 import Caution from "@carbon/icons/es/caution/index.js";
 import CircleFill from "@carbon/icons/es/circle-fill/index.js";
 import CircleStroke from "@carbon/icons/es/circle-stroke/index.js";
-
 //#region src/components/shape-indicator/shape-indicator.ts
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -50,17 +49,17 @@ const IncompleteIcon = `<svg
 * Map of shape indicators to their corresponding icons
 */
 const shapeMap = {
-	[SHAPE_INDICATOR_KIND.FAILED]: Critical,
-	[SHAPE_INDICATOR_KIND.CRITICAL]: CriticalSeverity,
-	[SHAPE_INDICATOR_KIND.HIGH]: Caution,
-	[SHAPE_INDICATOR_KIND.MEDIUM]: DiamondFill,
-	[SHAPE_INDICATOR_KIND.LOW]: LowSeverity,
-	[SHAPE_INDICATOR_KIND.CAUTIOUS]: Caution,
-	[SHAPE_INDICATOR_KIND.UNDEFINED]: DiamondFill,
-	[SHAPE_INDICATOR_KIND.STABLE]: CircleFill,
-	[SHAPE_INDICATOR_KIND.INFORMATIVE]: LowSeverity,
-	[SHAPE_INDICATOR_KIND.INCOMPLETE]: IncompleteIcon,
-	[SHAPE_INDICATOR_KIND.DRAFT]: CircleStroke
+	["failed"]: Critical,
+	["critical"]: CriticalSeverity,
+	["high"]: Caution,
+	["medium"]: DiamondFill,
+	["low"]: LowSeverity,
+	["cautious"]: Caution,
+	["undefined"]: DiamondFill,
+	["stable"]: CircleFill,
+	["informative"]: LowSeverity,
+	["incomplete"]: IncompleteIcon,
+	["draft"]: CircleStroke
 };
 /**
 * Shape Indicator.
@@ -84,9 +83,9 @@ let CDSShapeIndicator = class CDSShapeIndicator extends LitElement {
 __decorate([property({ attribute: "text-size" })], CDSShapeIndicator.prototype, "textSize", void 0);
 __decorate([property()], CDSShapeIndicator.prototype, "label", void 0);
 __decorate([property()], CDSShapeIndicator.prototype, "kind", void 0);
-CDSShapeIndicator = __decorate([carbonElement(`${prefix}-shape-indicator`)], CDSShapeIndicator);
+CDSShapeIndicator = __decorate([carbonElement(`cds-shape-indicator`)], CDSShapeIndicator);
 var shape_indicator_default = CDSShapeIndicator;
-
 //#endregion
 export { shape_indicator_default as default };
+
 //# sourceMappingURL=shape-indicator.js.map

package/es/components/shape-indicator/shape-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape-indicator.js","names":["styles","customElement"],"sources":["../../../src/components/shape-indicator/shape-indicator.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './shape-indicator.scss?lit';\n\n// Import Carbon icons\nimport Critical from '@carbon/icons/es/critical/index.js';\nimport CriticalSeverity from '@carbon/icons/es/critical-severity/index.js';\nimport DiamondFill from '@carbon/icons/es/diamond-fill/index.js';\nimport LowSeverity from '@carbon/icons/es/low-severity/index.js';\nimport Caution from '@carbon/icons/es/caution/index.js';\nimport CircleFill from '@carbon/icons/es/circle-fill/index.js';\nimport CircleStroke from '@carbon/icons/es/circle-stroke/index.js';\nimport { SHAPE_INDICATOR_KIND } from './defs';\n\n/**\n * Custom incomplete icon implementation\n */\nconst IncompleteIcon = `<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"16\"\n  height=\"16\"\n  fill=\"none\"\n  aria-hidden=\"true\">\n  <path\n    fill=\"#fff\"\n    fillOpacity=\"0.01\"\n    d=\"M0 0h16v16H0z\"\n    style=\"mix-blend-mode: multiply;\" />\n  <path\n    fill=\"#161616\"\n    d=\"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z\" />\n</svg>`;\n\n/**\n * Map of shape indicators to their corresponding icons\n */\nconst shapeMap = {\n  [SHAPE_INDICATOR_KIND.FAILED]: Critical,\n  [SHAPE_INDICATOR_KIND.CRITICAL]: CriticalSeverity,\n  [SHAPE_INDICATOR_KIND.HIGH]: Caution,\n  [SHAPE_INDICATOR_KIND.MEDIUM]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.LOW]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.CAUTIOUS]: Caution,\n  [SHAPE_INDICATOR_KIND.UNDEFINED]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.STABLE]: CircleFill,\n  [SHAPE_INDICATOR_KIND.INFORMATIVE]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.INCOMPLETE]: IncompleteIcon,\n  [SHAPE_INDICATOR_KIND.DRAFT]: CircleStroke,\n};\n\n/**\n * Shape Indicator.\n * @element cds-shape-indicator\n */\n@customElement(`${prefix}-shape-indicator`)\nclass CDSShapeIndicator extends LitElement {\n  /**\n   * Shape indicator size (12 or 14)\n   */\n  @property({ attribute: 'text-size' })\n  textSize = 12;\n\n  /**\n   * Label next to the shape.\n   */\n  @property()\n  label!: string;\n\n  /**\n   * Shape Indicator kind\n   */\n  @property()\n  kind!: SHAPE_INDICATOR_KIND;\n\n  render() {\n    const shape = shapeMap[this.kind];\n\n    if (!shape) {\n      return null;\n    }\n\n    // Handle custom SVG string vs Carbon icon descriptor\n    if (typeof shape === 'string') {\n      return html` ${iconLoader(null, {}, shape)} ${this.label} `;\n    }\n\n    return html` ${iconLoader(shape)} ${this.label} `;\n  }\n\n  /**\n   * Styles are imported from the SCSS file\n   */\n  static styles = styles;\n}\n\nexport default CDSShapeIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;AAmBvB,MAAM,WAAW;EACd,qBAAqB,SAAS;EAC9B,qBAAqB,WAAW;EAChC,qBAAqB,OAAO;EAC5B,qBAAqB,SAAS;EAC9B,qBAAqB,MAAM;EAC3B,qBAAqB,WAAW;EAChC,qBAAqB,YAAY;EACjC,qBAAqB,SAAS;EAC9B,qBAAqB,cAAc;EACnC,qBAAqB,aAAa;EAClC,qBAAqB,QAAQ;CAC/B;;;;;AAMD,8BACM,0BAA0B,WAAW;;;kBAK9B;;CAcX,SAAS;EACP,MAAM,QAAQ,SAAS,KAAK;AAE5B,MAAI,CAAC,MACH,QAAO;AAIT,MAAI,OAAO,UAAU,SACnB,QAAO,IAAI,IAAI,WAAW,MAAM,EAAE,EAAE,MAAM,CAAC,GAAG,KAAK,MAAM;AAG3D,SAAO,IAAI,IAAI,WAAW,MAAM,CAAC,GAAG,KAAK,MAAM;;;gBAMjCA;;;YAjCf,SAAS,EAAE,WAAW,aAAa,CAAC;YAMpC,UAAU;YAMV,UAAU;gCAjBZC,cAAc,GAAG,OAAO,kBAAkB;AAyC3C,8BAAe"}
+{"version":3,"file":"shape-indicator.js","names":["styles","customElement"],"sources":["../../../src/components/shape-indicator/shape-indicator.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './shape-indicator.scss?lit';\n\n// Import Carbon icons\nimport Critical from '@carbon/icons/es/critical/index.js';\nimport CriticalSeverity from '@carbon/icons/es/critical-severity/index.js';\nimport DiamondFill from '@carbon/icons/es/diamond-fill/index.js';\nimport LowSeverity from '@carbon/icons/es/low-severity/index.js';\nimport Caution from '@carbon/icons/es/caution/index.js';\nimport CircleFill from '@carbon/icons/es/circle-fill/index.js';\nimport CircleStroke from '@carbon/icons/es/circle-stroke/index.js';\nimport { SHAPE_INDICATOR_KIND } from './defs';\n\n/**\n * Custom incomplete icon implementation\n */\nconst IncompleteIcon = `<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"16\"\n  height=\"16\"\n  fill=\"none\"\n  aria-hidden=\"true\">\n  <path\n    fill=\"#fff\"\n    fillOpacity=\"0.01\"\n    d=\"M0 0h16v16H0z\"\n    style=\"mix-blend-mode: multiply;\" />\n  <path\n    fill=\"#161616\"\n    d=\"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z\" />\n</svg>`;\n\n/**\n * Map of shape indicators to their corresponding icons\n */\nconst shapeMap = {\n  [SHAPE_INDICATOR_KIND.FAILED]: Critical,\n  [SHAPE_INDICATOR_KIND.CRITICAL]: CriticalSeverity,\n  [SHAPE_INDICATOR_KIND.HIGH]: Caution,\n  [SHAPE_INDICATOR_KIND.MEDIUM]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.LOW]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.CAUTIOUS]: Caution,\n  [SHAPE_INDICATOR_KIND.UNDEFINED]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.STABLE]: CircleFill,\n  [SHAPE_INDICATOR_KIND.INFORMATIVE]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.INCOMPLETE]: IncompleteIcon,\n  [SHAPE_INDICATOR_KIND.DRAFT]: CircleStroke,\n};\n\n/**\n * Shape Indicator.\n * @element cds-shape-indicator\n */\n@customElement(`${prefix}-shape-indicator`)\nclass CDSShapeIndicator extends LitElement {\n  /**\n   * Shape indicator size (12 or 14)\n   */\n  @property({ attribute: 'text-size' })\n  textSize = 12;\n\n  /**\n   * Label next to the shape.\n   */\n  @property()\n  label!: string;\n\n  /**\n   * Shape Indicator kind\n   */\n  @property()\n  kind!: SHAPE_INDICATOR_KIND;\n\n  render() {\n    const shape = shapeMap[this.kind];\n\n    if (!shape) {\n      return null;\n    }\n\n    // Handle custom SVG string vs Carbon icon descriptor\n    if (typeof shape === 'string') {\n      return html` ${iconLoader(null, {}, shape)} ${this.label} `;\n    }\n\n    return html` ${iconLoader(shape)} ${this.label} `;\n  }\n\n  /**\n   * Styles are imported from the SCSS file\n   */\n  static styles = styles;\n}\n\nexport default CDSShapeIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;AAmBvB,MAAM,WAAW;aACgB;eACE;WACJ;aACE;UACH;eACK;gBACC;aACH;kBACK;iBACD;YACL;CAC/B;;;;;AAMD,IAAA,oBAAA,MACM,0BAA0B,WAAW;;;kBAK9B;;CAcX,SAAS;EACP,MAAM,QAAQ,SAAS,KAAK;AAE5B,MAAI,CAAC,MACH,QAAO;AAIT,MAAI,OAAO,UAAU,SACnB,QAAO,IAAI,IAAI,WAAW,MAAM,EAAE,EAAE,MAAM,CAAC,GAAG,KAAK,MAAM;AAG3D,SAAO,IAAI,IAAI,WAAW,MAAM,CAAC,GAAG,KAAK,MAAM;;;gBAMjCA;;;YAjCf,SAAS,EAAE,WAAW,aAAa,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAMpC,UAAU,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAMV,UAAU,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;gCAjBZC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AAyC3C,IAAA,0BAAe"}

package/es/components/shape-indicator/shape-indicator.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/shape-indicator/shape-indicator.scss?lit
 var shape_indicator_default = css([".cds--shape-indicator,:host(cds-shape-indicator){color:var(--cds-text-secondary,#525252);display:flex;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333)}.cds--shape-indicator svg,:host(cds-shape-indicator) svg{align-self:center;margin-inline-end:.5rem}.cds--shape-indicator--14,:host(cds-shape-indicator[text-size=\"14\"]){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds--shape-indicator--failed,:host(cds-shape-indicator[kind=failed]) svg{fill:var(--cds-status-red,#da1e28)}.cds--shape-indicator--critical,:host(cds-shape-indicator[kind=critical]) svg{fill:var(--cds-status-red,#da1e28)}.cds--shape-indicator--high,:host(cds-shape-indicator[kind=high]) svg{fill:var(--cds-status-red,#da1e28)}.cds--shape-indicator--medium,:host(cds-shape-indicator[kind=medium]) svg{fill:var(--cds-status-orange,#ff832b)}.cds--shape-indicator--medium path:first-of-type,:host(cds-shape-indicator[kind=medium]) svg path:first-of-type{fill:var(--cds-status-orange-outline,#ba4e00)}.cds--shape-indicator--low,:host(cds-shape-indicator[kind=low]) svg{fill:var(--cds-status-yellow,#f1c21b)}.cds--shape-indicator--low path:nth-of-type(2),:host(cds-shape-indicator[kind=low]) svg path:nth-of-type(2){fill:var(--cds-status-yellow-outline,#8e6a00)}.cds--shape-indicator--cautious,:host(cds-shape-indicator[kind=cautious]) svg{fill:var(--cds-status-yellow,#f1c21b)}.cds--shape-indicator--cautious path:first-of-type,:host(cds-shape-indicator[kind=cautious]) svg path:first-of-type{fill:var(--cds-status-yellow-outline,#8e6a00)}.cds--shape-indicator--undefined,:host(cds-shape-indicator[kind=undefined]) svg{fill:var(--cds-status-purple,#8a3ffc)}.cds--shape-indicator--stable,:host(cds-shape-indicator[kind=stable]) svg{fill:var(--cds-status-green,#24a148)}.cds--shape-indicator--informative,:host(cds-shape-indicator[kind=informative]) svg{fill:var(--cds-status-blue,#0043ce)}.cds--shape-indicator--incomplete path:nth-of-type(2),:host(cds-shape-indicator[kind=incomplete]) svg path:nth-of-type(2){fill:var(--cds-status-blue,#0043ce)}.cds--shape-indicator--draft,:host(cds-shape-indicator[kind=draft]) svg{fill:var(--cds-status-gray,#6f6f6f)}"]);
-
 //#endregion
 export { shape_indicator_default as default };
+
 //# sourceMappingURL=shape-indicator.scss.js.map

package/es/components/side-panel/defs.js

@@ -45,7 +45,7 @@ let SIDE_PANEL_PLACEMENT = /* @__PURE__ */ function(SIDE_PANEL_PLACEMENT) {
 	SIDE_PANEL_PLACEMENT["LEFT"] = "left";
 	return SIDE_PANEL_PLACEMENT;
 }({});
-
 //#endregion
 export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE };
+
 //# sourceMappingURL=defs.js.map

package/es/components/side-panel/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,4DAAL;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;AAGF,IAAY,sEAAL;;AAEL;;AAGA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,kBAAL,yBAAA,iBAAA;;;;AAIL,iBAAA,iBAAA;;;;AAKA,iBAAA,WAAA;;;;AAKA,iBAAA,YAAA;;;;AAKA,iBAAA,WAAA;;;;AAKA,iBAAA,uBAAA;;KACD;AAED,IAAY,uBAAL,yBAAA,sBAAA;;AAEL,sBAAA,WAAA;;AAGA,sBAAA,UAAA;;KACD"}

package/es/components/side-panel/side-panel.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix, selectorTabbable } from "../../globals/settings.js";
+import { selectorTabbable } from "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -21,7 +21,6 @@ import { property, query, queryAssignedElements, state } from "lit/decorators.js
 import Close20 from "@carbon/icons/es/close/20.js";
 import ArrowLeft16 from "@carbon/icons/es/arrow--left/16.js";
 import { moderate02 } from "@carbon/motion";
-
 //#region src/components/side-panel/side-panel.ts
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -31,8 +30,8 @@ import { moderate02 } from "@carbon/motion";
 */
 const PRECEDING = Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 const FOLLOWING = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
-const blockClass = `${prefix}--side-panel`;
-const blockClassActionSet = `${prefix}--action-set`;
+const blockClass = `cds--side-panel`;
+const blockClassActionSet = `cds--action-set`;
 /**
 * Observes resize of the given element with the given resize observer.
 *
@@ -146,11 +145,11 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 			else this._isOpen = this.open;
 		};
 		this._checkUpdateIconButtonSizes = () => {
-			const slug = this.querySelector(`${prefix}-slug`);
+			const slug = this.querySelector(`cds-slug`);
 			const otherButtons = this?.shadowRoot?.querySelectorAll("#nav-back-button, #close-button");
 			let iconButtonSize = "sm";
 			if (slug || otherButtons?.length) {
-				if ((this?.querySelectorAll?.(`${prefix}-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
+				if ((this?.querySelectorAll?.(`cds-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
 			}
 			if (slug) slug?.setAttribute("size", iconButtonSize);
 			if (otherButtons) [...otherButtons].forEach((btn) => {
@@ -200,10 +199,10 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this.includeOverlay = false;
 		this.navigationBackIconDescription = "Back";
 		this.open = false;
-		this.placement = SIDE_PANEL_PLACEMENT.RIGHT;
+		this.placement = "right";
 		this.preventCloseOnClickOutside = false;
 		this.selectorPageContent = "";
-		this.size = SIDE_PANEL_SIZE.MEDIUM;
+		this.size = "md";
 		this.slideIn = false;
 	}
 	/**
@@ -249,10 +248,12 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 	}
 	_handleSlugChange(e) {
 		this._checkUpdateIconButtonSizes();
-		this._hasSlug = e.target.assignedElements().length > 0;
+		const childItems = e.target.assignedElements();
+		this._hasSlug = childItems.length > 0;
 	}
 	_handleSubtitleChange(e) {
-		this._hasSubtitle = (e.target?.assignedElements()).length > 0;
+		const subtitle = e.target?.assignedElements();
+		this._hasSubtitle = subtitle.length > 0;
 	}
 	_handleActionToolbarChange(e) {
 		const toolbarActions = e.target?.assignedElements();
@@ -324,7 +325,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
               aria-label=${navigationBackIconDescription}
               kind="ghost"
               size="sm"
-              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}
+              class=${`cds--btn ${blockClass}__navigation-back-button`}
               @click=${this._handleNavigateBack}>
               ${iconLoader(ArrowLeft16, { slot: "icon" })}
               <span slot="tooltip-content">
@@ -481,19 +482,19 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 	* Cancellation of this event stops the user-initiated action of closing this side-panel.
 	*/
 	static get eventBeforeClose() {
-		return `${prefix}-side-panel-beingclosed`;
+		return `cds-side-panel-beingclosed`;
 	}
 	/**
 	* The name of the custom event fired after this side-panel is closed upon a user gesture.
 	*/
 	static get eventClose() {
-		return `${prefix}-side-panel-closed`;
+		return `cds-side-panel-closed`;
 	}
 	/**
 	* The name of the custom event fired on clicking the navigate back button
 	*/
 	static get eventNavigateBack() {
-		return `${prefix}-side-panel-navigate-back`;
+		return `cds-side-panel-navigate-back`;
 	}
 };
 __decorate([query("#start-sentinel")], CDSSidePanel.prototype, "_startSentinelNode", void 0);
@@ -506,7 +507,7 @@ __decorate([query(`.${blockClass}__subtitle-text`)], CDSSidePanel.prototype, "_s
 __decorate([query(`.${blockClass}__inner-content`)], CDSSidePanel.prototype, "_innerContent", void 0);
 __decorate([queryAssignedElements({
 	slot: "actions",
-	selector: `${prefix}-button`
+	selector: `cds-button`
 })], CDSSidePanel.prototype, "_actions", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_isOpen", void 0);
@@ -584,9 +585,9 @@ __decorate([property({
 	reflect: false,
 	type: String
 })], CDSSidePanel.prototype, "title", void 0);
-CDSSidePanel = __decorate([carbonElement(`${prefix}-side-panel`)], CDSSidePanel);
+CDSSidePanel = __decorate([carbonElement(`cds-side-panel`)], CDSSidePanel);
 var side_panel_default = CDSSidePanel;
-
 //#endregion
 export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE, side_panel_default as default };
+
 //# sourceMappingURL=side-panel.js.map

package/es/components/side-panel/side-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.js","names":["customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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 {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16.js';\nimport Close20 from '@carbon/icons/es/close/20.js';\nimport { moderate02 } from '@carbon/motion';\nimport '../button/index';\nimport '../icon-button/index';\nimport '../layer/index';\nimport Handle from '../../globals/internal/handle';\nimport '../button/button-set-base';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--side-panel`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * SidePanel.\n *\n * @deprecated Use Carbon for IBM Products `side-panel` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-side-panel\n * @csspart dialog The dialog.\n * @fires cds-side-panel-beingclosed\n *   The custom event fired before this side-panel is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n */\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * The element that had focus before this side-panel gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of side-panel content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of side-panel content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track side panel.\n   */\n  @query(`.${blockClass}`)\n  private _sidePanel!: HTMLDivElement;\n\n  @query(`.${blockClass}__animated-scroll-wrapper`)\n  private _animateScrollWrapper?: HTMLElement;\n\n  @query(`.${blockClass}__label-text`)\n  private _label!: HTMLElement;\n\n  @query(`.${blockClass}__title-text`)\n  private _title!: HTMLElement;\n\n  @query(`.${blockClass}__subtitle-text`)\n  private _subtitle!: HTMLElement;\n\n  @query(`.${blockClass}__inner-content`)\n  private _innerContent!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _doAnimateTitle = true;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _containerScrollTop = -16;\n\n  @state()\n  _hasSubtitle = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasActionToolbar = false;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _slugCloseSize = 'sm';\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This side-panel is open\n    // * The viewport still has focus\n    // * SidePanel body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForSidePanel } = this\n      .constructor as typeof CDSSidePanel;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForSidePanel),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForSidePanel),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _reducedMotion =\n    typeof window !== 'undefined' && window?.matchMedia\n      ? window.matchMedia('(prefers-reduced-motion: reduce)')\n      : { matches: true };\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleClickOnOverlay(event: MouseEvent) {\n    if (!this.preventCloseOnClickOutside) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleCloseClick(event: MouseEvent) {\n    this._handleUserInitiatedClose(event.target);\n  }\n\n  /**\n   * Handles user-initiated close request of this side-panel.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleNavigateBack(triggeredBy: EventTarget | null) {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n        {\n          composed: true,\n          detail: {\n            triggeredBy,\n          },\n        }\n      )\n    );\n  }\n\n  private _adjustPageContent = () => {\n    // sets/resets styles based on slideIn property and selectorPageContent;\n    if (this.selectorPageContent) {\n      const pageContentEl: HTMLElement | null = document.querySelector(\n        this.selectorPageContent\n      );\n\n      if (pageContentEl) {\n        const newValues = {\n          marginInlineStart: '',\n          marginInlineEnd: '',\n          inlineSize: '',\n          transition: this._reducedMotion.matches\n            ? 'none'\n            : `all ${moderate02}`,\n          transitionProperty: 'margin-inline-start, margin-inline-end',\n        };\n        if (this.open) {\n          newValues.inlineSize = 'auto';\n          if (this.placement === 'left') {\n            newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n          } else {\n            newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n          }\n        }\n\n        Object.keys(newValues).forEach((key) => {\n          pageContentEl.style[key] = newValues[key];\n        });\n      }\n    }\n  };\n\n  private _checkSetOpen = () => {\n    const { _sidePanel: sidePanel } = this;\n    if (sidePanel && this._isOpen) {\n      if (this._reducedMotion) {\n        this._isOpen = false;\n      } else {\n        // wait until the side panel has transitioned off the screen to remove\n        sidePanel.addEventListener('transitionend', () => {\n          this._isOpen = false;\n        });\n      }\n    } else {\n      // allow the html to render before animating in the side panel\n      this._isOpen = this.open;\n    }\n  };\n\n  private _checkUpdateIconButtonSizes = () => {\n    const slug = this.querySelector(`${prefix}-slug`);\n    const otherButtons = this?.shadowRoot?.querySelectorAll(\n      '#nav-back-button, #close-button'\n    );\n\n    let iconButtonSize = 'sm';\n\n    if (slug || otherButtons?.length) {\n      const actions = this?.querySelectorAll?.(\n        `${prefix}-button[slot='actions']`\n      );\n\n      if (actions?.length && /l/.test(this.size)) {\n        iconButtonSize = 'md';\n      }\n    }\n\n    if (slug) {\n      slug?.setAttribute('size', iconButtonSize);\n    }\n\n    if (otherButtons) {\n      [...otherButtons].forEach((btn) => {\n        btn.setAttribute('size', iconButtonSize);\n      });\n    }\n  };\n\n  private _handleSlugChange(e: Event) {\n    this._checkUpdateIconButtonSizes();\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n  }\n\n  private _handleSubtitleChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const subtitle = target?.assignedElements();\n\n    this._hasSubtitle = subtitle.length > 0;\n  }\n\n  private _handleActionToolbarChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toolbarActions = target?.assignedElements();\n\n    this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n    if (this._hasActionToolbar) {\n      for (const toolbarAction of toolbarActions) {\n        // toolbar actions size should always be sm\n        toolbarAction.setAttribute('size', 'sm');\n      }\n    }\n  }\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.condensedActions ? 'lg' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 3;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n\n    // update slug size\n    this._checkUpdateIconButtonSizes();\n\n    const actionsCount = actions?.length ?? 0;\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n        console.error(`Too many side-panel actions, max ${this._maxActions}.`);\n      }\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive side panel actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  private _checkSetDoAnimateTitle = () => {\n    let canDoAnimateTitle = false;\n\n    if (\n      this._sidePanel &&\n      this.open &&\n      this.animateTitle &&\n      this?.title?.length &&\n      !this._reducedMotion.matches\n    ) {\n      const scrollAnimationDistance = this._getScrollAnimationDistance();\n      // used to calculate the header moves\n      this?._sidePanel?.style?.setProperty(\n        `--${blockClass}--scroll-animation-distance`,\n        `${scrollAnimationDistance}`\n      );\n\n      let scrollEl = this._animateScrollWrapper;\n      if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n        scrollEl = this._innerContent;\n      }\n\n      if (scrollEl) {\n        const innerComputed = window?.getComputedStyle(this._innerContent);\n        const innerPaddingHeight = innerComputed\n          ? parseFloat(innerComputed?.paddingTop) +\n            parseFloat(innerComputed?.paddingBottom)\n          : 0;\n\n        canDoAnimateTitle =\n          (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) &&\n          scrollEl.scrollHeight - scrollEl.clientHeight >=\n            scrollAnimationDistance + innerPaddingHeight;\n      }\n    }\n\n    this._doAnimateTitle = canDoAnimateTitle;\n  };\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    if (this._sidePanel) {\n      this._checkSetDoAnimateTitle();\n    }\n  });\n\n  private _getScrollAnimationDistance = () => {\n    const labelHeight = this?._label?.offsetHeight ?? 0;\n    const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n    const titleVerticalBorder = this._hasActionToolbar\n      ? this._title.offsetHeight - this._title.clientHeight\n      : 0;\n\n    return labelHeight + subtitleHeight + titleVerticalBorder;\n  };\n\n  private _scrollObserver = () => {\n    const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n    const scrollAnimationDistance = this._getScrollAnimationDistance();\n    this?._sidePanel?.style?.setProperty(\n      `--${blockClass}--scroll-animation-progress`,\n      `${\n        Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance\n      }`\n    );\n  };\n\n  private _handleCurrentStepUpdate = () => {\n    const scrollable = this._animateScrollWrapper ?? this._innerContent;\n    if (scrollable) {\n      scrollable.scrollTop = 0;\n    }\n  };\n\n  /**\n   * Determines if the title will animate on scroll\n   */\n  @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n  animateTitle = true;\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Determines whether the side panel should render the condensed version (affects action buttons primarily)\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n  condensedActions = false;\n\n  /**\n   * Sets the current step of the side panel\n   */\n  @property({ reflect: true, attribute: 'current-step', type: Number })\n  currentStep;\n\n  /**\n   * Determines whether the side panel should render with an overlay\n   */\n  @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n  includeOverlay = false;\n\n  /**\n   * Sets the label text which will display above the title text\n   */\n  @property({ reflect: true, attribute: 'label-text' })\n  labelText;\n\n  /**\n   * Sets the icon description for the navigation back icon button\n   */\n  @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n  navigationBackIconDescription = 'Back';\n\n  /**\n   * `true` if the side-panel should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * SidePanel placement.\n   */\n  @property({ reflect: true, type: String })\n  placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n  /**\n   * Prevent closing on click outside of side-panel\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * Selector for page content, used to push content to side except\n   */\n  @property({ reflect: true, attribute: 'selector-page-content' })\n  selectorPageContent = '';\n\n  /**\n   * SidePanel size.\n   */\n  @property({ reflect: true, type: String })\n  size = SIDE_PANEL_SIZE.MEDIUM;\n\n  /**\n   * Determines if this panel slides in\n   */\n  @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n  slideIn = false;\n\n  /**\n   * Sets the title text\n   */\n  @property({ reflect: false, type: String })\n  title;\n\n  async connectObservers() {\n    await this.updateComplete;\n    this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n  }\n\n  disconnectObservers() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.disconnectObservers();\n    this.connectObservers();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.disconnectObservers();\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      condensedActions,\n      currentStep,\n      includeOverlay,\n      labelText,\n      navigationBackIconDescription,\n      open,\n      placement,\n      size,\n      slideIn,\n      title,\n    } = this;\n\n    if (!open && !this._isOpen) {\n      return html``;\n    }\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const titleTemplate = html`<div\n      class=${`${blockClass}__title`}\n      ?no-label=${!!labelText}>\n      <h2 class=${title ? `${blockClass}__title-text` : ''} title=${title}>\n        ${title}\n      </h2>\n\n      ${this._doAnimateTitle\n        ? html`<h2\n            class=${`${blockClass}__collapsed-title-text`}\n            title=${title}\n            aria-hidden=\"true\">\n            ${title}\n          </h2>`\n        : ''}\n    </div>`;\n\n    const headerHasTitleClass = this.title\n      ? ` ${blockClass}__header--has-title `\n      : '';\n    const headerTemplate = html`\n      <div\n        class=${`${blockClass}__header${headerHasTitleClass}`}\n        ?detail-step=${currentStep > 0}\n        ?no-title-animation=${!this._doAnimateTitle}\n        ?reduced-motion=${this._reducedMotion.matches}>\n        <!-- render back button -->\n        ${currentStep > 0\n          ? html`<cds-icon-button\n              align=\"bottom-left\"\n              aria-label=${navigationBackIconDescription}\n              kind=\"ghost\"\n              size=\"sm\"\n              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n              @click=${this._handleNavigateBack}>\n              ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n              <span slot=\"tooltip-content\">\n                ${navigationBackIconDescription}\n              </span>\n            </cds-icon-button>`\n          : ''}\n\n        <!-- render title label -->\n        ${title?.length && labelText?.length\n          ? html` <p class=${`${blockClass}__label-text`}>${labelText}</p>`\n          : ''}\n\n        <!-- title -->\n        ${title ? titleTemplate : ''}\n\n        <!-- render slug and close button area -->\n        <div class=${`${blockClass}__slug-and-close`}>\n          <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n          <!-- {normalizedSlug} -->\n          <cds-icon-button\n            align=\"bottom-right\"\n            aria-label=${closeIconDescription}\n            kind=\"ghost\"\n            size=\"sm\"\n            class=${`${blockClass}__close-button`}\n            @click=${this._handleCloseClick}>\n            ${iconLoader(Close20, { slot: 'icon' })}\n            <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n          </cds-icon-button>\n        </div>\n\n        <!-- render sub title -->\n        <p\n          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n          ?hidden=${!this._hasSubtitle}\n          ?no-title-animation=${!this._doAnimateTitle}\n          ?no-action-toolbar=${!this._hasActionToolbar}\n          ?no-title=${!title}>\n          <slot\n            name=\"subtitle\"\n            @slotchange=${this._handleSubtitleChange}></slot>\n        </p>\n\n        <div\n          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n          ?hidden=${!this._hasActionToolbar}\n          ?no-title-animation=${!this._doAnimateTitle}>\n          <slot\n            name=\"action-toolbar\"\n            @slotchange=${this._handleActionToolbarChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const mainTemplate = html`<div\n      class=${`${blockClass}__inner-content`}\n      ?scrolls=${!this._doAnimateTitle}>\n      <cds-layer level=\"1\">\n        <slot></slot>\n      </cds-layer>\n    </div> `;\n\n    const sidePanelAnimateTitleClass = this._doAnimateTitle\n      ? ` ${blockClass}--animated-title`\n      : '';\n\n    return html`\n      <div\n        class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n        part=\"dialog\"\n        role=\"complementary\"\n        placement=\"${placement}\"\n        ?has-slug=${this._hasSlug}\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        ?condensed-actions=${condensedActions}\n        ?overlay=${includeOverlay || slideIn}\n        ?slide-in=${slideIn}\n        size=${size}>\n        <a\n          id=\"start-sentinel\"\n          class=\"sentinel\"\n          hidden\n          href=\"javascript:void 0\"\n          role=\"navigation\"></a>\n\n        ${this._doAnimateTitle\n          ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n              ${headerTemplate} ${mainTemplate}\n            </div>`\n          : html` ${headerTemplate} ${mainTemplate}`}\n\n        <cds-button-set-base\n          class=${`${blockClass}__actions-container`}\n          ?hidden=${this._actionsCount === 0}\n          ?condensed=${condensedActions}\n          actions-multiple=${actionsMultiple}\n          size=${size}>\n          <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n        </cds-button-set-base>\n\n        <a\n          id=\"end-sentinel\"\n          class=\"sentinel\"\n          hidden\n          href=\"javascript:void 0\"\n          role=\"navigation\"></a>\n      </div>\n\n      ${includeOverlay\n        ? html`<div\n            ?slide-in=${slideIn}\n            class=${`${blockClass}__overlay`}\n            ?open=${this.open}\n            ?opening=${open && !this._isOpen}\n            ?closing=${!open && this._isOpen}\n            tabindex=\"-1\"\n            @click=${this._handleClickOnOverlay}></div>`\n        : ''}\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('condensedActions')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (changedProperties.has('currentStep')) {\n      this._handleCurrentStepUpdate();\n    }\n\n    if (changedProperties.has('_doAnimateTitle')) {\n      this?._animateScrollWrapper?.removeEventListener(\n        'scroll',\n        this._scrollObserver\n      );\n\n      if (this._doAnimateTitle) {\n        this?._animateScrollWrapper?.addEventListener(\n          'scroll',\n          this._scrollObserver\n        );\n      } else {\n        this?._sidePanel?.style?.setProperty(\n          `--${blockClass}--scroll-animation-progress`,\n          '0'\n        );\n      }\n    }\n\n    if (\n      changedProperties.has('_isOpen') ||\n      changedProperties.has('animateTitle')\n    ) {\n      /* @state property changed */\n      this._checkSetDoAnimateTitle();\n    }\n\n    if (\n      changedProperties.has('slideIn') ||\n      changedProperties.has('open') ||\n      changedProperties.has('includeOverlay')\n    ) {\n      this._adjustPageContent();\n    }\n\n    if (changedProperties.has('open')) {\n      this._checkSetOpen();\n\n      this.disconnectObservers();\n      if (this.open) {\n        this.connectObservers();\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-side-panel>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSSidePanel).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this side-panel is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this side-panel.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-side-panel-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this side-panel is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-side-panel-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-side-panel-navigate-back`;\n  }\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}
+{"version":3,"file":"side-panel.js","names":["customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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 {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16.js';\nimport Close20 from '@carbon/icons/es/close/20.js';\nimport { moderate02 } from '@carbon/motion';\nimport '../button/index';\nimport '../icon-button/index';\nimport '../layer/index';\nimport Handle from '../../globals/internal/handle';\nimport '../button/button-set-base';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--side-panel`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * SidePanel.\n *\n * @deprecated Use Carbon for IBM Products `side-panel` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-side-panel\n * @csspart dialog The dialog.\n * @fires cds-side-panel-beingclosed\n *   The custom event fired before this side-panel is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n */\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * The element that had focus before this side-panel gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of side-panel content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of side-panel content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track side panel.\n   */\n  @query(`.${blockClass}`)\n  private _sidePanel!: HTMLDivElement;\n\n  @query(`.${blockClass}__animated-scroll-wrapper`)\n  private _animateScrollWrapper?: HTMLElement;\n\n  @query(`.${blockClass}__label-text`)\n  private _label!: HTMLElement;\n\n  @query(`.${blockClass}__title-text`)\n  private _title!: HTMLElement;\n\n  @query(`.${blockClass}__subtitle-text`)\n  private _subtitle!: HTMLElement;\n\n  @query(`.${blockClass}__inner-content`)\n  private _innerContent!: HTMLElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _doAnimateTitle = true;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _containerScrollTop = -16;\n\n  @state()\n  _hasSubtitle = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasActionToolbar = false;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _slugCloseSize = 'sm';\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This side-panel is open\n    // * The viewport still has focus\n    // * SidePanel body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForSidePanel } = this\n      .constructor as typeof CDSSidePanel;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForSidePanel),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForSidePanel),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _reducedMotion =\n    typeof window !== 'undefined' && window?.matchMedia\n      ? window.matchMedia('(prefers-reduced-motion: reduce)')\n      : { matches: true };\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleClickOnOverlay(event: MouseEvent) {\n    if (!this.preventCloseOnClickOutside) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles `click` event on the side-panel container.\n   *\n   * @param event The event.\n   */\n  private _handleCloseClick(event: MouseEvent) {\n    this._handleUserInitiatedClose(event.target);\n  }\n\n  /**\n   * Handles user-initiated close request of this side-panel.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSidePanel).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleNavigateBack(triggeredBy: EventTarget | null) {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n        {\n          composed: true,\n          detail: {\n            triggeredBy,\n          },\n        }\n      )\n    );\n  }\n\n  private _adjustPageContent = () => {\n    // sets/resets styles based on slideIn property and selectorPageContent;\n    if (this.selectorPageContent) {\n      const pageContentEl: HTMLElement | null = document.querySelector(\n        this.selectorPageContent\n      );\n\n      if (pageContentEl) {\n        const newValues = {\n          marginInlineStart: '',\n          marginInlineEnd: '',\n          inlineSize: '',\n          transition: this._reducedMotion.matches\n            ? 'none'\n            : `all ${moderate02}`,\n          transitionProperty: 'margin-inline-start, margin-inline-end',\n        };\n        if (this.open) {\n          newValues.inlineSize = 'auto';\n          if (this.placement === 'left') {\n            newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n          } else {\n            newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n          }\n        }\n\n        Object.keys(newValues).forEach((key) => {\n          pageContentEl.style[key] = newValues[key];\n        });\n      }\n    }\n  };\n\n  private _checkSetOpen = () => {\n    const { _sidePanel: sidePanel } = this;\n    if (sidePanel && this._isOpen) {\n      if (this._reducedMotion) {\n        this._isOpen = false;\n      } else {\n        // wait until the side panel has transitioned off the screen to remove\n        sidePanel.addEventListener('transitionend', () => {\n          this._isOpen = false;\n        });\n      }\n    } else {\n      // allow the html to render before animating in the side panel\n      this._isOpen = this.open;\n    }\n  };\n\n  private _checkUpdateIconButtonSizes = () => {\n    const slug = this.querySelector(`${prefix}-slug`);\n    const otherButtons = this?.shadowRoot?.querySelectorAll(\n      '#nav-back-button, #close-button'\n    );\n\n    let iconButtonSize = 'sm';\n\n    if (slug || otherButtons?.length) {\n      const actions = this?.querySelectorAll?.(\n        `${prefix}-button[slot='actions']`\n      );\n\n      if (actions?.length && /l/.test(this.size)) {\n        iconButtonSize = 'md';\n      }\n    }\n\n    if (slug) {\n      slug?.setAttribute('size', iconButtonSize);\n    }\n\n    if (otherButtons) {\n      [...otherButtons].forEach((btn) => {\n        btn.setAttribute('size', iconButtonSize);\n      });\n    }\n  };\n\n  private _handleSlugChange(e: Event) {\n    this._checkUpdateIconButtonSizes();\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n  }\n\n  private _handleSubtitleChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const subtitle = target?.assignedElements();\n\n    this._hasSubtitle = subtitle.length > 0;\n  }\n\n  private _handleActionToolbarChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toolbarActions = target?.assignedElements();\n\n    this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n    if (this._hasActionToolbar) {\n      for (const toolbarAction of toolbarActions) {\n        // toolbar actions size should always be sm\n        toolbarAction.setAttribute('size', 'sm');\n      }\n    }\n  }\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.condensedActions ? 'lg' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 3;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n\n    // update slug size\n    this._checkUpdateIconButtonSizes();\n\n    const actionsCount = actions?.length ?? 0;\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n        console.error(`Too many side-panel actions, max ${this._maxActions}.`);\n      }\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive side panel actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  private _checkSetDoAnimateTitle = () => {\n    let canDoAnimateTitle = false;\n\n    if (\n      this._sidePanel &&\n      this.open &&\n      this.animateTitle &&\n      this?.title?.length &&\n      !this._reducedMotion.matches\n    ) {\n      const scrollAnimationDistance = this._getScrollAnimationDistance();\n      // used to calculate the header moves\n      this?._sidePanel?.style?.setProperty(\n        `--${blockClass}--scroll-animation-distance`,\n        `${scrollAnimationDistance}`\n      );\n\n      let scrollEl = this._animateScrollWrapper;\n      if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n        scrollEl = this._innerContent;\n      }\n\n      if (scrollEl) {\n        const innerComputed = window?.getComputedStyle(this._innerContent);\n        const innerPaddingHeight = innerComputed\n          ? parseFloat(innerComputed?.paddingTop) +\n            parseFloat(innerComputed?.paddingBottom)\n          : 0;\n\n        canDoAnimateTitle =\n          (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) &&\n          scrollEl.scrollHeight - scrollEl.clientHeight >=\n            scrollAnimationDistance + innerPaddingHeight;\n      }\n    }\n\n    this._doAnimateTitle = canDoAnimateTitle;\n  };\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    if (this._sidePanel) {\n      this._checkSetDoAnimateTitle();\n    }\n  });\n\n  private _getScrollAnimationDistance = () => {\n    const labelHeight = this?._label?.offsetHeight ?? 0;\n    const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n    const titleVerticalBorder = this._hasActionToolbar\n      ? this._title.offsetHeight - this._title.clientHeight\n      : 0;\n\n    return labelHeight + subtitleHeight + titleVerticalBorder;\n  };\n\n  private _scrollObserver = () => {\n    const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n    const scrollAnimationDistance = this._getScrollAnimationDistance();\n    this?._sidePanel?.style?.setProperty(\n      `--${blockClass}--scroll-animation-progress`,\n      `${\n        Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance\n      }`\n    );\n  };\n\n  private _handleCurrentStepUpdate = () => {\n    const scrollable = this._animateScrollWrapper ?? this._innerContent;\n    if (scrollable) {\n      scrollable.scrollTop = 0;\n    }\n  };\n\n  /**\n   * Determines if the title will animate on scroll\n   */\n  @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n  animateTitle = true;\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Determines whether the side panel should render the condensed version (affects action buttons primarily)\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n  condensedActions = false;\n\n  /**\n   * Sets the current step of the side panel\n   */\n  @property({ reflect: true, attribute: 'current-step', type: Number })\n  currentStep;\n\n  /**\n   * Determines whether the side panel should render with an overlay\n   */\n  @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n  includeOverlay = false;\n\n  /**\n   * Sets the label text which will display above the title text\n   */\n  @property({ reflect: true, attribute: 'label-text' })\n  labelText;\n\n  /**\n   * Sets the icon description for the navigation back icon button\n   */\n  @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n  navigationBackIconDescription = 'Back';\n\n  /**\n   * `true` if the side-panel should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * SidePanel placement.\n   */\n  @property({ reflect: true, type: String })\n  placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n  /**\n   * Prevent closing on click outside of side-panel\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * Selector for page content, used to push content to side except\n   */\n  @property({ reflect: true, attribute: 'selector-page-content' })\n  selectorPageContent = '';\n\n  /**\n   * SidePanel size.\n   */\n  @property({ reflect: true, type: String })\n  size = SIDE_PANEL_SIZE.MEDIUM;\n\n  /**\n   * Determines if this panel slides in\n   */\n  @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n  slideIn = false;\n\n  /**\n   * Sets the title text\n   */\n  @property({ reflect: false, type: String })\n  title;\n\n  async connectObservers() {\n    await this.updateComplete;\n    this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n  }\n\n  disconnectObservers() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.disconnectObservers();\n    this.connectObservers();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.disconnectObservers();\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      condensedActions,\n      currentStep,\n      includeOverlay,\n      labelText,\n      navigationBackIconDescription,\n      open,\n      placement,\n      size,\n      slideIn,\n      title,\n    } = this;\n\n    if (!open && !this._isOpen) {\n      return html``;\n    }\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const titleTemplate = html`<div\n      class=${`${blockClass}__title`}\n      ?no-label=${!!labelText}>\n      <h2 class=${title ? `${blockClass}__title-text` : ''} title=${title}>\n        ${title}\n      </h2>\n\n      ${this._doAnimateTitle\n        ? html`<h2\n            class=${`${blockClass}__collapsed-title-text`}\n            title=${title}\n            aria-hidden=\"true\">\n            ${title}\n          </h2>`\n        : ''}\n    </div>`;\n\n    const headerHasTitleClass = this.title\n      ? ` ${blockClass}__header--has-title `\n      : '';\n    const headerTemplate = html`\n      <div\n        class=${`${blockClass}__header${headerHasTitleClass}`}\n        ?detail-step=${currentStep > 0}\n        ?no-title-animation=${!this._doAnimateTitle}\n        ?reduced-motion=${this._reducedMotion.matches}>\n        <!-- render back button -->\n        ${currentStep > 0\n          ? html`<cds-icon-button\n              align=\"bottom-left\"\n              aria-label=${navigationBackIconDescription}\n              kind=\"ghost\"\n              size=\"sm\"\n              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n              @click=${this._handleNavigateBack}>\n              ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n              <span slot=\"tooltip-content\">\n                ${navigationBackIconDescription}\n              </span>\n            </cds-icon-button>`\n          : ''}\n\n        <!-- render title label -->\n        ${title?.length && labelText?.length\n          ? html` <p class=${`${blockClass}__label-text`}>${labelText}</p>`\n          : ''}\n\n        <!-- title -->\n        ${title ? titleTemplate : ''}\n\n        <!-- render slug and close button area -->\n        <div class=${`${blockClass}__slug-and-close`}>\n          <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n          <!-- {normalizedSlug} -->\n          <cds-icon-button\n            align=\"bottom-right\"\n            aria-label=${closeIconDescription}\n            kind=\"ghost\"\n            size=\"sm\"\n            class=${`${blockClass}__close-button`}\n            @click=${this._handleCloseClick}>\n            ${iconLoader(Close20, { slot: 'icon' })}\n            <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n          </cds-icon-button>\n        </div>\n\n        <!-- render sub title -->\n        <p\n          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n          ?hidden=${!this._hasSubtitle}\n          ?no-title-animation=${!this._doAnimateTitle}\n          ?no-action-toolbar=${!this._hasActionToolbar}\n          ?no-title=${!title}>\n          <slot\n            name=\"subtitle\"\n            @slotchange=${this._handleSubtitleChange}></slot>\n        </p>\n\n        <div\n          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n          ?hidden=${!this._hasActionToolbar}\n          ?no-title-animation=${!this._doAnimateTitle}>\n          <slot\n            name=\"action-toolbar\"\n            @slotchange=${this._handleActionToolbarChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const mainTemplate = html`<div\n      class=${`${blockClass}__inner-content`}\n      ?scrolls=${!this._doAnimateTitle}>\n      <cds-layer level=\"1\">\n        <slot></slot>\n      </cds-layer>\n    </div> `;\n\n    const sidePanelAnimateTitleClass = this._doAnimateTitle\n      ? ` ${blockClass}--animated-title`\n      : '';\n\n    return html`\n      <div\n        class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n        part=\"dialog\"\n        role=\"complementary\"\n        placement=\"${placement}\"\n        ?has-slug=${this._hasSlug}\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        ?condensed-actions=${condensedActions}\n        ?overlay=${includeOverlay || slideIn}\n        ?slide-in=${slideIn}\n        size=${size}>\n        <a\n          id=\"start-sentinel\"\n          class=\"sentinel\"\n          hidden\n          href=\"javascript:void 0\"\n          role=\"navigation\"></a>\n\n        ${this._doAnimateTitle\n          ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n              ${headerTemplate} ${mainTemplate}\n            </div>`\n          : html` ${headerTemplate} ${mainTemplate}`}\n\n        <cds-button-set-base\n          class=${`${blockClass}__actions-container`}\n          ?hidden=${this._actionsCount === 0}\n          ?condensed=${condensedActions}\n          actions-multiple=${actionsMultiple}\n          size=${size}>\n          <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n        </cds-button-set-base>\n\n        <a\n          id=\"end-sentinel\"\n          class=\"sentinel\"\n          hidden\n          href=\"javascript:void 0\"\n          role=\"navigation\"></a>\n      </div>\n\n      ${includeOverlay\n        ? html`<div\n            ?slide-in=${slideIn}\n            class=${`${blockClass}__overlay`}\n            ?open=${this.open}\n            ?opening=${open && !this._isOpen}\n            ?closing=${!open && this._isOpen}\n            tabindex=\"-1\"\n            @click=${this._handleClickOnOverlay}></div>`\n        : ''}\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('condensedActions')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (changedProperties.has('currentStep')) {\n      this._handleCurrentStepUpdate();\n    }\n\n    if (changedProperties.has('_doAnimateTitle')) {\n      this?._animateScrollWrapper?.removeEventListener(\n        'scroll',\n        this._scrollObserver\n      );\n\n      if (this._doAnimateTitle) {\n        this?._animateScrollWrapper?.addEventListener(\n          'scroll',\n          this._scrollObserver\n        );\n      } else {\n        this?._sidePanel?.style?.setProperty(\n          `--${blockClass}--scroll-animation-progress`,\n          '0'\n        );\n      }\n    }\n\n    if (\n      changedProperties.has('_isOpen') ||\n      changedProperties.has('animateTitle')\n    ) {\n      /* @state property changed */\n      this._checkSetDoAnimateTitle();\n    }\n\n    if (\n      changedProperties.has('slideIn') ||\n      changedProperties.has('open') ||\n      changedProperties.has('includeOverlay')\n    ) {\n      this._adjustPageContent();\n    }\n\n    if (changedProperties.has('open')) {\n      this._checkSetOpen();\n\n      this.disconnectObservers();\n      if (this.open) {\n        this.connectObservers();\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSSidePanel)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-side-panel>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSSidePanel).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this side-panel is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this side-panel.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-side-panel-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this side-panel is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-side-panel-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-side-panel-navigate-back`;\n  }\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}

package/es/components/skeleton-icon/skeleton-icon.js

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import skeleton_icon_default$1 from "./skeleton-icon.scss.js";
 import { LitElement } from "lit";
-
 //#region src/components/skeleton-icon/skeleton-icon.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -28,9 +27,9 @@ let CDSSkeletonIcon = class CDSSkeletonIcon extends LitElement {
 		this.styles = skeleton_icon_default$1;
 	}
 };
-CDSSkeletonIcon = __decorate([carbonElement(`${prefix}-skeleton-icon`)], CDSSkeletonIcon);
+CDSSkeletonIcon = __decorate([carbonElement(`cds-skeleton-icon`)], CDSSkeletonIcon);
 var skeleton_icon_default = CDSSkeletonIcon;
-
 //#endregion
 export { skeleton_icon_default as default };
+
 //# sourceMappingURL=skeleton-icon.js.map

package/es/components/skeleton-icon/skeleton-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-icon.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-icon/skeleton-icon.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-icon.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton icon.\n *\n * @element cds-skeleton-icon\n */\n@customElement(`${prefix}-skeleton-icon`)\nclass CDSSkeletonIcon extends LitElement {\n  static styles = styles;\n}\n\nexport default CDSSkeletonIcon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,4BACM,wBAAwB,WAAW;;gBACvBA;;;8BAFjBC,cAAc,GAAG,OAAO,gBAAgB;AAKzC,4BAAe"}
+{"version":3,"file":"skeleton-icon.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-icon/skeleton-icon.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 } from 'lit';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-icon.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton icon.\n *\n * @element cds-skeleton-icon\n */\n@customElement(`${prefix}-skeleton-icon`)\nclass CDSSkeletonIcon extends LitElement {\n  static styles = styles;\n}\n\nexport default CDSSkeletonIcon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,kBAAA,MACM,wBAAwB,WAAW;;gBACvBA;;;8BAFjBC,cAAc,oBAA0B,CAAA,EAAA,gBAAA;AAKzC,IAAA,wBAAe"}

package/es/components/skeleton-icon/skeleton-icon.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/skeleton-icon/skeleton-icon.scss?lit
 var skeleton_icon_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--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}to{opacity:.3;transform:scaleX(0);transform-origin:left}}@keyframes ai-skeleton-animation{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.cds--icon--skeleton,:host(cds-skeleton-icon){background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--icon--skeleton:active,.cds--icon--skeleton:focus,.cds--icon--skeleton:hover{border:none;cursor:default;outline:none}.cds--icon--skeleton:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--icon--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--icon--skeleton,:host(cds-skeleton-icon){background:CanvasText}.cds--icon--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--icon--skeleton,:host(cds-skeleton-icon){block-size:1rem;display:inline-block;inline-size:1rem}.cds--skeleton__placeholder{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--skeleton__placeholder:active,.cds--skeleton__placeholder:focus,.cds--skeleton__placeholder:hover{border:none;cursor:default;outline:none}.cds--skeleton__placeholder:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--skeleton__placeholder:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton__placeholder{background:CanvasText}.cds--skeleton__placeholder:before{background:Canvas;forced-color-adjust:none}}.cds--skeleton__placeholder{block-size:6.25rem;inline-size:6.25rem}.cds--skeleton__text{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--skeleton__text:active,.cds--skeleton__text:focus,.cds--skeleton__text:hover{border:none;cursor:default;outline:none}.cds--skeleton__text:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--skeleton__text:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton__text{background:CanvasText}.cds--skeleton__text:before{background:Canvas;forced-color-adjust:none}}.cds--skeleton__text{block-size:1rem;inline-size:100%;margin-block-end:.5rem}.cds--skeleton__heading{block-size:1.5rem}.cds--skeleton__icon--ai,.cds--skeleton__placeholder--ai,.cds--skeleton__text--ai{background:var(--cds-ai-skeleton-background,#d0e2ff);overflow:hidden}.cds--skeleton__icon--ai:before,.cds--skeleton__placeholder--ai:before,.cds--skeleton__text--ai:before{animation:ai-skeleton-animation 1.25s ease-in-out infinite;background:linear-gradient(90deg,rgba(69,137,255,0) 0,rgba(69,137,255,.5) 50%,rgba(69,137,255,0))}.cds--skeleton__icon--ai:before,.cds--skeleton__placeholder--ai:before{inline-size:200%}.cds--skeleton__placeholder--ai{border-radius:.5rem}.cds--skeleton__text--ai{border-radius:1rem}.cds--skeleton__icon--ai{border-radius:.125rem}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton__icon--ai,.cds--skeleton__placeholder--ai,.cds--skeleton__text--ai{background:CanvasText}.cds--skeleton__icon--ai:before,.cds--skeleton__placeholder--ai:before,.cds--skeleton__text--ai:before{background:Canvas}}:host(cds-skeleton-icon){background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}:host(cds-skeleton-icon):active,:host(cds-skeleton-icon):focus,:host(cds-skeleton-icon):hover{border:none;cursor:default;outline:none}:host(cds-skeleton-icon):before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){:host(cds-skeleton-icon):before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){:host(cds-skeleton-icon){background:CanvasText}:host(cds-skeleton-icon):before{background:Canvas;forced-color-adjust:none}}"]);
-
 //#endregion
 export { skeleton_icon_default as default };
+
 //# sourceMappingURL=skeleton-icon.scss.js.map

package/es/components/skeleton-placeholder/skeleton-placeholder.js

@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import skeleton_placeholder_default$1 from "./skeleton-placeholder.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-
 //#region src/components/skeleton-placeholder/skeleton-placeholder.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -27,7 +26,7 @@ import { classMap } from "lit/directives/class-map.js";
 */
 let CDSSkeletonPlaceholder = class CDSSkeletonPlaceholder extends LitElement {
 	render() {
-		let defaultClasses = { [`${prefix}--skeleton__placeholder`]: true };
+		let defaultClasses = { [`cds--skeleton__placeholder`]: true };
 		if (this.optionalClasses) {
 			const outputObject = {};
 			this.optionalClasses?.split(" ").forEach((element) => {
@@ -48,9 +47,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "optional-classes"
 })], CDSSkeletonPlaceholder.prototype, "optionalClasses", void 0);
-CDSSkeletonPlaceholder = __decorate([carbonElement(`${prefix}-skeleton-placeholder`)], CDSSkeletonPlaceholder);
+CDSSkeletonPlaceholder = __decorate([carbonElement(`cds-skeleton-placeholder`)], CDSSkeletonPlaceholder);
 var skeleton_placeholder_default = CDSSkeletonPlaceholder;
-
 //#endregion
 export { skeleton_placeholder_default as default };
+
 //# sourceMappingURL=skeleton-placeholder.js.map

package/es/components/skeleton-placeholder/skeleton-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-placeholder.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-placeholder/skeleton-placeholder.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-placeholder.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton placeholder.\n *\n * @element cds-skeleton-placeholder\n */\n@customElement(`${prefix}-skeleton-placeholder`)\nclass CDSSkeletonPlaceholder extends LitElement {\n  /**\n   * Specify optional classes to be added to your SkeletonText\n   */\n  @property({ reflect: true, attribute: 'optional-classes' })\n  optionalClasses;\n\n  render() {\n    let defaultClasses = {\n      [`${prefix}--skeleton__placeholder`]: true,\n    };\n\n    if (this.optionalClasses) {\n      const outputObject = {};\n      this.optionalClasses?.split(' ').forEach((element) => {\n        outputObject[element] = true;\n      });\n      defaultClasses = { ...defaultClasses, ...outputObject };\n    }\n    const classes = classMap(defaultClasses);\n\n    return html` <div part=\"placeholder\" class=\"${classes}\"></div> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSSkeletonPlaceholder;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,mCACM,+BAA+B,WAAW;CAO9C,SAAS;EACP,IAAI,iBAAiB,GAClB,GAAG,OAAO,2BAA2B,MACvC;AAED,MAAI,KAAK,iBAAiB;GACxB,MAAM,eAAe,EAAE;AACvB,QAAK,iBAAiB,MAAM,IAAI,CAAC,SAAS,YAAY;AACpD,iBAAa,WAAW;KACxB;AACF,oBAAiB;IAAE,GAAG;IAAgB,GAAG;IAAc;;AAIzD,SAAO,IAAI,mCAFK,SAAS,eAAe,CAEc;;;gBAGxCA;;;YApBf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC;qCAL5DC,cAAc,GAAG,OAAO,uBAAuB;AA4BhD,mCAAe"}
+{"version":3,"file":"skeleton-placeholder.js","names":["styles","customElement"],"sources":["../../../src/components/skeleton-placeholder/skeleton-placeholder.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './skeleton-placeholder.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton placeholder.\n *\n * @element cds-skeleton-placeholder\n */\n@customElement(`${prefix}-skeleton-placeholder`)\nclass CDSSkeletonPlaceholder extends LitElement {\n  /**\n   * Specify optional classes to be added to your SkeletonText\n   */\n  @property({ reflect: true, attribute: 'optional-classes' })\n  optionalClasses;\n\n  render() {\n    let defaultClasses = {\n      [`${prefix}--skeleton__placeholder`]: true,\n    };\n\n    if (this.optionalClasses) {\n      const outputObject = {};\n      this.optionalClasses?.split(' ').forEach((element) => {\n        outputObject[element] = true;\n      });\n      defaultClasses = { ...defaultClasses, ...outputObject };\n    }\n    const classes = classMap(defaultClasses);\n\n    return html` <div part=\"placeholder\" class=\"${classes}\"></div> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSSkeletonPlaceholder;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,yBAAA,MACM,+BAA+B,WAAW;CAO9C,SAAS;EACP,IAAI,iBAAiB,GAClB,+BAAqC,MACvC;AAED,MAAI,KAAK,iBAAiB;GACxB,MAAM,eAAe,EAAE;AACvB,QAAK,iBAAiB,MAAM,IAAI,CAAC,SAAS,YAAY;AACpD,iBAAa,WAAW;KACxB;AACF,oBAAiB;IAAE,GAAG;IAAgB,GAAG;IAAc;;AAIzD,SAAO,IAAI,mCAFK,SAAS,eAAe,CAEc;;;gBAGxCA;;;YApBf,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,uBAAA,WAAA,mBAAA,KAAA,EAAA;qCAL5DC,cAAc,2BAAiC,CAAA,EAAA,uBAAA;AA4BhD,IAAA,+BAAe"}

package/es/components/skeleton-placeholder/skeleton-placeholder.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/skeleton-placeholder/skeleton-placeholder.scss?lit
 var skeleton_placeholder_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--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}to{opacity:.3;transform:scaleX(0);transform-origin:left}}@keyframes ai-skeleton-animation{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.cds--icon--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--icon--skeleton:active,.cds--icon--skeleton:focus,.cds--icon--skeleton:hover{border:none;cursor:default;outline:none}.cds--icon--skeleton:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--icon--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--icon--skeleton{background:CanvasText}.cds--icon--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--icon--skeleton{block-size:1rem;display:inline-block;inline-size:1rem}.cds--skeleton__placeholder{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--skeleton__placeholder:active,.cds--skeleton__placeholder:focus,.cds--skeleton__placeholder:hover{border:none;cursor:default;outline:none}.cds--skeleton__placeholder:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--skeleton__placeholder:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton__placeholder{background:CanvasText}.cds--skeleton__placeholder:before{background:Canvas;forced-color-adjust:none}}.cds--skeleton__placeholder{block-size:6.25rem;inline-size:6.25rem}.cds--skeleton__text{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--skeleton__text:active,.cds--skeleton__text:focus,.cds--skeleton__text:hover{border:none;cursor:default;outline:none}.cds--skeleton__text:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--skeleton__text:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton__text{background:CanvasText}.cds--skeleton__text:before{background:Canvas;forced-color-adjust:none}}.cds--skeleton__text{block-size:1rem;inline-size:100%;margin-block-end:.5rem}.cds--skeleton__heading{block-size:1.5rem}.cds--skeleton__icon--ai,.cds--skeleton__placeholder--ai,.cds--skeleton__text--ai{background:var(--cds-ai-skeleton-background,#d0e2ff);overflow:hidden}.cds--skeleton__icon--ai:before,.cds--skeleton__placeholder--ai:before,.cds--skeleton__text--ai:before{animation:ai-skeleton-animation 1.25s ease-in-out infinite;background:linear-gradient(90deg,rgba(69,137,255,0) 0,rgba(69,137,255,.5) 50%,rgba(69,137,255,0))}.cds--skeleton__icon--ai:before,.cds--skeleton__placeholder--ai:before{inline-size:200%}.cds--skeleton__placeholder--ai{border-radius:.5rem}.cds--skeleton__text--ai{border-radius:1rem}.cds--skeleton__icon--ai{border-radius:.125rem}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton__icon--ai,.cds--skeleton__placeholder--ai,.cds--skeleton__text--ai{background:CanvasText}.cds--skeleton__icon--ai:before,.cds--skeleton__placeholder--ai:before,.cds--skeleton__text--ai:before{background:Canvas}}"]);
-
 //#endregion
 export { skeleton_placeholder_default as default };
+
 //# sourceMappingURL=skeleton-placeholder.scss.js.map

package/es/components/skeleton-text/defs.js

@@ -26,7 +26,7 @@ let SKELETON_TEXT_TYPE = /* @__PURE__ */ function(SKELETON_TEXT_TYPE) {
 	SKELETON_TEXT_TYPE["HEADING"] = "heading";
 	return SKELETON_TEXT_TYPE;
 }({});
-
 //#endregion
 export { SKELETON_TEXT_TYPE };
+
 //# sourceMappingURL=defs.js.map