@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.65 → 2.0.0-next.67

package/src/components/stepper-box/stepper-box.ts

@@ -36,22 +36,15 @@ export enum ObcStepperBoxType {
  *   - `up-down`: Uses up and down chevron icons for vertical adjustment.
  *   - `left-right`: Uses left and right chevron icons for horizontal adjustment.
  * - **Value Display:**
- *   - Optional unit label via the `unit` slot.
+ *   - Optional unit label via the `unit` property.
  * - **Helper Text:**
  *   - When `helperText` is set, displays additional helper or status text below the control.
  * - **Icon Buttons:**
  *   - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.
- * - **Customizable Layout:**
- *   - Supports flexible content via the `unit` slot.
  *
  * ### Usage Guidelines
  * Use `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.
  *
- * ### Slots
- * | Slot Name      | Renders When...           | Purpose                                 |
- * |--------------- |--------------------------|-----------------------------------------|
- * | unit           | If provided               | Unit label (e.g., "km", "%").           |
- *
  * ### Events
  * - `down` – Fired when the decrement (left or down) button is clicked.
  * - `up` – Fired when the increment (right or up) button is clicked.
@@ -63,12 +56,9 @@ export enum ObcStepperBoxType {
  *
  * **Example:**
  * ```
- * <obc-stepper-box type="up-down" .value=${5} helperText="Set weight">
- *   <div slot="unit">kg</div>
- * </obc-stepper-box>
+ * <obc-stepper-box type="up-down" value="5" unit="kg" helperText="Set weight"></obc-stepper-box>
  * ```
  *
- * @slot unit - Unit label (e.g., "km", "%")
  * @fires down {CustomEvent<{value: number}>} Fired when the decrement (left or down) button is clicked
  * @fires up {CustomEvent<{value: number}>} Fired when the increment (right or up) button is clicked
  * @fires input {CustomEvent<{value: string}>} Fired when the user types in the number input field
@@ -119,7 +109,7 @@ export class ObcStepperBox extends LitElement {
   @property({type: Number}) stepDown = 1;
 
   /**
-   * Unit text displayed inside the field. Overridden by the `unit` slot if assigned.
+   * Unit text displayed inside the field.
    */
   @property({type: String}) unit = '';
 

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

@@ -47,6 +47,10 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
  * - **External control mode:** When `externalControl` is true, the group emits selection events but does not
  *   update its own `value` property, allowing parent components to manage state (useful for form libraries or
  *   custom state management).
+ * - **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled
+ *   option leaves the group with no option selected, instead of defaulting to the first enabled option. Use
+ *   this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not
+ *   imply a choice the user has not made.
  * - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual
  *   options can also be disabled independently while the group remains enabled.
  * - **Divider management:** Automatically shows visual dividers between options and hides the divider after
@@ -177,6 +181,17 @@ export class ObcToggleButtonGroup extends LitElement {
    */
   @property({type: Boolean}) externalControl = false;
 
+  /**
+   * If true, a `value` that does not match any enabled option leaves the group with no option selected
+   * instead of defaulting to the first enabled option.
+   *
+   * This also applies when the currently selected option becomes disabled: the group clears its selection
+   * rather than falling back to another option.
+   *
+   * Defaults to false (the first enabled option is selected when the value does not match).
+   */
+  @property({type: Boolean}) allowEmptySelection = false;
+
   /**
    * Disables the entire toggle button group and all contained options when true.
    *
@@ -233,8 +248,12 @@ export class ObcToggleButtonGroup extends LitElement {
         this.setNoDivider();
         return;
       }
-      const fallback = this.getFirstSelectableOption();
-      newValue = fallback?.value || '';
+      if (this.allowEmptySelection) {
+        newValue = '';
+      } else {
+        const fallback = this.getFirstSelectableOption();
+        newValue = fallback?.value || '';
+      }
     }
 
     this.value = newValue;
@@ -333,9 +352,13 @@ export class ObcToggleButtonGroup extends LitElement {
     });
 
     if (!this.value || !this.getOptionByValue(this.value)) {
-      const firstSelectable = this.getFirstSelectableOption();
-      if (firstSelectable) {
-        this.updateSelection(firstSelectable.value, false);
+      if (this.allowEmptySelection) {
+        this.updateSelection('', false);
+      } else {
+        const firstSelectable = this.getFirstSelectableOption();
+        if (firstSelectable) {
+          this.updateSelection(firstSelectable.value, false);
+        }
       }
     } else {
       this.updateSelection(this.value, false);
@@ -349,6 +372,10 @@ export class ObcToggleButtonGroup extends LitElement {
   private handleOptionDisabledChange() {
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection('');
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -412,6 +439,10 @@ export class ObcToggleButtonGroup extends LitElement {
 
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection('');
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);

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

@@ -52,6 +52,9 @@ const meta: Meta<typeof ObcToggleButtonGroup> = {
     large: {
       control: {type: 'boolean'},
     },
+    allowEmptySelection: {
+      control: {type: 'boolean'},
+    },
   },
   render: (args) =>
     html` <div
@@ -483,3 +486,31 @@ export const ExternalControlActivatedDemo: Story = {
     </div>
   `,
 };
+
+export const EmptySelectionWhenUnmatched: Story = {
+  args: {
+    type: ObcToggleButtonOptionType.text,
+    variant: ObcToggleButtonOptionVariant.regular,
+    value: 'none',
+    allowEmptySelection: true,
+  },
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <p>
+        With <code>allowEmptySelection</code> enabled, a value that does not
+        match any option (here <code>"none"</code>) leaves the group with no
+        option selected instead of defaulting to the first option.
+      </p>
+      <obc-toggle-button-group
+        value="${args.value}"
+        variant="${args.variant}"
+        type="${args.type}"
+        .allowEmptySelection="${args.allowEmptySelection}"
+      >
+        <obc-toggle-button-option value="1">Option 1</obc-toggle-button-option>
+        <obc-toggle-button-option value="2">Option 2</obc-toggle-button-option>
+        <obc-toggle-button-option value="3">Option 3</obc-toggle-button-option>
+      </obc-toggle-button-group>
+    </div>
+  `,
+};

package/src/integration-systems/integration-fleet-button/integration-fleet-button.css

@@ -138,6 +138,10 @@
       gap: 8px;
       align-self: stretch;
 
+      &:not(.show-alerts) {
+        display: none;
+      }
+
       .alert-icon {
         width: 24px;
         height: 24px;

package/src/integration-systems/integration-fleet-button/integration-fleet-button.stories.ts

@@ -17,6 +17,7 @@ const meta: Meta<typeof ObcIntegrationFleetButton> = {
     ],
     alertTopic: 'Navigation alert',
     alerts: {alarm: 1, warning: 5, caution: 2},
+    showAlerts: true,
   },
   parameters: {
     backgrounds: {
@@ -32,6 +33,7 @@ const meta: Meta<typeof ObcIntegrationFleetButton> = {
       .alertTopic=${args.alertTopic}
       .alerts=${args.alerts}
       .selected=${args.selected}
+      .showAlerts=${args.showAlerts}
     >
       <obi-placeholder slot="alert-topic-icon"></obi-placeholder>
     </obc-integration-fleet-button>
@@ -66,3 +68,10 @@ export const SelectedNoAlerts: Story = {
     alerts: {alarm: 0, warning: 0, caution: 0},
   },
 };
+
+export const HideAlerts: Story = {
+  args: {
+    selected: false,
+    showAlerts: false,
+  },
+};

package/src/integration-systems/integration-fleet-button/integration-fleet-button.ts

@@ -2,6 +2,7 @@ import {LitElement, html, unsafeCSS} from 'lit';
 import {customElement} from '../../decorator.js';
 import compentStyle from './integration-fleet-button.css?inline';
 import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 import {msg} from '@lit/localize';
 import '../../components/badge/badge.js';
 
@@ -24,6 +25,7 @@ export class ObcIntegrationFleetButton extends LitElement {
     warning: number;
     caution: number;
   } = {alarm: 0, warning: 0, caution: 0};
+  @property({type: Boolean}) showAlerts: boolean = false;
 
   override render() {
     const hasAlert =
@@ -47,7 +49,14 @@ export class ObcIntegrationFleetButton extends LitElement {
                 </div>`
             )}
           </div>
-          <div class="alerts ${hasAlert ? 'has-alert' : 'no-alert'}">
+          <div
+            class=${classMap({
+              alerts: true,
+              'has-alert': hasAlert,
+              'no-alert': !hasAlert,
+              'show-alerts': this.showAlerts,
+            })}
+          >
             <div class="alert-icon ">
               <slot name="alert-topic-icon"></slot>
             </div>

package/src/navigation-instruments/readout/readout.stories.ts

@@ -19,12 +19,6 @@ import {
   ReadoutAdviceFormat,
   ReadoutAdviceState,
 } from '../readout-advice/readout-advice.js';
-import {AlertType} from '../../types.js';
-import {
-  ObcAlertFrameMode,
-  ObcAlertFrameThickness,
-  ObcAlertFrameType,
-} from '../../components/alert-frame/alert-frame.js';
 
 const meta: Meta<ObcReadout> = {
   title: 'Instruments/Readout',