@oicl/openbridge-webcomponents 2.1.0-next.1 → 2.1.0-next.2

package/dist/components/alert-menu-item/alert-menu-item.d.ts

@@ -11,7 +11,8 @@ export declare enum ObcAlertMenuItemStatus {
     Acknowledged = "acknowledged",
     NoAckAlarm = "no-ack-alarm",
     NoAckWarning = "no-ack-warning",
-    Rectified = "rectified"
+    Rectified = "rectified",
+    RectifiedUnacknowledged = "rectified-unacknowledged"
 }
 /**
  * Appearance of an alert menu item action.
@@ -32,12 +33,13 @@ export declare enum ObcAlertMenuItemActionState {
  * ### Features
  * - **Status Variants:** Supports multiple alert states via the `status` property:
  *   - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.
+ *   - **RectifiedUnacknowledged:** The situation that raised the alert has cleared, but the alert still waits for acknowledgment, so the ACK action stays.
  *   - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.
  *   - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.
  * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary "shelved" icon appears if the alert is shelved.
  * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.
  * - **Expandable:** Can be toggled open/closed for additional details (via click).
- * - **Action Buttons:** Displays an "ACK" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.
+ * - **Action Buttons:** Displays an "ACK" button for the statuses that still wait for acknowledgment (`unacknowledged` and `rectified-unacknowledged`) and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.
  *   - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).
  * - **Animated Intro:** Optional animation when the item appears.
  * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).
@@ -51,7 +53,9 @@ export declare enum ObcAlertMenuItemActionState {
  * - Only show the "ACK" action for alerts that require acknowledgment.
  * - Provide `secondaryActionLabel` to add a second action alongside ACK.
  * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).
- * - Use the `shelved` property to indicate alerts that are temporarily deferred.
+ * - Use the `shelved` property to indicate alerts that are temporarily deferred, and `blocked` for alerts another system has set aside. The alert menus sort items into their tabs by `status` and `shelved`; `blocked` is there for menus that list blocked alerts apart.
+ *
+ * **TODO(designer):** Should a blocked alert show a marker, as a shelved one shows the shelf icon?
  *
  * ### Slots
  * | Slot Name     | Renders When...                | Purpose                                              |
@@ -91,13 +95,16 @@ export declare enum ObcAlertMenuItemActionState {
  *   When true, the `icon` slot is rendered.
  * @property shelved - Indicates if the alert is shelved (temporarily deferred).
  *   When true, a tertiary icon is shown to represent the shelved state.
+ * @property blocked - Indicates that another system has blocked the alert as not relevant here.
+ *   For menus that list blocked alerts apart; the item itself shows no marker for it yet.
  * @property title - The title of the alert.
  * @property description - The description of the alert.
  * @property day - The day label for the alert (e.g., "Yesterday").
  * @property time - The time label for the alert (e.g., "14:30").
  * @property status - The current status of the alert item.
  *   Determines visual style, icon, and action button visibility.
- *   Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.
+ *   Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified', 'rectified-unacknowledged'.
+ *   'unacknowledged' and 'rectified-unacknowledged' show the ACK action; the other values show a trailing icon instead.
  *   Default is 'unacknowledged'.
  * @property open - Whether the item is expanded/open to show additional details.
  *   Toggled by clicking the item.
@@ -130,6 +137,8 @@ export declare class ObcAlertMenuItem extends LitElement {
     hasIcon: boolean;
     /** Indicates if the alert is shelved (temporarily deferred). When true, a tertiary icon is shown to represent the shelved state. */
     shelved: boolean;
+    /** Indicates that another system has blocked the alert as not relevant here. For menus that list blocked alerts apart; the item itself shows no marker for it yet. */
+    blocked: boolean;
     /** The title of the alert. */
     title: string;
     /** The description of the alert. */
@@ -138,7 +147,7 @@ export declare class ObcAlertMenuItem extends LitElement {
     day: string;
     /** The time label for the alert (e.g., "14:30"). */
     time: string;
-    /** The current status of the alert item. Determines visual style, icon, and action button visibility. Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'. Default is 'unacknowledged'. */
+    /** The current status of the alert item. Determines visual style, icon, and action button visibility. Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified', 'rectified-unacknowledged'. 'unacknowledged' and 'rectified-unacknowledged' show the ACK action; the other values show a trailing icon instead. Default is 'unacknowledged'. */
     status: ObcAlertMenuItemStatus;
     /** Whether the item is expanded/open to show additional details. Toggled by clicking the item. */
     open: boolean;
@@ -152,6 +161,7 @@ export declare class ObcAlertMenuItem extends LitElement {
     primaryActionState: ObcAlertMenuItemActionState;
     /** Appearance of the secondary action: `enabled`, `disabled` or `none`, which hides it. */
     secondaryActionState: ObcAlertMenuItemActionState;
+    private get canAck();
     private get primaryActionLabel();
     private get secondaryActionLabelToShow();
     private get primaryActionDisabled();
@@ -165,7 +175,7 @@ export declare class ObcAlertMenuItem extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'ob-alert-menu-item': ObcAlertMenuItem;
+        'obc-alert-menu-item': ObcAlertMenuItem;
     }
 }
 //# sourceMappingURL=alert-menu-item.d.ts.map

package/dist/components/alert-menu-item/alert-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,2CAA2C,CAAC;AAGjF,oBAAY,sBAAsB;IAChC,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,iBAAiB;IAC3B,YAAY,mBAAmB;IAC/B,SAAS,cAAc;CACxB;AAED;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoGG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACnB,OAAO,UAAS;IAED,OAAO,UAAS;IAEvB,KAAK,SAAM;IAEpB,WAAW,SAAM;IAEjB,GAAG,SAAM;IAET,IAAI,SAAM;IAEK,MAAM,yBACP;IAEb,IAAI,UAAS;IAEd,IAAI,EAAE,sBAAsB,CAClB;IAET,YAAY,UAAS;IAEtB,oBAAoB,SAAM;IAE1B,kBAAkB,EAAE,2BAA2B,CACnC;IAEZ,oBAAoB,EAAE,2BAA2B,CACxC;IAEnC,OAAO,KAAK,kBAAkB,GAK7B;IAED,OAAO,KAAK,0BAA0B,GAKrC;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,uBAAuB,GAElC;IAED,OAAO,KAAK,eAAe,GAG1B;IAED,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,0BAA0B;IAKzB,MAAM;IAoDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,2CAA2C,CAAC;AAGjF,oBAAY,sBAAsB;IAChC,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,iBAAiB;IAC3B,YAAY,mBAAmB;IAC/B,SAAS,cAAc;IACvB,uBAAuB,6BAA6B;CACrD;AAED;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACnB,OAAO,UAAS;IAED,OAAO,UAAS;IAEhB,OAAO,UAAS;IAEvB,KAAK,SAAM;IAEpB,WAAW,SAAM;IAEjB,GAAG,SAAM;IAET,IAAI,SAAM;IAEK,MAAM,yBACP;IAEb,IAAI,UAAS;IAEd,IAAI,EAAE,sBAAsB,CAClB;IAET,YAAY,UAAS;IAEtB,oBAAoB,SAAM;IAE1B,kBAAkB,EAAE,2BAA2B,CACnC;IAEZ,oBAAoB,EAAE,2BAA2B,CACxC;IAEnC,OAAO,KAAK,MAAM,GAKjB;IAED,OAAO,KAAK,kBAAkB,GAK7B;IAED,OAAO,KAAK,0BAA0B,GAKrC;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,uBAAuB,GAElC;IAED,OAAO,KAAK,eAAe,GAG1B;IAED,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,0BAA0B;IAKzB,MAAM;IAoDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/dist/components/alert-menu-item/alert-menu-item.js

