@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.78 → 2.0.0-next.80

package/src/components/alert-frame/alert-frame.ts

@@ -198,6 +198,12 @@ export class ObcAlertFrame extends LitElement {
    */
   @property({type: Boolean, reflect: true}) wrapContent: boolean = false;
 
+  /**
+   * When true, the frame stretches to fill the full width of its container
+   * instead of hugging its content. Reflected to an attribute for CSS styling.
+   */
+  @property({type: Boolean, reflect: true}) fullWidth: boolean = false;
+
   /**
    * If true, the top-left corner will be sharp (not rounded).
    */
@@ -231,6 +237,7 @@ export class ObcAlertFrame extends LitElement {
         class=${classMap({
           wrapper: true,
           'wrap-content': this.wrapContent,
+          'full-width': this.fullWidth,
           ['thickness-' + this.thickness]: true,
           [this.type]: true,
           [this.status]: true,
@@ -339,7 +346,8 @@ export class ObcAlertFrame extends LitElement {
 
 export function wrapWithAlertFrame(
   options: AlertFrameConfig | boolean | undefined,
-  content: HTMLTemplateResult
+  content: HTMLTemplateResult,
+  fullWidth: boolean = false
 ): HTMLTemplateResult {
   if (typeof options !== 'object' || options === null) {
     return content;
@@ -352,6 +360,7 @@ export function wrapWithAlertFrame(
     .showIcon=${options.showIcon ?? false}
     .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
     .wrapContent=${true}
+    .fullWidth=${fullWidth}
     >${content}</obc-alert-frame
   >`;
 }

package/src/components/pagination/pagination.ts

@@ -42,6 +42,14 @@ export type ObcPaginationNavigateEvent = CustomEvent<{
   currentPage: number;
 }>;
 
+/**
+ * Event fired when a page is selected.
+ * @event
+ */
+export type ObcPaginationSelectPageEvent = CustomEvent<{
+  page: number;
+}>;
+
 /**
  * `obc-pagination` – page navigation component for traversing multi-page content.
  *
@@ -97,9 +105,11 @@ export type ObcPaginationNavigateEvent = CustomEvent<{
  *
  * - `value` – Fired when the current page changes (via user interaction).
  * - `navigate` – Fired when a navigation arrow (first, previous, next, last) is clicked.
+ * - `select-page` – Fired when a specific page is selected.
  *
  * @fires value {ObcPaginationValueChangeEvent} Emitted whenever the current page changes.
  * @fires navigate {ObcPaginationNavigateEvent} Emitted when a navigation arrow is clicked.
+ * @fires select-page {ObcPaginationSelectPageEvent} Emitted when a specific page is selected.
  */
 @customElement('obc-pagination')
 export class ObcPagination extends LitElement {
@@ -195,13 +205,18 @@ export class ObcPagination extends LitElement {
 
   private setCurrentPage(newPage: number) {
     const page = Math.max(1, Math.min(newPage, this.validatedPages));
-    if (page === this.currentPage) return;
+    if (page === this.currentPage) {
+      return false;
+    }
+
     this.currentPage = page;
     this.dispatchEvent(
       new CustomEvent('value', {
         detail: {value: page},
       }) as ObcPaginationValueChangeEvent
     );
+
+    return true;
   }
 
   private dispatchNavigateEvent(
@@ -215,7 +230,15 @@ export class ObcPagination extends LitElement {
   }
 
   private handlePageChange = (event: CustomEvent<{value: string}>) => {
-    this.setCurrentPage(Number(event.detail.value));
+    const success = this.setCurrentPage(Number(event.detail.value));
+
+    if (success) {
+      this.dispatchEvent(
+        new CustomEvent('select-page', {
+          detail: {page: Number(event.detail.value)},
+        }) as ObcPaginationSelectPageEvent
+      );
+    }
   };
 
   private handleFirstClick = () => {

package/src/components/slider/slider.ts

@@ -26,6 +26,12 @@ export enum ObcSliderVariant {
  */
 export type ObcSliderValueEvent = CustomEvent<number>;
 
+/**
+ * Custom event type for slider change event (fired after user interaction completes).
+ * The event detail contains the new numeric value.
+ */
+export type ObcSliderChangeEvent = CustomEvent<number>;
+
 /**
  * `<obc-slider>` – A horizontal slider component for selecting a numeric value within a defined range.
  *
@@ -85,7 +91,8 @@ export type ObcSliderValueEvent = CustomEvent<number>;
  * ---
  *
  * ### Events
- * - `value` – Fired when the slider value changes, either by user interaction or programmatically. The event detail contains the new value as a number.
+ * - `value` – Fired continuously when the slider value changes during user interaction or programmatically. The event detail contains the new value as a number.
+ * - `change` – Fired only after user interaction completes (mouse/touch release or button click). The event detail contains the new value as a number.
  *
  * ---
  *
@@ -121,6 +128,7 @@ export type ObcSliderValueEvent = CustomEvent<number>;
  * @slot icon-right - Slot for the right icon button (shown when `hasRightIcon` is true)
  * @attr hugcontainer - If set, the slider will not have any spacing between the slider icons and the container
  * @fires value {ObcSliderValueEvent} - Fired when the value is changed
+ * @fires change {ObcSliderChangeEvent} - Fired when user interaction completes and value has changed
  */
 @customElement('obc-slider')
 export class ObcSlider extends LitElement {
@@ -233,12 +241,24 @@ export class ObcSlider extends LitElement {
     this.dispatchEvent(new CustomEvent('value', {detail: this.value}));
   }
 
+  /**
+   * Fires the `change` event with the current value.
+   *
+   * @fires change
+   */
+  private fireChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent('change', {detail: this.value}) as ObcSliderChangeEvent
+    );
+  }
+
   /**
    * Decrements the value by `stepClick` when the left icon button is clicked.
    */
   onReduceClick() {
     if (this.disabled) return;
     this.onInput(Math.max(this.value - this.stepClick, this.min));
+    this.fireChangeEvent();
   }
 
   /**
@@ -247,6 +267,7 @@ export class ObcSlider extends LitElement {
   onIncreaseClick() {
     if (this.disabled) return;
     this.onInput(Math.min(this.value + this.stepClick, this.max));
+    this.fireChangeEvent();
   }
 
   private get slider(): HTMLInputElement {
@@ -329,6 +350,7 @@ export class ObcSlider extends LitElement {
     window.removeEventListener('mousemove', this.onWindowMouseMove);
     window.removeEventListener('mouseup', this.onWindowMouseUp);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
 
   private onTouchEnd() {
@@ -336,6 +358,7 @@ export class ObcSlider extends LitElement {
     window.removeEventListener('touchmove', this.onWindowTouchMove);
     window.removeEventListener('touchend', this.onWindowTouchEnd);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
 
   private updateTargetValue(e: MouseEvent | TouchEvent) {
@@ -454,6 +477,9 @@ export class ObcSlider extends LitElement {
             this.value = Number((event.target as HTMLInputElement).value);
             this.dispatchEvent(new CustomEvent('value', {detail: this.value}));
           }}
+          @change=${() => {
+            this.fireChangeEvent();
+          }}
           @mousedown=${this.onMouseDown}
           @touchstart=${this.onTouchStart}
           @mousemove=${this.onMouseMove}

package/src/components/slider-double/slider-double.ts

@@ -29,6 +29,15 @@ export type ObcSliderDoubleValueEvent = CustomEvent<{
   high: number;
 }>;
 
+/**
+ * Event type for change event in obc-slider-double (fired after user interaction completes).
+ * Contains the current low and high values of the slider.
+ */
+export type ObcSliderDoubleChangeEvent = CustomEvent<{
+  low: number;
+  high: number;
+}>;
+
 /**
  * `<obc-slider-double>` – A dual-thumb range slider for selecting a value interval within a defined range.
  *
@@ -86,7 +95,8 @@ export type ObcSliderDoubleValueEvent = CustomEvent<{
  * - `hugcontainer` (attribute): If present, removes spacing between slider and container edges.
  *
  * ## Events
- * - `value` – Fired whenever the low or high value changes. Event detail contains `{low, high}`.
+ * - `value` – Fired continuously whenever the low or high value changes during user interaction. Event detail contains `{low, high}`.
+ * - `change` – Fired only after user interaction completes (mouse release). Event detail contains `{low, high}`.
  *
  * ## Best Practices and Constraints
  * - Ensure `low` is always less than or equal to `high`; the component enforces this automatically.
@@ -121,6 +131,7 @@ export type ObcSliderDoubleValueEvent = CustomEvent<{
  * @slot left-readout - Custom content for the left (low) readout label (rendered when `showLeftReadout` is true)
  * @slot right-readout - Custom content for the right (high) readout label (rendered when `showRightReadout` is true)
  * @fires value {ObcSliderDoubleValueEvent} - Fires when the value is changed
+ * @fires change {ObcSliderDoubleChangeEvent} - Fires when user interaction completes
  */
 @customElement('obc-slider-double')
 export class ObcSliderDouble extends LitElement {
@@ -281,6 +292,19 @@ export class ObcSliderDouble extends LitElement {
     );
   }
 
+  /**
+   * Fires the `change` event with the current low and high values.
+   *
+   * @fires change
+   */
+  private fireChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {low: this.low, high: this.high},
+      }) as ObcSliderDoubleChangeEvent
+    );
+  }
+
   private THUMB_WIDTH = 48;
   private THUMB_VISIBLE_WIDTH = 12;
 
@@ -389,6 +413,7 @@ export class ObcSliderDouble extends LitElement {
     window.removeEventListener('mousemove', this.onWindowMouseMove);
     window.removeEventListener('mouseup', this.onWindowMouseUp);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
 
   private updateTargetValue(e: MouseEvent) {
@@ -534,6 +559,7 @@ export class ObcSliderDouble extends LitElement {
           ?disabled=${this.variant === ObcSliderDoubleVariant.NoInput ||
           this.disabled}
           @input=${this.onInput}
+          @change=${() => this.fireChangeEvent()}
         />
         <input
           type="range"
@@ -545,6 +571,7 @@ export class ObcSliderDouble extends LitElement {
           ?disabled=${this.variant === ObcSliderDoubleVariant.NoInput ||
           this.disabled}
           @input=${this.onInput}
+          @change=${() => this.fireChangeEvent()}
         />
         <div class="interactive-track"></div>
         <div class="thumb min"></div>

package/src/components/toggle-button-group/toggle-button-group.ts

@@ -14,6 +14,10 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
   previousValue: string;
 }>;
 
+export type ObcToggleButtonGroupChangeEvent = CustomEvent<{
+  value: string;
+}>;
+
 /**
  * `<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).
  *
@@ -122,6 +126,7 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
  *
  * @slot - Place one or more `<obc-toggle-button-option>` elements here to define the selectable options.
  * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.
+ * @fires change {CustomEvent<{value: string}>} Fired when the selected value changes by user interaction.
  */
 @customElement('obc-toggle-button-group')
 export class ObcToggleButtonGroup extends LitElement {
@@ -229,7 +234,11 @@ export class ObcToggleButtonGroup extends LitElement {
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
 
-  private updateSelection(newValue: string, emitEvent: boolean = true) {
+  private updateSelection(
+    newValue: string,
+    emitValueEvent: boolean = true,
+    emitChangeEvent: boolean = false
+  ) {
     const oldValue = this.value;
 
     if (!this.hasAnyEnabledOption()) {
@@ -264,13 +273,21 @@ export class ObcToggleButtonGroup extends LitElement {
 
     this.setNoDivider();
 
-    if (emitEvent && oldValue !== newValue) {
+    if (emitValueEvent && oldValue !== newValue) {
       this.dispatchEvent(
         new CustomEvent('value', {
           detail: {value: newValue, previousValue: oldValue},
         })
       );
     }
+
+    if (emitChangeEvent && oldValue !== newValue) {
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {value: newValue},
+        })
+      );
+    }
   }
 
   private updateActivated(newValue: string | undefined) {
@@ -391,8 +408,14 @@ export class ObcToggleButtonGroup extends LitElement {
           detail: {value, previousValue: this.value},
         })
       );
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {value},
+        })
+      );
     } else {
-      this.updateSelection(value);
+      this.updateSelection(value, true, true);
     }
   }
 

package/src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts

@@ -15,6 +15,10 @@ export type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{
   previousValue: string;
 }>;
 
+export type ObcToggleButtonVerticalGroupChangeEvent = CustomEvent<{
+  value: string;
+}>;
+
 /**
  * `<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.
  *
@@ -108,6 +112,7 @@ export type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{
  *
  * @slot - Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options.
  * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.
+ * @fires change {CustomEvent<{value: string}>} Fired when the selected value changes by user interaction.
  */
 @customElement('obc-toggle-button-vertical-group')
 export class ObcToggleButtonVerticalGroup extends LitElement {
@@ -182,7 +187,11 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
 
-  private updateSelection(newValue: string, emitEvent: boolean = true) {
+  private updateSelection(
+    newValue: string,
+    emitValueEvent: boolean = true,
+    emitChangeEvent: boolean = false
+  ) {
     const oldValue = this.value;
 
     if (!this.hasAnyEnabledOption()) {
@@ -217,7 +226,7 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
 
     this.updateDividers();
 
-    if (emitEvent && oldValue !== newValue) {
+    if (emitValueEvent && oldValue !== newValue) {
       /**
        * Fired when the selected option changes.
        *
@@ -232,6 +241,22 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
         })
       );
     }
+
+    if (emitChangeEvent && oldValue !== newValue) {
+      /**
+       * Fired when the selected value changes by user interaction.
+       *
+       * The event detail contains the new value:
+       * `{ value: string }`
+       *
+       * @event change
+       */
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {value: newValue},
+        })
+      );
+    }
   }
 
   protected override firstUpdated(changed: PropertyValues) {
@@ -350,7 +375,7 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
 
   private onOptionSelected(e: Event): void {
     const {value} = (e as CustomEvent).detail;
-    this.updateSelection(value);
+    this.updateSelection(value, true, true);
   }
 
   override render() {

package/src/components/toggle-switch/toggle-switch.ts

@@ -85,6 +85,7 @@ export type ObcToggleSwitchInputEvent = CustomEvent<{
  *
  * @slot icon - Leading icon slot (shown when `hasIcon` is true)
  * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes
+ * @fires change - Dispatched when the value of the input changes by user interaction
  */
 @customElement('obc-toggle-switch')
 export class ObcToggleSwitch extends LitElement {
@@ -162,6 +163,14 @@ export class ObcToggleSwitch extends LitElement {
     }
   }
 
+  private _fireChangeEvent(e: Event) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('change'));
+  }
+
   override render() {
     return html`
       <label
@@ -190,6 +199,7 @@ export class ObcToggleSwitch extends LitElement {
               .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
+              @change=${this._fireChangeEvent}
             />
           </div>
         </div>

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -417,7 +417,8 @@ export class ObcReadoutListItem extends LitElement {
                 `}
           </div>
         </div>
-      `
+      `,
+      true
     );
   }
 

package/vitest.config.ts

@@ -36,6 +36,12 @@ export default defineConfig({
         test: {
           name: 'storybook',
           setupFiles: ['./.storybook/vitest.setup.ts'],
+          // Retry flaky visual snapshots. A retry re-renders the story and takes
+          // a fresh screenshot, which is what lets render-time flakiness (e.g.
+          // sub-pixel anti-aliasing of <canvas> charts) settle. See the matching
+          // beforeEach in .storybook/vitest.setup.ts, which keeps the retry from
+          // masking genuine snapshot regressions.
+          retry: 3,
           // Enable browser mode
           browser: {
             enabled: true,