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

package/bundle/openbridge-webcomponents.bundle.js

@@ -12949,6 +12949,13 @@ __decorate([n$4({ type: Boolean })], ObiTwowayAnalogClosed.prototype, "useCssCol
 ObiTwowayAnalogClosed = __decorate([customElement("obi-twoway-analog-closed")], ObiTwowayAnalogClosed);
 //#endregion
 //#region src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts
+var OUTLINE = "M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z";
+var BODY = "M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z";
+/** Width of the shut band at each port end when the opening is 0 %, in icon units. */
+var BAND_RANGE = 7;
+var SECONDARY = "fill: var(--automation-device-secondary-color)";
+var TERTIARY = "fill: var(--automation-device-tertiary-color)";
+var PRIMARY = "fill: var(--automation-device-primary-color)";
 var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends i$4 {
 	constructor(..._args) {
 		super(..._args);
@@ -12956,21 +12963,37 @@ var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends i$4 {
 		this.closed = false;
 		this.vertical = false;
 	}
+	renderBands(width) {
+		if (width <= 0) return null;
+		const left = 3 + width;
+		const right = 21 - width;
+		return w`<g clip-path="url(#body)">
+      <rect x="2" y="0" width=${left - 2} height="24" style=${SECONDARY}/>
+      <rect x=${left} y="0" width="1" height="24" style=${TERTIARY}/>
+      <rect x=${right} y="0" width=${22 - right} height="24" style=${SECONDARY}/>
+      <rect x=${right - 1} y="0" width="1" height="24" style=${TERTIARY}/>
+    </g>`;
+	}
+	/**
+	* Horizontal at the top when open, turning to vertical and moving 2 units
+	* down as the valve shuts, matching `obi-twoway-analog-open` at 100 %.
+	*/
+	renderHandle(value) {
+		const shut = 1 - value / 100;
+		const angle = -90 * shut;
+		const cx = 12;
+		const cy = 3.5 + 2 * shut;
+		return w`<g transform="rotate(${angle} ${cx} ${cy})">
+      <rect x=${8} y=${cy - 1.5} width="8" height="3" rx="1.5" style=${TERTIARY}/>
+      <rect x=${9} y=${cy - .5} width="6" height="1" rx="0.5" style=${PRIMARY}/>
+    </g>`;
+	}
 	render() {
 		const transform = this.vertical ? "transform: rotate(90deg);" : "";
 		if (this.closed) return b` <div class="wrapper" style="${transform}">
         <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>
       </div>`;
-		const handleRotation = -(1 - this.value / 100) * 90;
-		const handle = w`
-      <g transform="translate(0, ${(1 - this.value / 100) * 2}) rotate(${handleRotation} 12 3.5) ">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-primary-color)"/>
-      </g>
-    `;
-		const xmin = 10.5;
-		const xmax = 2.5;
-		const x = xmin + -8 * this.value / 100;
+		const value = clampPercent$1(this.value);
 		return b`
       <div class="wrapper" style="${transform}">
         <svg
@@ -12980,55 +13003,13 @@ var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends i$4 {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-          <path
-            d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
-            fill="var(--automation-device-primary-color)"
-          />
-          ${handle}
-          <g clip-path="url(#clip0)">
-            <rect
-              x=${xmax}
-              y="0"
-              width=${x - xmax}
-              height="24"
-              fill="var(--automation-device-secondary-color)"
-            />
-            <line
-              x1=${x}
-              y1="0"
-              x2=${x}
-              y2="24"
-              stroke="var(--automation-device-tertiary-color)"
-              stroke-width="1"
-            />
-
-            <rect
-              x=${24 - x}
-              y="0"
-              width=${x - xmax}
-              height="24"
-              fill="var(--automation-device-secondary-color)"
-            />
-            <line
-              x1=${24 - x}
-              y1="0"
-              x2=${24 - x}
-              y2="24"
-              stroke="var(--automation-device-tertiary-color)"
-              stroke-width="1"
-            />
-          </g>
           <defs>
-            <clipPath id="clip0">
-              <path
-                d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
-              />
-            </clipPath>
+            <clipPath id="body"><path d=${BODY} /></clipPath>
           </defs>
+          <path d=${OUTLINE} style=${TERTIARY} />
+          <path d=${BODY} style=${PRIMARY} />
+          ${this.renderBands(BAND_RANGE * (100 - value) / 100)}
+          ${this.renderHandle(value)}
         </svg>
       </div>
     `;
@@ -16359,21 +16340,15 @@ var textbox_default = i$7`* {
   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
@@ -47007,7 +46982,8 @@ obc-readout-block {
   gap: var(--global-size-spacing-target-padding);
   flex: 1 1 auto;
   min-inline-size: 0;
-  overflow: clip;
+  overflow-x: clip;
+  overflow-y: visible; /* a label's descenders and diacritics paint past its cap-to-baseline box */
   /* a leading-src chip's 1px outline is drawn outside its box at the container edge */
   overflow-clip-margin: 1px;
 }
@@ -69331,19 +69307,52 @@ __decorate([r$3()], ObcScrollbar.prototype, "_thumbHeight", void 0);
 __decorate([r$3()], ObcScrollbar.prototype, "_showOverlayThumb", void 0);
 ObcScrollbar = __decorate([customElement("obc-scrollbar")], ObcScrollbar);
 //#endregion
-//#region src/building-blocks/alert-list/alert-list.ts
-var ObcAlertList = class ObcAlertList extends i$4 {
+//#region src/building-blocks/alert-list/alert-list-base.ts
+/**
+* `ObcAlertListBase` – Scrolling list of slotted alert items that animates items
+* into place and shows an empty state when no item passes its filter.
+*
+* Not registered as an element: the subclasses decide which items pass.
+* `obc-alert-list` runs a predicate the consumer sets.
+*
+* ### Features
+* - **Filter:** `matchesFilter()` decides which items count; the list re-reads
+*   it when items are added or removed, when an item attribute named by
+*   `observedItemAttributes` changes, and when `filterChanged()` reports a
+*   change of the subclass's filter inputs.
+* - **Motion:** items that move slide to their new place; new items play
+*   their intro animation once the list has been seen.
+* - **Empty state:** icon, title and description slots, with fallback content
+*   from `emptyFallback`.
+* - **Visible items:** `getVisibleElements()` returns the items that pass the
+*   filter and sit inside the scroll viewport.
+*/
+var ObcAlertListBase = class extends i$4 {
 	constructor(..._args) {
 		super(..._args);
-		this.filter = () => true;
 		this.oldElementTop = /* @__PURE__ */ new Map();
 		this.mutationObserver = null;
 		this.intersectionObserver = null;
 		this.hasRenderedPanel = false;
 		this._empty = false;
 	}
+	/** Whether the list counts an item as one it shows. */
+	matchesFilter(_item) {
+		return true;
+	}
+	/** Whether this update changed what `matchesFilter` decides. */
+	filterChanged(_changed) {
+		return false;
+	}
+	/** Item attributes whose changes can change what `matchesFilter` decides. */
+	get observedItemAttributes() {
+		return ["status", "shelved"];
+	}
+	get emptyFallback() {
+		return {};
+	}
 	firstUpdated() {
-		this.updateEmpty();
+		this.applyFilter();
 		this.setupMutationObserver();
 	}
 	connectedCallback() {
@@ -69356,6 +69365,7 @@ var ObcAlertList = class ObcAlertList extends i$4 {
 		this.setupMutationObserver();
 	}
 	disconnectedCallback() {
+		super.disconnectedCallback();
 		if (this.mutationObserver) {
 			this.mutationObserver.disconnect();
 			this.mutationObserver = null;
@@ -69366,16 +69376,17 @@ var ObcAlertList = class ObcAlertList extends i$4 {
 		}
 	}
 	willUpdate(_changedProperties) {
-		if (_changedProperties.has("filter")) {
-			this.updateEmpty();
+		if (this.filterChanged(_changedProperties)) {
+			this.applyFilter();
 			this.updateOldElementTop();
 		}
 	}
-	updateEmpty() {
+	/** Runs whenever the items or the filter change; a subclass extends it to act on each item. */
+	applyFilter() {
 		this._empty = this.getAlertItems().length === 0;
 	}
 	getAlertItems() {
-		return this.alertItems.filter(this.filter);
+		return this.alertItems.filter((item) => this.matchesFilter(item));
 	}
 	updateOldElementTop() {
 		const elements = this.getAlertItems();
@@ -69400,7 +69411,7 @@ var ObcAlertList = class ObcAlertList extends i$4 {
 		this.alertItems.forEach((element) => {
 			this.mutationObserver?.observe(element, {
 				attributes: true,
-				attributeFilter: ["status", "shelved"]
+				attributeFilter: this.observedItemAttributes
 			});
 		});
 	}
@@ -69410,7 +69421,7 @@ var ObcAlertList = class ObcAlertList extends i$4 {
 	}
 	handleElementsChange() {
 		this.mutationObserver?.takeRecords();
-		this.updateEmpty();
+		this.applyFilter();
 		if (!this.checkVisibility()) return;
 		const elements = this.getAlertItems();
 		const oldElementTop = new Map(this.oldElementTop);
@@ -69455,14 +69466,15 @@ var ObcAlertList = class ObcAlertList extends i$4 {
 		});
 	}
 	render() {
+		const fallback = this.emptyFallback;
 		return b` <obc-scrollbar class="alert-list" id="scrollbar">
       <slot @slotchange=${this.handleSlotChange}></slot>
       ${this._empty ? b` <div class="empty-list">
               <div class="icon">
-                <slot name="empty-icon"></slot>
+                <slot name="empty-icon">${fallback.icon}</slot>
               </div>
               <div class="empty-title">
-                <slot name="empty-title"></slot>
+                <slot name="empty-title">${fallback.title}</slot>
               </div>
               <div class="empty-description">
                 <slot name="empty-description"></slot>
@@ -69474,10 +69486,24 @@ var ObcAlertList = class ObcAlertList extends i$4 {
 		this.styles = r$7(alert_list_default);
 	}
 };
+__decorate([r$3()], ObcAlertListBase.prototype, "_empty", void 0);
+__decorate([o$5({ flatten: true })], ObcAlertListBase.prototype, "alertItems", void 0);
+__decorate([e$4("#scrollbar", true)], ObcAlertListBase.prototype, "scrollbar", void 0);
+//#endregion
+//#region src/building-blocks/alert-list/alert-list.ts
+var ObcAlertList = class ObcAlertList extends ObcAlertListBase {
+	constructor(..._args) {
+		super(..._args);
+		this.filter = () => true;
+	}
+	matchesFilter(item) {
+		return this.filter(item);
+	}
+	filterChanged(changed) {
+		return changed.has("filter");
+	}
+};
 __decorate([n$4({ attribute: false })], ObcAlertList.prototype, "filter", void 0);
-__decorate([r$3()], ObcAlertList.prototype, "_empty", void 0);
-__decorate([o$5({ flatten: true })], ObcAlertList.prototype, "alertItems", void 0);
-__decorate([e$4("#scrollbar", true)], ObcAlertList.prototype, "scrollbar", void 0);
 ObcAlertList = __decorate([customElement("obc-alert-list")], ObcAlertList);
 //#endregion
 //#region src/building-blocks/bar-horizontal/bar-horizontal.ts
@@ -77149,10 +77175,11 @@ var ObcAlertIcon = class ObcAlertIcon extends i$4 {
 			case "unacknowledged": return mapping["alarm-unack"];
 			default: return null;
 		}
-		else if (this.bamType === AlertType.Warning) {
-			if (this.active === false) return mapping["warning-rectified"];
-			else if (this.acknowledged) return mapping["warning-silenced"];
-			else return mapping["warning-unack"];
+		else if (this.bamType === AlertType.Warning) switch (this._effectiveState) {
+			case "rectified": return mapping["warning-rectified"];
+			case "silenced": return mapping["warning-silenced"];
+			case "unacknowledged": return mapping["warning-unack"];
+			default: return null;
 		}
 		return null;
 	}
@@ -77186,7 +77213,7 @@ var ObcAlertIcon = class ObcAlertIcon extends i$4 {
 				default: return A;
 			}
 		}
-		return A;
+		return this.icon ? b`${this.icon.a}` : A;
 	}
 	render() {
 		if (!this._effectiveType) return b`<div>No alarm</div>`;
@@ -80361,7 +80388,6 @@ obc-table::part(grid) {
 .empty-list .icon {
     height: 96px;
     width: 96px;
-    color: var(--on-flat-neutral-color);
   }
 
 .empty-list .empty-title {
@@ -80389,6 +80415,10 @@ obc-table::part(grid) {
     max-width: 344px;
     text-align: center;
   }
+
+.empty-list .icon {
+    color: var(--on-flat-neutral-color);
+  }
 `;
 //#endregion
 //#region src/components/alert-list-details/alert-list-details.ts
@@ -80651,6 +80681,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;
 }({});
 var ObcAlertMenuItem = class ObcAlertMenuItem extends i$4 {
@@ -80658,6 +80689,7 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends i$4 {
 		super(..._args);
 		this.hasIcon = false;
 		this.shelved = false;
+		this.blocked = false;
 		this.title = "";
 		this.description = "";
 		this.day = "";
@@ -80670,9 +80702,12 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends i$4 {
 		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 "";
@@ -80685,7 +80720,7 @@ var ObcAlertMenuItem = class ObcAlertMenuItem extends i$4 {
 		return this.secondaryActionState === "disabled";
 	}
 	get hasTrailingIcon() {
-		return this.status !== "unacknowledged";
+		return !this.canAck;
 	}
 	handleMessageClick(event) {
 		event.stopPropagation();
@@ -80745,6 +80780,10 @@ __decorate([n$4({
 	type: Boolean,
 	reflect: true
 })], ObcAlertMenuItem.prototype, "shelved", void 0);
+__decorate([n$4({
+	type: Boolean,
+	reflect: true
+})], ObcAlertMenuItem.prototype, "blocked", void 0);
 __decorate([n$4({ type: String })], ObcAlertMenuItem.prototype, "title", void 0);
 __decorate([n$4({ type: String })], ObcAlertMenuItem.prototype, "description", void 0);
 __decorate([n$4({ type: String })], ObcAlertMenuItem.prototype, "day", void 0);
@@ -80839,52 +80878,13 @@ var alert_menu_default = i$7`* {
     min-width: 120px;
   }
 
-.empty-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--app-components-alert-menu-button-spacing);
-}
-
-.empty-list .icon {
-    height: 96px;
-    width: 96px;
-  }
-
-.empty-list .empty-title {
-    color: var(--element-active-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-body-active-font-weight);
-    font-size: var(--global-typography-ui-body-active-font-size);
-    line-height: var(--global-typography-ui-body-active-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-  }
-
-.empty-list .empty-description {
-    color: var(--element-neutral-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-body-font-weight);
-    font-size: var(--global-typography-ui-body-font-size);
-    line-height: var(--global-typography-ui-body-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    max-width: 344px;
-    text-align: center;
-  }
-
 ::slotted(*) {
   display: block;
   will-change: transform;
 }
 
-.alert-list.all ::slotted([shelved]) {
+.alert-list.all ::slotted([shelved]),
+.alert-list.all ::slotted([status="rectified-unacknowledged"]) {
   display: none;
 }
 
@@ -80892,7 +80892,7 @@ var alert_menu_default = i$7`* {
   display: none;
 }
 
-.alert-list.unacked ::slotted(:not([status="unacknowledged"])),.alert-list.unacked ::slotted([shelved]) {
+.alert-list.unacked ::slotted(:not([status="unacknowledged"]):not([status="rectified-unacknowledged"])),.alert-list.unacked ::slotted([shelved]) {
     display: none;
   }
 `;
@@ -81310,6 +81310,7 @@ __decorate([n$4({ type: Boolean })], ObcTabbedCard.prototype, "hasTabIcons", voi
 ObcTabbedCard = __decorate([customElement("obc-tabbed-card")], ObcTabbedCard);
 //#endregion
 //#region src/components/alert-menu/alert-menu.ts
+var WAITING_FOR_ACK = [ObcAlertMenuItemStatus.Unacknowledged, ObcAlertMenuItemStatus.RectifiedUnacknowledged];
 var ObcAlertMenu = class ObcAlertMenu extends i$4 {
 	constructor(..._args) {
 		super(..._args);
@@ -81320,88 +81321,108 @@ var ObcAlertMenu = class ObcAlertMenu extends i$4 {
 		this.canAckAll = false;
 		this.showSilenceButton = true;
 		this.showAlertListButton = true;
-		this._selectedTabIndex = 1;
 	}
 	handleAckAllVisibleClick() {
 		const visibleElements = this.alertList.getVisibleElements();
 		this.dispatchEvent(new CustomEvent("ack-all-visible-click", { detail: {
 			visibleElements,
-			tabName: this.getSelectedTab().name
+			tabName: this.selectedTab.name
 		} }));
 	}
 	onTabChange(e) {
-		this._selectedTabIndex = e.detail.tab;
+		this._selectedTabName = this.tabs[e.detail.tab]?.name;
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (!this.tabs.some((tab) => tab.name === this._selectedTabName)) this._selectedTabName = void 0;
+	}
+	/** Whether the menu offers "ACK visible" at all; `canAckAll` enables it. */
+	get offersAckAll() {
+		return true;
 	}
-	getSelectedTab() {
-		if (this._selectedTabIndex === 0) return {
+	/** The tabs in display order; the menu opens on the second one. */
+	get tabs() {
+		const tabs = [{
 			name: "unacked",
+			title: msg("Unacked"),
 			emptyTitle: msg("No unacknowledged alerts"),
-			emptyDescription: msg("Go to the 'Alert list' for more details or to manage existing alerts."),
-			emptyIcon: b`<obi-unacknowledged></obi-unacknowledged>`,
-			class: "unacked",
-			filter: (item) => {
-				return item.getAttribute("status") === ObcAlertMenuItemStatus.Unacknowledged && !item.hasAttribute("shelved");
-			}
-		};
-		else if (this._selectedTabIndex === 2) return {
-			name: "shelved",
-			emptyTitle: msg("No shelved alerts"),
-			emptyDescription: msg("Go to the 'Alert list' for more details or to manage existing alerts."),
-			emptyIcon: b`<obi-alerts-shelf></obi-alerts-shelf>`,
-			class: "shelved",
-			filter: (item) => {
-				return item.hasAttribute("shelved");
-			}
-		};
-		else return {
+			emptyIcon: b`<obi-unacknowledged></obi-unacknowledged>`
+		}, {
 			name: "all",
+			title: msg("Active"),
 			emptyTitle: msg("No active alerts"),
-			emptyDescription: msg("Go to the 'Alert list' for more details or to manage existing alerts."),
-			emptyIcon: b`<obi-alerts></obi-alerts>`,
-			class: "all",
-			filter: (item) => {
-				return !item.hasAttribute("shelved");
-			}
-		};
+			emptyIcon: b`<obi-alerts></obi-alerts>`
+		}];
+		if (this.hasShelved) tabs.push({
+			name: "shelved",
+			title: msg("Shelved"),
+			emptyTitle: msg("No shelved alerts"),
+			emptyIcon: b`<obi-alerts-shelf></obi-alerts-shelf>`
+		});
+		return tabs;
+	}
+	/** Where the selected tab sits in `tabs`: the one the user picked, else the second. */
+	selectedTabIndex(tabs) {
+		const index = tabs.findIndex((tab) => tab.name === this._selectedTabName);
+		return index === -1 ? 1 : index;
+	}
+	get selectedTab() {
+		const tabs = this.tabs;
+		return tabs[this.selectedTabIndex(tabs)];
+	}
+	/**
+	* The list that shows the selected tab's items. The CSS hides the items the
+	* tab leaves out; the filter tells the list which ones those are.
+	*/
+	renderList(tab, content) {
+		return b`<obc-alert-list
+      class="alert-list ${tab.name}"
+      .filter=${(item) => this.tabFilter(tab.name, item)}
+      >${content}</obc-alert-list
+    >`;
+	}
+	tabFilter(name, item) {
+		const status = item.getAttribute("status") ?? "";
+		if (name === "unacked") return WAITING_FOR_ACK.includes(status) && !item.hasAttribute("shelved");
+		if (name === "shelved") return item.hasAttribute("shelved");
+		return !item.hasAttribute("shelved") && status !== ObcAlertMenuItemStatus.RectifiedUnacknowledged;
 	}
 	render() {
-		const t = this.getSelectedTab();
+		const tabs = this.tabs;
+		const selectedIndex = this.selectedTabIndex(tabs);
+		const t = tabs[selectedIndex];
 		return b`
       <obc-tabbed-card
-        .nTabs=${this.hasShelved ? 3 : 2}
+        .nTabs=${tabs.length}
         class="wrapper"
         part="wrapper"
-        .selectedTab=${this._selectedTabIndex}
+        .selectedTab=${selectedIndex}
         hasDefaultSlotOnly
         @tab-change=${this.onTabChange}
       >
-        <span slot="tab-title-0">${msg("Unacked")}</span>
-        <span slot="tab-title-1">${msg("Active")}</span>
-        ${this.hasShelved ? b`<span slot="tab-title-2">${msg("Shelved")}</span>` : A}
+        ${tabs.map((tab, index) => b`<span slot="tab-title-${index}">${tab.title}</span>`)}
         <div class="container">
-          <obc-alert-list class="alert-list ${t.class}" .filter=${t.filter}>
-            <slot></slot>
-            <slot name="empty-${t.name}-title" slot="empty-title"
-              >${t.emptyTitle}</slot
-            >
-            <slot name="empty-${t.name}-description" slot="empty-description"
-              >${t.emptyDescription}</slot
-            >
-            <slot name="empty-${t.name}-icon" slot="empty-icon"
-              >${t.emptyIcon}</slot
-            >
-          </obc-alert-list>
+          ${this.renderList(t, b`<slot></slot>
+              <slot name="empty-${t.name}-title" slot="empty-title"
+                >${t.emptyTitle}</slot
+              >
+              <slot name="empty-${t.name}-description" slot="empty-description"
+                >${msg("Go to the 'Alert list' for more details or to manage existing alerts.")}</slot
+              >
+              <slot name="empty-${t.name}-icon" slot="empty-icon"
+                >${t.emptyIcon}</slot
+              >`)}
           <div class="action">
-            <obc-button
-              variant="raised"
-              .disabled=${!this.canAckAll}
-              fullWidth
-              class="btn"
-              data-testid="ack-all-visible-button"
-              @click=${this.handleAckAllVisibleClick}
-            >
-              ${msg("ACK visible")}
-            </obc-button>
+            ${this.offersAckAll ? b`<obc-button
+                    variant="raised"
+                    .disabled=${!this.canAckAll}
+                    fullWidth
+                    class="btn"
+                    data-testid="ack-all-visible-button"
+                    @click=${this.handleAckAllVisibleClick}
+                  >
+                    ${msg("ACK visible")}
+                  </obc-button>` : A}
             ${this.showSilenceButton ? b`<obc-button
                     variant="normal"
                     fullWidth
@@ -81447,8 +81468,8 @@ __decorate([n$4({
 	type: Boolean,
 	attribute: false
 })], ObcAlertMenu.prototype, "showAlertListButton", void 0);
-__decorate([r$3()], ObcAlertMenu.prototype, "_selectedTabIndex", void 0);
-__decorate([e$4("obc-alert-list")], ObcAlertMenu.prototype, "alertList", void 0);
+__decorate([r$3()], ObcAlertMenu.prototype, "_selectedTabName", void 0);
+__decorate([e$4(".alert-list")], ObcAlertMenu.prototype, "alertList", void 0);
 ObcAlertMenu = __decorate([localized(), customElement("obc-alert-menu")], ObcAlertMenu);
 //#endregion
 //#region src/components/alert-subsystem-counter/alert-subsystem-counter.css?inline
@@ -98626,12 +98647,18 @@ var number_input_field_default = i$7`* {
 }
 
 .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;
@@ -98738,9 +98765,6 @@ var ObcNumberInputFieldSize = /* @__PURE__ */ function(ObcNumberInputFieldSize)
 	ObcNumberInputFieldSize["Large"] = "large";
 	return ObcNumberInputFieldSize;
 }({});
-var characterWidth = 9.15199279785156;
-var symbolWidth = 4.287994384765653;
-var baseFontSize = 16;
 var ObcNumberInputField = class ObcNumberInputField extends i$4 {
 	constructor(..._args) {
 		super(..._args);
@@ -98774,6 +98798,7 @@ var ObcNumberInputField = class ObcNumberInputField extends i$4 {
 		this.previousValue = NaN;
 		this.previousDisplayText = "";
 		this.lastCommittedValue = NaN;
+		this.focusFromValueClick = false;
 	}
 	get displayValue() {
 		return this.displayText;
@@ -98797,7 +98822,6 @@ var ObcNumberInputField = class ObcNumberInputField extends i$4 {
 		const parsed = parseNumberInput(raw);
 		this.value = parsed;
 		this.previousDisplayText = raw;
-		this.updateCenterAlignedInputWidth(raw);
 		this.dispatchInput();
 	}
 	isProjectedValueAllowed(projected) {
@@ -98825,6 +98849,31 @@ var ObcNumberInputField = class ObcNumberInputField extends i$4 {
 	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 = "";
@@ -98870,22 +98919,9 @@ var ObcNumberInputField = class ObcNumberInputField extends i$4 {
 		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;
@@ -98907,7 +98943,6 @@ var ObcNumberInputField = class ObcNumberInputField extends i$4 {
 	}
 	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 A;
@@ -98924,33 +98959,20 @@ var ObcNumberInputField = class ObcNumberInputField extends i$4 {
       ${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);
@@ -211276,7 +211298,7 @@ var ObcAlertDetailPage = class ObcAlertDetailPage extends i$4 {
 			[`type-${this.type}`]: true,
 			"status-acknowledged": isAcknowledged(this.alert) && isActive(this.alert),
 			"status-unacknowledged": !isAcknowledged(this.alert) && isActive(this.alert),
-			"status-resolved": isActive(this.alert)
+			"status-resolved": !isActive(this.alert)
 		})}
       >
         <div class="header">
@@ -211391,75 +211413,85 @@ var alert_list_page_small_default = i$7`* {
   }
 `;
 //#endregion
-//#region src/pages/alert-list-page-small/alert-list-page-small.ts
-var ObcAlertListPageSmall = class ObcAlertListPageSmall extends i$4 {
+//#region src/pages/alert-list-page-small/alert-list-page-small-base.ts
+/**
+* `ObcAlertListPageSmallBase` – Compact alert list page: a list of alerts over a
+* bar with a mode dropdown, a silence button and "ACK visible".
+*
+* Not registered as an element: the subclasses supply the list and the
+* modes. `obc-alert-list-page-small` renders `obc-alert-list-details`.
+*
+* ### Features
+* - **Modes:** the dropdown offers `modes` and shows `mode`; picking one calls
+*   `selectMode()`.
+* - **ACK visible:** enabled while `canAckAll` holds; a click reports the
+*   alerts `visibleAlerts()` returns, and the mode, in `ack-all-visible-click`.
+* - **Silence:** the icon button fires `silence-click`.
+*
+* The base holds no alerts: each page declares `alerts` in the alert type it
+* lists.
+*
+* @property hasShelved - Whether the dropdown offers the shelved alerts.
+* @property showTime - Whether the list shows when each alert was raised.
+* @property timeFormatter - Formats the time the list shows.
+* @availableWhen timeFormatter showTime==true
+*/
+var ObcAlertListPageSmallBase = class extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.hasShelved = false;
-		this.selectedMode = "all";
-		this.alerts = [];
 		this.showTime = false;
 		this.timeFormatter = (time) => time.toLocaleTimeString(void 0, { hour12: false });
-		this._mode = "all";
 	}
-	willUpdate(changedProperties) {
-		if (changedProperties.has("selectedMode") && this._mode !== this.selectedMode) this._mode = this.selectedMode;
+	/** The dropdown's options, in order. */
+	get modes() {
+		return [];
+	}
+	/** The mode the list filters by and the dropdown shows. */
+	get mode() {
+		return "";
+	}
+	selectMode(_mode) {}
+	/** Whether an alert the list shows in `mode` can still be acknowledged. */
+	get canAckAll() {
+		return false;
+	}
+	/** Whether the page offers "ACK visible" at all; `canAckAll` enables it. */
+	get offersAckAll() {
+		return true;
+	}
+	/** The alerts in view, which "ACK visible" reports. */
+	visibleAlerts() {
+		return [];
+	}
+	renderList() {
+		return A;
+	}
+	dispatchAckClick(alert) {
+		this.dispatchEvent(new CustomEvent("ack-click", { detail: { alert } }));
+	}
+	dispatchRowClick(alert) {
+		this.dispatchEvent(new CustomEvent("row-click", { detail: { alert } }));
 	}
 	handleAckAllVisibleClick() {
-		const tabName = this.selectedMode;
-		const visibleElements = this.alertList.getVisibleAlerts();
 		this.dispatchEvent(new CustomEvent("ack-all-visible-click", { detail: {
-			alerts: visibleElements,
-			mode: tabName
+			alerts: this.visibleAlerts(),
+			mode: this.mode
 		} }));
 	}
 	onModeSelect(e) {
-		this._mode = e.detail.value;
-	}
-	get metadata() {
-		return getAlertListModeData(this.selectedMode);
-	}
-	onAckClick(e) {
-		this.dispatchEvent(new CustomEvent("ack-click", { detail: { alert: e.detail.alert } }));
-	}
-	onRowClick(e) {
-		this.dispatchEvent(new CustomEvent("row-click", { detail: { alert: e.detail.alert } }));
+		this.selectMode(e.detail.value);
 	}
 	render() {
-		const lists = [{
-			name: "all",
-			title: msg("All")
-		}, {
-			name: "unacked",
-			title: msg("Unacked")
-		}];
-		if (this.hasShelved) lists.push({
-			name: "shelved",
-			title: msg("Shelved")
-		});
-		const metadata = this.metadata;
-		const canAckAll = this.alerts.some(canAckFilter(metadata.filter));
 		return b`
       <div class="wrapper">
-        <obc-alert-list-details
-          class="alert-list"
-          .small=${true}
-          .alerts=${this.alerts}
-          .selectedMode=${this._mode}
-          .showTime=${this.showTime}
-          .timeFormatter=${this.timeFormatter}
-          @ack-click=${this.onAckClick}
-          @row-click=${this.onRowClick}
-        ></obc-alert-list-details>
+        ${this.renderList()}
         <div class="action">
           <div class="btn-group">
             <obc-dropdown-button
-              .value=${this._mode}
+              .value=${this.mode}
               @change=${this.onModeSelect}
-              .options=${lists.map((v) => ({
-			value: v.name,
-			label: v.title
-		}))}
+              .options=${this.modes}
             >
             </obc-dropdown-button>
           </div>
@@ -211472,16 +211504,16 @@ var ObcAlertListPageSmall = class ObcAlertListPageSmall extends i$4 {
             >
               <obi-silence-iec></obi-silence-iec>
             </obc-icon-button>
-            <obc-button
-              .variant=${ButtonVariant.raised}
-              .disabled=${!canAckAll}
-              fullWidth
-              class="btn"
-              data-testid="ack-all-visible-button"
-              @click=${() => this.handleAckAllVisibleClick()}
-            >
-              ${msg("ACK visible")}
-            </obc-button>
+            ${this.offersAckAll ? b`<obc-button
+                    .variant=${ButtonVariant.raised}
+                    .disabled=${!this.canAckAll}
+                    fullWidth
+                    class="btn"
+                    data-testid="ack-all-visible-button"
+                    @click=${() => this.handleAckAllVisibleClick()}
+                  >
+                    ${msg("ACK visible")}
+                  </obc-button>` : A}
           </div>
         </div>
       </div>
@@ -211491,11 +211523,68 @@ var ObcAlertListPageSmall = class ObcAlertListPageSmall extends i$4 {
 		this.styles = r$7(alert_list_page_small_default);
 	}
 };
-__decorate([n$4({ type: Boolean })], ObcAlertListPageSmall.prototype, "hasShelved", void 0);
-__decorate([n$4({ type: String })], ObcAlertListPageSmall.prototype, "selectedMode", void 0);
+__decorate([n$4({ type: Boolean })], ObcAlertListPageSmallBase.prototype, "hasShelved", void 0);
+__decorate([n$4({ type: Boolean })], ObcAlertListPageSmallBase.prototype, "showTime", void 0);
+__decorate([n$4({ attribute: false })], ObcAlertListPageSmallBase.prototype, "timeFormatter", void 0);
+//#endregion
+//#region src/pages/alert-list-page-small/alert-list-page-small.ts
+var ObcAlertListPageSmall = class ObcAlertListPageSmall extends ObcAlertListPageSmallBase {
+	constructor(..._args) {
+		super(..._args);
+		this.alerts = [];
+		this.selectedMode = "all";
+		this._mode = "all";
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("selectedMode") && this._mode !== this.selectedMode) this._mode = this.selectedMode;
+	}
+	get modes() {
+		const modes = [{
+			value: "all",
+			label: msg("All")
+		}, {
+			value: "unacked",
+			label: msg("Unacked")
+		}];
+		if (this.hasShelved) modes.push({
+			value: "shelved",
+			label: msg("Shelved")
+		});
+		return modes;
+	}
+	get mode() {
+		return this._mode;
+	}
+	selectMode(mode) {
+		this._mode = mode;
+	}
+	get canAckAll() {
+		return this.alerts.some(canAckFilter(getAlertListModeData(this._mode).filter));
+	}
+	visibleAlerts() {
+		return this.alertList.getVisibleAlerts();
+	}
+	onAckClick(e) {
+		this.dispatchAckClick(e.detail.alert);
+	}
+	onRowClick(e) {
+		this.dispatchRowClick(e.detail.alert);
+	}
+	renderList() {
+		return b`<obc-alert-list-details
+      class="alert-list"
+      .small=${true}
+      .alerts=${this.alerts}
+      .selectedMode=${this._mode}
+      .showTime=${this.showTime}
+      .timeFormatter=${this.timeFormatter}
+      @ack-click=${this.onAckClick}
+      @row-click=${this.onRowClick}
+    ></obc-alert-list-details>`;
+	}
+};
 __decorate([n$4({ type: Array })], ObcAlertListPageSmall.prototype, "alerts", void 0);
-__decorate([n$4({ type: Boolean })], ObcAlertListPageSmall.prototype, "showTime", void 0);
-__decorate([n$4({ attribute: false })], ObcAlertListPageSmall.prototype, "timeFormatter", void 0);
+__decorate([n$4({ type: String })], ObcAlertListPageSmall.prototype, "selectedMode", void 0);
 __decorate([r$3()], ObcAlertListPageSmall.prototype, "_mode", void 0);
 __decorate([e$4("obc-alert-list-details")], ObcAlertListPageSmall.prototype, "alertList", void 0);
 ObcAlertListPageSmall = __decorate([customElement("obc-alert-list-page-small")], ObcAlertListPageSmall);