@@ -17,6 +17,7 @@ var ObcAlertMenuItemStatus = /* @__PURE__ */ function(ObcAlertMenuItemStatus) {
 	ObcAlertMenuItemStatus["NoAckAlarm"] = "no-ack-alarm";
 	ObcAlertMenuItemStatus["NoAckWarning"] = "no-ack-warning";
 	ObcAlertMenuItemStatus["Rectified"] = "rectified";
+	ObcAlertMenuItemStatus["RectifiedUnacknowledged"] = "rectified-unacknowledged";
 	return ObcAlertMenuItemStatus;
 }({});
 /**
@@ -36,6 +37,7 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends LitElement {
 		super(..._args);
 		this.hasIcon = false;
 		this.shelved = false;
+		this.blocked = false;
 		this.title = "";
 		this.description = "";
 		this.day = "";
@@ -48,9 +50,12 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends LitElement {
 		this.primaryActionState = "enabled";
 		this.secondaryActionState = "none";
 	}
+	get canAck() {
+		return this.status === "unacknowledged" || this.status === "rectified-unacknowledged";
+	}
 	get primaryActionLabel() {
 		if (this.primaryActionState === "none") return "";
-		return this.status === "unacknowledged" ? "ACK" : "";
+		return this.canAck ? "ACK" : "";
 	}
 	get secondaryActionLabelToShow() {
 		if (this.secondaryActionState === "none") return "";
@@ -63,7 +68,7 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends LitElement {
 		return this.secondaryActionState === "disabled";
 	}
 	get hasTrailingIcon() {
-		return this.status !== "unacknowledged";
+		return !this.canAck;
 	}
 	handleMessageClick(event) {
 		event.stopPropagation();
@@ -123,6 +128,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], ObcAlertMenuItem.prototype, "shelved", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ObcAlertMenuItem.prototype, "blocked", void 0);
 __decorate([property({ type: String })], ObcAlertMenuItem.prototype, "title", void 0);
 __decorate([property({ type: String })], ObcAlertMenuItem.prototype, "description", void 0);
 __decorate([property({ type: String })], ObcAlertMenuItem.prototype, "day", void 0);

package/dist/components/alert-menu-item/alert-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-menu-item.js","names":[],"sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport compentStyle from './alert-menu-item.css?inline';\nimport '../message-menu-item/message-menu-item.js';\nimport '../alert-icon/alert-icon.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcAlertMenuItemStatus {\n  Unacknowledged = 'unacknowledged',\n  Caution = 'caution',\n  Acknowledged = 'acknowledged',\n  NoAckAlarm = 'no-ack-alarm',\n  NoAckWarning = 'no-ack-warning',\n  Rectified = 'rectified',\n}\n\n/**\n * Appearance of an alert menu item action.\n * - `enabled`: Action is shown and interactive (default).\n * - `disabled`: Action is shown but cannot be triggered.\n * - `none`: Action is removed and takes no space.\n */\nexport enum ObcAlertMenuItemActionState {\n  Enabled = 'enabled',\n  Disabled = 'disabled',\n  None = 'none',\n}\n\n/**\n * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n *\n * Presents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n *\n * ### Features\n * - **Status Variants:** Supports multiple alert states via the `status` property:\n *   - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n *   - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n *   - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n * - **Expandable:** Can be toggled open/closed for additional details (via click).\n * - **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n *   - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n * - **Animated Intro:** Optional animation when the item appears.\n * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n *\n * ### Usage Guidelines\n * Use `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n *\n * - Use the `status` property to reflect the current state of the alert.\n * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n * - Use the `icon` slot for a source/system icon if needed.\n * - Only show the \"ACK\" action for alerts that require acknowledgment.\n * - Provide `secondaryActionLabel` to add a second action alongside ACK.\n * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n * - Use the `shelved` property to indicate alerts that are temporarily deferred.\n *\n * ### Slots\n * | Slot Name     | Renders When...                | Purpose                                              |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon    | Always                        | Main alert icon representing the alert type.         |\n * | title         | Always                        | Title content; falls back to the `title` property.   |\n * | description   | Always                        | Description content; falls back to the `description` property. |\n * | icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |\n *\n * ### Events\n * - **ack-click** – Fired when the ACK action button is clicked.\n * - **ack-secondary-click** – Fired when the secondary action button is clicked.\n * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n *\n * ### Best Practices\n * - Only display the ACK action for alerts that require acknowledgment.\n * - Use concise titles and descriptions for quick scanning.\n * - For grouped alerts, ensure each item has a unique status and icon as appropriate.\n * - Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n * - Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n *\n * **Example:**\n * ```\n * <obc-alert-menu-item\n *   status=\"unacknowledged\"\n *   title=\"Engine Temperature High\"\n *   description=\"Port main engine temperature exceeds normal operating range\"\n *   time=\"14:30\"\n *   hasIcon\n * >\n *   <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n *   <obi-engine slot=\"icon\"></obi-engine>\n * </obc-alert-menu-item>\n * ```\n *\n * @property hasIcon - Whether to display a secondary icon (e.g., system/source) in the item.\n *   When true, the `icon` slot is rendered.\n * @property shelved - Indicates if the alert is shelved (temporarily deferred).\n *   When true, a tertiary icon is shown to represent the shelved state.\n * @property title - The title of the alert.\n * @property description - The description of the alert.\n * @property day - The day label for the alert (e.g., \"Yesterday\").\n * @property time - The time label for the alert (e.g., \"14:30\").\n * @property status - The current status of the alert item.\n *   Determines visual style, icon, and action button visibility.\n *   Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.\n *   Default is 'unacknowledged'.\n * @property open - Whether the item is expanded/open to show additional details.\n *   Toggled by clicking the item.\n * @property size - Layout size of the menu item.\n *   Controls whether content is single-line or multi-line.\n *   Possible values: 'single-line', 'multi-line'.\n *   Default is 'single-line'.\n * @property animateIntro - Whether to animate the item's appearance (intro animation).\n * @property secondaryActionLabel - The label for the secondary action button.\n *   Unlike the primary (ACK) action, the secondary label is not derived from\n *   `status`; it must be provided explicitly. The secondary action is only\n *   shown when a non-empty label is set and `secondaryActionState` is not\n *   `none`.\n * @property primaryActionState - Appearance of the primary (ACK) action: `enabled`, `disabled` or `none`,\n *   which hides it.\n * @property secondaryActionState - Appearance of the secondary action: `enabled`, `disabled` or `none`, which\n *   hides it.\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot title - Title content; falls back to the `title` property when empty.\n * @slot description - Description content; falls back to the `description` property when empty.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires {CustomEvent<void>} ack-click - Fired when the ACK action button is clicked.\n * @fires {CustomEvent<void>} ack-secondary-click - Fired when the secondary action button is clicked.\n * @fires {CustomEvent<void>} item-click - Fired when the alert menu item is clicked.\n * @stable\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Boolean, reflect: true}) shelved = false;\n\n  @property({type: String}) override title = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: String}) day = '';\n\n  @property({type: String}) time = '';\n\n  @property({type: String, reflect: true}) status =\n    ObcAlertMenuItemStatus.Unacknowledged;\n\n  @property({type: Boolean}) open = false;\n\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n\n  @property({type: Boolean}) animateIntro = false;\n\n  @property({type: String}) secondaryActionLabel = '';\n\n  @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.Enabled;\n\n  @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.None;\n\n  private get primaryActionLabel() {\n    if (this.primaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.status === ObcAlertMenuItemStatus.Unacknowledged ? 'ACK' : '';\n  }\n\n  private get secondaryActionLabelToShow() {\n    if (this.secondaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.secondaryActionLabel;\n  }\n\n  private get primaryActionDisabled() {\n    return this.primaryActionState === ObcAlertMenuItemActionState.Disabled;\n  }\n\n  private get secondaryActionDisabled() {\n    return this.secondaryActionState === ObcAlertMenuItemActionState.Disabled;\n  }\n\n  private get hasTrailingIcon() {\n    // True when we need the action container but don't have an ACK button\n    return this.status !== ObcAlertMenuItemStatus.Unacknowledged;\n  }\n\n  private handleMessageClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('item-click'));\n    this.open = !this.open;\n  }\n\n  private handleActionClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ack-click'));\n  }\n\n  private handleSecondaryActionClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ack-secondary-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-message-menu-item\n        .title=${this.title}\n        .description=${this.description}\n        .day=${this.day}\n        .time=${this.time}\n        .primaryActionLabel=${this.primaryActionLabel}\n        .secondaryActionLabel=${this.secondaryActionLabelToShow}\n        .enablePrimaryAction=${!this.primaryActionDisabled}\n        .enableSecondaryAction=${!this.secondaryActionDisabled}\n        .size=${this.size}\n        .open=${this.open}\n        .hasSecondaryIcon=${this.hasIcon}\n        .isShelved=${this.shelved}\n        .hasTrailingIcon=${this.hasTrailingIcon}\n        enhancedIcon\n        hasPrimaryIcon\n        @message-click=${this.handleMessageClick}\n        @primary-action-click=${this.handleActionClick}\n        @secondary-action-click=${this.handleSecondaryActionClick}\n      >\n        <slot name=\"alert-icon\" slot=\"primary-icon\"></slot>\n        <slot name=\"title\" slot=\"title\">${this.title}</slot>\n        <slot name=\"description\" slot=\"description\">${this.description}</slot>\n        ${\n          this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n            : nothing\n        }\n        ${choose(this.status, [\n          [\n            ObcAlertMenuItemStatus.NoAckAlarm,\n            () =>\n              html`<obi-alarm-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-alarm-noack-iec>`,\n          ],\n          [\n            ObcAlertMenuItemStatus.NoAckWarning,\n            () =>\n              html`<obi-warning-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-warning-noack-iec>`,\n          ],\n        ])}\n      </obc-message-menu-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ob-alert-menu-item': ObcAlertMenuItem;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-menu-item.js","names":[],"sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport compentStyle from './alert-menu-item.css?inline';\nimport '../message-menu-item/message-menu-item.js';\nimport '../alert-icon/alert-icon.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcAlertMenuItemStatus {\n  Unacknowledged = 'unacknowledged',\n  Caution = 'caution',\n  Acknowledged = 'acknowledged',\n  NoAckAlarm = 'no-ack-alarm',\n  NoAckWarning = 'no-ack-warning',\n  Rectified = 'rectified',\n  RectifiedUnacknowledged = 'rectified-unacknowledged',\n}\n\n/**\n * Appearance of an alert menu item action.\n * - `enabled`: Action is shown and interactive (default).\n * - `disabled`: Action is shown but cannot be triggered.\n * - `none`: Action is removed and takes no space.\n */\nexport enum ObcAlertMenuItemActionState {\n  Enabled = 'enabled',\n  Disabled = 'disabled',\n  None = 'none',\n}\n\n/**\n * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n *\n * Presents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n *\n * ### Features\n * - **Status Variants:** Supports multiple alert states via the `status` property:\n *   - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n *   - **RectifiedUnacknowledged:** The situation that raised the alert has cleared, but the alert still waits for acknowledgment, so the ACK action stays.\n *   - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n *   - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n * - **Expandable:** Can be toggled open/closed for additional details (via click).\n * - **Action Buttons:** Displays an \"ACK\" button for the statuses that still wait for acknowledgment (`unacknowledged` and `rectified-unacknowledged`) and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n *   - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n * - **Animated Intro:** Optional animation when the item appears.\n * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n *\n * ### Usage Guidelines\n * Use `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n *\n * - Use the `status` property to reflect the current state of the alert.\n * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n * - Use the `icon` slot for a source/system icon if needed.\n * - Only show the \"ACK\" action for alerts that require acknowledgment.\n * - Provide `secondaryActionLabel` to add a second action alongside ACK.\n * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n * - Use the `shelved` property to indicate alerts that are temporarily deferred, and `blocked` for alerts another system has set aside. The alert menus sort items into their tabs by `status` and `shelved`; `blocked` is there for menus that list blocked alerts apart.\n *\n * **TODO(designer):** Should a blocked alert show a marker, as a shelved one shows the shelf icon?\n *\n * ### Slots\n * | Slot Name     | Renders When...                | Purpose                                              |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon    | Always                        | Main alert icon representing the alert type.         |\n * | title         | Always                        | Title content; falls back to the `title` property.   |\n * | description   | Always                        | Description content; falls back to the `description` property. |\n * | icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |\n *\n * ### Events\n * - **ack-click** – Fired when the ACK action button is clicked.\n * - **ack-secondary-click** – Fired when the secondary action button is clicked.\n * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n *\n * ### Best Practices\n * - Only display the ACK action for alerts that require acknowledgment.\n * - Use concise titles and descriptions for quick scanning.\n * - For grouped alerts, ensure each item has a unique status and icon as appropriate.\n * - Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n * - Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n *\n * **Example:**\n * ```\n * <obc-alert-menu-item\n *   status=\"unacknowledged\"\n *   title=\"Engine Temperature High\"\n *   description=\"Port main engine temperature exceeds normal operating range\"\n *   time=\"14:30\"\n *   hasIcon\n * >\n *   <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n *   <obi-engine slot=\"icon\"></obi-engine>\n * </obc-alert-menu-item>\n * ```\n *\n * @property hasIcon - Whether to display a secondary icon (e.g., system/source) in the item.\n *   When true, the `icon` slot is rendered.\n * @property shelved - Indicates if the alert is shelved (temporarily deferred).\n *   When true, a tertiary icon is shown to represent the shelved state.\n * @property blocked - Indicates that another system has blocked the alert as not relevant here.\n *   For menus that list blocked alerts apart; the item itself shows no marker for it yet.\n * @property title - The title of the alert.\n * @property description - The description of the alert.\n * @property day - The day label for the alert (e.g., \"Yesterday\").\n * @property time - The time label for the alert (e.g., \"14:30\").\n * @property status - The current status of the alert item.\n *   Determines visual style, icon, and action button visibility.\n *   Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified', 'rectified-unacknowledged'.\n *   'unacknowledged' and 'rectified-unacknowledged' show the ACK action; the other values show a trailing icon instead.\n *   Default is 'unacknowledged'.\n * @property open - Whether the item is expanded/open to show additional details.\n *   Toggled by clicking the item.\n * @property size - Layout size of the menu item.\n *   Controls whether content is single-line or multi-line.\n *   Possible values: 'single-line', 'multi-line'.\n *   Default is 'single-line'.\n * @property animateIntro - Whether to animate the item's appearance (intro animation).\n * @property secondaryActionLabel - The label for the secondary action button.\n *   Unlike the primary (ACK) action, the secondary label is not derived from\n *   `status`; it must be provided explicitly. The secondary action is only\n *   shown when a non-empty label is set and `secondaryActionState` is not\n *   `none`.\n * @property primaryActionState - Appearance of the primary (ACK) action: `enabled`, `disabled` or `none`,\n *   which hides it.\n * @property secondaryActionState - Appearance of the secondary action: `enabled`, `disabled` or `none`, which\n *   hides it.\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot title - Title content; falls back to the `title` property when empty.\n * @slot description - Description content; falls back to the `description` property when empty.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires {CustomEvent<void>} ack-click - Fired when the ACK action button is clicked.\n * @fires {CustomEvent<void>} ack-secondary-click - Fired when the secondary action button is clicked.\n * @fires {CustomEvent<void>} item-click - Fired when the alert menu item is clicked.\n * @stable\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Boolean, reflect: true}) shelved = false;\n\n  @property({type: Boolean, reflect: true}) blocked = false;\n\n  @property({type: String}) override title = '';\n\n  @property({type: String}) description = '';\n\n  @property({type: String}) day = '';\n\n  @property({type: String}) time = '';\n\n  @property({type: String, reflect: true}) status =\n    ObcAlertMenuItemStatus.Unacknowledged;\n\n  @property({type: Boolean}) open = false;\n\n  @property({type: String}) size: ObcMessageMenuItemSize =\n    ObcMessageMenuItemSize.SingleLine;\n\n  @property({type: Boolean}) animateIntro = false;\n\n  @property({type: String}) secondaryActionLabel = '';\n\n  @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.Enabled;\n\n  @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =\n    ObcAlertMenuItemActionState.None;\n\n  private get canAck() {\n    return (\n      this.status === ObcAlertMenuItemStatus.Unacknowledged ||\n      this.status === ObcAlertMenuItemStatus.RectifiedUnacknowledged\n    );\n  }\n\n  private get primaryActionLabel() {\n    if (this.primaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.canAck ? 'ACK' : '';\n  }\n\n  private get secondaryActionLabelToShow() {\n    if (this.secondaryActionState === ObcAlertMenuItemActionState.None) {\n      return '';\n    }\n    return this.secondaryActionLabel;\n  }\n\n  private get primaryActionDisabled() {\n    return this.primaryActionState === ObcAlertMenuItemActionState.Disabled;\n  }\n\n  private get secondaryActionDisabled() {\n    return this.secondaryActionState === ObcAlertMenuItemActionState.Disabled;\n  }\n\n  private get hasTrailingIcon() {\n    // True when we need the action container but don't have an ACK button\n    return !this.canAck;\n  }\n\n  private handleMessageClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('item-click'));\n    this.open = !this.open;\n  }\n\n  private handleActionClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ack-click'));\n  }\n\n  private handleSecondaryActionClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ack-secondary-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-message-menu-item\n        .title=${this.title}\n        .description=${this.description}\n        .day=${this.day}\n        .time=${this.time}\n        .primaryActionLabel=${this.primaryActionLabel}\n        .secondaryActionLabel=${this.secondaryActionLabelToShow}\n        .enablePrimaryAction=${!this.primaryActionDisabled}\n        .enableSecondaryAction=${!this.secondaryActionDisabled}\n        .size=${this.size}\n        .open=${this.open}\n        .hasSecondaryIcon=${this.hasIcon}\n        .isShelved=${this.shelved}\n        .hasTrailingIcon=${this.hasTrailingIcon}\n        enhancedIcon\n        hasPrimaryIcon\n        @message-click=${this.handleMessageClick}\n        @primary-action-click=${this.handleActionClick}\n        @secondary-action-click=${this.handleSecondaryActionClick}\n      >\n        <slot name=\"alert-icon\" slot=\"primary-icon\"></slot>\n        <slot name=\"title\" slot=\"title\">${this.title}</slot>\n        <slot name=\"description\" slot=\"description\">${this.description}</slot>\n        ${\n          this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n            : nothing\n        }\n        ${choose(this.status, [\n          [\n            ObcAlertMenuItemStatus.NoAckAlarm,\n            () =>\n              html`<obi-alarm-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-alarm-noack-iec>`,\n          ],\n          [\n            ObcAlertMenuItemStatus.NoAckWarning,\n            () =>\n              html`<obi-warning-noack-iec\n                slot=\"trailing-icon\"\n                useCssColor\n              ></obi-warning-noack-iec>`,\n          ],\n        ])}\n      </obc-message-menu-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-menu-item': ObcAlertMenuItem;\n  }\n}\n"],"mappings":"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"}

package/dist/components/number-input-field/number-input-field.css.js

@@ -419,12 +419,18 @@ var number_input_field_default = css`* {
 }
 
 .wrapper.align-center .value-input {
-  width: var(--obc-number-input-center-width, auto);
-  min-width: var(--obc-number-input-center-width, 40px);
+  field-sizing: content; /* the unit hugs the value */
+  width: auto;
   text-align: right;
   flex: 0 0 auto;
 }
 
