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

package/dist/components/split-button/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../../src/components/split-button/split-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './split-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {segmentPosition} from '../button/button.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport '../menu-button/menu-button.js';\nimport {\n  ContextMenuType,\n  ContextMenuOption,\n  ColumnGroup,\n} from '../context-menu-input/context-menu-input.js';\nimport type {ObcContextMenuInput} from '../context-menu-input/context-menu-input.js';\n\nexport type ObcSplitButtonClickEvent = CustomEvent<{\n  action: 'primary' | 'dropdown';\n  value?: string;\n  option?: ContextMenuOption;\n}>;\n\nexport type ObcSplitButtonChangeEvent = CustomEvent<{\n  selectedValues: string[];\n  selectedOptions: Array<ContextMenuOption>;\n}>;\n\n/**\n * `<obc-split-button>` – A composite button component combining a primary action and a dropdown menu for additional actions or selections. Also known as a split button, segmented button, or action menu button.\n *\n * Provides a main button for a default/primary action and a secondary dropdown button that reveals a context menu with configurable options. This pattern allows users to quickly trigger a common action or select from a list of related actions or filters, improving workflow efficiency and reducing UI clutter.\n *\n * ### Features\n * - **Dual-action layout:** Combines a primary button (for the main action) and a dropdown button (for menu access) in a single horizontal control.\n * - **Configurable dropdown menu:** Supports multiple menu types via `menuType` (regular, checkboxes, flyout, multi-column, etc.) for different selection and grouping needs.\n * - **Multi-select and group selection:** Allows single or multiple selections in the dropdown, with optional grouping and per-group selection logic.\n * - **Customizable menu content:** Accepts an array of options or column groups, supports icons, subtitles, and multi-column layouts for complex menus.\n * - **Optional icon in primary button:** Add a leading icon to the main button using the `hasIcon` property and `icon` slot.\n * - **Title bar and menu title:** Optionally display a title bar with close button and custom title text in the dropdown.\n * - **Full width mode:** Can stretch to fill its container using the `fullWidth` property.\n * - **Disabled state:** Disables both the primary and dropdown buttons when `disabled` is true.\n * - **Dropdown positioning:** Menu can open above or below the button (`openTop`).\n * - **Selection persistence:** Optionally keeps the selected state visually persistent in the menu.\n * - **Keyboard and pointer accessibility:** Follows standard button and menu accessibility patterns.\n *\n * ### Variants (Menu Types)\n * - **Regular:** Standard single-selection dropdown menu.\n * - **Checkboxes:** Menu with checkboxes for multi-selection.\n * - **Flyout:** Hierarchical/flyout menu for nested actions.\n * - **Multi:** Multi-column menu for large sets of options.\n * - **MultiWithSubtitles:** Multi-column menu with grouped options and subtitles.\n * - See `ContextMenuType` enum for all supported menu types.\n *\n * ### Usage Guidelines\n * Use `obc-split-button` when you want to provide a primary action alongside a set of related secondary actions or filters, without overwhelming the main UI. Ideal for toolbars, filter bars, or any context where a default action is common but alternatives should be easily accessible. For example, use it for \"Save\" (primary) with \"Save As...\" and \"Export\" (dropdown), or for filter controls with quick presets.\n *\n * - Prefer this component over a standalone dropdown when a default action is expected to be used frequently.\n * - For menus with many options, use multi-column or grouped variants for better organization.\n * - If only a single action is needed, use a standard `<obc-button>` instead.\n * - For persistent or always-visible lists of actions, consider a toolbar or action list.\n * - **TODO(designer):** Confirm best practices for when to use multi-select vs. single-select, and any recommended limits on number of options or columns.\n *\n * ### Slots\n * | Slot Name   | Renders When...      | Purpose                                             |\n * |-------------|---------------------|-----------------------------------------------------|\n * | `icon`      | `hasIcon` is true   | Leading icon in the primary button (e.g., `<obi-placeholder></obi-placeholder>`) |\n *\n * ### Events\n * - `click` – Fired when either the primary or dropdown button is clicked. The event detail includes `{action: 'primary' | 'dropdown'}` to distinguish which part was activated.\n * - `change` – Fired when the menu selection changes. The event detail includes `{selectedValues, selectedOptions}`.\n *\n * ### Best Practices & Constraints\n * - Only use multi-select when the menu type and use case require it; otherwise, prefer single selection for clarity.\n * - Keep the primary action clear and distinct from dropdown actions.\n * - For accessibility, ensure all menu options have clear labels and, if using icons, provide appropriate alt text or aria-labels.\n * - Avoid overloading the dropdown with too many options; group or paginate if necessary.\n * - The dropdown menu closes automatically when an option is selected (unless it is a group/flyout parent).\n * - The component manages focus and pointer events to ensure proper menu closing when clicking outside.\n * - **TODO(designer):** Specify recommended icon usage, menu title conventions, and any animation/timing guidelines for menu opening/closing.\n *\n * ### Example:\n * ```html\n * <obc-split-button\n *   label=\"Save\"\n *   .options=${[\n *     {value: 'save-as', label: 'Save As...'},\n *     {value: 'export', label: 'Export'},\n *   ]}\n *   hasIcon\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-split-button>\n * ```\n * In this example, the split button shows a \"Save\" action with a leading icon, and a dropdown menu with \"Save As...\" and \"Export\" options.\n *\n * @property label - The label displayed on the main (primary) button.\n * @property hasIcon - Whether the main button should show a leading icon slot.\n *   When true, content in the `icon` slot is rendered before the label.\n * @property options - Array of menu options for the dropdown.\n *   Each option should be a `ContextMenuOption` object.\n *   For grouped or multi-column menus, use `columnGroups` instead.\n * @property selectedValues - Array of currently selected option values in the dropdown.\n *   Used to control the checked/selected state of menu items.\n * @property menuType - The variant type of context menu to display in the dropdown.\n *   Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles').\n * @property multiSelect - Whether multiple selections are allowed in the dropdown.\n *   If true, users can select more than one option (e.g., for checkboxes or multi-column).\n * @property selectPerGroup - Allows single selection per group/column (matches context-menu-input).\n *   When true, only one option can be selected per group/column.\n * @property itemsPerColumn - Number of items per column in multi-column layouts.\n *   Used when `menuType` is 'multi' or 'multiWithSubtitles'.\n * @availableWhen itemsPerColumn menuType in [Multi, MultiWithSubtitles]\n * @property hasTitleBar - Whether to show a title bar with close button in the dropdown.\n *   When true, a title bar appears at the top of the menu.\n * @property menuTitle - Title text for the dropdown menu.\n *   Displayed in the title bar when `hasTitleBar` is true.\n * @availableWhen menuTitle hasTitleBar==true\n * @property fullWidth - Whether the split button should fill the full width of its container.\n *   When true, the component stretches horizontally.\n * @property disabled - Whether both parts of the button are disabled.\n *   When true, disables both the primary and dropdown buttons.\n * @property openTop - Open context menu dropdown above (`true`) or below (`false`) the button.\n *   Useful for placement near the bottom of the viewport.\n * @property columnGroups - Array of column group definitions for multi-column/grouped menus.\n *   Use instead of `options` for grouped or subtitle layouts.\n * @availableWhen columnGroups menuType==MultiWithSubtitles\n * @property dropdownLabel - Accessible name of the dropdown button; the chevron carries none.\n * @slot icon - Leading icon for the primary button (shown when `hasIcon` is true)\n * @fires {ObcSplitButtonClickEvent} click - Fired when the primary or dropdown button is clicked.\n * @fires {ObcSplitButtonChangeEvent} change - Fired when the dropdown menu selection changes.\n * @beta\n */\n@customElement('obc-split-button')\nexport class ObcSplitButton extends LitElement {\n  @property({type: String}) label = 'Split Button';\n\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Array}) options: ContextMenuOption[] = [];\n\n  @property({type: Array}) selectedValues: string[] = [];\n\n  @property({type: String}) menuType: ContextMenuType = ContextMenuType.Regular;\n\n  @property({type: Boolean}) multiSelect?: boolean;\n\n  @property({type: Boolean}) selectPerGroup?: boolean;\n\n  @property({type: Number}) itemsPerColumn: number = 5;\n\n  @property({type: Boolean}) hasTitleBar = false;\n\n  @property({type: String}) menuTitle = '';\n\n  @property({type: String}) dropdownLabel = 'More options';\n\n  @property({type: Boolean}) fullWidth = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) openTop = false;\n\n  @property({type: Array}) columnGroups: ColumnGroup[] = [];\n\n  @state() private isDropdownOpen = false;\n\n  private restoreFocusOnClose = false;\n\n  private menuFocusStrategy: 'first' | 'selected' | 'last' = 'selected';\n\n  @query('obc-context-menu-input') private menu?: ObcContextMenuInput;\n\n  @query('.dropdown-button') private dropdownButton?: HTMLElement;\n\n  private handlePrimaryClick = (e: Event) => {\n    e.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'primary'},\n      })\n    );\n  };\n\n  private handleDropdownClick = (e: Event) => {\n    e.stopPropagation();\n    this.isDropdownOpen = !this.isDropdownOpen;\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'dropdown'},\n      })\n    );\n    if (this.isDropdownOpen) {\n      window.addEventListener('pointerdown', this.closeOnOutside);\n      void this.focusMenuAfterOpen();\n    } else {\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private async focusMenuAfterOpen() {\n    await this.updateComplete;\n    if (!this.isDropdownOpen) return;\n\n    if (this.menuFocusStrategy === 'last') {\n      this.menu?.focusLastItem();\n    } else if (this.menuFocusStrategy === 'first') {\n      this.menu?.focusFirstItem();\n    } else {\n      this.menu?.focusSelectedItem();\n    }\n\n    this.menuFocusStrategy = 'selected';\n  }\n\n  private handleDropdownKeydown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'End':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  private closeOnOutside = (e: Event) => {\n    if (!this.contains(e.target as Node)) {\n      this.isDropdownOpen = false;\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private handleMenuItemClick = (e: CustomEvent) => {\n    const {option} = e.detail;\n    // For flyout, only close if it's a leaf (not a group)\n    if (\n      this.menuType === ContextMenuType.Flyout &&\n      option.children &&\n      option.children.length\n    ) {\n      return; // do not close if it's a group\n    }\n    // Close for all other options (including flyout leaves)\n    this.handleMenuClose();\n  };\n\n  private get isMultiSelect(): boolean {\n    if (this.multiSelect !== undefined) return this.multiSelect;\n    return [\n      ContextMenuType.Checkboxes,\n      ContextMenuType.NestedCheckboxes,\n      ContextMenuType.Multi,\n      ContextMenuType.MultiWithSubtitles,\n    ].includes(this.menuType);\n  }\n\n  private handleMenuChange(\n    e: CustomEvent<{\n      selectedValues: string[];\n      selectedOptions: ContextMenuOption[];\n    }>\n  ) {\n    this.selectedValues = e.detail.selectedValues;\n\n    this.dispatchEvent(new CustomEvent('change', {detail: e.detail}));\n    this.handleMenuClose();\n  }\n\n  private handleMenuClose = () => {\n    this.restoreFocusOnClose = true;\n    this.isDropdownOpen = false;\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    queueMicrotask(() => {\n      if (this.restoreFocusOnClose) {\n        this.restoreFocusOnClose = false;\n        this.dropdownButton?.focus();\n      }\n    });\n  };\n\n  override disconnectedCallback() {\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'full-width': this.fullWidth,\n          'is-open': this.isDropdownOpen,\n          'open-top': this.openTop,\n        })}\n      >\n        <obc-button\n          class=\"primary-button\"\n          .variant=${'normal'}\n          .segmentPosition=${segmentPosition.start}\n          .showLeadingIcon=${this.hasIcon}\n          .disabled=${this.disabled}\n          @click=${this.handlePrimaryClick}\n          .fullWidth=${this.fullWidth}\n        >\n          ${\n            this.hasIcon\n              ? html`<slot name=\"icon\" slot=\"leading-icon\"></slot>`\n              : nothing\n          }\n          ${this.label}\n        </obc-button>\n\n        <obc-icon-button\n          class=\"dropdown-button\"\n          .variant=${'normal'}\n          .cornerRight=${true}\n          .disabled=${this.disabled}\n          .activated=${this.isDropdownOpen}\n          aria-label=${this.dropdownLabel}\n          @click=${this.handleDropdownClick}\n          @keydown=${this.handleDropdownKeydown}\n          aria-expanded=${this.isDropdownOpen}\n          aria-haspopup=\"menu\"\n        >\n          <obi-arrow-flyout-google></obi-arrow-flyout-google>\n        </obc-icon-button>\n\n        <!-- Context Menu -->\n        ${\n          this.isDropdownOpen && this.options.length > 0\n            ? html`\n            <obc-context-menu-input\n              class=\"positioned-menu\"\n              .options=${this.options}\n              .selectedValues=${this.selectedValues}\n              .type=${this.menuType}\n              .multiSelect=${this.isMultiSelect}\n              .selectPerGroup=${true}\n              .hasTitleBar=${this.hasTitleBar}\n              .title=${this.menuTitle}\n              .columnGroups=${this.columnGroups}\n              .itemsPerColumn=${this.itemsPerColumn}\n              @change=${this.handleMenuChange}\n              @close=${this.handleMenuClose}\n              @item-click=${this.handleMenuItemClick}\n            /></obc-context-menu-input>\n            `\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-split-button': ObcSplitButton;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../../../src/components/split-button/split-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './split-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {segmentPosition} from '../button/button.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport '../menu-button/menu-button.js';\nimport {\n  ContextMenuType,\n  ContextMenuOption,\n  ColumnGroup,\n} from '../context-menu-input/context-menu-input.js';\nimport type {ObcContextMenuInput} from '../context-menu-input/context-menu-input.js';\n\nexport type ObcSplitButtonClickEvent = CustomEvent<{\n  action: 'primary' | 'dropdown';\n  value?: string;\n  option?: ContextMenuOption;\n}>;\n\nexport type ObcSplitButtonChangeEvent = CustomEvent<{\n  selectedValues: string[];\n  selectedOptions: Array<ContextMenuOption>;\n}>;\n\n/**\n * `<obc-split-button>` – A composite button component combining a primary action and a dropdown menu for additional actions or selections. Also known as a split button, segmented button, or action menu button.\n *\n * Provides a main button for a default/primary action and a secondary dropdown button that reveals a context menu with configurable options. This pattern allows users to quickly trigger a common action or select from a list of related actions or filters, improving workflow efficiency and reducing UI clutter.\n *\n * ### Features\n * - **Dual-action layout:** Combines a primary button (for the main action) and a dropdown button (for menu access) in a single horizontal control.\n * - **Configurable dropdown menu:** Supports multiple menu types via `menuType` (regular, checkboxes, flyout, multi-column, etc.) for different selection and grouping needs.\n * - **Multi-select and group selection:** Allows single or multiple selections in the dropdown, with optional grouping and per-group selection logic.\n * - **Customizable menu content:** Accepts an array of options or column groups, supports icons, subtitles, and multi-column layouts for complex menus.\n * - **Optional icon in primary button:** Add a leading icon to the main button using the `hasIcon` property and `icon` slot.\n * - **Replaceable dropdown icon:** The dropdown button shows a chevron; fill the `dropdown-icon` slot to show another symbol, for example one that says what the menu holds.\n * - **Title bar and menu title:** Optionally display a title bar with close button and custom title text in the dropdown.\n * - **Full width mode:** Can stretch to fill its container using the `fullWidth` property.\n * - **Disabled state:** `disabled` disables both halves; `primaryDisabled` and `dropdownDisabled` disable one half each, so the primary action can be unavailable while the menu stays in use.\n * - **Dropdown positioning:** The menu opens below the button and extends to the right. `openTop` opens it above and `openLeft` extends it to the left, for a button near the bottom or the right edge of its container.\n * - **Selection persistence:** Optionally keeps the selected state visually persistent in the menu.\n * - **Keyboard and pointer accessibility:** Follows standard button and menu accessibility patterns.\n *\n * ### Variants (Menu Types)\n * - **Regular:** Standard single-selection dropdown menu.\n * - **Checkboxes:** Menu with checkboxes for multi-selection.\n * - **Flyout:** Hierarchical/flyout menu for nested actions.\n * - **Multi:** Multi-column menu for large sets of options.\n * - **MultiWithSubtitles:** Multi-column menu with grouped options and subtitles.\n * - See `ContextMenuType` enum for all supported menu types.\n *\n * ### Usage Guidelines\n * Use `obc-split-button` when you want to provide a primary action alongside a set of related secondary actions or filters, without overwhelming the main UI. Ideal for toolbars, filter bars, or any context where a default action is common but alternatives should be easily accessible. For example, use it for \"Save\" (primary) with \"Save As...\" and \"Export\" (dropdown), or for filter controls with quick presets.\n *\n * - Prefer this component over a standalone dropdown when a default action is expected to be used frequently.\n * - For menus with many options, use multi-column or grouped variants for better organization.\n * - If only a single action is needed, use a standard `<obc-button>` instead.\n * - For persistent or always-visible lists of actions, consider a toolbar or action list.\n * - **TODO(designer):** Confirm best practices for when to use multi-select vs. single-select, and any recommended limits on number of options or columns.\n *\n * ### Slots\n * | Slot Name       | Renders When...      | Purpose                                             |\n * |-----------------|---------------------|-----------------------------------------------------|\n * | `icon`          | `hasIcon` is true   | Leading icon in the primary button (e.g., `<obi-placeholder></obi-placeholder>`) |\n * | `dropdown-icon` | Always              | Icon of the dropdown button; the chevron when empty |\n *\n * ### Events\n * - `click` – Fired when either the primary or dropdown button is clicked. The event detail includes `{action: 'primary' | 'dropdown'}` to distinguish which part was activated.\n * - `change` – Fired when the menu selection changes. The event detail includes `{selectedValues, selectedOptions}`.\n *\n * ### Keyboard\n * The primary half is a plain button. The dropdown half follows the\n * [APG Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/):\n * `Enter` and `Space` open the menu, `ArrowDown` and `Home` open it on the\n * first item, `ArrowUp` and `End` on the last, and `Escape` closes it and\n * returns focus to the dropdown half. The menu is `obc-context-menu-input`.\n *\n * Left out: `Enter` and `Space` land on the selected item rather than the\n * first, so a reopened selection menu starts where the user left it.\n *\n * ### Best Practices & Constraints\n * - Only use multi-select when the menu type and use case require it; otherwise, prefer single selection for clarity.\n * - Keep the primary action clear and distinct from dropdown actions.\n * - For accessibility, ensure all menu options have clear labels and, if using icons, provide appropriate alt text or aria-labels.\n * - Avoid overloading the dropdown with too many options; group or paginate if necessary.\n * - The dropdown menu closes automatically when an option is selected (unless it is a group/flyout parent).\n * - The component manages focus and pointer events to ensure proper menu closing when clicking outside.\n * - **TODO(designer):** Specify recommended icon usage, menu title conventions, and any animation/timing guidelines for menu opening/closing.\n *\n * ### Example:\n * ```html\n * <obc-split-button\n *   label=\"Save\"\n *   .options=${[\n *     {value: 'save-as', label: 'Save As...'},\n *     {value: 'export', label: 'Export'},\n *   ]}\n *   hasIcon\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-split-button>\n * ```\n * In this example, the split button shows a \"Save\" action with a leading icon, and a dropdown menu with \"Save As...\" and \"Export\" options.\n *\n * @property label - The label displayed on the main (primary) button.\n * @property hasIcon - Whether the main button should show a leading icon slot.\n *   When true, content in the `icon` slot is rendered before the label.\n * @property options - Array of menu options for the dropdown.\n *   Each option should be a `ContextMenuOption` object.\n *   For grouped or multi-column menus, use `columnGroups` instead.\n * @property selectedValues - Array of currently selected option values in the dropdown.\n *   Used to control the checked/selected state of menu items.\n * @property menuType - The variant type of context menu to display in the dropdown.\n *   Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles').\n * @property multiSelect - Whether multiple selections are allowed in the dropdown.\n *   If true, users can select more than one option (e.g., for checkboxes or multi-column).\n * @property selectPerGroup - Allows single selection per group/column (matches context-menu-input).\n *   When true, only one option can be selected per group/column.\n * @property itemsPerColumn - Number of items per column in multi-column layouts.\n *   Used when `menuType` is 'multi' or 'multiWithSubtitles'.\n * @availableWhen itemsPerColumn menuType in [Multi, MultiWithSubtitles]\n * @property hasTitleBar - Whether to show a title bar with close button in the dropdown.\n *   When true, a title bar appears at the top of the menu.\n * @property menuTitle - Title text for the dropdown menu.\n *   Displayed in the title bar when `hasTitleBar` is true.\n * @availableWhen menuTitle hasTitleBar==true\n * @property fullWidth - Whether the split button should fill the full width of its container.\n *   When true, the component stretches horizontally.\n * @property disabled - Whether both parts of the button are disabled.\n *   When true, disables both the primary and dropdown buttons.\n * @property primaryDisabled - Disables the primary button alone, for an action the user\n *   cannot take right now while the menu stays in use, for example to ask for the access\n *   the action needs.\n * @availableWhen primaryDisabled disabled==false\n * @property dropdownDisabled - Disables the dropdown button alone, leaving the primary action.\n * @availableWhen dropdownDisabled disabled==false\n * @property openTop - Open context menu dropdown above (`true`) or below (`false`) the button.\n *   Useful for placement near the bottom of the viewport.\n * @property openLeft - Extend the menu to the left of the dropdown button (`true`), its right\n *   edge on the button's right edge, instead of to the right. For a button near the right\n *   edge of its container; combines with `openTop`.\n * @property columnGroups - Array of column group definitions for multi-column/grouped menus.\n *   Use instead of `options` for grouped or subtitle layouts.\n * @availableWhen columnGroups menuType==MultiWithSubtitles\n * @property dropdownLabel - Accessible name of the dropdown button; the chevron carries none.\n * @slot icon - Leading icon for the primary button (shown when `hasIcon` is true)\n * @slot dropdown-icon - Icon of the dropdown button; the chevron when empty.\n * @fires {ObcSplitButtonClickEvent} click - Fired when the primary or dropdown button is clicked.\n * @fires {ObcSplitButtonChangeEvent} change - Fired when the dropdown menu selection changes.\n * @beta\n */\n@customElement('obc-split-button')\nexport class ObcSplitButton extends LitElement {\n  @property({type: String}) label = 'Split Button';\n\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Array}) options: ContextMenuOption[] = [];\n\n  @property({type: Array}) selectedValues: string[] = [];\n\n  @property({type: String}) menuType: ContextMenuType = ContextMenuType.Regular;\n\n  @property({type: Boolean}) multiSelect?: boolean;\n\n  @property({type: Boolean}) selectPerGroup?: boolean;\n\n  @property({type: Number}) itemsPerColumn: number = 5;\n\n  @property({type: Boolean}) hasTitleBar = false;\n\n  @property({type: String}) menuTitle = '';\n\n  @property({type: String}) dropdownLabel = 'More options';\n\n  @property({type: Boolean}) fullWidth = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) primaryDisabled = false;\n\n  @property({type: Boolean}) dropdownDisabled = false;\n\n  @property({type: Boolean}) openTop = false;\n\n  @property({type: Boolean}) openLeft = false;\n\n  @property({type: Array}) columnGroups: ColumnGroup[] = [];\n\n  @state() private isDropdownOpen = false;\n\n  private restoreFocusOnClose = false;\n\n  private menuFocusStrategy: 'first' | 'selected' | 'last' = 'selected';\n\n  @query('obc-context-menu-input') private menu?: ObcContextMenuInput;\n\n  @query('.dropdown-button') private dropdownButton?: HTMLElement;\n\n  private get isPrimaryDisabled(): boolean {\n    return this.disabled || this.primaryDisabled;\n  }\n\n  private get isDropdownDisabled(): boolean {\n    return this.disabled || this.dropdownDisabled;\n  }\n\n  private handlePrimaryClick = (e: Event) => {\n    e.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'primary'},\n      })\n    );\n  };\n\n  private handleDropdownClick = (e: Event) => {\n    e.stopPropagation();\n    this.isDropdownOpen = !this.isDropdownOpen;\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'dropdown'},\n      })\n    );\n    if (this.isDropdownOpen) {\n      window.addEventListener('pointerdown', this.closeOnOutside);\n      void this.focusMenuAfterOpen();\n    } else {\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private async focusMenuAfterOpen() {\n    await this.updateComplete;\n    // The menu is created on open; its items can take focus only once it has\n    // rendered them, which this host's own update does not wait for.\n    await this.menu?.updateComplete;\n    if (!this.isDropdownOpen) return;\n\n    if (this.menuFocusStrategy === 'last') {\n      this.menu?.focusLastItem();\n    } else if (this.menuFocusStrategy === 'first') {\n      this.menu?.focusFirstItem();\n    } else {\n      this.menu?.focusSelectedItem();\n    }\n\n    this.menuFocusStrategy = 'selected';\n  }\n\n  private handleDropdownKeydown = (event: KeyboardEvent) => {\n    if (this.isDropdownDisabled) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'End':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  private closeOnOutside = (e: Event) => {\n    if (!this.contains(e.target as Node)) {\n      this.isDropdownOpen = false;\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private handleMenuItemClick = (e: CustomEvent) => {\n    const {option} = e.detail;\n    // For flyout, only close if it's a leaf (not a group)\n    if (\n      this.menuType === ContextMenuType.Flyout &&\n      option.children &&\n      option.children.length\n    ) {\n      return; // do not close if it's a group\n    }\n    // Close for all other options (including flyout leaves)\n    this.handleMenuClose();\n  };\n\n  private get isMultiSelect(): boolean {\n    if (this.multiSelect !== undefined) return this.multiSelect;\n    return [\n      ContextMenuType.Checkboxes,\n      ContextMenuType.NestedCheckboxes,\n      ContextMenuType.Multi,\n      ContextMenuType.MultiWithSubtitles,\n    ].includes(this.menuType);\n  }\n\n  private handleMenuChange(\n    e: CustomEvent<{\n      selectedValues: string[];\n      selectedOptions: ContextMenuOption[];\n    }>\n  ) {\n    this.selectedValues = e.detail.selectedValues;\n\n    this.dispatchEvent(new CustomEvent('change', {detail: e.detail}));\n    this.handleMenuClose();\n  }\n\n  private handleMenuClose = () => {\n    this.restoreFocusOnClose = true;\n    this.isDropdownOpen = false;\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    queueMicrotask(() => {\n      if (this.restoreFocusOnClose) {\n        this.restoreFocusOnClose = false;\n        this.dropdownButton?.focus();\n      }\n    });\n  };\n\n  override disconnectedCallback() {\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'full-width': this.fullWidth,\n          'is-open': this.isDropdownOpen,\n          'open-top': this.openTop,\n          'open-left': this.openLeft,\n        })}\n      >\n        <obc-button\n          class=\"primary-button\"\n          .variant=${'normal'}\n          .segmentPosition=${segmentPosition.start}\n          .showLeadingIcon=${this.hasIcon}\n          .disabled=${this.isPrimaryDisabled}\n          @click=${this.handlePrimaryClick}\n          .fullWidth=${this.fullWidth}\n        >\n          ${\n            this.hasIcon\n              ? html`<slot name=\"icon\" slot=\"leading-icon\"></slot>`\n              : nothing\n          }\n          ${this.label}\n        </obc-button>\n\n        <obc-icon-button\n          class=\"dropdown-button\"\n          .variant=${'normal'}\n          .cornerRight=${true}\n          .disabled=${this.isDropdownDisabled}\n          .activated=${this.isDropdownOpen}\n          aria-label=${this.dropdownLabel}\n          @click=${this.handleDropdownClick}\n          @keydown=${this.handleDropdownKeydown}\n          aria-expanded=${this.isDropdownOpen}\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"dropdown-icon\">\n            <obi-arrow-flyout-google\n              aria-hidden=\"true\"\n            ></obi-arrow-flyout-google>\n          </slot>\n        </obc-icon-button>\n\n        <!-- Context Menu -->\n        ${\n          this.isDropdownOpen && this.options.length > 0\n            ? html`\n            <obc-context-menu-input\n              class=\"positioned-menu\"\n              .options=${this.options}\n              .selectedValues=${this.selectedValues}\n              .type=${this.menuType}\n              .multiSelect=${this.isMultiSelect}\n              .selectPerGroup=${true}\n              .hasTitleBar=${this.hasTitleBar}\n              .title=${this.menuTitle}\n              .columnGroups=${this.columnGroups}\n              .itemsPerColumn=${this.itemsPerColumn}\n              @change=${this.handleMenuChange}\n              @close=${this.handleMenuClose}\n              @item-click=${this.handleMenuItemClick}\n            /></obc-context-menu-input>\n            `\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-split-button': ObcSplitButton;\n  }\n}\n"],"mappings":"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"}

package/dist/components/top-bar/top-bar.css.js

@@ -73,7 +73,7 @@ var top_bar_default = css`* {
 /* Controls never shrink: a squeeze reaches the texts, then overflows the end */
 .menu-button,
 .app-icon,
-.left-more-button,
+.more-button,
 .dimming-button,
 .user-button,
 .apps-button,
@@ -129,7 +129,7 @@ var top_bar_default = css`* {
     "ss04" on;
 }
 
-.left-more-button {
+.more-button {
   display: none;
 }
 

package/dist/components/top-bar/top-bar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.css.js","names":[],"sources":["../../../src/components/top-bar/top-bar.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n}\n\n.wrapper {\n  height: var(--app-components-topbar-touch-target-size);\n  padding: 0px var(--app-components-topbar-margin-global);\n  user-select: none;\n\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  &:not(.inactive) {\n    background: var(--container-global-color, #fcfcfc);\n    box-shadow: var(--shadow-flat);\n  }\n\n  &.tall {\n    height: var(--app-components-topbar-touch-target-tall);\n  }\n\n  &.inactive {\n    padding-left: calc(\n      var(--app-components-topbar-margin-global) +\n        var(--app-components-topbar-padding-left-small)\n    ); /* no menu button: inset the title instead */\n  }\n}\n\n/* ---- One flex line ----\n   Flattened because a squeeze must reach the texts, not a group: a shrinkable\n   left group collapses under an unshrinkable alert and covers the menu button. */\n\n.group {\n  display: contents;\n\n  .settings &.left > * {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  &.left .title {\n    padding-right: var(--app-components-topbar-label-spacing);\n  }\n\n  &.left .menu-button {\n    margin-right: 0;\n    margin-left: 0;\n\n    &.wide {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n  }\n\n  .app-icon {\n    padding-right: var(--app-components-topbar-label-spacing);\n    width: var(--app-components-topbar-icon-size);\n    height: var(--app-components-topbar-icon-size);\n    box-sizing: content-box;\n    color: var(--element-neutral-color);\n  }\n}\n\n/* Controls never shrink: a squeeze reaches the texts, then overflows the end */\n.menu-button,\n.app-icon,\n.left-more-button,\n.dimming-button,\n.user-button,\n.apps-button,\n::slotted([slot=\"command-button\"]),\n::slotted([slot=\"clock\"]) {\n  flex-shrink: 0;\n}\n\n.alert-container {\n  display: flex;\n  flex: 1 1 0; /* zero basis: fills what the texts leave, holds its min-content in a squeeze */\n  gap: var(--app-components-topbar-label-spacing);\n  align-items: center;\n  justify-content: right;\n}\n\n/* ---- Text gives way first ---- */\n\n.title,\n.page-name {\n  overflow: hidden;\n  color: var(--element-active-color, #1a1a1a);\n}\n\n.title {\n  flex-shrink: 3; /* the app title gives way before the page name */\n  min-width: 2em; /* room for \"A…\": narrower boxes paint a clipped glyph instead */\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  @mixin font-body;\n}\n\n.page-name {\n  min-width: 0; /* shrink below the longest word instead of pushing buttons out */\n  display: -webkit-box; /* two lines, then an ellipsis */\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  @mixin font-body-active;\n}\n\n.left-more-button {\n  display: none;\n}\n\n.divider {\n  width: 1px;\n  height: var(--ui-components-divider-height-small);\n  background: var(--border-divider-color);\n}\n"],"mappings":""}
+{"version":3,"file":"top-bar.css.js","names":[],"sources":["../../../src/components/top-bar/top-bar.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n}\n\n.wrapper {\n  height: var(--app-components-topbar-touch-target-size);\n  padding: 0px var(--app-components-topbar-margin-global);\n  user-select: none;\n\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  &:not(.inactive) {\n    background: var(--container-global-color, #fcfcfc);\n    box-shadow: var(--shadow-flat);\n  }\n\n  &.tall {\n    height: var(--app-components-topbar-touch-target-tall);\n  }\n\n  &.inactive {\n    padding-left: calc(\n      var(--app-components-topbar-margin-global) +\n        var(--app-components-topbar-padding-left-small)\n    ); /* no menu button: inset the title instead */\n  }\n}\n\n/* ---- One flex line ----\n   Flattened because a squeeze must reach the texts, not a group: a shrinkable\n   left group collapses under an unshrinkable alert and covers the menu button. */\n\n.group {\n  display: contents;\n\n  .settings &.left > * {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  &.left .title {\n    padding-right: var(--app-components-topbar-label-spacing);\n  }\n\n  &.left .menu-button {\n    margin-right: 0;\n    margin-left: 0;\n\n    &.wide {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n  }\n\n  .app-icon {\n    padding-right: var(--app-components-topbar-label-spacing);\n    width: var(--app-components-topbar-icon-size);\n    height: var(--app-components-topbar-icon-size);\n    box-sizing: content-box;\n    color: var(--element-neutral-color);\n  }\n}\n\n/* Controls never shrink: a squeeze reaches the texts, then overflows the end */\n.menu-button,\n.app-icon,\n.more-button,\n.dimming-button,\n.user-button,\n.apps-button,\n::slotted([slot=\"command-button\"]),\n::slotted([slot=\"clock\"]) {\n  flex-shrink: 0;\n}\n\n.alert-container {\n  display: flex;\n  flex: 1 1 0; /* zero basis: fills what the texts leave, holds its min-content in a squeeze */\n  gap: var(--app-components-topbar-label-spacing);\n  align-items: center;\n  justify-content: right;\n}\n\n/* ---- Text gives way first ---- */\n\n.title,\n.page-name {\n  overflow: hidden;\n  color: var(--element-active-color, #1a1a1a);\n}\n\n.title {\n  flex-shrink: 3; /* the app title gives way before the page name */\n  min-width: 2em; /* room for \"A…\": narrower boxes paint a clipped glyph instead */\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  @mixin font-body;\n}\n\n.page-name {\n  min-width: 0; /* shrink below the longest word instead of pushing buttons out */\n  display: -webkit-box; /* two lines, then an ellipsis */\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  @mixin font-body-active;\n}\n\n.more-button {\n  display: none;\n}\n\n.divider {\n  width: 1px;\n  height: var(--ui-components-divider-height-small);\n  background: var(--border-divider-color);\n}\n"],"mappings":""}

package/dist/components/top-bar/top-bar.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { BreadcrumbItem } from '../breadcrumb/breadcrumb.js';
 import '../icon-button/icon-button.js';
 import '../clock/clock.js';
@@ -71,7 +71,8 @@ export declare enum ObcTopBarMenuButtonIcon {
  * - `menu-button-clicked` – Fired when the menu button is clicked.
  * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.
  * - `apps-button-clicked` – Fired when the apps button is clicked.
- * - `left-more-button-clicked` – Fired when the left more button is clicked.
+ * - `more-button-clicked` – Fired when the more button is clicked.
+ * - `left-more-button-clicked` – Deprecated alias of `more-button-clicked`, fired with it; removed in 4.0.0.
  * - `user-button-clicked` – Fired when the user/profile button is clicked.
  * - `close` – Fired in settings mode when the close button is clicked.
  * - `back` – Fired in settings mode when the back button is clicked.
@@ -122,8 +123,8 @@ export declare enum ObcTopBarMenuButtonIcon {
  * @availableWhen dimmingButtonActivated showDimmingButton==true && inactive==false
  * @property appsButtonActivated - Highlights the apps button as active.
  * @availableWhen appsButtonActivated showAppsButton==true && inactive==false
- * @property leftMoreButtonActivated - Highlights the left more button as active.
- * @availableWhen leftMoreButtonActivated inactive==false
+ * @property moreButtonActivated - Highlights the more button as active.
+ * @availableWhen moreButtonActivated inactive==false
  * @property userButtonActivated - Highlights the user/profile button as active.
  * @availableWhen userButtonActivated showUserButton==true && inactive==false
  * @property userButtonDisabled - Disables the user/profile button.
@@ -153,13 +154,16 @@ export declare enum ObcTopBarMenuButtonIcon {
  * @fires menu-button-clicked - Fired when the menu button is clicked
  * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked
  * @fires apps-button-clicked - Fired when the apps button is clicked
- * @fires left-more-button-clicked - Fired when the left more button is clicked
+ * @fires more-button-clicked - Fired when the more button is clicked
+ * @fires left-more-button-clicked - Deprecated: listen to `more-button-clicked` instead. Fired together with it; removed in 4.0.0.
  * @fires user-button-clicked - Fired when the user/profile button is clicked
  * @fires close - Fired in settings mode when the close button is clicked
  * @fires back - Fired in settings mode when the back button is clicked
  * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.
  * @fires emergency-brightness-stop - Fired when the menu button is released.
  * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.
+ * @csspart more-button - The more button shown below the breakpoints.
+ * @csspart left-more-button - Deprecated alias of the `more-button` part; removed in 4.0.0.
  * @stable
  */
 export declare class ObcTopBar extends LitElement {
@@ -192,11 +196,15 @@ export declare class ObcTopBar extends LitElement {
      */
     appsButtonActivated: boolean;
     /**
-     * Highlights the left more button as active.
+     * Highlights the more button as active.
      *
      * Available when `inactive==false`.
      */
-    leftMoreButtonActivated: boolean;
+    moreButtonActivated: boolean;
+    /**
+     * @deprecated Use `moreButtonActivated`. Removed in 4.0.0.
+     */
+    leftMoreButtonActivated?: boolean;
     /**
      * Highlights the user/profile button as active.
      *
@@ -251,7 +259,14 @@ export declare class ObcTopBar extends LitElement {
     breadcrumbItems: BreadcrumbItem[];
     private dimmingButtonClicked;
     private appsButtonClicked;
-    private leftMoreButtonClicked;
+    /**
+     * Copies the deprecated `leftMoreButtonActivated` into
+     * `moreButtonActivated`. A plain field rather than a getter/setter alias:
+     * the Vue wrapper writes every prop back on its second render, and a getter
+     * would then write `false` over the new property.
+     */
+    willUpdate(changed: PropertyValues<this>): void;
+    private moreButtonClicked;
     private userButtonClicked;
     private leftButtonEvent;
     private leftButtonTimeout;

package/dist/components/top-bar/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,2CAA2C,CAAC;AACnD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0CAA0C,CAAC;AAClD,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAEL,cAAc,EACf,MAAM,6BAA6B,CAAC;AAGrC,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgJG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,SAAS;IAEjB,QAAQ,SAAU;IAElB,cAAc,0BAAgC;IAGxE,mBAAmB,UAAS;IAG5B,sBAAsB,UAAS;IAG/B,mBAAmB,UAAS;IAG5B,uBAAuB,UAAS;IAGhC,mBAAmB,UAAS;IAG5B,kBAAkB,UAAS;IAEA,IAAI,UAAS;IAEb,cAAc,UAAS;IAEvB,cAAc,UAAS;IAGlD,iBAAiB,UAAS;IAEC,cAAc,UAAS;IAEvB,SAAS,UAAS;IAElB,QAAQ,UAAS;IAEjB,WAAW,UAAS;IAEpB,QAAQ,UAAS;IAG5C,qBAAqB,SAAO;IAG5B,yBAAyB,SAAO;IAGhC,oBAAoB,SAAO;IAG3B,sBAAsB,SAAO;IAG7B,mBAAmB,SAAO;IAEC,QAAQ,UAAS;IAG5C,eAAe,EAAE,cAAc,EAAE,CAAM;IAEvC,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,iBAAiB,CAA+B;IACxD,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAS;IAEtC,OAAO,CAAC,cAAc;IAUtB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IAYpB;;;;;;;;OAQG;IACH,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAad,MAAM;IAyMf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,+BAA+B,CAAC;AACvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,2CAA2C,CAAC;AACnD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0CAA0C,CAAC;AAClD,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAEL,cAAc,EACf,MAAM,6BAA6B,CAAC;AAGrC,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoJG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,SAAS;IAEjB,QAAQ,SAAU;IAElB,cAAc,0BAAgC;IAGxE,mBAAmB,UAAS;IAG5B,sBAAsB,UAAS;IAG/B,mBAAmB,UAAS;IAG5B,mBAAmB,UAAS;IAE5B;;OAEG;IAEH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAGlC,mBAAmB,UAAS;IAG5B,kBAAkB,UAAS;IAEA,IAAI,UAAS;IAEb,cAAc,UAAS;IAEvB,cAAc,UAAS;IAGlD,iBAAiB,UAAS;IAEC,cAAc,UAAS;IAEvB,SAAS,UAAS;IAElB,QAAQ,UAAS;IAEjB,WAAW,UAAS;IAEpB,QAAQ,UAAS;IAG5C,qBAAqB,SAAO;IAG5B,yBAAyB,SAAO;IAGhC,oBAAoB,SAAO;IAG3B,sBAAsB,SAAO;IAG7B,mBAAmB,SAAO;IAEC,QAAQ,UAAS;IAG5C,eAAe,EAAE,cAAc,EAAE,CAAM;IAEvC,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,iBAAiB;IAQzB;;;;;OAKG;IACM,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUxD,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,iBAAiB,CAA+B;IACxD,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,qBAAqB,CAAS;IAEtC,OAAO,CAAC,cAAc;IAUtB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IAYpB;;;;;;;;OAQG;IACH,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAad,MAAM;IA2Mf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/top-bar/top-bar.js

@@ -33,7 +33,7 @@ var ObcTopBar = class ObcTopBar extends LitElement {
 		this.menuButtonActivated = false;
 		this.dimmingButtonActivated = false;
 		this.appsButtonActivated = false;
-		this.leftMoreButtonActivated = false;
+		this.moreButtonActivated = false;
 		this.userButtonActivated = false;
 		this.userButtonDisabled = false;
 		this.tall = false;
@@ -71,9 +71,24 @@ var ObcTopBar = class ObcTopBar extends LitElement {
 		*/
 		this.dispatchEvent(new CustomEvent("apps-button-clicked"));
 	}
-	leftMoreButtonClicked() {
+	/**
+	* Copies the deprecated `leftMoreButtonActivated` into
+	* `moreButtonActivated`. A plain field rather than a getter/setter alias:
+	* the Vue wrapper writes every prop back on its second render, and a getter
+	* would then write `false` over the new property.
+	*/
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("leftMoreButtonActivated") && this.leftMoreButtonActivated !== void 0) this.moreButtonActivated = this.leftMoreButtonActivated;
+	}
+	moreButtonClicked() {
+		/**
+		* Fired when the more button is clicked.
+		* @event more-button-clicked
+		*/
+		this.dispatchEvent(new CustomEvent("more-button-clicked"));
 		/**
-		* Fired when the left more button is clicked.
+		* Deprecated alias of `more-button-clicked`; removed in 4.0.0.
 		* @event left-more-button-clicked
 		*/
 		this.dispatchEvent(new CustomEvent("left-more-button-clicked"));
@@ -187,11 +202,11 @@ var ObcTopBar = class ObcTopBar extends LitElement {
 			leftGroup.push(html`<div class="page-name">${this.pageName}</div>`);
 			leftGroup.push(html`<slot name="command-button"></slot>`);
 		}
-		const breakpointMoreButton = Math.max(this.appButtonBreakpointPx, this.dimmingButtonBreakpointPx);
+		const breakpointMoreButton = Math.max(this.appButtonBreakpointPx, this.dimmingButtonBreakpointPx, this.userButtonBreakpointPx, this.appIconBreakpointPx);
 		return html`
       <style>
         @media (max-width: ${breakpointMoreButton}px) {
-          .left-more-button {
+          .more-button {
             display: revert !important;
           }
 
@@ -277,12 +292,12 @@ var ObcTopBar = class ObcTopBar extends LitElement {
                 </obc-icon-button>` : null}
           ${this.showClock ? html`<slot name="clock"></slot>` : null}
           ${!this.inactive ? html`<obc-icon-button
-                  class="left-more-button"
-                  part="left-more-button"
+                  class="more-button"
+                  part="more-button left-more-button"
                   variant="flat"
                   aria-label=${msg("More")}
-                  @click=${this.leftMoreButtonClicked}
-                  ?activated=${this.leftMoreButtonActivated}
+                  @click=${this.moreButtonClicked}
+                  ?activated=${this.moreButtonActivated}
                 >
                   <obi-more-vertical-google></obi-more-vertical-google>
                 </obc-icon-button>` : null}
@@ -300,6 +315,7 @@ __decorate([property({ type: String })], ObcTopBar.prototype, "menuButtonIcon",
 __decorate([property({ type: Boolean })], ObcTopBar.prototype, "menuButtonActivated", void 0);
 __decorate([property({ type: Boolean })], ObcTopBar.prototype, "dimmingButtonActivated", void 0);
 __decorate([property({ type: Boolean })], ObcTopBar.prototype, "appsButtonActivated", void 0);
+__decorate([property({ type: Boolean })], ObcTopBar.prototype, "moreButtonActivated", void 0);
 __decorate([property({ type: Boolean })], ObcTopBar.prototype, "leftMoreButtonActivated", void 0);
 __decorate([property({ type: Boolean })], ObcTopBar.prototype, "userButtonActivated", void 0);
 __decorate([property({ type: Boolean })], ObcTopBar.prototype, "userButtonDisabled", void 0);

package/dist/components/top-bar/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","names":[],"sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {msg} from '@lit/localize';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button.js';\nimport '../clock/clock.js';\nimport '../divider/divider.js';\nimport '../breadcrumb/breadcrumb.js';\nimport '../../icons/icon-menu-iec.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-applications.js';\nimport '../../icons/icon-more-vertical-google.js';\nimport '../../icons/icon-user.js';\nimport {\n  BreadcrumbClickEvent,\n  BreadcrumbItem,\n} from '../breadcrumb/breadcrumb.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcTopBarMenuButtonIcon {\n  Menu = 'menu',\n  Home = 'home',\n}\n\n/**\n * `<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n *\n * Provides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n *\n * Appears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n *\n * ## Features\n * - **Configurable Sections:** Supports left and right-aligned groups for navigation, context, and actions.\n * - **Menu Button:** Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n * - **App Icon Slot:** Customizable slot for displaying an application or brand icon.\n * - **App Title & Page Name:** Displays the current application and page context.\n * - **Breadcrumbs:** Optional breadcrumb navigation for hierarchical context (in settings mode).\n * - **Command Button Slot:** Slot for inserting a primary command/action button.\n * - **Alert/Notification Area:** Slot for alert indicators, notification badges, or custom alert components.\n * - **Dimming Button:** Optional button for toggling display modes (e.g., day/night).\n * - **User/Profile Button:** Optional user icon for profile/account actions.\n * - **Apps Button:** Optional button for accessing additional applications or modules.\n * - **Clock & Date:** Optional digital clock and date display, responsive to screen size.\n * - **Responsive Layout:** Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n * - **Settings Mode:** Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n * - **Tall Variant:** Optional increased height for touch or accessibility needs.\n * - **Inactive State:** Disables interactive elements and visually de-emphasizes the bar.\n *\n * ## Variants\n * - **Regular:** Standard top bar with menu, app icon, title, page name, and action slots.\n * - **Settings:** Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n * - **Inactive:** Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n * - **Tall:** Increases the height of the bar for improved touch targets.\n *\n * ## Usage Guidelines\n * Use `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n *\n * - Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n * - Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n * - Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n * - Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n * - Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n *\n * **TODO(designer):** Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n *\n * ## Slots\n *\n * | Slot Name        | Renders When...                 | Purpose                                                        |\n * |------------------|---------------------------------|----------------------------------------------------------------|\n * | `app-icon`       | `showAppIcon` is true           | Custom icon representing the application or brand.             |\n * | `command-button` | Always (if provided)            | Primary command or action button for the current context.      |\n * | `alerts`         | Always (if provided)            | Area for alert indicators, notification badges, or alert items.|\n * | `clock`          | Always (if provided)            | Clock component for displaying the current time.              |\n *\n * ## Events\n * - `menu-button-clicked` – Fired when the menu button is clicked.\n * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n * - `apps-button-clicked` – Fired when the apps button is clicked.\n * - `left-more-button-clicked` – Fired when the left more button is clicked.\n * - `user-button-clicked` – Fired when the user/profile button is clicked.\n * - `close` – Fired in settings mode when the close button is clicked.\n * - `back` – Fired in settings mode when the back button is clicked.\n * - `forward` – Fired in settings mode when the forward button is clicked.\n * - `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * - `emergency-brightness-stop` – Fired when the menu button is released.\n *\n * ## Keyboard\n * Every control in the bar is its own tab stop and activates on `Enter` and\n * `Space`. The bar is a navigation landmark, not an APG toolbar: its controls\n * are separate components and slotted consumer content, so a roving tabindex\n * across them is deliberately not implemented. The emergency-brightness hold\n * is a pointer gesture only; from the keyboard the menu button opens the menu.\n *\n * ## Best Practices and Constraints\n * - Only show interactive elements relevant to the current context to avoid clutter.\n * - Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n * - For accessibility, give all interactive elements labels and focus handling.\n * - Adjust breakpoint properties to optimize the layout for different device sizes.\n * - In settings mode, use breadcrumbs to provide clear navigation context.\n *\n * ## Example\n *\n * ```html\n * <obc-top-bar\n *   appTitle=\"My App\"\n *   pageName=\"Dashboard\"\n *   showAppsButton\n *   showDimmingButton\n *   showClock\n *   showUserButton\n *   showAppIcon\n * >\n *   <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n *   <obc-command-button slot=\"command-button\"></obc-command-button>\n *   <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n *   <obc-clock slot=\"clock\"></obc-clock>\n * </obc-top-bar>\n * ```\n *\n * @availableWhen menuButtonIcon settings==false && inactive==false\n * @property appTitle - Sets the main application title displayed in the top bar.\n * @property pageName - Sets the current page or section name displayed in the top bar.\n * @availableWhen pageName settings==false\n * @property menuButtonActivated - Highlights the menu button as active.\n * @availableWhen menuButtonActivated settings==false && inactive==false\n * @property dimmingButtonActivated - Highlights the dimming (day/night) button as active.\n * @availableWhen dimmingButtonActivated showDimmingButton==true && inactive==false\n * @property appsButtonActivated - Highlights the apps button as active.\n * @availableWhen appsButtonActivated showAppsButton==true && inactive==false\n * @property leftMoreButtonActivated - Highlights the left more button as active.\n * @availableWhen leftMoreButtonActivated inactive==false\n * @property userButtonActivated - Highlights the user/profile button as active.\n * @availableWhen userButtonActivated showUserButton==true && inactive==false\n * @property userButtonDisabled - Disables the user/profile button.\n * @availableWhen userButtonDisabled showUserButton==true && inactive==false\n * @property tall - Increases the height of the top bar for larger touch targets.\n * @property wideMenuButton - Expands the menu button for wide-rail layouts.\n * @availableWhen wideMenuButton settings==false && inactive==false\n * @property showAppsButton - Shows or hides the apps button.\n * @property showDimmingButton - Shows or hides the dimming (day/night) button.\n * @property showUserButton - Shows or hides the user/profile button.\n * @property showClock - Shows or hides the clock.\n * @property showDate - Shows or hides the date in the clock display.\n * @property showAppIcon - Shows or hides the app icon slot.\n * @property inactive - Disables interaction and visually de-emphasizes the bar.\n * @property appButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the apps button.\n * @property dimmingButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the dimming button.\n * @property appTitleBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app title.\n * @property userButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the user button.\n * @property appIconBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app icon.\n * @property settings - Enables settings mode, displaying close, back buttons, breadcrumbs, and app title.\n * @property breadcrumbItems - Array of breadcrumb items for navigation (used in settings mode).\n * @availableWhen breadcrumbItems settings==true\n * @slot app-icon - Custom icon representing the application or brand (shown when `showAppIcon` is true)\n * @slot command-button - Primary command/action button for the current context\n * @slot alerts - Area for alert indicators, notification badges, or alert items\n * @slot clock - Clock component for displaying the current time (shown when `showClock` is true)\n * @fires menu-button-clicked - Fired when the menu button is clicked\n * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked\n * @fires apps-button-clicked - Fired when the apps button is clicked\n * @fires left-more-button-clicked - Fired when the left more button is clicked\n * @fires user-button-clicked - Fired when the user/profile button is clicked\n * @fires close - Fired in settings mode when the close button is clicked\n * @fires back - Fired in settings mode when the back button is clicked\n * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * @fires emergency-brightness-stop - Fired when the menu button is released.\n * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.\n * @stable\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n\n  @property({type: String}) pageName = 'Page';\n\n  @property({type: String}) menuButtonIcon = ObcTopBarMenuButtonIcon.Menu;\n\n  @property({type: Boolean})\n  menuButtonActivated = false;\n\n  @property({type: Boolean})\n  dimmingButtonActivated = false;\n\n  @property({type: Boolean})\n  appsButtonActivated = false;\n\n  @property({type: Boolean})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonDisabled = false;\n\n  @property({type: Boolean}) tall = false;\n\n  @property({type: Boolean}) wideMenuButton = false;\n\n  @property({type: Boolean}) showAppsButton = false;\n\n  @property({type: Boolean})\n  showDimmingButton = false;\n\n  @property({type: Boolean}) showUserButton = false;\n\n  @property({type: Boolean}) showClock = false;\n\n  @property({type: Boolean}) showDate = false;\n\n  @property({type: Boolean}) showAppIcon = false;\n\n  @property({type: Boolean}) inactive = false;\n\n  @property({type: Number})\n  appButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  dimmingButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appTitleBreakpointPx = 500;\n\n  @property({type: Number})\n  userButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appIconBreakpointPx = 500;\n\n  @property({type: Boolean}) settings = false;\n\n  @property({type: Array})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private dimmingButtonClicked() {\n    /**\n     * Fired when the dimming (day/night) button is clicked.\n     * @event dimming-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    /**\n     * Fired when the apps button is clicked.\n     * @event apps-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    /**\n     * Fired when the left more button is clicked.\n     * @event left-more-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  private userButtonClicked() {\n    /**\n     * Fired when the user/profile button is clicked.\n     * @event user-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('user-button-clicked'));\n  }\n\n  private leftButtonEvent: null | CustomEvent = null;\n  private leftButtonTimeout: null | NodeJS.Timeout = null;\n  private isLeftButtonDown = false;\n  private isEmergencyBrightness = false;\n\n  private leftButtonDown(event: CustomEvent) {\n    this.leftButtonEvent = event;\n    this.isLeftButtonDown = true;\n    this.leftButtonTimeout = setTimeout(() => {\n      this.leftButtonEvent = null;\n      this.dispatchEvent(new CustomEvent('emergency-brightness-start'));\n      this.isEmergencyBrightness = true;\n    }, 500);\n  }\n\n  /**\n   * Ends a hold. The event a short press stands for is dispatched from the\n   * `click` that follows, not here: a menu opened while the pointer is still\n   * going up gets closed again by that same click in current browsers, which\n   * see it as a click outside a popover that has just opened.\n   */\n  private leftButtonUp() {\n    if (this.leftButtonTimeout) {\n      clearTimeout(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  /**\n   * Sends the event a press of the hold button stands for.\n   *\n   * Enter, Space and a screen reader's activate command arrive as a `click`\n   * with `detail` 0 and no pointer press before it, so they get the event\n   * directly. A pointer click arrives with `detail` 1 after the press: the\n   * event stored on the way down is sent now, unless the press ran long\n   * enough to start emergency brightness, which used it up.\n   */\n  private leftButtonActivate(event: MouseEvent, type: string) {\n    if (event.detail === 0) {\n      this.dispatchEvent(new CustomEvent(type));\n      return;\n    }\n    if (!this.leftButtonEvent) return;\n    this.dispatchEvent(this.leftButtonEvent);\n    this.leftButtonEvent = null;\n  }\n\n  private leftButtonLeave() {\n    if (!this.isLeftButtonDown) return;\n    if (this.leftButtonTimeout) {\n      clearInterval(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            aria-label=${msg('Close')}\n            @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}\n            @pointerup=${() => this.leftButtonUp()}\n            @pointerleave=${() => this.leftButtonLeave()}\n            @click=${(event: MouseEvent) =>\n              this.leftButtonActivate(event, 'close')}\n          >\n            <obi-close-google></obi-close-google>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          aria-label=${msg('Back')}\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-arrow-left-google></obi-arrow-left-google>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb\n          .items=${this.breadcrumbItems}\n          @breadcrumb-click=${(e: BreadcrumbClickEvent) =>\n            this.dispatchEvent(\n              new CustomEvent('breadcrumb-click', {\n                detail: e.detail,\n              }) as BreadcrumbClickEvent\n            )}\n        ></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              aria-label=${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? msg('Menu')\n                  : msg('Home')\n              }\n              @pointerdown=${() =>\n                this.leftButtonDown(new CustomEvent('menu-button-clicked'))}\n              @pointerup=${() => this.leftButtonUp()}\n              @pointerleave=${() => this.leftButtonLeave()}\n              @click=${(event: MouseEvent) =>\n                this.leftButtonActivate(event, 'menu-button-clicked')}\n              ?activated=${this.menuButtonActivated}\n            >\n              ${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? html`<obi-menu-iec></obi-menu-iec>`\n                  : html`<obi-home></obi-home>`\n              }\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      if (this.showAppIcon) {\n        leftGroup.push(\n          html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n      leftGroup.push(html`<slot name=\"command-button\"></slot>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none !important; /* the stylesheet's display wins over this inline rule otherwise */\n          }\n        }\n\n        @media (max-width: ${this.userButtonBreakpointPx}px) {\n          .user-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appIconBreakpointPx}px) {\n          .app-icon {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n          tall: this.tall,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          <div class=\"alert-container\">\n            <slot name=\"alerts\"></slot>\n          </div>\n          ${\n            this.showDimmingButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"dimming-button\"\n                  part=\"dimming-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('Dimming')}\n                  @click=${this.dimmingButtonClicked}\n                  ?activated=${this.dimmingButtonActivated}\n                >\n                  <obi-palette-day-night-iec></obi-palette-day-night-iec>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showUserButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"user-button\"\n                  variant=\"flat\"\n                  part=\"user-button\"\n                  aria-label=${msg('User')}\n                  @click=${this.userButtonClicked}\n                  ?activated=${this.userButtonActivated}\n                  ?disabled=${this.userButtonDisabled}\n                >\n                  <obi-user></obi-user>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showAppsButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"apps-button\"\n                  variant=\"flat\"\n                  part=\"apps-button\"\n                  aria-label=${msg('Apps')}\n                  @click=${this.appsButtonClicked}\n                  ?activated=${this.appsButtonActivated}\n                >\n                  <obi-applications></obi-applications>\n                </obc-icon-button>`\n              : null\n          }\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n          ${\n            !this.inactive\n              ? html`<obc-icon-button\n                  class=\"left-more-button\"\n                  part=\"left-more-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('More')}\n                  @click=${this.leftMoreButtonClicked}\n                  ?activated=${this.leftMoreButtonActivated}\n                >\n                  <obi-more-vertical-google></obi-more-vertical-google>\n                </obc-icon-button>`\n              : null\n          }\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"top-bar.js","names":[],"sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {msg} from '@lit/localize';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button.js';\nimport '../clock/clock.js';\nimport '../divider/divider.js';\nimport '../breadcrumb/breadcrumb.js';\nimport '../../icons/icon-menu-iec.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-applications.js';\nimport '../../icons/icon-more-vertical-google.js';\nimport '../../icons/icon-user.js';\nimport {\n  BreadcrumbClickEvent,\n  BreadcrumbItem,\n} from '../breadcrumb/breadcrumb.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcTopBarMenuButtonIcon {\n  Menu = 'menu',\n  Home = 'home',\n}\n\n/**\n * `<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n *\n * Provides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n *\n * Appears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n *\n * ## Features\n * - **Configurable Sections:** Supports left and right-aligned groups for navigation, context, and actions.\n * - **Menu Button:** Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n * - **App Icon Slot:** Customizable slot for displaying an application or brand icon.\n * - **App Title & Page Name:** Displays the current application and page context.\n * - **Breadcrumbs:** Optional breadcrumb navigation for hierarchical context (in settings mode).\n * - **Command Button Slot:** Slot for inserting a primary command/action button.\n * - **Alert/Notification Area:** Slot for alert indicators, notification badges, or custom alert components.\n * - **Dimming Button:** Optional button for toggling display modes (e.g., day/night).\n * - **User/Profile Button:** Optional user icon for profile/account actions.\n * - **Apps Button:** Optional button for accessing additional applications or modules.\n * - **Clock & Date:** Optional digital clock and date display, responsive to screen size.\n * - **Responsive Layout:** Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n * - **Settings Mode:** Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n * - **Tall Variant:** Optional increased height for touch or accessibility needs.\n * - **Inactive State:** Disables interactive elements and visually de-emphasizes the bar.\n *\n * ## Variants\n * - **Regular:** Standard top bar with menu, app icon, title, page name, and action slots.\n * - **Settings:** Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n * - **Inactive:** Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n * - **Tall:** Increases the height of the bar for improved touch targets.\n *\n * ## Usage Guidelines\n * Use `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n *\n * - Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n * - Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n * - Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n * - Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n * - Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n *\n * **TODO(designer):** Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n *\n * ## Slots\n *\n * | Slot Name        | Renders When...                 | Purpose                                                        |\n * |------------------|---------------------------------|----------------------------------------------------------------|\n * | `app-icon`       | `showAppIcon` is true           | Custom icon representing the application or brand.             |\n * | `command-button` | Always (if provided)            | Primary command or action button for the current context.      |\n * | `alerts`         | Always (if provided)            | Area for alert indicators, notification badges, or alert items.|\n * | `clock`          | Always (if provided)            | Clock component for displaying the current time.              |\n *\n * ## Events\n * - `menu-button-clicked` – Fired when the menu button is clicked.\n * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n * - `apps-button-clicked` – Fired when the apps button is clicked.\n * - `more-button-clicked` – Fired when the more button is clicked.\n * - `left-more-button-clicked` – Deprecated alias of `more-button-clicked`, fired with it; removed in 4.0.0.\n * - `user-button-clicked` – Fired when the user/profile button is clicked.\n * - `close` – Fired in settings mode when the close button is clicked.\n * - `back` – Fired in settings mode when the back button is clicked.\n * - `forward` – Fired in settings mode when the forward button is clicked.\n * - `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * - `emergency-brightness-stop` – Fired when the menu button is released.\n *\n * ## Keyboard\n * Every control in the bar is its own tab stop and activates on `Enter` and\n * `Space`. The bar is a navigation landmark, not an APG toolbar: its controls\n * are separate components and slotted consumer content, so a roving tabindex\n * across them is deliberately not implemented. The emergency-brightness hold\n * is a pointer gesture only; from the keyboard the menu button opens the menu.\n *\n * ## Best Practices and Constraints\n * - Only show interactive elements relevant to the current context to avoid clutter.\n * - Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n * - For accessibility, give all interactive elements labels and focus handling.\n * - Adjust breakpoint properties to optimize the layout for different device sizes.\n * - In settings mode, use breadcrumbs to provide clear navigation context.\n *\n * ## Example\n *\n * ```html\n * <obc-top-bar\n *   appTitle=\"My App\"\n *   pageName=\"Dashboard\"\n *   showAppsButton\n *   showDimmingButton\n *   showClock\n *   showUserButton\n *   showAppIcon\n * >\n *   <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n *   <obc-command-button slot=\"command-button\"></obc-command-button>\n *   <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n *   <obc-clock slot=\"clock\"></obc-clock>\n * </obc-top-bar>\n * ```\n *\n * @availableWhen menuButtonIcon settings==false && inactive==false\n * @property appTitle - Sets the main application title displayed in the top bar.\n * @property pageName - Sets the current page or section name displayed in the top bar.\n * @availableWhen pageName settings==false\n * @property menuButtonActivated - Highlights the menu button as active.\n * @availableWhen menuButtonActivated settings==false && inactive==false\n * @property dimmingButtonActivated - Highlights the dimming (day/night) button as active.\n * @availableWhen dimmingButtonActivated showDimmingButton==true && inactive==false\n * @property appsButtonActivated - Highlights the apps button as active.\n * @availableWhen appsButtonActivated showAppsButton==true && inactive==false\n * @property moreButtonActivated - Highlights the more button as active.\n * @availableWhen moreButtonActivated inactive==false\n * @property userButtonActivated - Highlights the user/profile button as active.\n * @availableWhen userButtonActivated showUserButton==true && inactive==false\n * @property userButtonDisabled - Disables the user/profile button.\n * @availableWhen userButtonDisabled showUserButton==true && inactive==false\n * @property tall - Increases the height of the top bar for larger touch targets.\n * @property wideMenuButton - Expands the menu button for wide-rail layouts.\n * @availableWhen wideMenuButton settings==false && inactive==false\n * @property showAppsButton - Shows or hides the apps button.\n * @property showDimmingButton - Shows or hides the dimming (day/night) button.\n * @property showUserButton - Shows or hides the user/profile button.\n * @property showClock - Shows or hides the clock.\n * @property showDate - Shows or hides the date in the clock display.\n * @property showAppIcon - Shows or hides the app icon slot.\n * @property inactive - Disables interaction and visually de-emphasizes the bar.\n * @property appButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the apps button.\n * @property dimmingButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the dimming button.\n * @property appTitleBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app title.\n * @property userButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the user button.\n * @property appIconBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app icon.\n * @property settings - Enables settings mode, displaying close, back buttons, breadcrumbs, and app title.\n * @property breadcrumbItems - Array of breadcrumb items for navigation (used in settings mode).\n * @availableWhen breadcrumbItems settings==true\n * @slot app-icon - Custom icon representing the application or brand (shown when `showAppIcon` is true)\n * @slot command-button - Primary command/action button for the current context\n * @slot alerts - Area for alert indicators, notification badges, or alert items\n * @slot clock - Clock component for displaying the current time (shown when `showClock` is true)\n * @fires menu-button-clicked - Fired when the menu button is clicked\n * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked\n * @fires apps-button-clicked - Fired when the apps button is clicked\n * @fires more-button-clicked - Fired when the more button is clicked\n * @fires left-more-button-clicked - Deprecated: listen to `more-button-clicked` instead. Fired together with it; removed in 4.0.0.\n * @fires user-button-clicked - Fired when the user/profile button is clicked\n * @fires close - Fired in settings mode when the close button is clicked\n * @fires back - Fired in settings mode when the back button is clicked\n * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * @fires emergency-brightness-stop - Fired when the menu button is released.\n * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.\n * @csspart more-button - The more button shown below the breakpoints.\n * @csspart left-more-button - Deprecated alias of the `more-button` part; removed in 4.0.0.\n * @stable\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n\n  @property({type: String}) pageName = 'Page';\n\n  @property({type: String}) menuButtonIcon = ObcTopBarMenuButtonIcon.Menu;\n\n  @property({type: Boolean})\n  menuButtonActivated = false;\n\n  @property({type: Boolean})\n  dimmingButtonActivated = false;\n\n  @property({type: Boolean})\n  appsButtonActivated = false;\n\n  @property({type: Boolean})\n  moreButtonActivated = false;\n\n  /**\n   * @deprecated Use `moreButtonActivated`. Removed in 4.0.0.\n   */\n  @property({type: Boolean})\n  leftMoreButtonActivated?: boolean;\n\n  @property({type: Boolean})\n  userButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonDisabled = false;\n\n  @property({type: Boolean}) tall = false;\n\n  @property({type: Boolean}) wideMenuButton = false;\n\n  @property({type: Boolean}) showAppsButton = false;\n\n  @property({type: Boolean})\n  showDimmingButton = false;\n\n  @property({type: Boolean}) showUserButton = false;\n\n  @property({type: Boolean}) showClock = false;\n\n  @property({type: Boolean}) showDate = false;\n\n  @property({type: Boolean}) showAppIcon = false;\n\n  @property({type: Boolean}) inactive = false;\n\n  @property({type: Number})\n  appButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  dimmingButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appTitleBreakpointPx = 500;\n\n  @property({type: Number})\n  userButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appIconBreakpointPx = 500;\n\n  @property({type: Boolean}) settings = false;\n\n  @property({type: Array})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private dimmingButtonClicked() {\n    /**\n     * Fired when the dimming (day/night) button is clicked.\n     * @event dimming-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    /**\n     * Fired when the apps button is clicked.\n     * @event apps-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  /**\n   * Copies the deprecated `leftMoreButtonActivated` into\n   * `moreButtonActivated`. A plain field rather than a getter/setter alias:\n   * the Vue wrapper writes every prop back on its second render, and a getter\n   * would then write `false` over the new property.\n   */\n  override willUpdate(changed: PropertyValues<this>): void {\n    super.willUpdate(changed);\n    if (\n      changed.has('leftMoreButtonActivated') &&\n      this.leftMoreButtonActivated !== undefined\n    ) {\n      this.moreButtonActivated = this.leftMoreButtonActivated;\n    }\n  }\n\n  private moreButtonClicked() {\n    /**\n     * Fired when the more button is clicked.\n     * @event more-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('more-button-clicked'));\n    /**\n     * Deprecated alias of `more-button-clicked`; removed in 4.0.0.\n     * @event left-more-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  private userButtonClicked() {\n    /**\n     * Fired when the user/profile button is clicked.\n     * @event user-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('user-button-clicked'));\n  }\n\n  private leftButtonEvent: null | CustomEvent = null;\n  private leftButtonTimeout: null | NodeJS.Timeout = null;\n  private isLeftButtonDown = false;\n  private isEmergencyBrightness = false;\n\n  private leftButtonDown(event: CustomEvent) {\n    this.leftButtonEvent = event;\n    this.isLeftButtonDown = true;\n    this.leftButtonTimeout = setTimeout(() => {\n      this.leftButtonEvent = null;\n      this.dispatchEvent(new CustomEvent('emergency-brightness-start'));\n      this.isEmergencyBrightness = true;\n    }, 500);\n  }\n\n  /**\n   * Ends a hold. The event a short press stands for is dispatched from the\n   * `click` that follows, not here: a menu opened while the pointer is still\n   * going up gets closed again by that same click in current browsers, which\n   * see it as a click outside a popover that has just opened.\n   */\n  private leftButtonUp() {\n    if (this.leftButtonTimeout) {\n      clearTimeout(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  /**\n   * Sends the event a press of the hold button stands for.\n   *\n   * Enter, Space and a screen reader's activate command arrive as a `click`\n   * with `detail` 0 and no pointer press before it, so they get the event\n   * directly. A pointer click arrives with `detail` 1 after the press: the\n   * event stored on the way down is sent now, unless the press ran long\n   * enough to start emergency brightness, which used it up.\n   */\n  private leftButtonActivate(event: MouseEvent, type: string) {\n    if (event.detail === 0) {\n      this.dispatchEvent(new CustomEvent(type));\n      return;\n    }\n    if (!this.leftButtonEvent) return;\n    this.dispatchEvent(this.leftButtonEvent);\n    this.leftButtonEvent = null;\n  }\n\n  private leftButtonLeave() {\n    if (!this.isLeftButtonDown) return;\n    if (this.leftButtonTimeout) {\n      clearInterval(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            aria-label=${msg('Close')}\n            @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}\n            @pointerup=${() => this.leftButtonUp()}\n            @pointerleave=${() => this.leftButtonLeave()}\n            @click=${(event: MouseEvent) =>\n              this.leftButtonActivate(event, 'close')}\n          >\n            <obi-close-google></obi-close-google>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          aria-label=${msg('Back')}\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-arrow-left-google></obi-arrow-left-google>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb\n          .items=${this.breadcrumbItems}\n          @breadcrumb-click=${(e: BreadcrumbClickEvent) =>\n            this.dispatchEvent(\n              new CustomEvent('breadcrumb-click', {\n                detail: e.detail,\n              }) as BreadcrumbClickEvent\n            )}\n        ></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              aria-label=${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? msg('Menu')\n                  : msg('Home')\n              }\n              @pointerdown=${() =>\n                this.leftButtonDown(new CustomEvent('menu-button-clicked'))}\n              @pointerup=${() => this.leftButtonUp()}\n              @pointerleave=${() => this.leftButtonLeave()}\n              @click=${(event: MouseEvent) =>\n                this.leftButtonActivate(event, 'menu-button-clicked')}\n              ?activated=${this.menuButtonActivated}\n            >\n              ${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? html`<obi-menu-iec></obi-menu-iec>`\n                  : html`<obi-home></obi-home>`\n              }\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      if (this.showAppIcon) {\n        leftGroup.push(\n          html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n      leftGroup.push(html`<slot name=\"command-button\"></slot>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx,\n      this.userButtonBreakpointPx,\n      this.appIconBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none !important; /* the stylesheet's display wins over this inline rule otherwise */\n          }\n        }\n\n        @media (max-width: ${this.userButtonBreakpointPx}px) {\n          .user-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appIconBreakpointPx}px) {\n          .app-icon {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n          tall: this.tall,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          <div class=\"alert-container\">\n            <slot name=\"alerts\"></slot>\n          </div>\n          ${\n            this.showDimmingButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"dimming-button\"\n                  part=\"dimming-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('Dimming')}\n                  @click=${this.dimmingButtonClicked}\n                  ?activated=${this.dimmingButtonActivated}\n                >\n                  <obi-palette-day-night-iec></obi-palette-day-night-iec>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showUserButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"user-button\"\n                  variant=\"flat\"\n                  part=\"user-button\"\n                  aria-label=${msg('User')}\n                  @click=${this.userButtonClicked}\n                  ?activated=${this.userButtonActivated}\n                  ?disabled=${this.userButtonDisabled}\n                >\n                  <obi-user></obi-user>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showAppsButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"apps-button\"\n                  variant=\"flat\"\n                  part=\"apps-button\"\n                  aria-label=${msg('Apps')}\n                  @click=${this.appsButtonClicked}\n                  ?activated=${this.appsButtonActivated}\n                >\n                  <obi-applications></obi-applications>\n                </obc-icon-button>`\n              : null\n          }\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n          ${\n            !this.inactive\n              ? html`<obc-icon-button\n                  class=\"more-button\"\n                  part=\"more-button left-more-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('More')}\n                  @click=${this.moreButtonClicked}\n                  ?activated=${this.moreButtonActivated}\n                >\n                  <obi-more-vertical-google></obi-more-vertical-google>\n                </obc-icon-button>`\n              : null\n          }\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.1.0",
+  "version": "2.2.0-next.2",
   "type": "module",
   "repository": {
     "type": "git",