@carbon/web-components 2.62.0 → 2.63.0

package/es-custom/components/edit-in-place/edit-in-place.js

@@ -0,0 +1,453 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/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";
+import "../tooltip/index.js";
+import "../icon-button/index.js";
+import { EDIT_IN_PLACE_SIZE, TOOLTIP_ALIGNMENT } from "./defs.js";
+import edit_in_place_default$1 from "./edit-in-place.scss.js";
+import { LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import Close from "@carbon/icons/es/close/16";
+import Edit16 from "@carbon/icons/es/edit/16";
+import EditOff16 from "@carbon/icons/es/edit--off/16";
+import Checkmark16 from "@carbon/icons/es/checkmark/16";
+import WarningFilled16 from "@carbon/icons/es/warning--filled/16";
+//#region src/components/edit-in-place/edit-in-place.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const blockClass = `cds-custom--edit-in-place`;
+/**
+* EditInPlace component for inline text editing.
+*
+* @element cds-custom-edit-in-place
+* @csspart input - The input element
+* @csspart actions - The button container
+* @csspart invalid-text - The error message container
+* @fires cds-custom-edit-in-place-change - Fired when the input value changes
+* @fires cds-custom-edit-in-place-save - Fired when the save button is clicked or Enter is pressed
+* @fires cds-custom-edit-in-place-cancel - Fired when the cancel button is clicked or Escape is pressed
+* @fires cds-custom-edit-in-place-blur - Fired when the input loses focus (if onBlur handler is used)
+*/
+let CDSEditInPlace = class CDSEditInPlace extends HostListenerMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.cancelLabel = "Cancel";
+		this.editAlwaysVisible = false;
+		this.editLabel = "Edit";
+		this.id = "";
+		this.inheritTypography = false;
+		this.invalid = false;
+		this.invalidText = "";
+		this.labelText = "";
+		this.placeholder = "";
+		this.readOnly = false;
+		this.readOnlyLabel = "Edit off";
+		this.readOnlyToggleTipText = "This field is read-only and cannot be edited";
+		this.saveLabel = "Save";
+		this.size = "sm";
+		this.toggleTipAlignment = "bottom";
+		this.tooltipAlignment = "top";
+		this.value = "";
+		this.defaultValue = "";
+		this._focused = false;
+		this._internalValue = "";
+		this._initialValue = "";
+		this._dirtyInput = false;
+		this._escaping = false;
+		this._clickingWithin = false;
+		this._handleDocumentClick = (e) => {
+			if (!this._focused) return;
+			if (!e.composedPath().includes(this)) if (this._canSave) this._handleSave(true);
+			else this._handleCancel(true);
+		};
+	}
+	/**
+	* Check if value has changed from initial
+	*/
+	get _hasValueChanged() {
+		return this._internalValue.trim() !== this._initialValue.trim();
+	}
+	/**
+	* Check if we can save (value changed and not invalid)
+	*/
+	get _canSave() {
+		return this._hasValueChanged && !this.invalid;
+	}
+	/**
+	* Check if we can cancel (value has changed)
+	*/
+	get _canCancel() {
+		return this._hasValueChanged;
+	}
+	/**
+	* Handle input change
+	*/
+	_handleChange(e) {
+		const input = e.target;
+		if (!this._dirtyInput) this._dirtyInput = true;
+		this._internalValue = input.value;
+		this._emitEvent("change", this._internalValue);
+	}
+	/**
+	* Handle focus
+	*/
+	_handleFocus(e) {
+		const relatedTarget = e?.relatedTarget;
+		if (e?.target !== this._inputElement && !this.readOnly && !this._focused && !this.contains(relatedTarget ?? null)) requestAnimationFrame(() => {
+			this._inputElement?.focus();
+		});
+		this._focused = true;
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("value")) {
+			const value = this.value || this.defaultValue;
+			this._internalValue = value;
+			this._initialValue = value;
+			this._dirtyInput = false;
+		}
+	}
+	_emitEvent(name, value) {
+		this.dispatchEvent(new CustomEvent(`cds-custom-edit-in-place-${name}`, {
+			bubbles: true,
+			composed: true,
+			detail: { value }
+		}));
+	}
+	/**
+	* Handle save
+	*/
+	_handleSave(exitEditMode = false) {
+		this._initialValue = this._internalValue;
+		this._dirtyInput = false;
+		this._emitEvent("save", this._internalValue);
+		if (exitEditMode) this._focused = false;
+		else requestAnimationFrame(() => {
+			this._inputElement?.focus();
+		});
+	}
+	/**
+	* Handle cancel
+	*/
+	_handleCancel(exitEditMode = false) {
+		this._dirtyInput = false;
+		this._internalValue = this._initialValue;
+		this._emitEvent("cancel", this._initialValue);
+		if (exitEditMode) this._focused = false;
+		else requestAnimationFrame(() => {
+			if (this._inputElement) {
+				this._inputElement.focus();
+				const length = this._inputElement.value.length;
+				this._inputElement.setSelectionRange(length, length);
+			}
+		});
+	}
+	/**
+	* Handle blur
+	*/
+	_handleBlur(e) {
+		const relatedTarget = e.relatedTarget;
+		const clickedWithin = this._clickingWithin;
+		const targetingChild = relatedTarget ? this.contains(relatedTarget) : false;
+		if (clickedWithin) {
+			this._clickingWithin = false;
+			if (targetingChild) return;
+		}
+		if (!clickedWithin && targetingChild) return;
+		if (this._escaping) return;
+		if (this._canSave) this._handleSave(true);
+		else this._handleCancel(true);
+		this._emitEvent("blur", this._initialValue);
+	}
+	/**
+	* Handle keyboard events
+	*/
+	_handleKeyDown(e) {
+		switch (e.key) {
+			case "Escape":
+				this._escaping = true;
+				this._inputElement?.blur();
+				this._handleCancel(false);
+				this._escaping = false;
+				break;
+			case "Enter":
+				this._escaping = true;
+				this._inputElement?.blur();
+				if (this._canSave) this._handleSave(false);
+				this._escaping = false;
+				break;
+			case "Tab":
+				if (!e.shiftKey && !this._hasValueChanged) this._handleCancel(true);
+				break;
+			default: break;
+		}
+	}
+	/**
+	* Handle toolbar mousedown to track button clicks
+	* Uses composedPath() to properly handle Shadow DOM boundaries
+	*/
+	_handleToolbarMouseDown(e) {
+		const foundButton = e.composedPath().find((el) => el instanceof HTMLElement && (el.tagName === "BUTTON" || el.tagName === "CDS-ICON-BUTTON"));
+		if (foundButton) {
+			this._clickingWithin = true;
+			if (foundButton.hasAttribute("disabled") || foundButton.getAttribute("aria-disabled") === "true") e.preventDefault();
+		}
+	}
+	/**
+	* Handle keydown on save button to exit edit mode on Tab
+	*/
+	_handleSaveButtonKeyDown(e) {
+		if (e.key === "Tab" && !e.shiftKey) {
+			this._focused = false;
+			this._inputElement?.blur();
+		}
+	}
+	/**
+	* Initialize component
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		const value = this.value || this.defaultValue;
+		this._internalValue = value;
+		this._initialValue = value;
+	}
+	/**
+	* Cleanup component state when removed from DOM
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._escaping = false;
+		this._clickingWithin = false;
+		this._focused = false;
+	}
+	/**
+	* Render the input element
+	*/
+	_renderInput() {
+		const inputClasses = {
+			[`${blockClass}__text-input`]: true,
+			[`cds-custom--text-input`]: true,
+			[`cds-custom--text-input--${this.size}`]: true
+		};
+		const inputElement = html`
+      <input
+        id=${this.id}
+        class=${classMap(inputClasses)}
+        type="text"
+        part="input"
+        placeholder=${this.placeholder}
+        .value=${this._internalValue}
+        @input=${this._handleChange}
+        @focus=${this._handleFocus}
+        @keydown=${this._handleKeyDown}
+        aria-label=${this.labelText}
+        aria-invalid=${this.invalid ? "true" : "false"}
+        ?readonly=${this.readOnly} />
+    `;
+		if (this.readOnly) return html`
+        <cds-custom-tooltip
+          align=${this.toggleTipAlignment}
+          class="${blockClass}__toggletip-wrapper">
+          ${inputElement}
+          <cds-custom-tooltip-content
+            >${this.readOnlyToggleTipText}</cds-custom-tooltip-content
+          >
+        </cds-custom-tooltip>
+      `;
+		return inputElement;
+	}
+	/**
+	* Render action buttons
+	*/
+	_renderActions() {
+		if (this.readOnly) return html`
+        <cds-custom-icon-button
+          class="${blockClass}__btn-readonly"
+          size=${this.size}
+          align=${this.tooltipAlignment}
+          kind="ghost"
+          @click=${this._handleFocus}>
+          ${iconLoader(EditOff16, { slot: "icon" })}
+          <span slot="tooltip-content">${this.readOnlyLabel}</span>
+        </cds-custom-icon-button>
+      `;
+		if (this._focused) return html`
+        <cds-custom-icon-button
+          class="${blockClass}__btn ${blockClass}__btn-cancel"
+          size=${this.size}
+          align=${this.tooltipAlignment}
+          kind="ghost"
+          ?disabled=${!this._canCancel}
+          @click=${() => this._handleCancel(false)}>
+          ${iconLoader(Close, { slot: "icon" })}
+          <span slot="tooltip-content">${this.cancelLabel}</span>
+        </cds-custom-icon-button>
+        <cds-custom-icon-button
+          class="${blockClass}__btn ${blockClass}__btn-save"
+          size=${this.size}
+          align=${this.tooltipAlignment}
+          kind="ghost"
+          ?disabled=${!this._canSave}
+          @click=${() => this._handleSave(false)}
+          @keydown=${this._handleSaveButtonKeyDown}>
+          ${iconLoader(Checkmark16, { slot: "icon" })}
+          <span slot="tooltip-content">${this.saveLabel}</span>
+        </cds-custom-icon-button>
+      `;
+		return html`
+      <cds-custom-icon-button
+        class=${classMap({
+			[`${blockClass}__btn`]: true,
+			[`${blockClass}__btn-edit`]: true,
+			[`${blockClass}__btn-edit--always-visible`]: this.editAlwaysVisible
+		})}
+        size=${this.size}
+        align=${this.tooltipAlignment}
+        kind="ghost"
+        @click=${this._handleFocus}>
+        ${iconLoader(Edit16, { slot: "icon" })}
+        <span slot="tooltip-content">${this.editLabel}</span>
+      </cds-custom-icon-button>
+    `;
+	}
+	render() {
+		return html`
+      <div class=${classMap({
+			[`${blockClass}__container`]: true,
+			[`${blockClass}--${this.size}`]: true,
+			[`${blockClass}--focused`]: this._focused,
+			[`${blockClass}--invalid`]: this.invalid,
+			[`${blockClass}--inherit-type`]: this.inheritTypography,
+			[`${blockClass}--readonly`]: this.readOnly
+		})} @blur=${this._handleBlur}>
+        ${this._renderInput()}
+        <div
+          class="${blockClass}__toolbar"
+          part="actions"
+          @mousedown=${this._handleToolbarMouseDown}>
+          ${this.invalid ? iconLoader(WarningFilled16, { class: `${blockClass}__warning-icon` }) : ""}
+          ${this._renderActions()}
+        </div>
+      </div>
+      ${this.invalid ? html`<p class="${blockClass}__warning-text" part="invalid-text">
+            ${this.invalidText}
+          </p>` : ""}
+    `;
+	}
+	static {
+		this.styles = edit_in_place_default$1;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "cancel-label",
+	reflect: true
+})], CDSEditInPlace.prototype, "cancelLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "edit-always-visible",
+	reflect: true
+})], CDSEditInPlace.prototype, "editAlwaysVisible", void 0);
+__decorate([property({
+	type: String,
+	attribute: "edit-label",
+	reflect: true
+})], CDSEditInPlace.prototype, "editLabel", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSEditInPlace.prototype, "id", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "inherit-typography",
+	reflect: true
+})], CDSEditInPlace.prototype, "inheritTypography", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSEditInPlace.prototype, "invalid", void 0);
+__decorate([property({
+	type: String,
+	attribute: "invalid-text",
+	reflect: true
+})], CDSEditInPlace.prototype, "invalidText", void 0);
+__decorate([property({
+	type: String,
+	attribute: "label-text",
+	reflect: true
+})], CDSEditInPlace.prototype, "labelText", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSEditInPlace.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "read-only",
+	reflect: true
+})], CDSEditInPlace.prototype, "readOnly", void 0);
+__decorate([property({
+	type: String,
+	attribute: "read-only-label",
+	reflect: true
+})], CDSEditInPlace.prototype, "readOnlyLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "read-only-toggletip-text",
+	reflect: true
+})], CDSEditInPlace.prototype, "readOnlyToggleTipText", void 0);
+__decorate([property({
+	type: String,
+	attribute: "save-label",
+	reflect: true
+})], CDSEditInPlace.prototype, "saveLabel", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSEditInPlace.prototype, "size", void 0);
+__decorate([property({
+	type: String,
+	attribute: "toggletip-alignment",
+	reflect: true
+})], CDSEditInPlace.prototype, "toggleTipAlignment", void 0);
+__decorate([property({
+	type: String,
+	attribute: "tooltip-alignment",
+	reflect: true
+})], CDSEditInPlace.prototype, "tooltipAlignment", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSEditInPlace.prototype, "value", void 0);
+__decorate([property({
+	type: String,
+	attribute: "default-value",
+	reflect: true
+})], CDSEditInPlace.prototype, "defaultValue", void 0);
+__decorate([state()], CDSEditInPlace.prototype, "_focused", void 0);
+__decorate([state()], CDSEditInPlace.prototype, "_internalValue", void 0);
+__decorate([state()], CDSEditInPlace.prototype, "_initialValue", void 0);
+__decorate([state()], CDSEditInPlace.prototype, "_dirtyInput", void 0);
+__decorate([query("input")], CDSEditInPlace.prototype, "_inputElement", void 0);
+__decorate([HostListener("document:click")], CDSEditInPlace.prototype, "_handleDocumentClick", void 0);
+CDSEditInPlace = __decorate([carbonElement(`cds-custom-edit-in-place`)], CDSEditInPlace);
+var edit_in_place_default = CDSEditInPlace;
+//#endregion
+export { EDIT_IN_PLACE_SIZE, TOOLTIP_ALIGNMENT, edit_in_place_default as default };
+
+//# sourceMappingURL=edit-in-place.js.map

