@oicl/openbridge-webcomponents 2.0.0-next.168 → 2.0.0-next.169

package/dist/components/brilliance-menu/brilliance-menu.js

@@ -29,6 +29,7 @@ import { stopPropagation } from "../../internal/events.js";
 import "../../icons/icon-display-brilliance-iec.js";
 import "../../icons/icon-palette-day-night-iec.js";
 import { clamp } from "../../svghelpers/math.js";
+import { PopoverController } from "../../internal/popover-controller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -62,6 +63,9 @@ const PALETTE_TAB_ID = "palette";
 let ObcBrillianceMenu = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.softDismiss = false;
+    this.open = false;
+    this.softDismissController = new PopoverController(this);
     this.palette = "day";
     this.brightness = 50;
     this.showLinkBrightness = false;
@@ -572,6 +576,12 @@ let ObcBrillianceMenu = class extends LitElement {
   }
 };
 ObcBrillianceMenu.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcBrillianceMenu.prototype, "softDismiss", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcBrillianceMenu.prototype, "open", 2);
 __decorateClass([
   property({ type: String })
 ], ObcBrillianceMenu.prototype, "palette", 2);

package/dist/components/brilliance-menu/brilliance-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../button/button.js';\nimport '../slider/slider.js';\nimport '../toggle-switch/toggle-switch.js';\nimport '../toggle-button-group/toggle-button-group.js';\nimport '../toggle-button-option/toggle-button-option.js';\nimport '../../icons/icon-display-brilliance-low.js';\nimport '../../icons/icon-display-brilliance-proposal.js';\nimport '../../icons/icon-palette-night.js';\nimport '../../icons/icon-palette-dusk.js';\nimport '../../icons/icon-palette-day.js';\nimport '../../icons/icon-palette-day-bright.js';\nimport '../../icons/icon-link.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-screen-desk.js';\n\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport {\n  ObcToggleButtonOptionType,\n  ObcToggleButtonOptionVariant,\n} from '../toggle-button-option/toggle-button-option.js';\nimport {ObcSliderVariant} from '../slider/slider.js';\nimport {ObcToggleSwitch} from '../toggle-switch/toggle-switch.js';\nimport '../progress-indicator-dots/progress-indicator-dots.js';\nimport '../navigation-item/navigation-item.js';\nimport '../app-button/app-button.js';\nimport '../user-button/user-button.js';\nimport '../tab-row/tab-row.js';\nimport type {TabData} from '../tab-row/tab-row.js';\nimport {stopPropagation} from '../../internal/events.js';\nimport '../../icons/icon-display-brilliance-iec.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport {clamp} from '../../svghelpers/math.js';\n\nexport enum ObcPalette {\n  night = 'night',\n  dusk = 'dusk',\n  day = 'day',\n  bright = 'bright',\n}\n\nexport enum ObcBrillianceMenuVariant {\n  normal = 'normal',\n  compact = 'compact',\n  tabbed = 'tabbed',\n}\n\nexport enum ObcBrillianceInputVariant {\n  buttons = 'buttons',\n  slider = 'slider',\n}\n\nexport type ObcPaletteChangeEvent = CustomEvent<{value: ObcPalette}>;\nexport type ObcBrightnessChangeEvent = CustomEvent<{value: number}>;\nexport type ObcLinkPaletteChangeEvent = CustomEvent<{value: boolean}>;\nexport type ObcLinkBrightnessChangeEvent = CustomEvent<{value: boolean}>;\n\nconst BRILLIANCE_TAB_ID = 'brilliance';\nconst PALETTE_TAB_ID = 'palette';\n\n/**\n * Event fired when the palette is changed.\n * @typedef {CustomEvent<{value: ObcPalette}>} ObcPaletteChangeEvent\n */\n\n/**\n * Event fired when the brightness is changed.\n * @typedef {CustomEvent<{value: number}>} ObcBrightnessChangeEvent\n */\n\n/**\n * `<obc-brilliance-menu>` – A settings menu component for adjusting display palette and brightness.\n *\n * Provides a combined interface for users to select a color palette (night, dusk, day, bright) and adjust screen brightness. Includes options for toggling automatic palette and brightness modes. Designed for quick access to visual environment controls in applications where adaptable display settings are important.\n *\n * ### Features\n * - **Palette Selection:** Choose between four preset palettes: night, dusk, day, and bright. Each palette is represented by an icon.\n * - **Brightness Control:** Adjustable slider for fine-tuning brightness from 0 to 100. Optionally displays left/right icons for low and high brilliance.\n * - **Auto Modes:** Optional toggles for enabling automatic palette switching and automatic brightness adjustment.\n * - **Configurable Visibility:** Brightness controls and auto toggles can be shown or hidden via properties.\n * - **Responsive Layout:** Arranged in a card-style panel for use in settings menus or overlays.\n *\n * ### Variants\n * - **Palette:** Four options—`night`, `dusk`, `day`, `bright`. Each is visually distinct and selectable via toggle button group.\n * - **Auto Toggles:** `showAutoBrightness` and `showAutoPalette` properties control the presence of auto mode switches.\n * - **Show Brightness:** The `showBrightness` property controls whether the brightness slider and auto brightness toggle are visible.\n *\n * ### Usage Guidelines\n * Use `obc-brilliance-menu` in settings panels or overlays where users need to quickly adjust display appearance. Ideal for scenarios requiring rapid adaptation to changing lighting conditions or user preferences.\n * **TODO(designer):** Confirm if there are recommended default palette/brightness settings, and clarify intended use cases for auto toggles versus manual controls.\n *\n * ### Properties and Configuration\n * - `palette` (`ObcPalette`): The currently selected palette. Accepts `'night'`, `'dusk'`, `'day'`, or `'bright'`. Defaults to `'day'`.\n * - `brightness` (`number`): Current brightness value (0–100). Defaults to `50`.\n * - `showAutoBrightness` (`boolean`): If true, displays the auto brightness toggle.\n * - `showAutoPalette` (`boolean`): If true, displays the auto palette toggle.\n * - `showBrightness` (`boolean`): If true, shows the brightness slider and auto brightness toggle.\n *\n * ### Events\n * - `palette-changed` – Fired when the user selects a new palette. Event detail: `{ value: ObcPalette }`\n * - `brightness-changed` – Fired when the brightness slider is adjusted. Event detail: `{ value: number }`\n *\n * ### Example\n * ```html\n * <obc-brilliance-menu\n *   palette=\"dusk\"\n *   brightness=\"75\"\n *   showAutoBrightness\n *   showAutoPalette\n * ></obc-brilliance-menu>\n * ```\n * In this example, both auto toggles are visible, the palette is set to dusk, and brightness is set to 75.\n *\n * @property palette - The currently selected palette. Possible values: `'night'`, `'dusk'`, `'day'`, `'bright'`.\n *   Defaults to `'day'`.\n * @property brightness - The current brightness value (0–100). Defaults to `50`.\n * @property showLinkBrightness - If true, displays the link brightness toggle below the brightness slider.\n * @property showLinkPalette - If true, displays the link palette toggle below the palette selector.\n * @property showBrightness - If true, shows the brightness slider and auto brightness toggle in the menu.\n * @property showPalette - If true, shows the palette selector and link palette toggle in the menu.\n * @property variant - The variant of the menu. Possible values: `'normal'`, `'compact'`, `'tabbed'`.\n *   Defaults to `'normal'`.\n * @property brightnessUnit - The unit of the brightness value.\n * @property brightnessMax - The maximum value of the brightness slider.\n * @property brightnessMinorStep - The minor step of the brightness slider.\n * @property brightnessMajorStep - The major step of the brightness slider.\n * @property brightnessInputVariant - The variant of the brightness input.\n * @property showScreenControlLink - If true, displays the screen control link.\n * @property showAdditionalScreenControls - If true, displays the additional screen controls slot.\n * @slot additional-screen-controls - Consumer-defined controls, placed after the screen control link; rendered when `showAdditionalScreenControls` is true\n * @fires {ObcPaletteChangeEvent} palette-changed - When the palette is changed\n * @fires {ObcBrightnessChangeEvent} brightness-changed - When the brightness is changed\n * @fires {ObcLinkPaletteChangeEvent} link-palette-changed - When the link palette toggle is changed\n * @fires {ObcLinkBrightnessChangeEvent} link-brightness-changed - When the link brightness toggle is changed\n * @fires {CustomEvent} screen-control-link-clicked - When the screen control link is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n  @property({type: String}) palette: ObcPalette = ObcPalette.day;\n\n  @property({type: Number}) brightness = 50;\n\n  @property({type: Boolean})\n  showLinkBrightness = false;\n\n  @property({type: Boolean}) showLinkPalette = false;\n\n  @property({type: Boolean, attribute: false}) showBrightness = true;\n\n  @property({type: Boolean, attribute: false}) showPalette = true;\n\n  @property({type: Boolean, attribute: false}) showNightPalette = true;\n  @property({type: Boolean, attribute: false}) showDuskPalette = true;\n  @property({type: Boolean, attribute: false}) showDayPalette = true;\n  @property({type: Boolean, attribute: false}) showBrightPalette = true;\n\n  @property({type: String}) variant = ObcBrillianceMenuVariant.normal;\n\n  @property({type: String}) brightnessUnit = '%';\n\n  @property({type: Number}) brightnessMax = 100;\n\n  @property({type: Number}) brightnessMinorStep = 5;\n\n  @property({type: Number}) brightnessMajorStep = 25;\n\n  @property({type: String}) brightnessInputVariant =\n    ObcBrillianceInputVariant.buttons;\n\n  @property({type: Boolean}) showScreenControlLink = false;\n\n  @property({type: Boolean}) showAdditionalScreenControls = false;\n\n  override willUpdate(_changed: Map<string, unknown>) {\n    if (this.showPalette) {\n      const available = this.availablePalettes;\n      if (available.length > 0 && !available.includes(this.palette)) {\n        this.palette = available[0];\n        this.dispatchEvent(\n          new CustomEvent('palette-changed', {\n            detail: {value: this.palette},\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * Handles palette selection changes and emits `palette-changed`.\n   * @fires palette-changed\n   * @param {CustomEvent} event\n   */\n  onPaletteChanged(event: CustomEvent) {\n    this.palette = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('palette-changed', {\n        detail: {value: event.detail.value},\n      })\n    );\n  }\n\n  /**\n   * Handles brightness slider changes and emits `brightness-changed`.\n   * @fires brightness-changed\n   * @param {CustomEvent} event\n   */\n  handleBrightnessChanged(event: CustomEvent) {\n    this.brightness = event.detail;\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: event.detail},\n      })\n    );\n  }\n\n  increaseBrightness(step: number) {\n    this.brightness = clamp(\n      this.brightness + step,\n      0,\n      Math.max(0, this.brightnessMax)\n    );\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: this.brightness},\n      })\n    );\n  }\n\n  get canIncreaseBrightness() {\n    return this.brightness < this.brightnessMax;\n  }\n\n  get canDecreaseBrightness() {\n    return this.brightness > 0;\n  }\n\n  /**\n   * Handles link palette changes and emits `link-palette-changed`.\n   * @fires link-palette-changed\n   * @param {CustomEvent} event\n   */\n  onLinkPaletteChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-palette-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  /**\n   * Handles link brightness changes and emits `link-brightness-changed`.\n   * @fires link-brightness-changed\n   * @param {CustomEvent} event\n   */\n  onLinkBrightnessChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-brightness-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  get availablePalettes(): ObcPalette[] {\n    const palettes: ObcPalette[] = [];\n    if (this.showNightPalette) palettes.push(ObcPalette.night);\n    if (this.showDuskPalette) palettes.push(ObcPalette.dusk);\n    if (this.showDayPalette) palettes.push(ObcPalette.day);\n    if (this.showBrightPalette) palettes.push(ObcPalette.bright);\n    return palettes;\n  }\n\n  get canIncreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx >= 0 && idx < palettes.length - 1;\n  }\n\n  get canDecreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx > 0;\n  }\n\n  @state() private selectedTabId = BRILLIANCE_TAB_ID;\n\n  private onTabSelected(event: CustomEvent<{id: string}>) {\n    event.stopPropagation();\n    this.selectedTabId = event.detail.id;\n  }\n\n  private get tabs(): TabData[] {\n    return [\n      {\n        id: BRILLIANCE_TAB_ID,\n        title: msg('Brilliance'),\n        hasLeadingIcon: true,\n      },\n      {\n        id: PALETTE_TAB_ID,\n        title: `${msg('Day')}/${msg('Night')}`,\n        hasLeadingIcon: true,\n      },\n    ];\n  }\n\n  nextPalette() {\n    if (this.canIncreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx + 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  previousPalette() {\n    if (this.canDecreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx - 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  renderBrightness() {\n    const title =\n      this.variant === ObcBrillianceMenuVariant.tabbed\n        ? nothing\n        : html`<div class=\"title-container\">\n            <h3>${msg('Brilliance')}</h3>\n          </div>`;\n    const valueLength =\n      this.brightness.toString().length + 0.5 * this.brightnessUnit.length;\n\n    return html`${title}\n      <div class=\"content-container brilliance\">\n        ${\n          this.variant === ObcBrillianceMenuVariant.compact\n            ? html` <obc-slider\n                value=${this.brightness}\n                @value=${this.handleBrightnessChanged}\n                min=\"0\"\n                max=${this.brightnessMax}\n                variant=${ObcSliderVariant.Normal}\n                haslefticon\n                hasrighticon\n              >\n                <obi-display-brilliance-low\n                  slot=\"icon-left\"\n                ></obi-display-brilliance-low>\n                <obi-display-brilliance-proposal\n                  slot=\"icon-right\"\n                ></obi-display-brilliance-proposal>\n              </obc-slider>`\n            : html`\n                <div class=\"value-container\">\n                  <div class=\"value-label-container\">\n                    <obi-display-brilliance-proposal\n                      class=\"icon\"\n                    ></obi-display-brilliance-proposal>\n                    <div\n                      class=\"label-container\"\n                      style=\"width: ${valueLength}ch\"\n                    >\n                      <div class=\"value\">${this.brightness.toFixed(0)}</div>\n                      <div class=\"unit\">${this.brightnessUnit}</div>\n                    </div>\n                  </div>\n                  <div class=\"value-slider-container\">\n                    ${\n                      this.brightnessInputVariant ===\n                      ObcBrillianceInputVariant.buttons\n                        ? html`\n                            <obc-slider\n                              value=${this.brightness}\n                              variant=${ObcSliderVariant.NoInput}\n                              min=\"0\"\n                              max=${this.brightnessMax}\n                            ></obc-slider>\n                          `\n                        : html`\n                            <obc-slider\n                              value=${this.brightness}\n                              variant=${ObcSliderVariant.Enhanced}\n                              @value=${this.handleBrightnessChanged}\n                              min=\"0\"\n                              max=${this.brightnessMax}\n                            ></obc-slider>\n                          `\n                    }\n                  </div>\n                </div>\n                ${\n                  this.brightnessInputVariant ===\n                  ObcBrillianceInputVariant.buttons\n                    ? html`\n                        <div class=\"icon-button-container\">\n                          <obc-button\n                            segmentPosition=\"start\"\n                            fullWidth\n                            ?disabled=${!this.canDecreaseBrightness}\n                            class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(\n                                -this.brightnessMajorStep\n                              )}\n                          >\n                            <obi-chevron-double-left-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-double-left-google>\n                          </obc-button>\n                          <obc-button\n                            segmentPosition=\"middle\"\n                            fullWidth\n                            ?disabled=${!this.canDecreaseBrightness}\n                            class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(\n                                -this.brightnessMinorStep\n                              )}\n                          >\n                            <obi-chevron-left-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-left-google>\n                          </obc-button>\n                          <obc-button\n                            segmentPosition=\"middle\"\n                            fullWidth\n                            ?disabled=${!this.canIncreaseBrightness}\n                            class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(this.brightnessMinorStep)}\n                          >\n                            <obi-chevron-right-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-right-google>\n                          </obc-button>\n                          <obc-button\n                            segmentPosition=\"end\"\n                            fullWidth\n                            ?disabled=${!this.canIncreaseBrightness}\n                            class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(this.brightnessMajorStep)}\n                          >\n                            <obi-chevron-double-right-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-double-right-google>\n                          </obc-button>\n                        </div>\n                      `\n                    : nothing\n                }\n              `\n        }\n        ${\n          this.showLinkBrightness\n            ? html`<obc-toggle-switch\n                .label=\"${msg('Link')}\"\n                hasicon\n                @input=${this.onLinkBrightnessChanged}\n              >\n                <obi-link slot=\"icon\"></obi-link>\n              </obc-toggle-switch>`\n            : nothing\n        }\n      </div>`;\n  }\n\n  get effectivePalette() {\n    const palettes = this.availablePalettes;\n    return palettes.includes(this.palette) ? this.palette : palettes[0];\n  }\n\n  get paletteIcon() {\n    if (this.effectivePalette === ObcPalette.night) {\n      return html`<obi-palette-night class=\"icon\"></obi-palette-night>`;\n    } else if (this.effectivePalette === ObcPalette.dusk) {\n      return html`<obi-palette-dusk class=\"icon\"></obi-palette-dusk>`;\n    } else if (this.effectivePalette === ObcPalette.day) {\n      return html`<obi-palette-day class=\"icon\"></obi-palette-day>`;\n    } else if (this.effectivePalette === ObcPalette.bright) {\n      return html`<obi-palette-day-bright\n        class=\"icon\"\n      ></obi-palette-day-bright>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  private paletteOptions(): HTMLTemplateResult[] {\n    const out = [];\n    if (this.showNightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"night\" type=\"icon\">\n          <obi-palette-night slot=\"icon\"></obi-palette-night>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDuskPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"dusk\" type=\"icon\">\n          <obi-palette-dusk slot=\"icon\"></obi-palette-dusk>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDayPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"day\" type=\"icon\">\n          <obi-palette-day slot=\"icon\"></obi-palette-day>\n        </obc-toggle-button-option>`\n      );\n    if (this.showBrightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"bright\" type=\"icon\">\n          <obi-palette-day-bright slot=\"icon\"></obi-palette-day-bright>\n        </obc-toggle-button-option>`\n      );\n    return out;\n  }\n\n  renderPalette() {\n    const palettes = this.availablePalettes;\n    if (palettes.length === 0) return nothing;\n\n    const paletteNames: Record<ObcPalette, string> = {\n      [ObcPalette.night]: msg('Night'),\n      [ObcPalette.dusk]: msg('Dusk'),\n      [ObcPalette.day]: msg('Day'),\n      [ObcPalette.bright]: msg('Bright'),\n    };\n    const currentPaletteName = paletteNames[this.effectivePalette];\n    const valueLength = currentPaletteName.length;\n    const index = palettes.indexOf(this.effectivePalette);\n    const nextIndex = Math.min(index + 1, palettes.length - 1);\n    const previousIndex = Math.max(index - 1, 0);\n    const nextPalette = paletteNames[palettes[nextIndex]];\n    const previousPalette = paletteNames[palettes[previousIndex]];\n\n    return html`\n      ${\n        this.variant === ObcBrillianceMenuVariant.tabbed\n          ? nothing\n          : html`\n              <div class=\"title-container\">\n                <h3>${msg('Day')}/${msg('Night')}</h3>\n              </div>\n            `\n      }\n      <div\n        class=\"content-container palette ${\n          this.showLinkPalette ? 'with-link' : 'without-link'\n        }\"\n      >\n        ${\n          this.variant === ObcBrillianceMenuVariant.compact\n            ? html` <obc-toggle-button-group\n                aria-label=${`${msg('Day')}/${msg('Night')}`}\n                value=${this.effectivePalette}\n                @value=${this.onPaletteChanged}\n                variant=${ObcToggleButtonOptionVariant.regular}\n                type=${ObcToggleButtonOptionType.icon}\n              >\n                ${this.paletteOptions()}\n              </obc-toggle-button-group>`\n            : html`\n                <div class=\"value-container\">\n                  <div class=\"value-label-container\">\n                    ${this.paletteIcon}\n                    <div\n                      class=\"label-container\"\n                      style=\"width: ${valueLength}ch\"\n                    >\n                      <div class=\"value\">${currentPaletteName}</div>\n                    </div>\n                  </div>\n                  <obc-progress-indicator-dots\n                    .totalSteps=${palettes.length}\n                    .currentStep=${index + 1}\n                  ></obc-progress-indicator-dots>\n                </div>\n                <div class=\"icon-button-container\">\n                  <obc-button\n                    segmentPosition=\"start\"\n                    fullWidth\n                    showLeadingIcon\n                    ?disabled=${!this.canDecreasePalette}\n                    class=${this.canDecreasePalette ? '' : 'disabled'}\n                    @click=${() => this.previousPalette()}\n                  >\n                    ${previousPalette}\n                    <obi-chevron-left-google\n                      slot=\"leading-icon\"\n                    ></obi-chevron-left-google>\n                  </obc-button>\n\n                  <obc-button\n                    segmentPosition=\"end\"\n                    fullWidth\n                    showTrailingIcon\n                    ?disabled=${!this.canIncreasePalette}\n                    class=${this.canIncreasePalette ? '' : 'disabled'}\n                    @click=${() => this.nextPalette()}\n                  >\n                    ${nextPalette}\n                    <obi-chevron-right-google\n                      slot=\"trailing-icon\"\n                    ></obi-chevron-right-google>\n                  </obc-button>\n                </div>\n              `\n        }\n        ${\n          this.showLinkPalette\n            ? html`<obc-toggle-switch\n                .label=\"${msg('Link')}\"\n                hasicon\n                @input=${this.onLinkPaletteChanged}\n              >\n                <obi-link slot=\"icon\"></obi-link>\n              </obc-toggle-switch>`\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  renderScreenControlLink() {\n    if (this.showScreenControlLink || this.showAdditionalScreenControls) {\n      return html`\n        <div class=\"footer\">\n          ${\n            this.showScreenControlLink\n              ? html`\n                  <obc-navigation-item\n                    .label=\"${msg('Screen Control')}\"\n                    @click=${() => this.handleScreenControlLinkClicked()}\n                    hasicon\n                  >\n                    <obc-user-button\n                      slot=\"icon\"\n                      static\n                      variant=\"icon\"\n                      styleType=\"normal\"\n                    >\n                      <obi-screen-desk slot=\"icon\"></obi-screen-desk>\n                    </obc-user-button>\n                  </obc-navigation-item>\n                `\n              : nothing\n          }\n          ${\n            this.showAdditionalScreenControls\n              ? html`<slot name=\"additional-screen-controls\"></slot>`\n              : nothing\n          }\n        </div>\n      `;\n    }\n    return nothing;\n  }\n\n  override render() {\n    if (this.variant === ObcBrillianceMenuVariant.tabbed) {\n      return html`\n        <div class=\"card tabbed\">\n          <obc-tab-row\n            .tabs=${this.tabs}\n            .selectedTabId=${this.selectedTabId}\n            .centerContent=${true}\n            .hasPanels=${true}\n            .label=${msg('Display')}\n            @tab-selected=${this.onTabSelected}\n            @tab-closed=${stopPropagation}\n            @add-new-tab=${stopPropagation}\n          >\n            <obi-display-brilliance-iec\n              slot=\"tab-${BRILLIANCE_TAB_ID}-icon\"\n            ></obi-display-brilliance-iec>\n            <obi-palette-day-night-iec\n              slot=\"tab-${PALETTE_TAB_ID}-icon\"\n            ></obi-palette-day-night-iec>\n            <div slot=\"tab-${BRILLIANCE_TAB_ID}-panel\">\n              ${this.renderBrightness()}\n            </div>\n            <div slot=\"tab-${PALETTE_TAB_ID}-panel\">\n              ${this.renderPalette()}\n            </div>\n          </obc-tab-row>\n          ${this.renderScreenControlLink()}\n        </div>\n      `;\n    } else {\n      return html`\n        <div class=\"card ${this.variant}\">\n          ${this.showBrightness ? this.renderBrightness() : nothing}\n          ${\n            this.showBrightness && this.showPalette\n              ? html`<div class=\"divider\"></div>`\n              : nothing\n          }\n          ${this.showPalette ? this.renderPalette() : nothing}\n          ${this.renderScreenControlLink()}\n        </div>\n      `;\n    }\n  }\n\n  handleScreenControlLinkClicked() {\n    this.dispatchEvent(new CustomEvent('screen-control-link-clicked'));\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-brilliance-menu': ObcBrillianceMenu;\n  }\n}\n"],"names":["ObcPalette","ObcBrillianceMenuVariant","ObcBrillianceInputVariant"],"mappings":"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"}
+{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../button/button.js';\nimport '../slider/slider.js';\nimport '../toggle-switch/toggle-switch.js';\nimport '../toggle-button-group/toggle-button-group.js';\nimport '../toggle-button-option/toggle-button-option.js';\nimport '../../icons/icon-display-brilliance-low.js';\nimport '../../icons/icon-display-brilliance-proposal.js';\nimport '../../icons/icon-palette-night.js';\nimport '../../icons/icon-palette-dusk.js';\nimport '../../icons/icon-palette-day.js';\nimport '../../icons/icon-palette-day-bright.js';\nimport '../../icons/icon-link.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-screen-desk.js';\n\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport {\n  ObcToggleButtonOptionType,\n  ObcToggleButtonOptionVariant,\n} from '../toggle-button-option/toggle-button-option.js';\nimport {ObcSliderVariant} from '../slider/slider.js';\nimport {ObcToggleSwitch} from '../toggle-switch/toggle-switch.js';\nimport '../progress-indicator-dots/progress-indicator-dots.js';\nimport '../navigation-item/navigation-item.js';\nimport '../app-button/app-button.js';\nimport '../user-button/user-button.js';\nimport '../tab-row/tab-row.js';\nimport type {TabData} from '../tab-row/tab-row.js';\nimport {stopPropagation} from '../../internal/events.js';\nimport '../../icons/icon-display-brilliance-iec.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport {clamp} from '../../svghelpers/math.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport enum ObcPalette {\n  night = 'night',\n  dusk = 'dusk',\n  day = 'day',\n  bright = 'bright',\n}\n\nexport enum ObcBrillianceMenuVariant {\n  normal = 'normal',\n  compact = 'compact',\n  tabbed = 'tabbed',\n}\n\nexport enum ObcBrillianceInputVariant {\n  buttons = 'buttons',\n  slider = 'slider',\n}\n\nexport type ObcPaletteChangeEvent = CustomEvent<{value: ObcPalette}>;\nexport type ObcBrightnessChangeEvent = CustomEvent<{value: number}>;\nexport type ObcLinkPaletteChangeEvent = CustomEvent<{value: boolean}>;\nexport type ObcLinkBrightnessChangeEvent = CustomEvent<{value: boolean}>;\n\nconst BRILLIANCE_TAB_ID = 'brilliance';\nconst PALETTE_TAB_ID = 'palette';\n\n/**\n * Event fired when the palette is changed.\n * @typedef {CustomEvent<{value: ObcPalette}>} ObcPaletteChangeEvent\n */\n\n/**\n * Event fired when the brightness is changed.\n * @typedef {CustomEvent<{value: number}>} ObcBrightnessChangeEvent\n */\n\n/**\n * `<obc-brilliance-menu>` – A settings menu component for adjusting display palette and brightness.\n *\n * Provides a combined interface for users to select a color palette (night, dusk, day, bright) and adjust screen brightness. Includes options for toggling automatic palette and brightness modes. Designed for quick access to visual environment controls in applications where adaptable display settings are important.\n *\n * ### Features\n * - **Palette Selection:** Choose between four preset palettes: night, dusk, day, and bright. Each palette is represented by an icon.\n * - **Brightness Control:** Adjustable slider for fine-tuning brightness from 0 to 100. Optionally displays left/right icons for low and high brilliance.\n * - **Auto Modes:** Optional toggles for enabling automatic palette switching and automatic brightness adjustment.\n * - **Configurable Visibility:** Brightness controls and auto toggles can be shown or hidden via properties.\n * - **Responsive Layout:** Arranged in a card-style panel for use in settings menus or overlays.\n *\n * ### Variants\n * - **Palette:** Four options—`night`, `dusk`, `day`, `bright`. Each is visually distinct and selectable via toggle button group.\n * - **Auto Toggles:** `showAutoBrightness` and `showAutoPalette` properties control the presence of auto mode switches.\n * - **Show Brightness:** The `showBrightness` property controls whether the brightness slider and auto brightness toggle are visible.\n *\n * ### Usage Guidelines\n * Use `obc-brilliance-menu` in settings panels or overlays where users need to quickly adjust display appearance. Ideal for scenarios requiring rapid adaptation to changing lighting conditions or user preferences.\n * **TODO(designer):** Confirm if there are recommended default palette/brightness settings, and clarify intended use cases for auto toggles versus manual controls.\n *\n * ### Properties and Configuration\n * - `palette` (`ObcPalette`): The currently selected palette. Accepts `'night'`, `'dusk'`, `'day'`, or `'bright'`. Defaults to `'day'`.\n * - `brightness` (`number`): Current brightness value (0–100). Defaults to `50`.\n * - `showAutoBrightness` (`boolean`): If true, displays the auto brightness toggle.\n * - `showAutoPalette` (`boolean`): If true, displays the auto palette toggle.\n * - `showBrightness` (`boolean`): If true, shows the brightness slider and auto brightness toggle.\n *\n * ### Events\n * - `palette-changed` – Fired when the user selects a new palette. Event detail: `{ value: ObcPalette }`\n * - `brightness-changed` – Fired when the brightness slider is adjusted. Event detail: `{ value: number }`\n *\n * ### Example\n * ```html\n * <obc-brilliance-menu\n *   palette=\"dusk\"\n *   brightness=\"75\"\n *   showAutoBrightness\n *   showAutoPalette\n * ></obc-brilliance-menu>\n * ```\n * In this example, both auto toggles are visible, the palette is set to dusk, and brightness is set to 75.\n *\n * @property palette - The currently selected palette. Possible values: `'night'`, `'dusk'`, `'day'`, `'bright'`.\n *   Defaults to `'day'`.\n * @property brightness - The current brightness value (0–100). Defaults to `50`.\n * @property showLinkBrightness - If true, displays the link brightness toggle below the brightness slider.\n * @property showLinkPalette - If true, displays the link palette toggle below the palette selector.\n * @property showBrightness - If true, shows the brightness slider and auto brightness toggle in the menu.\n * @property showPalette - If true, shows the palette selector and link palette toggle in the menu.\n * @property variant - The variant of the menu. Possible values: `'normal'`, `'compact'`, `'tabbed'`.\n *   Defaults to `'normal'`.\n * @property brightnessUnit - The unit of the brightness value.\n * @property brightnessMax - The maximum value of the brightness slider.\n * @property brightnessMinorStep - The minor step of the brightness slider.\n * @property brightnessMajorStep - The major step of the brightness slider.\n * @property brightnessInputVariant - The variant of the brightness input.\n * @property showScreenControlLink - If true, displays the screen control link.\n * @property showAdditionalScreenControls - If true, displays the additional screen controls slot.\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @slot additional-screen-controls - Consumer-defined controls, placed after the screen control link; rendered when `showAdditionalScreenControls` is true\n * @fires {ObcPaletteChangeEvent} palette-changed - When the palette is changed\n * @fires {ObcBrightnessChangeEvent} brightness-changed - When the brightness is changed\n * @fires {ObcLinkPaletteChangeEvent} link-palette-changed - When the link palette toggle is changed\n * @fires {ObcLinkBrightnessChangeEvent} link-brightness-changed - When the link brightness toggle is changed\n * @fires {CustomEvent} screen-control-link-clicked - When the screen control link is clicked\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: String}) palette: ObcPalette = ObcPalette.day;\n\n  @property({type: Number}) brightness = 50;\n\n  @property({type: Boolean})\n  showLinkBrightness = false;\n\n  @property({type: Boolean}) showLinkPalette = false;\n\n  @property({type: Boolean, attribute: false}) showBrightness = true;\n\n  @property({type: Boolean, attribute: false}) showPalette = true;\n\n  @property({type: Boolean, attribute: false}) showNightPalette = true;\n  @property({type: Boolean, attribute: false}) showDuskPalette = true;\n  @property({type: Boolean, attribute: false}) showDayPalette = true;\n  @property({type: Boolean, attribute: false}) showBrightPalette = true;\n\n  @property({type: String}) variant = ObcBrillianceMenuVariant.normal;\n\n  @property({type: String}) brightnessUnit = '%';\n\n  @property({type: Number}) brightnessMax = 100;\n\n  @property({type: Number}) brightnessMinorStep = 5;\n\n  @property({type: Number}) brightnessMajorStep = 25;\n\n  @property({type: String}) brightnessInputVariant =\n    ObcBrillianceInputVariant.buttons;\n\n  @property({type: Boolean}) showScreenControlLink = false;\n\n  @property({type: Boolean}) showAdditionalScreenControls = false;\n\n  override willUpdate(_changed: Map<string, unknown>) {\n    if (this.showPalette) {\n      const available = this.availablePalettes;\n      if (available.length > 0 && !available.includes(this.palette)) {\n        this.palette = available[0];\n        this.dispatchEvent(\n          new CustomEvent('palette-changed', {\n            detail: {value: this.palette},\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * Handles palette selection changes and emits `palette-changed`.\n   * @fires palette-changed\n   * @param {CustomEvent} event\n   */\n  onPaletteChanged(event: CustomEvent) {\n    this.palette = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('palette-changed', {\n        detail: {value: event.detail.value},\n      })\n    );\n  }\n\n  /**\n   * Handles brightness slider changes and emits `brightness-changed`.\n   * @fires brightness-changed\n   * @param {CustomEvent} event\n   */\n  handleBrightnessChanged(event: CustomEvent) {\n    this.brightness = event.detail;\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: event.detail},\n      })\n    );\n  }\n\n  increaseBrightness(step: number) {\n    this.brightness = clamp(\n      this.brightness + step,\n      0,\n      Math.max(0, this.brightnessMax)\n    );\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: this.brightness},\n      })\n    );\n  }\n\n  get canIncreaseBrightness() {\n    return this.brightness < this.brightnessMax;\n  }\n\n  get canDecreaseBrightness() {\n    return this.brightness > 0;\n  }\n\n  /**\n   * Handles link palette changes and emits `link-palette-changed`.\n   * @fires link-palette-changed\n   * @param {CustomEvent} event\n   */\n  onLinkPaletteChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-palette-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  /**\n   * Handles link brightness changes and emits `link-brightness-changed`.\n   * @fires link-brightness-changed\n   * @param {CustomEvent} event\n   */\n  onLinkBrightnessChanged(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('link-brightness-changed', {\n        detail: {value: (event.target as ObcToggleSwitch).checked},\n      })\n    );\n  }\n\n  get availablePalettes(): ObcPalette[] {\n    const palettes: ObcPalette[] = [];\n    if (this.showNightPalette) palettes.push(ObcPalette.night);\n    if (this.showDuskPalette) palettes.push(ObcPalette.dusk);\n    if (this.showDayPalette) palettes.push(ObcPalette.day);\n    if (this.showBrightPalette) palettes.push(ObcPalette.bright);\n    return palettes;\n  }\n\n  get canIncreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx >= 0 && idx < palettes.length - 1;\n  }\n\n  get canDecreasePalette() {\n    const palettes = this.availablePalettes;\n    const idx = palettes.indexOf(this.palette);\n    return idx > 0;\n  }\n\n  @state() private selectedTabId = BRILLIANCE_TAB_ID;\n\n  private onTabSelected(event: CustomEvent<{id: string}>) {\n    event.stopPropagation();\n    this.selectedTabId = event.detail.id;\n  }\n\n  private get tabs(): TabData[] {\n    return [\n      {\n        id: BRILLIANCE_TAB_ID,\n        title: msg('Brilliance'),\n        hasLeadingIcon: true,\n      },\n      {\n        id: PALETTE_TAB_ID,\n        title: `${msg('Day')}/${msg('Night')}`,\n        hasLeadingIcon: true,\n      },\n    ];\n  }\n\n  nextPalette() {\n    if (this.canIncreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx + 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  previousPalette() {\n    if (this.canDecreasePalette) {\n      const palettes = this.availablePalettes;\n      const idx = palettes.indexOf(this.palette);\n      this.palette = palettes[idx - 1];\n      this.dispatchEvent(\n        new CustomEvent('palette-changed', {\n          detail: {value: this.palette},\n        })\n      );\n    }\n  }\n\n  renderBrightness() {\n    const title =\n      this.variant === ObcBrillianceMenuVariant.tabbed\n        ? nothing\n        : html`<div class=\"title-container\">\n            <h3>${msg('Brilliance')}</h3>\n          </div>`;\n    const valueLength =\n      this.brightness.toString().length + 0.5 * this.brightnessUnit.length;\n\n    return html`${title}\n      <div class=\"content-container brilliance\">\n        ${\n          this.variant === ObcBrillianceMenuVariant.compact\n            ? html` <obc-slider\n                value=${this.brightness}\n                @value=${this.handleBrightnessChanged}\n                min=\"0\"\n                max=${this.brightnessMax}\n                variant=${ObcSliderVariant.Normal}\n                haslefticon\n                hasrighticon\n              >\n                <obi-display-brilliance-low\n                  slot=\"icon-left\"\n                ></obi-display-brilliance-low>\n                <obi-display-brilliance-proposal\n                  slot=\"icon-right\"\n                ></obi-display-brilliance-proposal>\n              </obc-slider>`\n            : html`\n                <div class=\"value-container\">\n                  <div class=\"value-label-container\">\n                    <obi-display-brilliance-proposal\n                      class=\"icon\"\n                    ></obi-display-brilliance-proposal>\n                    <div\n                      class=\"label-container\"\n                      style=\"width: ${valueLength}ch\"\n                    >\n                      <div class=\"value\">${this.brightness.toFixed(0)}</div>\n                      <div class=\"unit\">${this.brightnessUnit}</div>\n                    </div>\n                  </div>\n                  <div class=\"value-slider-container\">\n                    ${\n                      this.brightnessInputVariant ===\n                      ObcBrillianceInputVariant.buttons\n                        ? html`\n                            <obc-slider\n                              value=${this.brightness}\n                              variant=${ObcSliderVariant.NoInput}\n                              min=\"0\"\n                              max=${this.brightnessMax}\n                            ></obc-slider>\n                          `\n                        : html`\n                            <obc-slider\n                              value=${this.brightness}\n                              variant=${ObcSliderVariant.Enhanced}\n                              @value=${this.handleBrightnessChanged}\n                              min=\"0\"\n                              max=${this.brightnessMax}\n                            ></obc-slider>\n                          `\n                    }\n                  </div>\n                </div>\n                ${\n                  this.brightnessInputVariant ===\n                  ObcBrillianceInputVariant.buttons\n                    ? html`\n                        <div class=\"icon-button-container\">\n                          <obc-button\n                            segmentPosition=\"start\"\n                            fullWidth\n                            ?disabled=${!this.canDecreaseBrightness}\n                            class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(\n                                -this.brightnessMajorStep\n                              )}\n                          >\n                            <obi-chevron-double-left-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-double-left-google>\n                          </obc-button>\n                          <obc-button\n                            segmentPosition=\"middle\"\n                            fullWidth\n                            ?disabled=${!this.canDecreaseBrightness}\n                            class=${this.canDecreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(\n                                -this.brightnessMinorStep\n                              )}\n                          >\n                            <obi-chevron-left-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-left-google>\n                          </obc-button>\n                          <obc-button\n                            segmentPosition=\"middle\"\n                            fullWidth\n                            ?disabled=${!this.canIncreaseBrightness}\n                            class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(this.brightnessMinorStep)}\n                          >\n                            <obi-chevron-right-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-right-google>\n                          </obc-button>\n                          <obc-button\n                            segmentPosition=\"end\"\n                            fullWidth\n                            ?disabled=${!this.canIncreaseBrightness}\n                            class=${this.canIncreaseBrightness ? '' : 'disabled'}\n                            @click=${() =>\n                              this.increaseBrightness(this.brightnessMajorStep)}\n                          >\n                            <obi-chevron-double-right-google\n                              class=\"btn-icon\"\n                            ></obi-chevron-double-right-google>\n                          </obc-button>\n                        </div>\n                      `\n                    : nothing\n                }\n              `\n        }\n        ${\n          this.showLinkBrightness\n            ? html`<obc-toggle-switch\n                .label=\"${msg('Link')}\"\n                hasicon\n                @input=${this.onLinkBrightnessChanged}\n              >\n                <obi-link slot=\"icon\"></obi-link>\n              </obc-toggle-switch>`\n            : nothing\n        }\n      </div>`;\n  }\n\n  get effectivePalette() {\n    const palettes = this.availablePalettes;\n    return palettes.includes(this.palette) ? this.palette : palettes[0];\n  }\n\n  get paletteIcon() {\n    if (this.effectivePalette === ObcPalette.night) {\n      return html`<obi-palette-night class=\"icon\"></obi-palette-night>`;\n    } else if (this.effectivePalette === ObcPalette.dusk) {\n      return html`<obi-palette-dusk class=\"icon\"></obi-palette-dusk>`;\n    } else if (this.effectivePalette === ObcPalette.day) {\n      return html`<obi-palette-day class=\"icon\"></obi-palette-day>`;\n    } else if (this.effectivePalette === ObcPalette.bright) {\n      return html`<obi-palette-day-bright\n        class=\"icon\"\n      ></obi-palette-day-bright>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  private paletteOptions(): HTMLTemplateResult[] {\n    const out = [];\n    if (this.showNightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"night\" type=\"icon\">\n          <obi-palette-night slot=\"icon\"></obi-palette-night>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDuskPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"dusk\" type=\"icon\">\n          <obi-palette-dusk slot=\"icon\"></obi-palette-dusk>\n        </obc-toggle-button-option>`\n      );\n    if (this.showDayPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"day\" type=\"icon\">\n          <obi-palette-day slot=\"icon\"></obi-palette-day>\n        </obc-toggle-button-option>`\n      );\n    if (this.showBrightPalette)\n      out.push(\n        html`<obc-toggle-button-option value=\"bright\" type=\"icon\">\n          <obi-palette-day-bright slot=\"icon\"></obi-palette-day-bright>\n        </obc-toggle-button-option>`\n      );\n    return out;\n  }\n\n  renderPalette() {\n    const palettes = this.availablePalettes;\n    if (palettes.length === 0) return nothing;\n\n    const paletteNames: Record<ObcPalette, string> = {\n      [ObcPalette.night]: msg('Night'),\n      [ObcPalette.dusk]: msg('Dusk'),\n      [ObcPalette.day]: msg('Day'),\n      [ObcPalette.bright]: msg('Bright'),\n    };\n    const currentPaletteName = paletteNames[this.effectivePalette];\n    const valueLength = currentPaletteName.length;\n    const index = palettes.indexOf(this.effectivePalette);\n    const nextIndex = Math.min(index + 1, palettes.length - 1);\n    const previousIndex = Math.max(index - 1, 0);\n    const nextPalette = paletteNames[palettes[nextIndex]];\n    const previousPalette = paletteNames[palettes[previousIndex]];\n\n    return html`\n      ${\n        this.variant === ObcBrillianceMenuVariant.tabbed\n          ? nothing\n          : html`\n              <div class=\"title-container\">\n                <h3>${msg('Day')}/${msg('Night')}</h3>\n              </div>\n            `\n      }\n      <div\n        class=\"content-container palette ${\n          this.showLinkPalette ? 'with-link' : 'without-link'\n        }\"\n      >\n        ${\n          this.variant === ObcBrillianceMenuVariant.compact\n            ? html` <obc-toggle-button-group\n                aria-label=${`${msg('Day')}/${msg('Night')}`}\n                value=${this.effectivePalette}\n                @value=${this.onPaletteChanged}\n                variant=${ObcToggleButtonOptionVariant.regular}\n                type=${ObcToggleButtonOptionType.icon}\n              >\n                ${this.paletteOptions()}\n              </obc-toggle-button-group>`\n            : html`\n                <div class=\"value-container\">\n                  <div class=\"value-label-container\">\n                    ${this.paletteIcon}\n                    <div\n                      class=\"label-container\"\n                      style=\"width: ${valueLength}ch\"\n                    >\n                      <div class=\"value\">${currentPaletteName}</div>\n                    </div>\n                  </div>\n                  <obc-progress-indicator-dots\n                    .totalSteps=${palettes.length}\n                    .currentStep=${index + 1}\n                  ></obc-progress-indicator-dots>\n                </div>\n                <div class=\"icon-button-container\">\n                  <obc-button\n                    segmentPosition=\"start\"\n                    fullWidth\n                    showLeadingIcon\n                    ?disabled=${!this.canDecreasePalette}\n                    class=${this.canDecreasePalette ? '' : 'disabled'}\n                    @click=${() => this.previousPalette()}\n                  >\n                    ${previousPalette}\n                    <obi-chevron-left-google\n                      slot=\"leading-icon\"\n                    ></obi-chevron-left-google>\n                  </obc-button>\n\n                  <obc-button\n                    segmentPosition=\"end\"\n                    fullWidth\n                    showTrailingIcon\n                    ?disabled=${!this.canIncreasePalette}\n                    class=${this.canIncreasePalette ? '' : 'disabled'}\n                    @click=${() => this.nextPalette()}\n                  >\n                    ${nextPalette}\n                    <obi-chevron-right-google\n                      slot=\"trailing-icon\"\n                    ></obi-chevron-right-google>\n                  </obc-button>\n                </div>\n              `\n        }\n        ${\n          this.showLinkPalette\n            ? html`<obc-toggle-switch\n                .label=\"${msg('Link')}\"\n                hasicon\n                @input=${this.onLinkPaletteChanged}\n              >\n                <obi-link slot=\"icon\"></obi-link>\n              </obc-toggle-switch>`\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  renderScreenControlLink() {\n    if (this.showScreenControlLink || this.showAdditionalScreenControls) {\n      return html`\n        <div class=\"footer\">\n          ${\n            this.showScreenControlLink\n              ? html`\n                  <obc-navigation-item\n                    .label=\"${msg('Screen Control')}\"\n                    @click=${() => this.handleScreenControlLinkClicked()}\n                    hasicon\n                  >\n                    <obc-user-button\n                      slot=\"icon\"\n                      static\n                      variant=\"icon\"\n                      styleType=\"normal\"\n                    >\n                      <obi-screen-desk slot=\"icon\"></obi-screen-desk>\n                    </obc-user-button>\n                  </obc-navigation-item>\n                `\n              : nothing\n          }\n          ${\n            this.showAdditionalScreenControls\n              ? html`<slot name=\"additional-screen-controls\"></slot>`\n              : nothing\n          }\n        </div>\n      `;\n    }\n    return nothing;\n  }\n\n  override render() {\n    if (this.variant === ObcBrillianceMenuVariant.tabbed) {\n      return html`\n        <div class=\"card tabbed\">\n          <obc-tab-row\n            .tabs=${this.tabs}\n            .selectedTabId=${this.selectedTabId}\n            .centerContent=${true}\n            .hasPanels=${true}\n            .label=${msg('Display')}\n            @tab-selected=${this.onTabSelected}\n            @tab-closed=${stopPropagation}\n            @add-new-tab=${stopPropagation}\n          >\n            <obi-display-brilliance-iec\n              slot=\"tab-${BRILLIANCE_TAB_ID}-icon\"\n            ></obi-display-brilliance-iec>\n            <obi-palette-day-night-iec\n              slot=\"tab-${PALETTE_TAB_ID}-icon\"\n            ></obi-palette-day-night-iec>\n            <div slot=\"tab-${BRILLIANCE_TAB_ID}-panel\">\n              ${this.renderBrightness()}\n            </div>\n            <div slot=\"tab-${PALETTE_TAB_ID}-panel\">\n              ${this.renderPalette()}\n            </div>\n          </obc-tab-row>\n          ${this.renderScreenControlLink()}\n        </div>\n      `;\n    } else {\n      return html`\n        <div class=\"card ${this.variant}\">\n          ${this.showBrightness ? this.renderBrightness() : nothing}\n          ${\n            this.showBrightness && this.showPalette\n              ? html`<div class=\"divider\"></div>`\n              : nothing\n          }\n          ${this.showPalette ? this.renderPalette() : nothing}\n          ${this.renderScreenControlLink()}\n        </div>\n      `;\n    }\n  }\n\n  handleScreenControlLinkClicked() {\n    this.dispatchEvent(new CustomEvent('screen-control-link-clicked'));\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-brilliance-menu': ObcBrillianceMenu;\n  }\n}\n"],"names":["ObcPalette","ObcBrillianceMenuVariant","ObcBrillianceInputVariant"],"mappings":"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"}

package/dist/components/command-menu/command-menu.css.js

@@ -1,8 +1,28 @@
 import { css } from "lit";
 const compentStyle = css`* {
-  -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
 }
 
+:host([popover]) {
+    /* The browser pins a popover to all four edges and lets the automatic
+       margins centre it. Unpinning drops it back where it would normally sit,
+       for the consumer to position from. */
+    inset: auto;
+    margin: 0;
+
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+
+    /* The menus scroll their own content. */
+    overflow: visible;
+
+    /* The browser shrink-wraps a popover to its contents. */
+    width: auto;
+    height: auto;
+  }
+
 .card {
   border-radius: 8px;
   background: var(--container-global-color, #fcfcfc);

package/dist/components/command-menu/command-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"command-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/command-menu/command-menu.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { PopoverController } from '../../internal/popover-controller.js';
 import '../start-stop-switch/start-stop-switch.js';
 import '../../icons/icon-command-in.js';
 export type ObcCommandMenuChangeEvent = CustomEvent<{
@@ -81,6 +82,9 @@ export type ObcCommandMenuChangeEvent = CustomEvent<{
  *   Controls the toggle and visual state.
  * @property showLocation - Whether to display the location slot.
  *   If false, the location is omitted from the menu.
+ * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.
+ * @property open - Whether the menu is showing.
+ * @availableWhen open softDismiss==true
  * @slot command-icon - Main icon representing the current command state.
  * @slot command-status - Status label (e.g., "Joystick", "NO CMD").
  * @slot command-description - Description of the command state.
@@ -91,9 +95,19 @@ export type ObcCommandMenuChangeEvent = CustomEvent<{
  * @slot toogle-state-no-command-label - Status label when in "no command" state.
  * @slot toogle-state-in-command-icon - Icon for the "in command" state (defaults to `<obi-command-in>`).
  * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.
+ * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.
  * @beta
  */
 export declare class ObcCommandMenu extends LitElement {
+    /** Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself. */
+    softDismiss: boolean;
+    /**
+     * Whether the menu is showing.
+     *
+     * Available when `softDismiss==true`.
+     */
+    open: boolean;
+    protected readonly softDismissController: PopoverController;
     /** Whether the menu is in the "in command" state. Controls the toggle and visual state. */
     inCommand: boolean;
     /** Whether to display the location slot. If false, the location is omitted from the menu. */

package/dist/components/command-menu/command-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-menu.d.ts","sourceRoot":"","sources":["../../../src/components/command-menu/command-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,gCAAgC,CAAC;AAKxC,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,qBACa,cAAe,SAAQ,UAAU;IACjB,SAAS,UAAS;IAEA,YAAY,EAAE,OAAO,CAAQ;IAEjE,MAAM;IAiEf;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAehB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"command-menu.d.ts","sourceRoot":"","sources":["../../../src/components/command-menu/command-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,gCAAgC,CAAC;AAIxC,OAAO,EAAC,iBAAiB,EAAC,MAAM,sCAAsC,CAAC;AAEvE,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FG;AACH,qBACa,cAAe,SAAQ,UAAU;IACjB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAExC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,oBAA+B;IAE5C,SAAS,UAAS;IAEA,YAAY,EAAE,OAAO,CAAQ;IAEjE,MAAM;IAiEf;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAehB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/command-menu/command-menu.js

@@ -5,6 +5,7 @@ import "../start-stop-switch/start-stop-switch.js";
 import "../../icons/icon-command-in.js";
 import { classMap } from "lit/directives/class-map.js";
 import { customElement } from "../../decorator.js";
+import { PopoverController } from "../../internal/popover-controller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,6 +19,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 let ObcCommandMenu = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.softDismiss = false;
+    this.open = false;
+    this.softDismissController = new PopoverController(this);
     this.inCommand = false;
     this.showLocation = true;
   }
@@ -100,6 +104,12 @@ let ObcCommandMenu = class extends LitElement {
   }
 };
 ObcCommandMenu.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcCommandMenu.prototype, "softDismiss", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcCommandMenu.prototype, "open", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcCommandMenu.prototype, "inCommand", 2);

package/dist/components/command-menu/command-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-menu.js","sources":["../../../src/components/command-menu/command-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './command-menu.css?inline';\nimport '../start-stop-switch/start-stop-switch.js';\nimport '../../icons/icon-command-in.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcStartStopSwitchChangeEvent} from '../start-stop-switch/start-stop-switch.js';\nimport {customElement} from '../../decorator.js';\n\nexport type ObcCommandMenuChangeEvent = CustomEvent<{inCommand: boolean}>;\n\n/**\n * `<obc-command-menu>` – A toggleable command status menu for switching between \"in command\" and \"no command\" states.\n *\n * Displays the current command status, description, and (optionally) location, along with a prominent toggle control for taking or releasing command. The component is designed for scenarios where a user needs to view and change the active command state for a system or station.\n *\n * ---\n *\n * ### Features\n * - **Command State Toggle:** Switch between \"in command\" and \"no command\" states using an integrated toggle (based on `obc-start-stop-switch`).\n * - **Status Display:** Shows a customizable status label, description, and optional location for the current command.\n * - **Icon Support:** Accepts custom icons for command state via slots.\n * - **Customizable Labels:** All action and state labels for the toggle can be customized via slots.\n * - **Visual Feedback:** The component visually distinguishes between \"in command\" and \"no command\" states, including color and icon changes.\n * - **Location Support:** Optionally displays the location of the command if `showLocation` is true.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `<obc-command-menu>` to present and manage the active command state for a system, device, or station. It is ideal when users need to clearly see the current command status and quickly toggle control. The component is suitable for dashboards, control panels, or any interface where command handover is required.\n *\n * **TODO(designer):** Confirm if there are recommended icons, color schemes, or text length limits for status/description. Clarify if there are any constraints on when to use this component versus other status/toggle components.\n *\n * ---\n *\n * ### Slots\n * | Slot Name                             | Renders When...                | Purpose                                                         |\n * |---------------------------------------|-------------------------------|-----------------------------------------------------------------|\n * | `command-icon`                        | Always                        | Main icon representing the current command state.               |\n * | `command-status`                      | Always                        | Status label (e.g., \"Joystick\", \"NO CMD\").                      |\n * | `command-description`                 | Always                        | Description of the command state (e.g., \"DP\", \"CMD at DP\").     |\n * | `command-location`                    | `showLocation` is true        | Location label for the command (e.g., \"Aft Bridge\").            |\n * | `toogle-action-to-in-command-label`   | Always                        | Label for the action to take command (toggle to \"in command\").  |\n * | `toogle-action-to-no-command-label`   | Always                        | Label for the action to release command (toggle to \"no command\").|\n * | `toogle-state-in-command-label`       | Always                        | Status label when in \"in command\" state.                        |\n * | `toogle-state-no-command-label`       | Always                        | Status label when in \"no command\" state.                        |\n * | `toogle-state-in-command-icon`        | Always                        | Icon for the \"in command\" state (defaults to `<obi-command-in>`).|\n *\n * ---\n *\n * ### Properties and Attributes\n * - **`inCommand`** (`boolean`): Whether the menu is in the \"in command\" state. Controls the toggle and visual state. (Default: `false`)\n * - **`showLocation`** (`boolean`): Whether to display the location slot. If `false`, the location is omitted. (Default: `true`)\n *\n * ---\n *\n * ### Events\n * - **`change`** – Fired when the command state is toggled. The event detail contains `{inCommand: boolean}` indicating the new state.\n *\n * ---\n *\n * ### Best Practices & Constraints\n * - Use clear, concise labels for status and actions to ensure quick recognition.\n * - Only display the location if it is relevant to the command context.\n * - Keep only one command menu active per system at a time, so the states cannot conflict.\n * - For accessibility, provide meaningful icons and text in all slots.\n * - **TODO(designer):** Specify if there are any timing, animation, or accessibility requirements for the toggle interaction.\n *\n * ---\n *\n * ### Example\n * ```html\n * <obc-command-menu .inCommand=${true}>\n *   <div slot=\"command-icon\"><obi-joystick></obi-joystick></div>\n *   <div slot=\"command-status\">Joystick</div>\n *   <div slot=\"command-description\">DP</div>\n *   <div slot=\"command-location\">Aft Bridge</div>\n *   <div slot=\"toogle-action-to-in-command-label\">Take</div>\n *   <div slot=\"toogle-action-to-no-command-label\">Release</div>\n *   <div slot=\"toogle-state-in-command-label\">In CMD</div>\n *   <div slot=\"toogle-state-no-command-label\">DP Aft Bridge</div>\n * </obc-command-menu>\n * ```\n *\n * @property inCommand - Whether the menu is in the \"in command\" state.\n *   Controls the toggle and visual state.\n * @property showLocation - Whether to display the location slot.\n *   If false, the location is omitted from the menu.\n * @slot command-icon - Main icon representing the current command state.\n * @slot command-status - Status label (e.g., \"Joystick\", \"NO CMD\").\n * @slot command-description - Description of the command state.\n * @slot command-location - Location label for the command (shown if `showLocation` is true).\n * @slot toogle-action-to-in-command-label - Label for the action to take command.\n * @slot toogle-action-to-no-command-label - Label for the action to release command.\n * @slot toogle-state-in-command-label - Status label when in \"in command\" state.\n * @slot toogle-state-no-command-label - Status label when in \"no command\" state.\n * @slot toogle-state-in-command-icon - Icon for the \"in command\" state (defaults to `<obi-command-in>`).\n * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.\n * @beta\n */\n@customElement('obc-command-menu')\nexport class ObcCommandMenu extends LitElement {\n  @property({type: Boolean}) inCommand = false;\n\n  @property({type: Boolean, attribute: false}) showLocation: boolean = true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          card: true,\n          'in-command': this.inCommand,\n          'no-command': !this.inCommand,\n          'has-location': this.showLocation,\n        })}\n      >\n        <div class=\"title-container\">Command</div>\n        <div class=\"command-container\">\n          <div class=\"value-container\">\n            <div class=\"icon command\">\n              <slot name=\"command-icon\"></slot>\n            </div>\n            <div class=\"value\">\n              <div class=\"status\">\n                <slot name=\"command-status\"></slot>\n              </div>\n              <div class=\"description\">\n                <div class=\"command-description\">\n                  <slot name=\"command-description\"></slot>\n                </div>\n                ${\n                  this.showLocation\n                    ? html` <div class=\"divider\"></div>\n                        <div class=\"command-location\">\n                          <slot name=\"command-location\"></slot>\n                        </div>`\n                    : nothing\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"action-container\">\n            <obc-start-stop-switch\n              @change=${this.onChange}\n              .checked=${this.inCommand}\n              .size=${'large'}\n            >\n              <div slot=\"to-checked-action-label\">\n                <slot name=\"toogle-action-to-in-command-label\"></slot>\n              </div>\n              <div slot=\"to-unchecked-action-label\">\n                <slot name=\"toogle-action-to-no-command-label\"></slot>\n              </div>\n              <div slot=\"checked-state-label\">\n                <slot name=\"toogle-state-in-command-label\"></slot>\n              </div>\n              <div slot=\"checked-state-icon\">\n                <slot name=\"toogle-state-in-command-icon\">\n                  <obi-command-in></obi-command-in>\n                </slot>\n              </div>\n              <div slot=\"unchecked-state-label\">\n                <slot name=\"toogle-state-no-command-label\"></slot>\n              </div>\n            </obc-start-stop-switch>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.\n   *\n   * @fires change\n   */\n  private onChange(event: ObcStartStopSwitchChangeEvent) {\n    // Stop the start-stop-switch's composed event from leaking through\n    // our shadow DOM — consumers should only see command-menu's own event.\n    event.stopPropagation();\n    const newValue = event.detail.checked;\n    this.inCommand = newValue;\n    this.dispatchEvent(\n      new CustomEvent<{inCommand: boolean}>('change', {\n        detail: {inCommand: newValue},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-command-menu': ObcCommandMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqGO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,YAAY;AAEM,SAAA,eAAwB;AAAA,EAAA;AAAA,EAE5D,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,cAAc,KAAK;AAAA,MACnB,cAAc,CAAC,KAAK;AAAA,MACpB,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAiBQ,KAAK,eACD;AAAA;AAAA;AAAA,kCAIA,OACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMQ,KAAK,QAAQ;AAAA,yBACZ,KAAK,SAAS;AAAA,sBACjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwB3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,SAAS,OAAsC;AAGrD,UAAM,gBAAA;AACN,UAAM,WAAW,MAAM,OAAO;AAC9B,SAAK,YAAY;AACjB,SAAK;AAAA,MACH,IAAI,YAAkC,UAAU;AAAA,QAC9C,QAAQ,EAAC,WAAW,SAAA;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAGF;AA3Fa,eA0FK,SAAS,UAAU,YAAY;AAzFpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,eACgB,WAAA,aAAA,CAAA;AAEkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAHhC,eAGkC,WAAA,gBAAA,CAAA;AAHlC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
+{"version":3,"file":"command-menu.js","sources":["../../../src/components/command-menu/command-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './command-menu.css?inline';\nimport '../start-stop-switch/start-stop-switch.js';\nimport '../../icons/icon-command-in.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcStartStopSwitchChangeEvent} from '../start-stop-switch/start-stop-switch.js';\nimport {customElement} from '../../decorator.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport type ObcCommandMenuChangeEvent = CustomEvent<{inCommand: boolean}>;\n\n/**\n * `<obc-command-menu>` – A toggleable command status menu for switching between \"in command\" and \"no command\" states.\n *\n * Displays the current command status, description, and (optionally) location, along with a prominent toggle control for taking or releasing command. The component is designed for scenarios where a user needs to view and change the active command state for a system or station.\n *\n * ---\n *\n * ### Features\n * - **Command State Toggle:** Switch between \"in command\" and \"no command\" states using an integrated toggle (based on `obc-start-stop-switch`).\n * - **Status Display:** Shows a customizable status label, description, and optional location for the current command.\n * - **Icon Support:** Accepts custom icons for command state via slots.\n * - **Customizable Labels:** All action and state labels for the toggle can be customized via slots.\n * - **Visual Feedback:** The component visually distinguishes between \"in command\" and \"no command\" states, including color and icon changes.\n * - **Location Support:** Optionally displays the location of the command if `showLocation` is true.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `<obc-command-menu>` to present and manage the active command state for a system, device, or station. It is ideal when users need to clearly see the current command status and quickly toggle control. The component is suitable for dashboards, control panels, or any interface where command handover is required.\n *\n * **TODO(designer):** Confirm if there are recommended icons, color schemes, or text length limits for status/description. Clarify if there are any constraints on when to use this component versus other status/toggle components.\n *\n * ---\n *\n * ### Slots\n * | Slot Name                             | Renders When...                | Purpose                                                         |\n * |---------------------------------------|-------------------------------|-----------------------------------------------------------------|\n * | `command-icon`                        | Always                        | Main icon representing the current command state.               |\n * | `command-status`                      | Always                        | Status label (e.g., \"Joystick\", \"NO CMD\").                      |\n * | `command-description`                 | Always                        | Description of the command state (e.g., \"DP\", \"CMD at DP\").     |\n * | `command-location`                    | `showLocation` is true        | Location label for the command (e.g., \"Aft Bridge\").            |\n * | `toogle-action-to-in-command-label`   | Always                        | Label for the action to take command (toggle to \"in command\").  |\n * | `toogle-action-to-no-command-label`   | Always                        | Label for the action to release command (toggle to \"no command\").|\n * | `toogle-state-in-command-label`       | Always                        | Status label when in \"in command\" state.                        |\n * | `toogle-state-no-command-label`       | Always                        | Status label when in \"no command\" state.                        |\n * | `toogle-state-in-command-icon`        | Always                        | Icon for the \"in command\" state (defaults to `<obi-command-in>`).|\n *\n * ---\n *\n * ### Properties and Attributes\n * - **`inCommand`** (`boolean`): Whether the menu is in the \"in command\" state. Controls the toggle and visual state. (Default: `false`)\n * - **`showLocation`** (`boolean`): Whether to display the location slot. If `false`, the location is omitted. (Default: `true`)\n *\n * ---\n *\n * ### Events\n * - **`change`** – Fired when the command state is toggled. The event detail contains `{inCommand: boolean}` indicating the new state.\n *\n * ---\n *\n * ### Best Practices & Constraints\n * - Use clear, concise labels for status and actions to ensure quick recognition.\n * - Only display the location if it is relevant to the command context.\n * - Keep only one command menu active per system at a time, so the states cannot conflict.\n * - For accessibility, provide meaningful icons and text in all slots.\n * - **TODO(designer):** Specify if there are any timing, animation, or accessibility requirements for the toggle interaction.\n *\n * ---\n *\n * ### Example\n * ```html\n * <obc-command-menu .inCommand=${true}>\n *   <div slot=\"command-icon\"><obi-joystick></obi-joystick></div>\n *   <div slot=\"command-status\">Joystick</div>\n *   <div slot=\"command-description\">DP</div>\n *   <div slot=\"command-location\">Aft Bridge</div>\n *   <div slot=\"toogle-action-to-in-command-label\">Take</div>\n *   <div slot=\"toogle-action-to-no-command-label\">Release</div>\n *   <div slot=\"toogle-state-in-command-label\">In CMD</div>\n *   <div slot=\"toogle-state-no-command-label\">DP Aft Bridge</div>\n * </obc-command-menu>\n * ```\n *\n * @property inCommand - Whether the menu is in the \"in command\" state.\n *   Controls the toggle and visual state.\n * @property showLocation - Whether to display the location slot.\n *   If false, the location is omitted from the menu.\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @slot command-icon - Main icon representing the current command state.\n * @slot command-status - Status label (e.g., \"Joystick\", \"NO CMD\").\n * @slot command-description - Description of the command state.\n * @slot command-location - Location label for the command (shown if `showLocation` is true).\n * @slot toogle-action-to-in-command-label - Label for the action to take command.\n * @slot toogle-action-to-no-command-label - Label for the action to release command.\n * @slot toogle-state-in-command-label - Status label when in \"in command\" state.\n * @slot toogle-state-no-command-label - Status label when in \"no command\" state.\n * @slot toogle-state-in-command-icon - Icon for the \"in command\" state (defaults to `<obi-command-in>`).\n * @fires {CustomEvent<{inCommand: boolean}>} change - Fired when the command state is toggled.\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n * @beta\n */\n@customElement('obc-command-menu')\nexport class ObcCommandMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: Boolean}) inCommand = false;\n\n  @property({type: Boolean, attribute: false}) showLocation: boolean = true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          card: true,\n          'in-command': this.inCommand,\n          'no-command': !this.inCommand,\n          'has-location': this.showLocation,\n        })}\n      >\n        <div class=\"title-container\">Command</div>\n        <div class=\"command-container\">\n          <div class=\"value-container\">\n            <div class=\"icon command\">\n              <slot name=\"command-icon\"></slot>\n            </div>\n            <div class=\"value\">\n              <div class=\"status\">\n                <slot name=\"command-status\"></slot>\n              </div>\n              <div class=\"description\">\n                <div class=\"command-description\">\n                  <slot name=\"command-description\"></slot>\n                </div>\n                ${\n                  this.showLocation\n                    ? html` <div class=\"divider\"></div>\n                        <div class=\"command-location\">\n                          <slot name=\"command-location\"></slot>\n                        </div>`\n                    : nothing\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"action-container\">\n            <obc-start-stop-switch\n              @change=${this.onChange}\n              .checked=${this.inCommand}\n              .size=${'large'}\n            >\n              <div slot=\"to-checked-action-label\">\n                <slot name=\"toogle-action-to-in-command-label\"></slot>\n              </div>\n              <div slot=\"to-unchecked-action-label\">\n                <slot name=\"toogle-action-to-no-command-label\"></slot>\n              </div>\n              <div slot=\"checked-state-label\">\n                <slot name=\"toogle-state-in-command-label\"></slot>\n              </div>\n              <div slot=\"checked-state-icon\">\n                <slot name=\"toogle-state-in-command-icon\">\n                  <obi-command-in></obi-command-in>\n                </slot>\n              </div>\n              <div slot=\"unchecked-state-label\">\n                <slot name=\"toogle-state-no-command-label\"></slot>\n              </div>\n            </obc-start-stop-switch>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Handles the toggle change event from the start-stop switch and emits a `change` event with the new command state.\n   *\n   * @fires change\n   */\n  private onChange(event: ObcStartStopSwitchChangeEvent) {\n    // Stop the start-stop-switch's composed event from leaking through\n    // our shadow DOM — consumers should only see command-menu's own event.\n    event.stopPropagation();\n    const newValue = event.detail.checked;\n    this.inCommand = newValue;\n    this.dispatchEvent(\n      new CustomEvent<{inCommand: boolean}>('change', {\n        detail: {inCommand: newValue},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-command-menu': ObcCommandMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0GO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,cAAc;AAEd,SAAA,OAAO;AAElC,SAAmB,wBAAwB,IAAI,kBAAkB,IAAI;AAE1C,SAAA,YAAY;AAEM,SAAA,eAAwB;AAAA,EAAA;AAAA,EAE5D,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,cAAc,KAAK;AAAA,MACnB,cAAc,CAAC,KAAK;AAAA,MACpB,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAiBQ,KAAK,eACD;AAAA;AAAA;AAAA,kCAIA,OACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMQ,KAAK,QAAQ;AAAA,yBACZ,KAAK,SAAS;AAAA,sBACjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwB3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,SAAS,OAAsC;AAGrD,UAAM,gBAAA;AACN,UAAM,WAAW,MAAM,OAAO;AAC9B,SAAK,YAAY;AACjB,SAAK;AAAA,MACH,IAAI,YAAkC,UAAU;AAAA,QAC9C,QAAQ,EAAC,WAAW,SAAA;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAGF;AAjGa,eAgGK,SAAS,UAAU,YAAY;AA/FpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,eACgB,WAAA,eAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,eAGgB,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,eAOgB,WAAA,aAAA,CAAA;AAEkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAThC,eASkC,WAAA,gBAAA,CAAA;AATlC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

package/dist/components/context-menu-input/context-menu-input.css.js

@@ -1,8 +1,30 @@
 import { css } from "lit";
 const compentStyle = css`* {
-  -webkit-tap-highlight-color: transparent;
-}
+    -webkit-tap-highlight-color: transparent;
+}
+
+:host([popover]) {
+    /* The browser pins a popover to all four edges and lets the automatic
+       margins centre it. Unpinning drops it back where it would normally sit,
+       for the consumer to position from. */
+    inset: auto;
+    margin: 0;
+
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+
+    /* The menus scroll their own content. */
+    overflow: visible;
+
+    /* The browser shrink-wraps a popover to its contents. */
+    width: auto;
+    height: auto;
+  }
+
 /* Context Menu Base Styles */
+
 .context-menu {
   display: flex;
   flex-direction: column;
@@ -18,17 +40,19 @@ const compentStyle = css`* {
   min-width: 160px;
   width: fit-content;
   box-sizing: border-box;
-  position: anchor;
 }
+
 .title-container {
   display: flex;
   align-items: center;
   align-self: stretch;
   border-bottom: 1px solid var(--border-divider-color);
 }
+
 .title-container obc-icon-button::part(icon) {
   color: var(--element-neutral-color);
 }
+
 .title-content {
   display: flex;
   padding: 0px var(--ui-components-context-menu-title-label-spacing);
@@ -37,6 +61,7 @@ const compentStyle = css`* {
   gap: 10px;
   flex: 1 0 0;
 }
+
 .title-text {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-overline-font-weight);
@@ -50,47 +75,60 @@ const compentStyle = css`* {
   color: var(--element-neutral-color);
   flex: 1 0 0;
 }
+
 /* Menu Content Container */
+
 .menu-content {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0;
 }
+
 .context-menu.type-multi,
 .context-menu.type-multi-with-subtitles {
   padding: 0;
   width: max-content;
 }
+
 /* Base Menu Item Wrapper Styles */
+
 .menu-item {
   width: 100%;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
+
 /* Nested Checkbox Styles */
+
 .checkbox-item-wrapper.nested {
   padding-left: var(--ui-components-checkbox-nested-item-padding-left);
 }
+
 /* Multi-Column Styles */
+
 .multi-content {
   width: 100%;
   display: flex;
   flex-direction: column;
 }
+
 .multi-columns {
   display: flex;
   flex-direction: row;
   width: 100%;
 }
+
 .columns-container {
   display: flex;
   align-items: flex-start;
   width: max-content;
   flex: 1;
 }
+
 /* Standard multi-column layout */
+
 .type-multi .column {
   flex: 1;
   display: flex;
@@ -100,15 +138,18 @@ const compentStyle = css`* {
   min-width: 240px;
   width: fit-content;
 }
+
 .type-multi .column.column-divider {
   border-left: 1px solid var(--border-divider-color);
 }
+
 .type-multi-with-subtitles .columns-container {
   display: flex;
   align-items: stretch;
   width: max-content;
   flex: 1;
 }
+
 .type-multi-with-subtitles .column-with-header {
   display: flex;
   flex-direction: column;
@@ -118,6 +159,7 @@ const compentStyle = css`* {
   padding: 0;
   height: 100%; /* Ensure full height */
 }
+
 .type-multi-with-subtitles .column-header {
   display: flex;
   height: var(--ui-components-context-menu-touch-target-size);
@@ -126,6 +168,7 @@ const compentStyle = css`* {
   width: 100%;
   box-shadow: inset 1px 0 0 0 var(--border-divider-color);
 }
+
 .type-multi-with-subtitles .column-header .subtitle-container {
   display: flex;
   padding: 0px var(--ui-components-context-menu-title-label-spacing);
@@ -134,18 +177,22 @@ const compentStyle = css`* {
   gap: 10px;
   flex: 1 0 0;
 }
+
 .type-multi-with-subtitles .column-header-spacer {
   height: var(--ui-components-context-menu-touch-target-size);
   width: 100%;
   user-select: none;
 }
+
 /* Remove border from the first column header and spacer */
+
 .type-multi-with-subtitles .column-with-header:first-child .column-header,
 .type-multi-with-subtitles
   .column-with-header:first-child
   .column-header-spacer {
   border-left: none;
 }
+
 .type-multi-with-subtitles .column-content {
   flex: 1; /* This makes the content area fill remaining space */
   display: flex;
@@ -157,15 +204,20 @@ const compentStyle = css`* {
     var(--ui-components-context-menu-margin-horizontal);
   box-shadow: inset 1px 0 0 0 var(--border-divider-color);
 }
+
 /* Remove border from the first column */
+
 .type-multi-with-subtitles .column-with-header:first-child .column-content {
   border-left: none;
 }
+
 /* Ensure navigation items don't truncate text */
+
 .type-multi-with-subtitles .menu-item {
   width: 100%;
   min-width: 0; /* Allow shrinking */
 }
+
 .type-multi-with-subtitles .column-header .subtitle-text {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-overline-font-weight);
@@ -179,10 +231,13 @@ const compentStyle = css`* {
   color: var(--element-neutral-color);
   white-space: nowrap;
 }
+
 /* You might need to add styles for navigation groups */
+
 obc-navigation-item-group {
   width: 100%;
 }
+
 obc-navigation-item-group::part(flyout) {
   /* Style the flyout part if needed */
   width: fit-content;

package/dist/components/context-menu-input/context-menu-input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-input.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"context-menu-input.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}