@carbon/web-components 2.52.0 → 2.53.0-rc.0

package/es-custom/components/slider/slider-skeleton.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 slider_default from "./slider.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-
 //#region src/components/slider/slider-skeleton.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -31,40 +30,40 @@ let CDSSliderSkeleton = class CDSSliderSkeleton extends LitElement {
 	render() {
 		const { twoHandles } = this;
 		const containerClasses = classMap({
-			[`${prefix}--slider-container`]: true,
-			[`${prefix}--skeleton`]: true,
-			[`${prefix}--slider-container--two-handles`]: twoHandles
+			[`cds-custom--slider-container`]: true,
+			[`cds-custom--skeleton`]: true,
+			[`cds-custom--slider-container--two-handles`]: twoHandles
 		});
 		const lowerThumbClasses = classMap({
-			[`${prefix}--slider__thumb`]: true,
-			[`${prefix}--slider__thumb--lower`]: twoHandles
+			[`cds-custom--slider__thumb`]: true,
+			[`cds-custom--slider__thumb--lower`]: twoHandles
 		});
 		const upperThumbClasses = classMap({
-			[`${prefix}--slider__thumb`]: true,
-			[`${prefix}--slider__thumb--upper`]: twoHandles
+			[`cds-custom--slider__thumb`]: true,
+			[`cds-custom--slider__thumb--upper`]: twoHandles
 		});
 		const lowerThumbWrapperClasses = classMap({
-			[`${prefix}--slider__thumb-wrapper`]: true,
-			[`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+			[`cds-custom--slider__thumb-wrapper`]: true,
+			[`cds-custom--slider__thumb-wrapper--lower`]: twoHandles
 		});
 		const upperThumbWrapperClasses = classMap({
-			[`${prefix}--slider__thumb-wrapper`]: true,
-			[`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+			[`cds-custom--slider__thumb-wrapper`]: true,
+			[`cds-custom--slider__thumb-wrapper--upper`]: twoHandles
 		});
 		return html`
-      <span class="${prefix}--label ${prefix}--skeleton"></span>
+      <span class="${"cds-custom"}--label ${"cds-custom"}--skeleton"></span>
       <div class="${containerClasses}">
-        <span class="${prefix}--slider__range-label"></span>
-        <div class="${prefix}--slider">
-          <div class="${prefix}--slider__track"></div>
-          <div class="${prefix}--slider__filled-track"></div>
+        <span class="${"cds-custom"}--slider__range-label"></span>
+        <div class="${"cds-custom"}--slider">
+          <div class="${"cds-custom"}--slider__track"></div>
+          <div class="${"cds-custom"}--slider__filled-track"></div>
           ${twoHandles ? html`
                 <div class="${lowerThumbWrapperClasses}">
                   <div class="${lowerThumbClasses}">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 16 24"
-                      class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
+                      class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower">
                       <path
                         d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                       <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -77,7 +76,7 @@ let CDSSliderSkeleton = class CDSSliderSkeleton extends LitElement {
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 16 24"
-                    class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
+                    class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper">
                     <path
                       d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                     <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -85,7 +84,7 @@ let CDSSliderSkeleton = class CDSSliderSkeleton extends LitElement {
                 </div>
               </div>` : void 0}
         </div>
-        <span class="${prefix}--slider__range-label"></span>
+        <span class="${"cds-custom"}--slider__range-label"></span>
       </div>
     `;
 	}
@@ -97,9 +96,9 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSSliderSkeleton.prototype, "twoHandles", void 0);
-CDSSliderSkeleton = __decorate([carbonElement(`${prefix}-slider-skeleton`)], CDSSliderSkeleton);
+CDSSliderSkeleton = __decorate([carbonElement(`cds-custom-slider-skeleton`)], CDSSliderSkeleton);
 var slider_skeleton_default = CDSSliderSkeleton;
-
 //#endregion
 export { slider_skeleton_default as default };
+
 //# sourceMappingURL=slider-skeleton.js.map

package/es-custom/components/slider/slider-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/slider/slider-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './slider.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton of slider.\n */\n@customElement(`${prefix}-slider-skeleton`)\nclass CDSSliderSkeleton extends LitElement {\n  /**\n   * `Turn the slider into a range slider.\n   */\n  @property({ type: Boolean, reflect: true })\n  twoHandles = false;\n\n  render() {\n    const { twoHandles } = this;\n    const containerClasses = classMap({\n      [`${prefix}--slider-container`]: true,\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--slider-container--two-handles`]: twoHandles,\n    });\n    const lowerThumbClasses = classMap({\n      [`${prefix}--slider__thumb`]: true,\n      [`${prefix}--slider__thumb--lower`]: twoHandles,\n    });\n    const upperThumbClasses = classMap({\n      [`${prefix}--slider__thumb`]: true,\n      [`${prefix}--slider__thumb--upper`]: twoHandles,\n    });\n    const lowerThumbWrapperClasses = classMap({\n      [`${prefix}--slider__thumb-wrapper`]: true,\n      [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles,\n    });\n    const upperThumbWrapperClasses = classMap({\n      [`${prefix}--slider__thumb-wrapper`]: true,\n      [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles,\n    });\n    return html`\n      <span class=\"${prefix}--label ${prefix}--skeleton\"></span>\n      <div class=\"${containerClasses}\">\n        <span class=\"${prefix}--slider__range-label\"></span>\n        <div class=\"${prefix}--slider\">\n          <div class=\"${prefix}--slider__track\"></div>\n          <div class=\"${prefix}--slider__filled-track\"></div>\n          ${twoHandles\n            ? html`\n                <div class=\"${lowerThumbWrapperClasses}\">\n                  <div class=\"${lowerThumbClasses}\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 16 24\"\n                      class=\"${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower\">\n                      <path\n                        d=\"M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z\"></path>\n                      <path fill=\"none\" d=\"M-4 0h24v24H-4z\"></path>\n                    </svg>\n                  </div>\n                </div>\n              `\n            : html` <div class=\"${lowerThumbClasses}\"></div> `}\n          ${twoHandles\n            ? html` <div class=\"${upperThumbWrapperClasses}\">\n                <div class=\"${upperThumbClasses}\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 16 24\"\n                    class=\"${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper\">\n                    <path\n                      d=\"M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z\"></path>\n                    <path fill=\"none\" d=\"M-4 0h24v24H-4z\"></path>\n                  </svg>\n                </div>\n              </div>`\n            : undefined}\n        </div>\n        <span class=\"${prefix}--slider__range-label\"></span>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSSliderSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,8BACM,0BAA0B,WAAW;;;oBAK5B;;CAEb,SAAS;EACP,MAAM,EAAE,eAAe;EACvB,MAAM,mBAAmB,SAAS;IAC/B,GAAG,OAAO,sBAAsB;IAChC,GAAG,OAAO,cAAc;IACxB,GAAG,OAAO,mCAAmC;GAC/C,CAAC;EACF,MAAM,oBAAoB,SAAS;IAChC,GAAG,OAAO,mBAAmB;IAC7B,GAAG,OAAO,0BAA0B;GACtC,CAAC;EACF,MAAM,oBAAoB,SAAS;IAChC,GAAG,OAAO,mBAAmB;IAC7B,GAAG,OAAO,0BAA0B;GACtC,CAAC;EACF,MAAM,2BAA2B,SAAS;IACvC,GAAG,OAAO,2BAA2B;IACrC,GAAG,OAAO,kCAAkC;GAC9C,CAAC;EACF,MAAM,2BAA2B,SAAS;IACvC,GAAG,OAAO,2BAA2B;IACrC,GAAG,OAAO,kCAAkC;GAC9C,CAAC;AACF,SAAO,IAAI;qBACM,OAAO,UAAU,OAAO;oBACzB,iBAAiB;uBACd,OAAO;sBACR,OAAO;wBACL,OAAO;wBACP,OAAO;YACnB,aACE,IAAI;8BACY,yBAAyB;gCACvB,kBAAkB;;;;+BAInB,OAAO,uBAAuB,OAAO;;;;;;;kBAQtD,IAAI,gBAAgB,kBAAkB,WAAW;YACnD,aACE,IAAI,gBAAgB,yBAAyB;8BAC7B,kBAAkB;;;;6BAInB,OAAO,uBAAuB,OAAO;;;;;;wBAOpD,OAAU;;uBAED,OAAO;;;;;gBAKZA;;;YArEf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;gCAL5CC,cAAc,GAAG,OAAO,kBAAkB;AA6E3C,8BAAe"}
+{"version":3,"file":"slider-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/slider/slider-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './slider.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton of slider.\n */\n@customElement(`${prefix}-slider-skeleton`)\nclass CDSSliderSkeleton extends LitElement {\n  /**\n   * `Turn the slider into a range slider.\n   */\n  @property({ type: Boolean, reflect: true })\n  twoHandles = false;\n\n  render() {\n    const { twoHandles } = this;\n    const containerClasses = classMap({\n      [`${prefix}--slider-container`]: true,\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--slider-container--two-handles`]: twoHandles,\n    });\n    const lowerThumbClasses = classMap({\n      [`${prefix}--slider__thumb`]: true,\n      [`${prefix}--slider__thumb--lower`]: twoHandles,\n    });\n    const upperThumbClasses = classMap({\n      [`${prefix}--slider__thumb`]: true,\n      [`${prefix}--slider__thumb--upper`]: twoHandles,\n    });\n    const lowerThumbWrapperClasses = classMap({\n      [`${prefix}--slider__thumb-wrapper`]: true,\n      [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles,\n    });\n    const upperThumbWrapperClasses = classMap({\n      [`${prefix}--slider__thumb-wrapper`]: true,\n      [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles,\n    });\n    return html`\n      <span class=\"${prefix}--label ${prefix}--skeleton\"></span>\n      <div class=\"${containerClasses}\">\n        <span class=\"${prefix}--slider__range-label\"></span>\n        <div class=\"${prefix}--slider\">\n          <div class=\"${prefix}--slider__track\"></div>\n          <div class=\"${prefix}--slider__filled-track\"></div>\n          ${twoHandles\n            ? html`\n                <div class=\"${lowerThumbWrapperClasses}\">\n                  <div class=\"${lowerThumbClasses}\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 16 24\"\n                      class=\"${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower\">\n                      <path\n                        d=\"M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z\"></path>\n                      <path fill=\"none\" d=\"M-4 0h24v24H-4z\"></path>\n                    </svg>\n                  </div>\n                </div>\n              `\n            : html` <div class=\"${lowerThumbClasses}\"></div> `}\n          ${twoHandles\n            ? html` <div class=\"${upperThumbWrapperClasses}\">\n                <div class=\"${upperThumbClasses}\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 16 24\"\n                    class=\"${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper\">\n                    <path\n                      d=\"M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z\"></path>\n                    <path fill=\"none\" d=\"M-4 0h24v24H-4z\"></path>\n                  </svg>\n                </div>\n              </div>`\n            : undefined}\n        </div>\n        <span class=\"${prefix}--slider__range-label\"></span>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSSliderSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,oBAAA,MACM,0BAA0B,WAAW;;;oBAK5B;;CAEb,SAAS;EACP,MAAM,EAAE,eAAe;EACvB,MAAM,mBAAmB,SAAS;IAC/B,0BAAgC;IAChC,kBAAwB;IACxB,uCAA6C;GAC/C,CAAC;EACF,MAAM,oBAAoB,SAAS;IAChC,uBAA6B;IAC7B,8BAAoC;GACtC,CAAC;EACF,MAAM,oBAAoB,SAAS;IAChC,uBAA6B;IAC7B,8BAAoC;GACtC,CAAC;EACF,MAAM,2BAA2B,SAAS;IACvC,+BAAqC;IACrC,sCAA4C;GAC9C,CAAC;EACF,MAAM,2BAA2B,SAAS;IACvC,+BAAqC;IACrC,sCAA4C;GAC9C,CAAC;AACF,SAAO,IAAI;2BACa,UAAA,MAAiB;oBACzB,iBAAiB;6BACP;4BACD;8BACE;8BACA;YACnB,aACE,IAAI;8BACY,yBAAyB;gCACvB,kBAAkB;;;;qCAIZ,uBAAA,MAA8B;;;;;;;kBAQtD,IAAI,gBAAgB,kBAAkB,WAAW;YACnD,aACE,IAAI,gBAAgB,yBAAyB;8BAC7B,kBAAkB;;;;mCAIZ,uBAAA,MAA8B;;;;;;wBAOpD,KAAA,EAAU;;6BAEM;;;;;gBAKZA;;;YArEf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,cAAA,KAAA,EAAA;gCAL5CC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AA6E3C,IAAA,0BAAe"}

package/es-custom/components/slider/slider.js

@@ -5,9 +5,9 @@
  * 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 FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -18,7 +18,6 @@ import { LitElement, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import throttle from "lodash-es/throttle";
-
 //#region src/components/slider/slider.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -184,7 +183,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 	}
 	_setThumbTooltipOpen(thumb, open) {
 		if (!this.hideTextInput || !thumb) return;
-		const tooltip = thumb.closest(`${prefix}-tooltip`);
+		const tooltip = thumb.closest(`cds-custom-tooltip`);
 		if (tooltip) tooltip.open = open;
 	}
 	_handleFormdata(event) {
@@ -240,7 +239,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 	_startDrag(event) {
 		if (!this.readonly && !this.disabled) {
 			let eventContainer = event.target.id;
-			if (!eventContainer) eventContainer = event.target.closest(`.${prefix}--slider__thumb`)?.id ?? "";
+			if (!eventContainer) eventContainer = event.target.closest(`.cds-custom--slider__thumb`)?.id ?? "";
 			if (eventContainer === "thumb") {
 				this._dragging = true;
 				this._thumbNode.style.touchAction = "none";
@@ -257,7 +256,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 	*/
 	_handleClick(event) {
 		let eventContainer = event.target.id;
-		if (!eventContainer) eventContainer = event.target.closest(`.${prefix}--slider__thumb`)?.id ?? "";
+		if (!eventContainer) eventContainer = event.target.closest(`.cds-custom--slider__thumb`)?.id ?? "";
 		if (!this.disabled && !this.readonly) {
 			const { _trackNode: trackNode } = this;
 			const isRtl = trackNode.ownerDocument.defaultView.getComputedStyle(trackNode).getPropertyValue("direction") === "rtl";
@@ -404,7 +403,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 		super.disconnectedCallback();
 	}
 	updated() {
-		const sliderfilledTrack = this?.shadowRoot?.querySelector(`.${prefix}--slider__filled-track`);
+		const sliderfilledTrack = this?.shadowRoot?.querySelector(`.cds-custom--slider__filled-track`);
 		if (sliderfilledTrack) if (this.unstable_valueUpper || this.unstable_valueUpper === "") sliderfilledTrack.style.transform = this.unstable_valueUpper ? `translate(${this._rate * 100}%, -50%) scaleX(${this._rateUpper - this._rate})` : `translate(0%, -50%) scaleX(${this._rate})`;
 		else sliderfilledTrack.style.transform = this.unstable_valueUpper ? `translate(${this._rate * 100}%, -50%) scaleX(${this._rateUpper - this._rate})` : `translate(0%, -50%) scaleX(${this._rate})`;
 	}
@@ -458,42 +457,42 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 			warn: isInteractive && isValid && warn
 		};
 		const labelClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--visually-hidden`]: hideLabel,
-			[`${prefix}--label--disabled`]: disabled
+			[`cds-custom--label`]: true,
+			[`cds-custom--visually-hidden`]: hideLabel,
+			[`cds-custom--label--disabled`]: disabled
 		});
 		const sliderClasses = classMap({
-			[`${prefix}--slider`]: true,
-			[`${prefix}--slider--disabled`]: disabled,
-			[`${prefix}--slider--readonly`]: readonly
+			[`cds-custom--slider`]: true,
+			[`cds-custom--slider--disabled`]: disabled,
+			[`cds-custom--slider--readonly`]: readonly
 		});
 		const thumbLowerWrapperClasses = classMap({
-			[`${prefix}--icon-tooltip`]: true,
-			[`${prefix}--slider__thumb-wrapper`]: true,
-			[`${prefix}--slider__thumb-wrapper--lower`]: unstable_valueUpper || unstable_valueUpper === ""
+			[`cds-custom--icon-tooltip`]: true,
+			[`cds-custom--slider__thumb-wrapper`]: true,
+			[`cds-custom--slider__thumb-wrapper--lower`]: unstable_valueUpper || unstable_valueUpper === ""
 		});
 		const thumbLowerClasses = classMap({
-			[`${prefix}--slider__thumb`]: true,
-			[`${prefix}--slider__thumb--lower`]: unstable_valueUpper || unstable_valueUpper === "",
-			[`${prefix}--slider__thumb-disabled`]: disabled
+			[`cds-custom--slider__thumb`]: true,
+			[`cds-custom--slider__thumb--lower`]: unstable_valueUpper || unstable_valueUpper === "",
+			[`cds-custom--slider__thumb-disabled`]: disabled
 		});
 		const thumbUpperWrapperClasses = classMap({
-			[`${prefix}--icon-tooltip`]: true,
-			[`${prefix}--slider__thumb-wrapper`]: true,
-			[`${prefix}--slider__thumb-wrapper--upper`]: true
+			[`cds-custom--icon-tooltip`]: true,
+			[`cds-custom--slider__thumb-wrapper`]: true,
+			[`cds-custom--slider__thumb-wrapper--upper`]: true
 		});
 		const thumbUpperClasses = classMap({
-			[`${prefix}--slider__thumb`]: true,
-			[`${prefix}--slider__thumb--upper`]: true,
-			[`${prefix}--slider__thumb-disabled`]: disabled
+			[`cds-custom--slider__thumb`]: true,
+			[`cds-custom--slider__thumb--upper`]: true,
+			[`cds-custom--slider__thumb-disabled`]: disabled
 		});
 		return html`
       <label class="${labelClasses}" @click="${handleClickLabel}">
         <slot name="label-text">${labelText}</slot>
       </label>
-      <div class="${prefix}--slider-container">
+      <div class="${"cds-custom"}--slider-container">
         ${unstable_valueUpper || unstable_valueUpper === "" ? html` <slot name="lower-input"></slot>` : ""}
-        <span class="${prefix}--slider__range-label">
+        <span class="${"cds-custom"}--slider__range-label">
           <slot name="min-text">${formatMinText(min, minLabel)}</slot>
         </span>
         <div
@@ -524,7 +523,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 16 24"
-                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
+                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower">
                             <path
                               d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                             <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -532,7 +531,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 16 24"
-                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
+                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
                             <path
                               d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                             <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -564,7 +563,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 16 24"
-                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower">
+                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower">
                             <path
                               d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                             <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -572,7 +571,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                           <svg
                             xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 16 24"
-                            class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
+                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
                             <path
                               d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                             <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -603,7 +602,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 16 24"
-                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
+                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper">
                         <path
                           d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                         <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -611,7 +610,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 16 24"
-                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
+                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
                         <path
                           d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                         <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -641,7 +640,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 16 24"
-                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper">
+                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper">
                         <path
                           d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                         <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -649,7 +648,7 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 16 24"
-                        class="${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
+                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
                         <path
                           d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                         <path fill="none" d="M-4 0h24v24H-4z"></path>
@@ -660,12 +659,12 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
                     </div>
                   </div>
                 ` : html``}
-          <div id="track" class="${prefix}--slider__track"></div>
-          ${unstable_valueUpper || unstable_valueUpper === "" ? html` <div class="${prefix}--slider__filled-track"></div> ` : html` <div class="${prefix}-ce--slider__filled-track-container">
-                <div class="${prefix}--slider__filled-track"></div>
+          <div id="track" class="${"cds-custom"}--slider__track"></div>
+          ${unstable_valueUpper || unstable_valueUpper === "" ? html` <div class="${"cds-custom"}--slider__filled-track"></div> ` : html` <div class="${"cds-custom"}-ce--slider__filled-track-container">
+                <div class="${"cds-custom"}--slider__filled-track"></div>
               </div>`}
         </div>
-        <span class="${prefix}--slider__range-label">
+        <span class="${"cds-custom"}--slider__range-label">
           <slot name="max-text">${formatMaxText(max, maxLabel)}</slot>
         </span>
         <slot></slot>
@@ -673,12 +672,12 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 
       ${normalizedProps.invalid ? html`
             <div
-              class="${prefix}--slider__validation-msg ${prefix}--slider__validation-msg--invalid ${prefix}--form-requirement">
+              class="${"cds-custom"}--slider__validation-msg ${"cds-custom"}--slider__validation-msg--invalid ${"cds-custom"}--form-requirement">
               ${invalidText}
             </div>
           ` : null}
       ${normalizedProps.warn ? html`<div
-            class="${prefix}--slider__validation-msg ${prefix}--form-requirement">
+            class="${"cds-custom"}--slider__validation-msg ${"cds-custom"}--form-requirement">
             ${warnText}
           </div>` : null}
     `;
@@ -687,19 +686,19 @@ let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(L
 	* A selector that will return the `<input>` box got entering the value directly.
 	*/
 	static get selectorInput() {
-		return `${prefix}-slider-input`;
+		return `cds-custom-slider-input`;
 	}
 	/**
 	* The name of the custom event fired after the value is changed by user gesture.
 	*/
 	static get eventChange() {
-		return `${prefix}-slider-changed`;
+		return `cds-custom-slider-changed`;
 	}
 	/**
 	* The name of the custom event fired after the value is changed in `<cds-custom-slider-input>` by user gesture.
 	*/
 	static get eventChangeInput() {
-		return `${prefix}-slider-input-changed`;
+		return `cds-custom-slider-input-changed`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -784,9 +783,9 @@ __decorate([property({
 })], CDSSlider.prototype, "stepMultiplier", null);
 __decorate([property({ type: Number })], CDSSlider.prototype, "value", void 0);
 __decorate([property({ type: Boolean })], CDSSlider.prototype, "isValid", void 0);
-CDSSlider = __decorate([carbonElement(`${prefix}-slider`)], CDSSlider);
+CDSSlider = __decorate([carbonElement(`cds-custom-slider`)], CDSSlider);
 var slider_default = CDSSlider;
-
 //#endregion
 export { slider_default as default };
+
 //# sourceMappingURL=slider.js.map