+@supports not (field-sizing: content) {
+  .wrapper.align-center .value-input {
+    flex: 1 1 auto; /* the 20-character default width would push the value out of a narrow field */
+  }
+}
+
 .wrapper.align-right .label-container,
 .wrapper.align-right-unit-outside .label-container {
   justify-content: flex-end;

package/dist/components/number-input-field/number-input-field.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-field.css.js","names":[],"sources":["../../../src/components/number-input-field/number-input-field.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n  user-select: text;\n}\n\n.wrapper {\n  @mixin base-input-field-wrapper;\n  @mixin base-input-field-sizes;\n\n  &.error .unit-text {\n    color: var(--element-neutral-color);\n  }\n}\n\n/* Shared base styles */\n@mixin base-input-field-all;\n\n.wrapper.align-center .label-container,\n.wrapper.wrapper.align-right .label-container {\n  align-items: baseline;\n}\n\n/* Number input specific: text alignment */\n.value-input {\n  text-align: right;\n}\n\n.squared .input-field-container {\n  border-radius: 0;\n}\n\n/* Unit */\n.unit-text {\n  @mixin font-instrument-unit;\n  color: var(--element-inactive-color);\n  white-space: nowrap;\n  height: var(--global-typography-instrument-unit-line-height);\n  user-select: none;\n\n  &.external {\n    padding-left: var(\n      --ui-components-input-fields-number-input-field-unit-container-padding-left\n    );\n  }\n}\n\n.wrapper.align-center .label-container:focus-within .unit-text {\n  color: var(--element-neutral-color);\n}\n\n/* Alignment variants */\n.wrapper.align-center .label-container {\n  justify-content: center;\n}\n\n.wrapper .value-input {\n  text-align: right;\n  padding: 0;\n}\n\n.wrapper.align-center .value-input {\n  width: var(--obc-number-input-center-width, auto);\n  min-width: var(--obc-number-input-center-width, 40px);\n  text-align: right;\n  flex: 0 0 auto;\n}\n\n.wrapper.align-right .label-container,\n.wrapper.align-right-unit-outside .label-container {\n  justify-content: flex-end;\n}\n"],"mappings":""}
+{"version":3,"file":"number-input-field.css.js","names":[],"sources":["../../../src/components/number-input-field/number-input-field.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n  user-select: text;\n}\n\n.wrapper {\n  @mixin base-input-field-wrapper;\n  @mixin base-input-field-sizes;\n\n  &.error .unit-text {\n    color: var(--element-neutral-color);\n  }\n}\n\n/* Shared base styles */\n@mixin base-input-field-all;\n\n.wrapper.align-center .label-container,\n.wrapper.wrapper.align-right .label-container {\n  align-items: baseline;\n}\n\n/* Number input specific: text alignment */\n.value-input {\n  text-align: right;\n}\n\n.squared .input-field-container {\n  border-radius: 0;\n}\n\n/* Unit */\n.unit-text {\n  @mixin font-instrument-unit;\n  color: var(--element-inactive-color);\n  white-space: nowrap;\n  height: var(--global-typography-instrument-unit-line-height);\n  user-select: none;\n\n  &.external {\n    padding-left: var(\n      --ui-components-input-fields-number-input-field-unit-container-padding-left\n    );\n  }\n}\n\n.wrapper.align-center .label-container:focus-within .unit-text {\n  color: var(--element-neutral-color);\n}\n\n/* Alignment variants */\n.wrapper.align-center .label-container {\n  justify-content: center;\n}\n\n.wrapper .value-input {\n  text-align: right;\n  padding: 0;\n}\n\n.wrapper.align-center .value-input {\n  field-sizing: content; /* the unit hugs the value */\n  width: auto;\n  text-align: right;\n  flex: 0 0 auto;\n}\n\n@supports not (field-sizing: content) {\n  .wrapper.align-center .value-input {\n    flex: 1 1 auto; /* the 20-character default width would push the value out of a narrow field */\n  }\n}\n\n.wrapper.align-right .label-container,\n.wrapper.align-right-unit-outside .label-container {\n  justify-content: flex-end;\n}\n"],"mappings":""}