package/es-custom/components/edit-in-place/edit-in-place.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-in-place.js","names":["Close16","styles","customElement"],"sources":["../../../src/components/edit-in-place/edit-in-place.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './edit-in-place.scss?lit';\nimport Edit16 from '@carbon/icons/es/edit/16';\nimport EditOff16 from '@carbon/icons/es/edit--off/16';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16';\nimport Close16 from '@carbon/icons/es/close/16';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16';\nimport '../icon-button/index';\nimport '../tooltip/index';\nimport { EDIT_IN_PLACE_SIZE, TOOLTIP_ALIGNMENT } from './defs';\n\nexport { EDIT_IN_PLACE_SIZE, TOOLTIP_ALIGNMENT };\n\nconst blockClass = `${prefix}--edit-in-place`;\n\nexport type EditInPlaceSize = `${EDIT_IN_PLACE_SIZE}`;\nexport type TooltipAlignment = `${TOOLTIP_ALIGNMENT}`;\n\n/**\n * EditInPlace component for inline text editing.\n *\n * @element cds-custom-edit-in-place\n * @csspart input - The input element\n * @csspart actions - The button container\n * @csspart invalid-text - The error message container\n * @fires cds-custom-edit-in-place-change - Fired when the input value changes\n * @fires cds-custom-edit-in-place-save - Fired when the save button is clicked or Enter is pressed\n * @fires cds-custom-edit-in-place-cancel - Fired when the cancel button is clicked or Escape is pressed\n * @fires cds-custom-edit-in-place-blur - Fired when the input loses focus (if onBlur handler is used)\n */\n@customElement(`${prefix}-edit-in-place`)\nclass CDSEditInPlace extends HostListenerMixin(LitElement) {\n  /**\n   * Label for the cancel button\n   */\n  @property({ type: String, attribute: 'cancel-label', reflect: true })\n  cancelLabel = 'Cancel';\n\n  /**\n   * By default the edit icon is shown on hover only. Set to true to always show it.\n   */\n  @property({ type: Boolean, attribute: 'edit-always-visible', reflect: true })\n  editAlwaysVisible = false;\n\n  /**\n   * Label for the edit button\n   */\n  @property({ type: String, attribute: 'edit-label', reflect: true })\n  editLabel = 'Edit';\n\n  /**\n   * Specify a custom id for the input\n   */\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  /**\n   * Causes the text entry field to inherit typography settings from the container\n   */\n  @property({ type: Boolean, attribute: 'inherit-typography', reflect: true })\n  inheritTypography = false;\n\n  /**\n   * Determines if the input is invalid\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Text that is displayed if the input is invalid\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  invalidText = '';\n\n  /**\n   * Text that will be read by a screen reader when visiting this control\n   */\n  @property({ type: String, attribute: 'label-text', reflect: true })\n  labelText = '';\n\n  /**\n   * Placeholder text for the input\n   */\n  @property({ type: String, reflect: true })\n  placeholder = '';\n\n  /**\n   * Determines if the input is in readOnly mode\n   */\n  @property({ type: Boolean, attribute: 'read-only', reflect: true })\n  readOnly = false;\n\n  /**\n   * Label for the edit off button that displays when in read only mode\n   */\n  @property({ type: String, attribute: 'read-only-label', reflect: true })\n  readOnlyLabel = 'Edit off';\n\n  /**\n   * Text for the toggletip that displays when in read only mode\n   */\n  @property({\n    type: String,\n    attribute: 'read-only-toggletip-text',\n    reflect: true,\n  })\n  readOnlyToggleTipText = 'This field is read-only and cannot be edited';\n\n  /**\n   * Label for the save button\n   */\n  @property({ type: String, attribute: 'save-label', reflect: true })\n  saveLabel = 'Save';\n\n  /**\n   * Vertical size of control\n   */\n  @property({ type: String, reflect: true })\n  size: EditInPlaceSize = 'sm';\n\n  /**\n   * Alignment for the toggletip that displays when in read only mode\n   */\n  @property({ type: String, attribute: 'toggletip-alignment', reflect: true })\n  toggleTipAlignment: TooltipAlignment = 'bottom';\n\n  /**\n   * Tooltip alignment for buttons\n   */\n  @property({ type: String, attribute: 'tooltip-alignment', reflect: true })\n  tooltipAlignment: TooltipAlignment = 'top';\n\n  /**\n   * Current value of the input (controlled mode)\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * Default value for uncontrolled mode\n   */\n  @property({ type: String, attribute: 'default-value', reflect: true })\n  defaultValue = '';\n\n  /**\n   * Internal state for focused mode\n   */\n  @state()\n  private _focused = false;\n\n  /**\n   * Internal value for managing state\n   */\n  @state()\n  private _internalValue = '';\n\n  /**\n   * Internal state for initial value (when entering edit mode)\n   */\n  @state()\n  private _initialValue = '';\n\n  /**\n   * Internal state to track if input has been modified\n   */\n  @state()\n  private _dirtyInput = false;\n\n  /**\n   * Flag to track if we're handling escape key\n   */\n  private _escaping = false;\n\n  /**\n   * Flag to track if we're clicking within the component\n   */\n  private _clickingWithin = false;\n\n  /**\n   * Reference to the input element\n   */\n  @query('input')\n  private _inputElement?: HTMLInputElement;\n\n  /**\n   * Check if value has changed from initial\n   */\n  private get _hasValueChanged(): boolean {\n    return this._internalValue.trim() !== this._initialValue.trim();\n  }\n\n  /**\n   * Check if we can save (value changed and not invalid)\n   */\n  private get _canSave(): boolean {\n    return this._hasValueChanged && !this.invalid;\n  }\n\n  /**\n   * Check if we can cancel (value has changed)\n   */\n  private get _canCancel(): boolean {\n    return this._hasValueChanged;\n  }\n\n  /**\n   * Handle input change\n   */\n  private _handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    if (!this._dirtyInput) {\n      this._dirtyInput = true;\n    }\n\n    this._internalValue = input.value;\n    this._emitEvent('change', this._internalValue);\n  }\n\n  /**\n   * Handle focus\n   */\n  private _handleFocus(e?: FocusEvent) {\n    const relatedTarget = e?.relatedTarget as Node | null | undefined;\n    const target = e?.target as EventTarget | null | undefined;\n\n    if (\n      target !== this._inputElement &&\n      !this.readOnly &&\n      !this._focused &&\n      !this.contains(relatedTarget ?? null)\n    ) {\n      requestAnimationFrame(() => {\n        this._inputElement?.focus();\n      });\n    }\n\n    this._focused = true;\n  }\n\n  protected override willUpdate(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('value')) {\n      const value = this.value || this.defaultValue;\n      this._internalValue = value;\n      this._initialValue = value;\n      this._dirtyInput = false;\n    }\n  }\n\n  private _emitEvent(name: string, value: string) {\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-edit-in-place-${name}`, {\n        bubbles: true,\n        composed: true,\n        detail: { value },\n      })\n    );\n  }\n\n  /**\n   * Handle save\n   */\n  private _handleSave(exitEditMode = false) {\n    this._initialValue = this._internalValue;\n    this._dirtyInput = false;\n\n    this._emitEvent('save', this._internalValue);\n\n    if (exitEditMode) {\n      this._focused = false;\n    } else {\n      requestAnimationFrame(() => {\n        this._inputElement?.focus();\n      });\n    }\n  }\n\n  /**\n   * Handle cancel\n   */\n  private _handleCancel(exitEditMode = false) {\n    this._dirtyInput = false;\n    this._internalValue = this._initialValue;\n\n    this._emitEvent('cancel', this._initialValue);\n\n    if (exitEditMode) {\n      this._focused = false;\n    } else {\n      requestAnimationFrame(() => {\n        if (this._inputElement) {\n          this._inputElement.focus();\n          const length = this._inputElement.value.length;\n          this._inputElement.setSelectionRange(length, length);\n        }\n      });\n    }\n  }\n\n  /**\n   * Handle blur\n   */\n  private _handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node | null;\n    const clickedWithin = this._clickingWithin;\n    const targetingChild = relatedTarget ? this.contains(relatedTarget) : false;\n\n    // Reset clicking flag if we clicked within\n    if (clickedWithin) {\n      this._clickingWithin = false;\n      // If focus is staying within, don't exit edit mode\n      if (targetingChild) {\n        return;\n      }\n    }\n\n    // If tabbing to a button within, allow it\n    if (!clickedWithin && targetingChild) {\n      return;\n    }\n\n    // Default behavior: auto-save or auto-cancel\n    if (this._escaping) {\n      return;\n    }\n\n    if (this._canSave) {\n      this._handleSave(true);\n    } else {\n      this._handleCancel(true);\n    }\n\n    // Dispatch blur event\n    this._emitEvent('blur', this._initialValue);\n  }\n\n  /**\n   * Handle keyboard events\n   */\n  private _handleKeyDown(e: KeyboardEvent) {\n    switch (e.key) {\n      case 'Escape':\n        this._escaping = true;\n        this._inputElement?.blur();\n        this._handleCancel(false);\n        this._escaping = false;\n        break;\n      case 'Enter':\n        this._escaping = true;\n        this._inputElement?.blur();\n        if (this._canSave) {\n          this._handleSave(false);\n        }\n        this._escaping = false;\n        break;\n      case 'Tab':\n        // When tabbing from input, check if we're going outside the component\n        // If shift+tab, we're going backwards (let it handle naturally)\n        // If tab forward and no changes, we should exit edit mode\n        if (!e.shiftKey && !this._hasValueChanged) {\n          // Exit edit mode when tabbing out without changes\n          this._handleCancel(true);\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Handle toolbar mousedown to track button clicks\n   * Uses composedPath() to properly handle Shadow DOM boundaries\n   */\n  private _handleToolbarMouseDown(e: MouseEvent) {\n    const path = e.composedPath();\n    const foundButton = path.find(\n      (el) =>\n        el instanceof HTMLElement &&\n        (el.tagName === 'BUTTON' || el.tagName === 'CDS-ICON-BUTTON')\n    ) as HTMLElement | undefined;\n\n    if (foundButton) {\n      this._clickingWithin = true;\n\n      // For disabled buttons, prevent default to stop blur\n      const isDisabled =\n        foundButton.hasAttribute('disabled') ||\n        foundButton.getAttribute('aria-disabled') === 'true';\n      if (isDisabled) {\n        e.preventDefault();\n      }\n    }\n  }\n\n  /**\n   * Handle keydown on save button to exit edit mode on Tab\n   */\n  private _handleSaveButtonKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Tab' && !e.shiftKey) {\n      // Tab forward from save button - exit edit mode\n      this._focused = false;\n      this._inputElement?.blur();\n    }\n  }\n\n  /**\n   * Handle clicks outside the component\n   */\n  @HostListener('document:click')\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 _handleDocumentClick = (e: MouseEvent) => {\n    // Only handle if we're in focused mode\n    if (!this._focused) {\n      return;\n    }\n\n    // Check if click is outside the component\n    const path = e.composedPath();\n    const clickedInside = path.includes(this);\n\n    if (!clickedInside) {\n      // Click was outside - exit edit mode\n      if (this._canSave) {\n        this._handleSave(true);\n      } else {\n        this._handleCancel(true);\n      }\n    }\n  };\n\n  /**\n   * Initialize component\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    const value = this.value || this.defaultValue;\n    this._internalValue = value;\n    this._initialValue = value;\n  }\n\n  /**\n   * Cleanup component state when removed from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._escaping = false;\n    this._clickingWithin = false;\n    this._focused = false;\n  }\n\n  /**\n   * Render the input element\n   */\n  private _renderInput() {\n    const inputClasses = {\n      [`${blockClass}__text-input`]: true,\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--${this.size}`]: true,\n    };\n\n    const inputElement = html`\n      <input\n        id=${this.id}\n        class=${classMap(inputClasses)}\n        type=\"text\"\n        part=\"input\"\n        placeholder=${this.placeholder}\n        .value=${this._internalValue}\n        @input=${this._handleChange}\n        @focus=${this._handleFocus}\n        @keydown=${this._handleKeyDown}\n        aria-label=${this.labelText}\n        aria-invalid=${this.invalid ? 'true' : 'false'}\n        ?readonly=${this.readOnly} />\n    `;\n\n    if (this.readOnly) {\n      return html`\n        <cds-custom-tooltip\n          align=${this.toggleTipAlignment}\n          class=\"${blockClass}__toggletip-wrapper\">\n          ${inputElement}\n          <cds-custom-tooltip-content\n            >${this.readOnlyToggleTipText}</cds-custom-tooltip-content\n          >\n        </cds-custom-tooltip>\n      `;\n    }\n\n    return inputElement;\n  }\n\n  /**\n   * Render action buttons\n   */\n  private _renderActions() {\n    if (this.readOnly) {\n      return html`\n        <cds-custom-icon-button\n          class=\"${blockClass}__btn-readonly\"\n          size=${this.size}\n          align=${this.tooltipAlignment}\n          kind=\"ghost\"\n          @click=${this._handleFocus}>\n          ${iconLoader(EditOff16, { slot: 'icon' })}\n          <span slot=\"tooltip-content\">${this.readOnlyLabel}</span>\n        </cds-custom-icon-button>\n      `;\n    }\n\n    if (this._focused) {\n      return html`\n        <cds-custom-icon-button\n          class=\"${blockClass}__btn ${blockClass}__btn-cancel\"\n          size=${this.size}\n          align=${this.tooltipAlignment}\n          kind=\"ghost\"\n          ?disabled=${!this._canCancel}\n          @click=${() => this._handleCancel(false)}>\n          ${iconLoader(Close16, { slot: 'icon' })}\n          <span slot=\"tooltip-content\">${this.cancelLabel}</span>\n        </cds-custom-icon-button>\n        <cds-custom-icon-button\n          class=\"${blockClass}__btn ${blockClass}__btn-save\"\n          size=${this.size}\n          align=${this.tooltipAlignment}\n          kind=\"ghost\"\n          ?disabled=${!this._canSave}\n          @click=${() => this._handleSave(false)}\n          @keydown=${this._handleSaveButtonKeyDown}>\n          ${iconLoader(Checkmark16, { slot: 'icon' })}\n          <span slot=\"tooltip-content\">${this.saveLabel}</span>\n        </cds-custom-icon-button>\n      `;\n    }\n\n    const editBtnClasses = {\n      [`${blockClass}__btn`]: true,\n      [`${blockClass}__btn-edit`]: true,\n      [`${blockClass}__btn-edit--always-visible`]: this.editAlwaysVisible,\n    };\n\n    return html`\n      <cds-custom-icon-button\n        class=${classMap(editBtnClasses)}\n        size=${this.size}\n        align=${this.tooltipAlignment}\n        kind=\"ghost\"\n        @click=${this._handleFocus}>\n        ${iconLoader(Edit16, { slot: 'icon' })}\n        <span slot=\"tooltip-content\">${this.editLabel}</span>\n      </cds-custom-icon-button>\n    `;\n  }\n\n  render() {\n    const containerClasses = {\n      [`${blockClass}__container`]: true,\n      [`${blockClass}--${this.size}`]: true,\n      [`${blockClass}--focused`]: this._focused,\n      [`${blockClass}--invalid`]: this.invalid,\n      [`${blockClass}--inherit-type`]: this.inheritTypography,\n      [`${blockClass}--readonly`]: this.readOnly,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)} @blur=${this._handleBlur}>\n        ${this._renderInput()}\n        <div\n          class=\"${blockClass}__toolbar\"\n          part=\"actions\"\n          @mousedown=${this._handleToolbarMouseDown}>\n          ${this.invalid\n            ? iconLoader(WarningFilled16, {\n                class: `${blockClass}__warning-icon`,\n              })\n            : ''}\n          ${this._renderActions()}\n        </div>\n      </div>\n      ${this.invalid\n        ? html`<p class=\"${blockClass}__warning-text\" part=\"invalid-text\">\n            ${this.invalidText}\n          </p>`\n        : ''}\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSEditInPlace;\n"],"mappings":"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"}