package/dist/components/number-input-field/number-input-field.d.ts

@@ -98,6 +98,7 @@ export declare class ObcNumberInputField extends LitElement {
     private previousValue;
     private previousDisplayText;
     private lastCommittedValue;
+    private focusFromValueClick;
     private inputElement?;
     get displayValue(): string;
     private getFormatOptions;
@@ -106,18 +107,31 @@ export declare class ObcNumberInputField extends LitElement {
     private isProjectedValueAllowed;
     private onBeforeInput;
     private onFocus;
+    /**
+     * Ungroups a value the user clicked into, once the browser has placed the
+     * caret, and moves the caret with its digits. Ungrouping before that shifts
+     * the text under the pointer and the caret lands beside the clicked digit.
+     */
+    private ungroupKeepingSelection;
+    private ungroupDisplay;
     private onBlur;
     private commitDisplay;
     private dispatchInput;
     private dispatchChange;
     private get shouldUpdateValue();
     private getEffectiveDisplay;
-    private updateCenterAlignedInputWidth;
     firstUpdated(): void;
     private get isEmpty();
     willUpdate(changedProperties: PropertyValues): void;
     updated(): void;
     private renderFooterText;
+    /**
+     * Keeps focus where it is while the chrome around the value is clicked.
+     * The wrapper is a `<label>`, so the click itself focuses the input; without
+     * this the pointerdown would blur it first and commit an unfinished edit.
+     * A click on the value itself is the browser's; it is only noted, so the
+     * focus it causes ungroups the value without moving the caret.
+     */
     private onPointerDown;
     render(): TemplateResult<1>;
     static styles: import('lit').CSSResult;

package/dist/components/number-input-field/number-input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-input-field/number-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAgBb,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AACzE,MAAM,MAAM,8BAA8B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE1E,oBAAY,4BAA4B;IACtC,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,gBAAgB,uBAAuB;CACxC;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,KAAK,SAAO;IACZ,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,SAAS,EAAE,4BAA4B,CAC5B;IAEK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IAC9B,SAAS,SAAM;IACd,oBAAoB,UAAS;IAC7B,aAAa,UAAS;IAEtB,sBAAsB,UAAS;IAEhC,IAAI,SAAM;IAEV,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,uBAAuB,CACrB;IAEP,cAAc,UAAS;IACxB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IACtB,cAAc,EAAE,4BAA4B,CAClC;IAET,aAAa,UAAS;IACvB,eAAe,EAAE,4BAA4B,CACnC;IAET,OAAO,UAAS;IAEC,eAAe,SAAM;IAEvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,SAAK;IACtB,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC,iBAAiB,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,kBAAkB,CAAO;IAEnB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,6BAA6B;IA6B5B,YAAY;IAQrB,OAAO,KAAK,OAAO,GAKlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA2B5C,OAAO;IAYhB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,aAAa;IAyCZ,MAAM;IA4Gf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"number-input-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-input-field/number-input-field.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAeb,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AACzE,MAAM,MAAM,8BAA8B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE1E,oBAAY,4BAA4B;IACtC,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,gBAAgB,uBAAuB;CACxC;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,4BAA4B;IACtC,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACvB,KAAK,SAAO;IACZ,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,SAAS,EAAE,4BAA4B,CAC5B;IAEK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IAC9B,SAAS,SAAM;IACd,oBAAoB,UAAS;IAC7B,aAAa,UAAS;IAEtB,sBAAsB,UAAS;IAEhC,IAAI,SAAM;IAEV,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,uBAAuB,CACrB;IAEP,cAAc,UAAS;IACxB,UAAU,SAAM;IAEhB,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IACtB,cAAc,EAAE,4BAA4B,CAClC;IAET,aAAa,UAAS;IACvB,eAAe,EAAE,4BAA4B,CACnC;IAET,OAAO,UAAS;IAEC,eAAe,SAAM;IAEvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,SAAK;IACtB,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC,iBAAiB,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,kBAAkB,CAAO;IAE1C,OAAO,CAAC,mBAAmB,CAAS;IAEb,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,OAAO;IAaf;;;;OAIG;YACW,uBAAuB;IAiBrC,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,mBAAmB;IAUlB,YAAY;IAOrB,OAAO,KAAK,OAAO,GAKlB;IAEQ,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA2B5C,OAAO;IAUhB,OAAO,CAAC,gBAAgB;IAuBxB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IASZ,MAAM;IA4Gf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/components/number-input-field/number-input-field.js

@@ -1,5 +1,4 @@
 import { customElement } from "../../decorator.js";
-import { getCssVariableValue } from "../../charthelpers/colors.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import number_input_field_default from "./number-input-field.css.js";
 import { formatNumberForDisplay, isAllowedIntermediateInput, parseNumberInput, removeGroupingFromDisplay, valuesEqual } from "./number-input-format.js";
@@ -25,9 +24,6 @@ var ObcNumberInputFieldPlacement = /* @__PURE__ */ function(ObcNumberInputFieldP
 	ObcNumberInputFieldPlacement["Right"] = "right";
 	return ObcNumberInputFieldPlacement;
 }({});
-var characterWidth = 9.15199279785156;
-var symbolWidth = 4.287994384765653;
-var baseFontSize = 16;
 var ObcNumberInputField = class ObcNumberInputField extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -61,6 +57,7 @@ var ObcNumberInputField = class ObcNumberInputField extends LitElement {
 		this.previousValue = NaN;
 		this.previousDisplayText = "";
 		this.lastCommittedValue = NaN;
+		this.focusFromValueClick = false;
 	}
 	get displayValue() {
 		return this.displayText;
@@ -84,7 +81,6 @@ var ObcNumberInputField = class ObcNumberInputField extends LitElement {
 		const parsed = parseNumberInput(raw);
 		this.value = parsed;
 		this.previousDisplayText = raw;
-		this.updateCenterAlignedInputWidth(raw);
 		this.dispatchInput();
 	}
 	isProjectedValueAllowed(projected) {
@@ -112,6 +108,31 @@ var ObcNumberInputField = class ObcNumberInputField extends LitElement {
 	onFocus() {
 		this.hasFocus = true;
 		if (this.readonly) return;
+		if (this.focusFromValueClick) {
+			this.focusFromValueClick = false;
+			requestAnimationFrame(() => void this.ungroupKeepingSelection());
+			return;
+		}
+		this.ungroupDisplay();
+	}
+	/**
+	* Ungroups a value the user clicked into, once the browser has placed the
+	* caret, and moves the caret with its digits. Ungrouping before that shifts
+	* the text under the pointer and the caret lands beside the clicked digit.
+	*/
+	async ungroupKeepingSelection() {
+		const input = this.inputElement;
+		if (!input || !this.hasFocus) return;
+		const grouped = input.value;
+		const offsetWithoutGrouping = (offset) => removeGroupingFromDisplay(grouped.slice(0, offset ?? grouped.length), this.getFormatOptions()).length;
+		const start = offsetWithoutGrouping(input.selectionStart);
+		const end = offsetWithoutGrouping(input.selectionEnd);
+		const direction = input.selectionDirection ?? void 0;
+		this.ungroupDisplay();
+		await this.updateComplete;
+		input.setSelectionRange(start, end, direction);
+	}
+	ungroupDisplay() {
 		const source = this.displayOverride || this.displayText;
 		this.displayText = removeGroupingFromDisplay(source, this.getFormatOptions());
 		this.displayOverride = "";
@@ -158,22 +179,9 @@ var ObcNumberInputField = class ObcNumberInputField extends LitElement {
 		if (!this.shouldUpdateValue && this.inputElement) return this.inputElement.value;
 		return this.displayText;
 	}
-	updateCenterAlignedInputWidth(value) {
-		if (this.textAlign !== "center") {
-			this.style.removeProperty("--obc-number-input-center-width");
-			return;
-		}
-		const fontSize = Number.parseFloat(getCssVariableValue(this, "--global-typography-instrument-value-regular-font-size"));
-		const characters = value.replaceAll(/[.,]/g, "");
-		const symbols = value.length - characters.length;
-		const calculatedWidth = characters.length * characterWidth + symbols * symbolWidth;
-		const measuredWidth = Math.ceil(calculatedWidth * fontSize / baseFontSize);
-		this.style.setProperty("--obc-number-input-center-width", `${measuredWidth}px`);
-	}
 	firstUpdated() {
 		if (!this.displayText && !this.displayOverride) this.displayText = this.formatValueForDisplay(this.value);
 		this.lastCommittedValue = this.value;
-		this.updateCenterAlignedInputWidth(this.getEffectiveDisplay());
 	}
 	get isEmpty() {
 		if (this.inputElement) return this.inputElement.value.trim().length === 0;
@@ -195,7 +203,6 @@ var ObcNumberInputField = class ObcNumberInputField extends LitElement {
 	}
 	updated() {
 		if (this.rejectDuplicateUpdates && !valuesEqual(this.value, this.previousValue) && (this.previousDisplayText !== this.displayText || !this.hasFocus)) this.previousValue = this.value;
-		this.updateCenterAlignedInputWidth(this.getEffectiveDisplay());
 	}
 	renderFooterText(text, isError) {
 		if (!text) return nothing;
@@ -212,33 +219,20 @@ var ObcNumberInputField = class ObcNumberInputField extends LitElement {
       ${text}
     </div>`;
 	}
+	/**
+	* Keeps focus where it is while the chrome around the value is clicked.
+	* The wrapper is a `<label>`, so the click itself focuses the input; without
+	* this the pointerdown would blur it first and commit an unfinished edit.
+	* A click on the value itself is the browser's; it is only noted, so the
+	* focus it causes ungroups the value without moving the caret.
+	*/
 	onPointerDown(e) {
-		if (this.disabled) return;
-		if (this.readonly) return;
-		if (this.inputElement) {
-			e.stopPropagation();
-			e.preventDefault();
-			this.inputElement.focus();
-			const inputBox = this.inputElement.getBoundingClientRect();
-			let selectionStart;
-			if (e.clientX < inputBox.left) selectionStart = 0;
-			else if (e.clientX > inputBox.right) selectionStart = this.inputElement.value.length;
-			else {
-				const mouseX = e.clientX;
-				let inputX = inputBox.right;
-				const text = this.inputElement.value;
-				for (let i = text.length - 1; i >= 0; i--) {
-					const width = text[i].match(/[.,]/) ? symbolWidth : characterWidth;
-					if (mouseX > inputX - width / 2) {
-						selectionStart = i + 1;
-						break;
-					}
-					inputX -= width;
-				}
-				if (selectionStart === void 0) selectionStart = 0;
-			}
-			this.inputElement.setSelectionRange(selectionStart, selectionStart);
+		if (this.disabled || this.readonly) return;
+		if (e.target === this.inputElement) {
+			this.focusFromValueClick = !this.hasFocus;
+			return;
 		}
+		e.preventDefault();
 	}
 	render() {
 		const hasHelperOrError = Boolean(this.helperText) || Boolean(this.error && this.errorText);

package/dist/components/number-input-field/number-input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-field.js","names":[],"sources":["../../../src/components/number-input-field/number-input-field.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  nothing,\n  unsafeCSS,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport {property, state, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './number-input-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  formatNumberForDisplay,\n  isAllowedIntermediateInput,\n  NumberInputFormatOptions,\n  parseNumberInput,\n  removeGroupingFromDisplay,\n  valuesEqual,\n} from './number-input-format.js';\nimport {getCssVariableValue} from '../../charthelpers/colors.js';\n\nexport type ObcNumberInputFieldInputEvent = CustomEvent<{value: number}>;\nexport type ObcNumberInputFieldChangeEvent = CustomEvent<{value: number}>;\n\nexport enum ObcNumberInputFieldTextAlign {\n  Center = 'center',\n  Right = 'right',\n  RightUnitOutside = 'right-unit-outside',\n}\n\nexport enum ObcNumberInputFieldSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport enum ObcNumberInputFieldPlacement {\n  Left = 'left',\n  Center = 'center',\n  Right = 'right',\n}\n\nconst characterWidth = 9.15199279785156;\nconst symbolWidth = 4.287994384765653;\nconst baseFontSize = 16;\n/**\n * `<obc-number-input-field>` – A specialized input field for numerical values with optional unit display.\n *\n * @availableWhen errorText error==true\n * @property rejectUpdatesOnFocus - If true, the input field will not update its value on focus\n * @property rejectUpdates - If true, the value will only be initially set, and not updated on change\n * @property rejectDuplicateUpdates - If true, the input field will not update its value if the value is the same as the previous value\n *   This is useful to avoid React re-rendering to reset the value.\n * @property name - Name attribute for form integration\n * @property maxlength - Maximum number of characters allowed\n * @property minlength - Minimum number of characters required\n * @availableWhen hasLabelIcon label!=''\n * @availableWhen labelPlacement label!=''\n * @availableWhen hasHelperIcon helperText!='' || (error==true && errorText!='')\n * @availableWhen helperPlacement helperText!='' || (error==true && errorText!='')\n * @property squared - Internal property for squared corners, used when input is used in stepper-box\n * @property displayOverride - Optional display text override for controlled consumers (e.g. keyboard-numeric)\n *   that manage formatted strings while the committed value may be NaN.\n * @property validationPattern - Optional regex pattern. When set, any keystroke or paste whose resulting\n *   value does not match this pattern is blocked at the `beforeinput` stage.\n *   When unset, a permissive numeric filter (digits, sign, active separators,\n *   whitespace) is applied instead.\n * @slot leading-icon - Icon displayed before the input value (when `hasLeadingIcon` is true)\n * @slot label-icon - Icon displayed before the label text (when `hasLabelIcon` is true)\n * @slot helper-icon - Icon displayed before helper or error text (when `hasHelperIcon` is true)\n * @fires {CustomEvent<{value: number}>} input - When the numeric value changes during editing\n * @fires {CustomEvent<{value: number}>} change - When the value is committed on blur\n * @stable\n */\n@customElement('obc-number-input-field')\nexport class ObcNumberInputField extends LitElement {\n  @property({type: Number}) value = NaN;\n  @property({type: String}) unit = '';\n  @property({type: String}) placeholder = '';\n  @property({type: String}) textAlign: ObcNumberInputFieldTextAlign =\n    ObcNumberInputFieldTextAlign.Right;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @property({type: Boolean, reflect: true}) readonly = false;\n  @property({type: Boolean, reflect: true}) error = false;\n  @property({type: String}) errorText = '';\n  @property({type: Boolean}) rejectUpdatesOnFocus = false;\n  @property({type: Boolean}) rejectUpdates = false;\n\n  @property({type: Boolean}) rejectDuplicateUpdates = false;\n\n  @property({type: String}) name = '';\n\n  @property({type: Number}) maxlength?: number;\n\n  @property({type: Number}) minlength?: number;\n\n  @property({type: String}) size: ObcNumberInputFieldSize =\n    ObcNumberInputFieldSize.Regular;\n\n  @property({type: Boolean}) hasLeadingIcon = false;\n  @property({type: String}) helperText = '';\n\n  @property({type: String}) label = '';\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) hasLabelIcon = false;\n  @property({type: String}) labelPlacement: ObcNumberInputFieldPlacement =\n    ObcNumberInputFieldPlacement.Left;\n\n  @property({type: Boolean}) hasHelperIcon = false;\n  @property({type: String}) helperPlacement: ObcNumberInputFieldPlacement =\n    ObcNumberInputFieldPlacement.Left;\n\n  @property({type: Boolean}) squared = false;\n\n  @property({type: String, attribute: false}) displayOverride = '';\n\n  @property({type: String}) decimalSeparator?: string;\n  @property({type: String}) groupSeparator?: string;\n  @property({type: Number}) minFractionDigits = 0;\n  @property({type: Number}) maxFractionDigits?: number | undefined;\n\n  @property({type: String}) validationPattern = '';\n\n  @state() private hasFocus = false;\n  @state() private displayText = '';\n  @state() private previousValue = NaN;\n  @state() private previousDisplayText = '';\n  @state() private lastCommittedValue = NaN;\n\n  @query('.value-input') private inputElement?: HTMLInputElement;\n\n  get displayValue(): string {\n    return this.displayText;\n  }\n\n  private getFormatOptions(): NumberInputFormatOptions {\n    return {\n      decimalSeparator: this.decimalSeparator,\n      groupSeparator: this.groupSeparator,\n      minFractionDigits: this.minFractionDigits,\n      maxFractionDigits: this.maxFractionDigits,\n    };\n  }\n\n  private formatValueForDisplay(value: number): string {\n    return formatNumberForDisplay(value, this.getFormatOptions());\n  }\n\n  private onInput(e: Event) {\n    e.stopPropagation();\n    const raw = (e.target as HTMLInputElement).value;\n    this.displayText = raw;\n    this.displayOverride = '';\n    const parsed = parseNumberInput(raw);\n    this.value = parsed;\n    this.previousDisplayText = raw;\n    this.updateCenterAlignedInputWidth(raw);\n    this.dispatchInput();\n  }\n\n  private isProjectedValueAllowed(projected: string): boolean {\n    if (this.validationPattern) {\n      let regex: RegExp;\n      try {\n        // Anchor the consumer pattern so it must match the whole projected\n        // value rather than any substring (e.g. `[0-9]` must not pass `a1`).\n        regex = new RegExp(`^(?:${this.validationPattern})$`);\n      } catch {\n        // Invalid pattern: fall back to the numeric filter instead of\n        // allowing arbitrary input.\n        return isAllowedIntermediateInput(projected, this.getFormatOptions());\n      }\n      return regex.test(projected);\n    }\n    return isAllowedIntermediateInput(projected, this.getFormatOptions());\n  }\n\n  private onBeforeInput(e: InputEvent) {\n    if (this.disabled || this.readonly) return;\n    const input = e.target as HTMLInputElement;\n\n    const incoming = e.data ?? e.dataTransfer?.getData('text/plain') ?? null;\n    // Deletions, history, and formatting (`insertLineBreak`, `historyUndo`,\n    // `deleteContentBackward`, etc.) have `data === null` and no transferable\n    // text — always allow them.\n    if (incoming === null) return;\n\n    const start = input.selectionStart ?? input.value.length;\n    const end = input.selectionEnd ?? input.value.length;\n    const projected =\n      input.value.slice(0, start) + incoming + input.value.slice(end);\n\n    if (!this.isProjectedValueAllowed(projected)) {\n      e.preventDefault();\n    }\n  }\n\n  private onFocus() {\n    this.hasFocus = true;\n    // A read-only field has nothing to edit, so it keeps its formatted display\n    // instead of switching to the ungrouped editing representation.\n    if (this.readonly) return;\n    const source = this.displayOverride || this.displayText;\n    this.displayText = removeGroupingFromDisplay(\n      source,\n      this.getFormatOptions()\n    );\n    this.displayOverride = '';\n  }\n\n  private onBlur() {\n    this.hasFocus = false;\n    if (this.readonly) return;\n    this.commitDisplay();\n    if (!valuesEqual(this.value, this.lastCommittedValue)) {\n      this.lastCommittedValue = this.value;\n      this.dispatchChange();\n    }\n  }\n\n  private commitDisplay() {\n    const trimmed = this.displayText.trim();\n    if (trimmed === '') {\n      this.value = NaN;\n      this.displayText = '';\n      this.displayOverride = '';\n      return;\n    }\n\n    const forCommit = trimmed.replace(/[.,]$/, '');\n    const parsed = parseNumberInput(forCommit);\n\n    if (Number.isFinite(parsed)) {\n      this.value = parsed;\n      this.displayText = this.formatValueForDisplay(parsed);\n    } else {\n      this.value = NaN;\n    }\n    this.displayOverride = '';\n  }\n\n  private dispatchInput() {\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: {value: this.value},\n      })\n    );\n  }\n\n  private dispatchChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {value: this.value},\n      })\n    );\n  }\n\n  private get shouldUpdateValue(): boolean {\n    if (this.rejectUpdates) return false;\n    if (this.rejectUpdatesOnFocus && this.hasFocus) return false;\n    if (\n      this.rejectDuplicateUpdates &&\n      valuesEqual(this.value, this.previousValue)\n    ) {\n      return false;\n    }\n    return true;\n  }\n\n  private getEffectiveDisplay(): string {\n    if (this.displayOverride) {\n      return this.displayOverride;\n    }\n    if (!this.shouldUpdateValue && this.inputElement) {\n      return this.inputElement.value;\n    }\n    return this.displayText;\n  }\n\n  private updateCenterAlignedInputWidth(value: string) {\n    if (this.textAlign !== ObcNumberInputFieldTextAlign.Center) {\n      this.style.removeProperty('--obc-number-input-center-width');\n      return;\n    }\n\n    const fontSize = Number.parseFloat(\n      getCssVariableValue(\n        this,\n        '--global-typography-instrument-value-regular-font-size'\n      )\n    );\n\n    const characters = value.replaceAll(/[.,]/g, '');\n    const symbols = value.length - characters.length;\n    // These values are based on the font size of 16px\n\n    const calculatedWidth =\n      characters.length * characterWidth + symbols * symbolWidth;\n\n    const measuredWidth = Math.ceil(\n      (calculatedWidth * fontSize) / baseFontSize\n    );\n    this.style.setProperty(\n      '--obc-number-input-center-width',\n      `${measuredWidth}px`\n    );\n  }\n\n  override firstUpdated() {\n    if (!this.displayText && !this.displayOverride) {\n      this.displayText = this.formatValueForDisplay(this.value);\n    }\n    this.lastCommittedValue = this.value;\n    this.updateCenterAlignedInputWidth(this.getEffectiveDisplay());\n  }\n\n  private get isEmpty(): boolean {\n    if (this.inputElement) {\n      return this.inputElement.value.trim().length === 0;\n    }\n    return isNaN(this.value);\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    const formatPropsChanged =\n      changedProperties.has('decimalSeparator') ||\n      changedProperties.has('groupSeparator') ||\n      changedProperties.has('minFractionDigits') ||\n      changedProperties.has('maxFractionDigits');\n\n    if (changedProperties.has('value') && this.shouldUpdateValue) {\n      if (!this.hasFocus) {\n        this.displayText = this.formatValueForDisplay(this.value);\n        this.displayOverride = '';\n        this.lastCommittedValue = this.value;\n      }\n    } else if (formatPropsChanged && !this.hasFocus && this.shouldUpdateValue) {\n      this.displayText = this.formatValueForDisplay(this.value);\n      this.displayOverride = '';\n    }\n\n    if (\n      changedProperties.has('value') &&\n      !this.shouldUpdateValue &&\n      this.inputElement\n    ) {\n      this.value = parseNumberInput(this.inputElement.value);\n    }\n  }\n\n  override updated() {\n    if (\n      this.rejectDuplicateUpdates &&\n      !valuesEqual(this.value, this.previousValue) &&\n      (this.previousDisplayText !== this.displayText || !this.hasFocus)\n    ) {\n      this.previousValue = this.value;\n    }\n\n    this.updateCenterAlignedInputWidth(this.getEffectiveDisplay());\n  }\n\n  private renderFooterText(\n    text: string,\n    isError: boolean\n  ): TemplateResult | typeof nothing {\n    if (!text) return nothing;\n    return html`<div\n      id=\"helper-text\"\n      class=${classMap({\n        [isError ? 'error-text' : 'helper-text']: true,\n        [`helper-placement-${this.helperPlacement}`]: true,\n      })}\n    >\n      ${\n        this.hasHelperIcon\n          ? html`<div class=\"helper-icon\">\n              <slot name=\"helper-icon\"></slot>\n            </div>`\n          : nothing\n      }\n      ${text}\n    </div>`;\n  }\n\n  private onPointerDown(e: PointerEvent) {\n    if (this.disabled) return;\n    if (this.readonly) return;\n    if (this.inputElement) {\n      e.stopPropagation();\n      e.preventDefault();\n      this.inputElement.focus();\n      const inputBox = this.inputElement.getBoundingClientRect();\n      let selectionStart: number | undefined;\n      if (e.clientX < inputBox.left) {\n        // set marker at the left edge of the input\n        selectionStart = 0;\n      } else if (e.clientX > inputBox.right) {\n        // set marker at the right edge of the input\n        selectionStart = this.inputElement.value.length;\n      } else {\n        // set marker at the mouse position\n        // Start from the right side of the input and move left until the mouse position is found\n        // This is done to set the marker also at label touch.\n        // Starts from the right since the label is right aligned.\n        const mouseX = e.clientX;\n        let inputX = inputBox.right;\n        const text = this.inputElement.value;\n        for (let i = text.length - 1; i >= 0; i--) {\n          const char = text[i];\n          const isSymbol = char.match(/[.,]/);\n          const width = isSymbol ? symbolWidth : characterWidth;\n          if (mouseX > inputX - width / 2) {\n            selectionStart = i + 1;\n            break;\n          }\n          inputX -= width;\n        }\n        if (selectionStart === undefined) {\n          selectionStart = 0;\n        }\n      }\n      this.inputElement.setSelectionRange(selectionStart, selectionStart);\n    }\n  }\n\n  override render() {\n    const hasHelperOrError =\n      Boolean(this.helperText) || Boolean(this.error && this.errorText);\n    const unitInside =\n      this.unit &&\n      this.textAlign !== ObcNumberInputFieldTextAlign.RightUnitOutside;\n    const unitOutside =\n      this.unit &&\n      this.textAlign === ObcNumberInputFieldTextAlign.RightUnitOutside;\n\n    const display = this.getEffectiveDisplay();\n\n    return html`\n      <label\n        class=${classMap({\n          wrapper: true,\n          [`align-${this.textAlign}`]: true,\n          [`size-${this.size}`]: true,\n          error: this.error,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          empty: this.isEmpty,\n          helpertext: hasHelperOrError,\n          haslabel: Boolean(this.label),\n          squared: this.squared,\n        })}\n        @pointerdown=${this.onPointerDown}\n      >\n        ${\n          this.label\n            ? html`<div\n                class=${classMap({\n                  'label-text-container': true,\n                  [`label-placement-${this.labelPlacement}`]: true,\n                })}\n              >\n                ${\n                  this.hasLabelIcon\n                    ? html`<div class=\"label-icon\">\n                        <slot name=\"label-icon\"></slot>\n                      </div>`\n                    : nothing\n                }\n                <span class=\"label-text\">${this.label}</span>\n                ${\n                  this.required\n                    ? html`<div class=\"required-indicator\"></div>`\n                    : nothing\n                }\n              </div>`\n            : nothing\n        }\n\n        <div class=\"horizontal-container\">\n          <div class=\"input-field-container\" part=\"input-field-container\">\n            ${\n              this.hasLeadingIcon\n                ? html`<div class=\"leading-icon\">\n                    <slot name=\"leading-icon\"></slot>\n                  </div>`\n                : nothing\n            }\n            <div class=\"label-container\">\n              <input\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"value-input\"\n                .value=${display}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                .placeholder=${this.placeholder}\n                name=${ifDefined(this.name || undefined)}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                ?required=${this.required}\n                maxlength=${ifDefined(this.maxlength)}\n                minlength=${ifDefined(this.minlength)}\n                aria-invalid=${this.error ? 'true' : 'false'}\n                aria-describedby=${ifDefined(\n                  hasHelperOrError ? 'helper-text' : undefined\n                )}\n                autocomplete=\"off\"\n                @beforeinput=${this.onBeforeInput}\n                @input=${this.onInput}\n              />\n              ${\n                unitInside\n                  ? html`<span class=\"unit-text\">${this.unit}</span>`\n                  : nothing\n              }\n            </div>\n          </div>\n          ${\n            unitOutside\n              ? html`<span class=\"unit-text external\">${this.unit}</span>`\n              : nothing\n          }\n        </div>\n\n        ${\n          this.error && this.errorText\n            ? this.renderFooterText(this.errorText, true)\n            : this.renderFooterText(this.helperText, false)\n        }\n      </label>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-number-input-field': ObcNumberInputField;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"number-input-field.js","names":[],"sources":["../../../src/components/number-input-field/number-input-field.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  nothing,\n  unsafeCSS,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport {property, state, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './number-input-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  formatNumberForDisplay,\n  isAllowedIntermediateInput,\n  NumberInputFormatOptions,\n  parseNumberInput,\n  removeGroupingFromDisplay,\n  valuesEqual,\n} from './number-input-format.js';\n\nexport type ObcNumberInputFieldInputEvent = CustomEvent<{value: number}>;\nexport type ObcNumberInputFieldChangeEvent = CustomEvent<{value: number}>;\n\nexport enum ObcNumberInputFieldTextAlign {\n  Center = 'center',\n  Right = 'right',\n  RightUnitOutside = 'right-unit-outside',\n}\n\nexport enum ObcNumberInputFieldSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport enum ObcNumberInputFieldPlacement {\n  Left = 'left',\n  Center = 'center',\n  Right = 'right',\n}\n\n/**\n * `<obc-number-input-field>` – A specialized input field for numerical values with optional unit display.\n *\n * @availableWhen errorText error==true\n * @property rejectUpdatesOnFocus - If true, the input field will not update its value on focus\n * @property rejectUpdates - If true, the value will only be initially set, and not updated on change\n * @property rejectDuplicateUpdates - If true, the input field will not update its value if the value is the same as the previous value\n *   This is useful to avoid React re-rendering to reset the value.\n * @property name - Name attribute for form integration\n * @property maxlength - Maximum number of characters allowed\n * @property minlength - Minimum number of characters required\n * @availableWhen hasLabelIcon label!=''\n * @availableWhen labelPlacement label!=''\n * @availableWhen hasHelperIcon helperText!='' || (error==true && errorText!='')\n * @availableWhen helperPlacement helperText!='' || (error==true && errorText!='')\n * @property squared - Internal property for squared corners, used when input is used in stepper-box\n * @property displayOverride - Optional display text override for controlled consumers (e.g. keyboard-numeric)\n *   that manage formatted strings while the committed value may be NaN.\n * @property validationPattern - Optional regex pattern. When set, any keystroke or paste whose resulting\n *   value does not match this pattern is blocked at the `beforeinput` stage.\n *   When unset, a permissive numeric filter (digits, sign, active separators,\n *   whitespace) is applied instead.\n * @slot leading-icon - Icon displayed before the input value (when `hasLeadingIcon` is true)\n * @slot label-icon - Icon displayed before the label text (when `hasLabelIcon` is true)\n * @slot helper-icon - Icon displayed before helper or error text (when `hasHelperIcon` is true)\n * @fires {CustomEvent<{value: number}>} input - When the numeric value changes during editing\n * @fires {CustomEvent<{value: number}>} change - When the value is committed on blur\n * @stable\n */\n@customElement('obc-number-input-field')\nexport class ObcNumberInputField extends LitElement {\n  @property({type: Number}) value = NaN;\n  @property({type: String}) unit = '';\n  @property({type: String}) placeholder = '';\n  @property({type: String}) textAlign: ObcNumberInputFieldTextAlign =\n    ObcNumberInputFieldTextAlign.Right;\n\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @property({type: Boolean, reflect: true}) readonly = false;\n  @property({type: Boolean, reflect: true}) error = false;\n  @property({type: String}) errorText = '';\n  @property({type: Boolean}) rejectUpdatesOnFocus = false;\n  @property({type: Boolean}) rejectUpdates = false;\n\n  @property({type: Boolean}) rejectDuplicateUpdates = false;\n\n  @property({type: String}) name = '';\n\n  @property({type: Number}) maxlength?: number;\n\n  @property({type: Number}) minlength?: number;\n\n  @property({type: String}) size: ObcNumberInputFieldSize =\n    ObcNumberInputFieldSize.Regular;\n\n  @property({type: Boolean}) hasLeadingIcon = false;\n  @property({type: String}) helperText = '';\n\n  @property({type: String}) label = '';\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) hasLabelIcon = false;\n  @property({type: String}) labelPlacement: ObcNumberInputFieldPlacement =\n    ObcNumberInputFieldPlacement.Left;\n\n  @property({type: Boolean}) hasHelperIcon = false;\n  @property({type: String}) helperPlacement: ObcNumberInputFieldPlacement =\n    ObcNumberInputFieldPlacement.Left;\n\n  @property({type: Boolean}) squared = false;\n\n  @property({type: String, attribute: false}) displayOverride = '';\n\n  @property({type: String}) decimalSeparator?: string;\n  @property({type: String}) groupSeparator?: string;\n  @property({type: Number}) minFractionDigits = 0;\n  @property({type: Number}) maxFractionDigits?: number | undefined;\n\n  @property({type: String}) validationPattern = '';\n\n  @state() private hasFocus = false;\n  @state() private displayText = '';\n  @state() private previousValue = NaN;\n  @state() private previousDisplayText = '';\n  @state() private lastCommittedValue = NaN;\n\n  private focusFromValueClick = false;\n\n  @query('.value-input') private inputElement?: HTMLInputElement;\n\n  get displayValue(): string {\n    return this.displayText;\n  }\n\n  private getFormatOptions(): NumberInputFormatOptions {\n    return {\n      decimalSeparator: this.decimalSeparator,\n      groupSeparator: this.groupSeparator,\n      minFractionDigits: this.minFractionDigits,\n      maxFractionDigits: this.maxFractionDigits,\n    };\n  }\n\n  private formatValueForDisplay(value: number): string {\n    return formatNumberForDisplay(value, this.getFormatOptions());\n  }\n\n  private onInput(e: Event) {\n    e.stopPropagation();\n    const raw = (e.target as HTMLInputElement).value;\n    this.displayText = raw;\n    this.displayOverride = '';\n    const parsed = parseNumberInput(raw);\n    this.value = parsed;\n    this.previousDisplayText = raw;\n    this.dispatchInput();\n  }\n\n  private isProjectedValueAllowed(projected: string): boolean {\n    if (this.validationPattern) {\n      let regex: RegExp;\n      try {\n        // Anchor the consumer pattern so it must match the whole projected\n        // value rather than any substring (e.g. `[0-9]` must not pass `a1`).\n        regex = new RegExp(`^(?:${this.validationPattern})$`);\n      } catch {\n        // Invalid pattern: fall back to the numeric filter instead of\n        // allowing arbitrary input.\n        return isAllowedIntermediateInput(projected, this.getFormatOptions());\n      }\n      return regex.test(projected);\n    }\n    return isAllowedIntermediateInput(projected, this.getFormatOptions());\n  }\n\n  private onBeforeInput(e: InputEvent) {\n    if (this.disabled || this.readonly) return;\n    const input = e.target as HTMLInputElement;\n\n    const incoming = e.data ?? e.dataTransfer?.getData('text/plain') ?? null;\n    // Deletions, history, and formatting (`insertLineBreak`, `historyUndo`,\n    // `deleteContentBackward`, etc.) have `data === null` and no transferable\n    // text — always allow them.\n    if (incoming === null) return;\n\n    const start = input.selectionStart ?? input.value.length;\n    const end = input.selectionEnd ?? input.value.length;\n    const projected =\n      input.value.slice(0, start) + incoming + input.value.slice(end);\n\n    if (!this.isProjectedValueAllowed(projected)) {\n      e.preventDefault();\n    }\n  }\n\n  private onFocus() {\n    this.hasFocus = true;\n    // A read-only field has nothing to edit, so it keeps its formatted display\n    // instead of switching to the ungrouped editing representation.\n    if (this.readonly) return;\n    if (this.focusFromValueClick) {\n      this.focusFromValueClick = false;\n      requestAnimationFrame(() => void this.ungroupKeepingSelection());\n      return;\n    }\n    this.ungroupDisplay();\n  }\n\n  /**\n   * Ungroups a value the user clicked into, once the browser has placed the\n   * caret, and moves the caret with its digits. Ungrouping before that shifts\n   * the text under the pointer and the caret lands beside the clicked digit.\n   */\n  private async ungroupKeepingSelection() {\n    const input = this.inputElement;\n    if (!input || !this.hasFocus) return;\n    const grouped = input.value;\n    const offsetWithoutGrouping = (offset: number | null) =>\n      removeGroupingFromDisplay(\n        grouped.slice(0, offset ?? grouped.length),\n        this.getFormatOptions()\n      ).length;\n    const start = offsetWithoutGrouping(input.selectionStart);\n    const end = offsetWithoutGrouping(input.selectionEnd);\n    const direction = input.selectionDirection ?? undefined;\n    this.ungroupDisplay();\n    await this.updateComplete;\n    input.setSelectionRange(start, end, direction);\n  }\n\n  private ungroupDisplay() {\n    const source = this.displayOverride || this.displayText;\n    this.displayText = removeGroupingFromDisplay(\n      source,\n      this.getFormatOptions()\n    );\n    this.displayOverride = '';\n  }\n\n  private onBlur() {\n    this.hasFocus = false;\n    if (this.readonly) return;\n    this.commitDisplay();\n    if (!valuesEqual(this.value, this.lastCommittedValue)) {\n      this.lastCommittedValue = this.value;\n      this.dispatchChange();\n    }\n  }\n\n  private commitDisplay() {\n    const trimmed = this.displayText.trim();\n    if (trimmed === '') {\n      this.value = NaN;\n      this.displayText = '';\n      this.displayOverride = '';\n      return;\n    }\n\n    const forCommit = trimmed.replace(/[.,]$/, '');\n    const parsed = parseNumberInput(forCommit);\n\n    if (Number.isFinite(parsed)) {\n      this.value = parsed;\n      this.displayText = this.formatValueForDisplay(parsed);\n    } else {\n      this.value = NaN;\n    }\n    this.displayOverride = '';\n  }\n\n  private dispatchInput() {\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: {value: this.value},\n      })\n    );\n  }\n\n  private dispatchChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {value: this.value},\n      })\n    );\n  }\n\n  private get shouldUpdateValue(): boolean {\n    if (this.rejectUpdates) return false;\n    if (this.rejectUpdatesOnFocus && this.hasFocus) return false;\n    if (\n      this.rejectDuplicateUpdates &&\n      valuesEqual(this.value, this.previousValue)\n    ) {\n      return false;\n    }\n    return true;\n  }\n\n  private getEffectiveDisplay(): string {\n    if (this.displayOverride) {\n      return this.displayOverride;\n    }\n    if (!this.shouldUpdateValue && this.inputElement) {\n      return this.inputElement.value;\n    }\n    return this.displayText;\n  }\n\n  override firstUpdated() {\n    if (!this.displayText && !this.displayOverride) {\n      this.displayText = this.formatValueForDisplay(this.value);\n    }\n    this.lastCommittedValue = this.value;\n  }\n\n  private get isEmpty(): boolean {\n    if (this.inputElement) {\n      return this.inputElement.value.trim().length === 0;\n    }\n    return isNaN(this.value);\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    const formatPropsChanged =\n      changedProperties.has('decimalSeparator') ||\n      changedProperties.has('groupSeparator') ||\n      changedProperties.has('minFractionDigits') ||\n      changedProperties.has('maxFractionDigits');\n\n    if (changedProperties.has('value') && this.shouldUpdateValue) {\n      if (!this.hasFocus) {\n        this.displayText = this.formatValueForDisplay(this.value);\n        this.displayOverride = '';\n        this.lastCommittedValue = this.value;\n      }\n    } else if (formatPropsChanged && !this.hasFocus && this.shouldUpdateValue) {\n      this.displayText = this.formatValueForDisplay(this.value);\n      this.displayOverride = '';\n    }\n\n    if (\n      changedProperties.has('value') &&\n      !this.shouldUpdateValue &&\n      this.inputElement\n    ) {\n      this.value = parseNumberInput(this.inputElement.value);\n    }\n  }\n\n  override updated() {\n    if (\n      this.rejectDuplicateUpdates &&\n      !valuesEqual(this.value, this.previousValue) &&\n      (this.previousDisplayText !== this.displayText || !this.hasFocus)\n    ) {\n      this.previousValue = this.value;\n    }\n  }\n\n  private renderFooterText(\n    text: string,\n    isError: boolean\n  ): TemplateResult | typeof nothing {\n    if (!text) return nothing;\n    return html`<div\n      id=\"helper-text\"\n      class=${classMap({\n        [isError ? 'error-text' : 'helper-text']: true,\n        [`helper-placement-${this.helperPlacement}`]: true,\n      })}\n    >\n      ${\n        this.hasHelperIcon\n          ? html`<div class=\"helper-icon\">\n              <slot name=\"helper-icon\"></slot>\n            </div>`\n          : nothing\n      }\n      ${text}\n    </div>`;\n  }\n\n  /**\n   * Keeps focus where it is while the chrome around the value is clicked.\n   * The wrapper is a `<label>`, so the click itself focuses the input; without\n   * this the pointerdown would blur it first and commit an unfinished edit.\n   * A click on the value itself is the browser's; it is only noted, so the\n   * focus it causes ungroups the value without moving the caret.\n   */\n  private onPointerDown(e: PointerEvent) {\n    if (this.disabled || this.readonly) return;\n    if (e.target === this.inputElement) {\n      this.focusFromValueClick = !this.hasFocus;\n      return;\n    }\n    e.preventDefault();\n  }\n\n  override render() {\n    const hasHelperOrError =\n      Boolean(this.helperText) || Boolean(this.error && this.errorText);\n    const unitInside =\n      this.unit &&\n      this.textAlign !== ObcNumberInputFieldTextAlign.RightUnitOutside;\n    const unitOutside =\n      this.unit &&\n      this.textAlign === ObcNumberInputFieldTextAlign.RightUnitOutside;\n\n    const display = this.getEffectiveDisplay();\n\n    return html`\n      <label\n        class=${classMap({\n          wrapper: true,\n          [`align-${this.textAlign}`]: true,\n          [`size-${this.size}`]: true,\n          error: this.error,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          empty: this.isEmpty,\n          helpertext: hasHelperOrError,\n          haslabel: Boolean(this.label),\n          squared: this.squared,\n        })}\n        @pointerdown=${this.onPointerDown}\n      >\n        ${\n          this.label\n            ? html`<div\n                class=${classMap({\n                  'label-text-container': true,\n                  [`label-placement-${this.labelPlacement}`]: true,\n                })}\n              >\n                ${\n                  this.hasLabelIcon\n                    ? html`<div class=\"label-icon\">\n                        <slot name=\"label-icon\"></slot>\n                      </div>`\n                    : nothing\n                }\n                <span class=\"label-text\">${this.label}</span>\n                ${\n                  this.required\n                    ? html`<div class=\"required-indicator\"></div>`\n                    : nothing\n                }\n              </div>`\n            : nothing\n        }\n\n        <div class=\"horizontal-container\">\n          <div class=\"input-field-container\" part=\"input-field-container\">\n            ${\n              this.hasLeadingIcon\n                ? html`<div class=\"leading-icon\">\n                    <slot name=\"leading-icon\"></slot>\n                  </div>`\n                : nothing\n            }\n            <div class=\"label-container\">\n              <input\n                type=\"text\"\n                inputmode=\"decimal\"\n                class=\"value-input\"\n                .value=${display}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                .placeholder=${this.placeholder}\n                name=${ifDefined(this.name || undefined)}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                ?required=${this.required}\n                maxlength=${ifDefined(this.maxlength)}\n                minlength=${ifDefined(this.minlength)}\n                aria-invalid=${this.error ? 'true' : 'false'}\n                aria-describedby=${ifDefined(\n                  hasHelperOrError ? 'helper-text' : undefined\n                )}\n                autocomplete=\"off\"\n                @beforeinput=${this.onBeforeInput}\n                @input=${this.onInput}\n              />\n              ${\n                unitInside\n                  ? html`<span class=\"unit-text\">${this.unit}</span>`\n                  : nothing\n              }\n            </div>\n          </div>\n          ${\n            unitOutside\n              ? html`<span class=\"unit-text external\">${this.unit}</span>`\n              : nothing\n          }\n        </div>\n\n        ${\n          this.error && this.errorText\n            ? this.renderFooterText(this.errorText, true)\n            : this.renderFooterText(this.helperText, false)\n        }\n      </label>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-number-input-field': ObcNumberInputField;\n  }\n}\n"],"mappings":"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"}

package/dist/components/textbox/textbox.css.js

@@ -19,21 +19,15 @@ var textbox_default = css`* {
   letter-spacing: var(--global-typography-generic-l-letter-spacing);
 }
 
-/* The inner-wrapper is the box: its height (--height) is the full textbox
-   height, padding included. The content is sized to the cap height and
-   vertically centered, which leaves the padding as equal space above and
-   below. In engines that support text-box-trim the content box collapses to
-   the cap height exactly; in Firefox (no text-box-trim) the content keeps its
-   natural line box, so align-items:center + overflow:hidden crops it to the
-   same height instead. No padding here – the centering provides it.
-   (A small top padding could be added later to nudge the text up in Firefox.) */
+/* The box, never clipped: descenders and diacritics paint past its edges. The
+   centred content leaves equal padding above and below; without text-box-trim
+   the host's zero line-height keeps it centred to within about a pixel. */
 .inner-wrapper {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: var(--alignment-justify, flex-end);
   height: var(--height);
-  overflow: hidden;
   /* Opt-in: animate a \`size\` change (height + font-size below). Defaults to 0s
      (instant, current behavior) so existing usages and snapshots are unchanged;
      a consumer sets \`--obc-textbox-size-transition\` (e.g. 300ms) to animate the