package/es-custom/components/edit-in-place/edit-in-place.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from "lit";
+//#region src/components/edit-in-place/edit-in-place.scss?lit
+var edit_in_place_default = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{padding:0;border:0;margin:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);line-height:var(--cds-heading-06-line-height,1.199);letter-spacing:var(--cds-heading-06-letter-spacing,0)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);line-height:var(--cds-heading-05-line-height,1.25);letter-spacing:var(--cds-heading-05-letter-spacing,0)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);line-height:var(--cds-heading-04-line-height,1.28572);letter-spacing:var(--cds-heading-04-letter-spacing,0)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);line-height:var(--cds-heading-03-line-height,1.4);letter-spacing:var(--cds-heading-03-letter-spacing,0)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);line-height:var(--cds-heading-02-line-height,1.5);letter-spacing:var(--cds-heading-02-letter-spacing,0)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);line-height:var(--cds-heading-01-line-height,1.42857);letter-spacing:var(--cds-heading-01-letter-spacing,.16px)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);line-height:var(--cds-body-02-line-height,1.5);letter-spacing:var(--cds-body-02-letter-spacing,0)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--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}}.cds-custom--assistive-text,.cds-custom--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds-custom--edit-in-place,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container{--cds--edit-in-place--size:2rem;display:flex;align-items:center;background:transparent;cursor:pointer}.cds-custom--edit-in-place--sm{--cds--edit-in-place--size:2.5rem}.cds-custom--edit-in-place--md{--cds--edit-in-place--size:3rem}.cds-custom--edit-in-place--lg{--cds--edit-in-place--size:4rem}.cds-custom--edit-in-place__toggletip-wrapper,.cds-custom--edit-in-place__toggletip-wrapper .cds-custom--toggletip-button{display:block;inline-size:100%}.cds-custom--edit-in-place:hover,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:hover{background:var(--cds-field-01,#f4f4f4)}.cds-custom--edit-in-place:hover .cds-custom--edit-in-place__btn-edit,.cds-custom--edit-in-place__btn-edit.cds-custom--edit-in-place__btn-edit--always-visible,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:hover .cds-custom--edit-in-place__btn-edit{visibility:visible}.cds-custom--edit-in-place__btn-edit{visibility:hidden}.cds-custom--edit-in-place--invalid{border:2px solid var(--cds-support-error,#da1e28)}.cds-custom--edit-in-place--focused{background:var(--cds-field-01,#f4f4f4)}.cds-custom--edit-in-place--focused:has(.cds-custom--edit-in-place__text-input:focus){outline:2px solid var(--cds-focus,#0f62fe)}.cds-custom--edit-in-place--invalid.cds-custom--edit-in-place--focused{border:none}.cds-custom--edit-in-place__text-input{flex:1}.cds-custom--edit-in-place--inherit-type .cds-custom--edit-in-place__text-input{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}.cds-custom--edit-in-place__text-input-label{display:none}.cds-custom--edit-in-place__warning-icon{margin:auto .5rem;color:var(--cds-support-error,#da1e28);inline-size:1rem}.cds-custom--edit-in-place__warning-text{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);color:var(--cds-support-error,#da1e28);margin-block-start:.5rem}.cds-custom--edit-in-place__text-input.cds-custom--text-input{border:none;background:transparent;cursor:pointer;outline:none}.cds-custom--edit-in-place:not(.cds-custom--edit-in-place--focused) .cds-custom--edit-in-place__text-input.cds-custom--text-input:active,.cds-custom--edit-in-place:not(.cds-custom--edit-in-place--focused) .cds-custom--edit-in-place__text-input.cds-custom--text-input:focus,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:not(.cds-custom--edit-in-place--focused) .cds-custom--edit-in-place__text-input.cds-custom--text-input:active,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:not(.cds-custom--edit-in-place--focused) .cds-custom--edit-in-place__text-input.cds-custom--text-input:focus{outline:none}.cds-custom--edit-in-place__toolbar{--toolbar-width:var(--cds--edit-in-place--size);--toolbar-width-focussed:calc(2 * var(--cds--edit-in-place--size));display:inline-flex;align-self:stretch;inline-size:var(--toolbar-width)}.cds-custom--edit-in-place__toolbar .cds-custom--btn.cds-custom--btn--icon-only:not(cds-custom-icon-button){padding:0;min-block-size:unset;block-size:var(--cds--edit-in-place--size);inline-size:var(--cds--edit-in-place--size)}.cds-custom--edit-in-place__toolbar cds-custom-icon-button::part(button){padding:.25rem}.cds-custom--edit-in-place--invalid .cds-custom--edit-in-place__toolbar{--toolbar-width:calc(2rem + var(--cds--edit-in-place--size));--toolbar-width-focussed:calc(2rem + 2 * var(--cds--edit-in-place--size))}@keyframes edit-in-place-slide-in{0%{overflow:hidden;inline-size:var(--toolbar-width)}99%{overflow:hidden;inline-size:var(--toolbar-width-focussed)}to{overflow:visible;inline-size:var(--toolbar-width-focussed)}}.cds-custom--edit-in-place--focused:not(.cds-custom--edit-in-place--readonly) .cds-custom--edit-in-place__toolbar{overflow:initial;animation:edit-in-place-slide-in .15s cubic-bezier(0,0,.38,.9);inline-size:var(--toolbar-width-focussed)}:host(cds-custom-edit-in-place){display:block}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container{display:flex;align-items:center;background:transparent;container-name:edit-in-place;container-type:inline-size;cursor:pointer;padding-inline-start:1rem}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container.cds-custom--edit-in-place--focused,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:hover{background:var(--cds-field-01,#f4f4f4)}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container.cds-custom--edit-in-place--focused{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:0}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:has(.cds-custom--edit-in-place__btn:focus-within){outline:none}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container.cds-custom--edit-in-place--invalid{border:2px solid var(--cds-support-error,#da1e28)}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container.cds-custom--edit-in-place--invalid.cds-custom--edit-in-place--focused{border:none}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__text-input{outline:none}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__text-input:focus{outline:none}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__btn-edit{visibility:hidden}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__btn-edit.cds-custom--edit-in-place__btn-edit--always-visible{visibility:visible}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__container:hover .cds-custom--edit-in-place__btn-edit{visibility:visible}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar{justify-content:end}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar cds-custom-icon-button{display:flex;align-items:stretch;padding:0;block-size:100%;min-block-size:unset}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-cancel::part(button),:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-cancel::part(button):hover,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-save::part(button),:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-save::part(button):hover{border:transparent}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-cancel::part(button):focus,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-save::part(button):focus{border:transparent;outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-cancel::part(button):disabled,:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toolbar .cds-custom--edit-in-place__btn-save::part(button):disabled{border:transparent;opacity:.5}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toggletip-wrapper{display:flex;flex:1}:host(cds-custom-edit-in-place) .cds-custom--edit-in-place__toggletip-wrapper button[slot=tooltip-trigger]{all:unset;display:flex;flex:1;cursor:pointer}"]);
+//#endregion
+export { edit_in_place_default as default };
+
+//# sourceMappingURL=edit-in-place.scss.js.map

package/es-custom/components/edit-in-place/edit-in-place.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-in-place.scss.js","names":[],"sources":["../../../src/components/edit-in-place/edit-in-place.scss?lit"],"sourcesContent":["/*\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/components/edit-in-place' as edit-in-place-styles;\n\n@include edit-in-place-styles.edit-in-place;\n\n$block-class: #{$prefix}--edit-in-place;\n\n:host(#{$prefix}-edit-in-place) {\n  display: block;\n\n  .#{$block-class}__container {\n    @extend .#{$block-class} !optional;\n\n    display: flex;\n    align-items: center;\n    background: transparent;\n    container-name: edit-in-place;\n    container-type: inline-size;\n    cursor: pointer;\n    padding-inline-start: $spacing-05;\n\n    &:hover,\n    &.#{$block-class}--focused {\n      background: $field-01;\n    }\n\n    &.#{$block-class}--focused {\n      outline: 2px solid $focus;\n      outline-offset: 0;\n    }\n\n    &:has(.#{$block-class}__btn:focus-within) {\n      outline: none;\n    }\n\n    &.#{$block-class}--invalid {\n      border: 2px solid $support-error;\n    }\n\n    &.#{$block-class}--invalid.#{$block-class}--focused {\n      border: none;\n    }\n  }\n\n  .#{$block-class}__text-input {\n    outline: none;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .#{$block-class}__btn-edit {\n    visibility: hidden;\n\n    &.#{$block-class}__btn-edit--always-visible {\n      visibility: visible;\n    }\n  }\n\n  .#{$block-class}__container:hover .#{$block-class}__btn-edit {\n    visibility: visible;\n  }\n\n  .#{$block-class}__toolbar {\n    justify-content: end;\n  }\n\n  .#{$block-class}__toolbar #{$prefix}-icon-button {\n    display: flex;\n    align-items: stretch;\n    padding: 0;\n    block-size: 100%;\n    min-block-size: unset;\n  }\n\n  .#{$block-class}__toolbar .#{$block-class}__btn-save::part(button),\n  .#{$block-class}__toolbar .#{$block-class}__btn-cancel::part(button),\n  .#{$block-class}__toolbar .#{$block-class}__btn-save::part(button):hover,\n  .#{$block-class}__toolbar .#{$block-class}__btn-cancel::part(button):hover {\n    border: none;\n    border-color: transparent;\n  }\n\n  .#{$block-class}__toolbar .#{$block-class}__btn-save::part(button):focus,\n  .#{$block-class}__toolbar .#{$block-class}__btn-cancel::part(button):focus {\n    border: none;\n    border-color: transparent;\n    outline: 2px solid $focus;\n    outline-offset: -2px;\n  }\n\n  .#{$block-class}__toolbar .#{$block-class}__btn-save::part(button):disabled,\n  .#{$block-class}__toolbar\n    .#{$block-class}__btn-cancel::part(button):disabled {\n    border: none;\n    border-color: transparent;\n    opacity: 0.5;\n  }\n\n  .#{$block-class}__toggletip-wrapper {\n    display: flex;\n    flex: 1;\n\n    button[slot='tooltip-trigger'] {\n      all: unset;\n      display: flex;\n      flex: 1;\n      cursor: pointer;\n    }\n  }\n}\n"],"mappings":""}

package/es-custom/components/edit-in-place/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './edit-in-place';
+//# sourceMappingURL=index.d.ts.map

package/es-custom/components/edit-in-place/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/edit-in-place/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,iBAAiB,CAAC"}

package/es-custom/components/edit-in-place/index.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "./edit-in-place.js";
+//#region src/components/edit-in-place/index.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+//#endregion
+
+//# sourceMappingURL=index.js.map

package/es-custom/components/edit-in-place/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/edit-in-place/index.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport './edit-in-place';\n"],"mappings":""}