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

package/custom-elements.json

@@ -91318,8 +91318,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n\nProvides 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\nAppears 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\nUse `<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\nEvery 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\nare separate components and slotted consumer content, so a roving tabindex\nacross them is deliberately not implemented. The emergency-brightness hold\nis 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```",
+          "description": "`<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n\nProvides 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\nAppears 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\nUse `<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\nEvery 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\nare separate components and slotted consumer content, so a roving tabindex\nacross them is deliberately not implemented. The emergency-brightness hold\nis 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```",
           "name": "ObcTopBar",
+          "cssParts": [
+            {
+              "description": "The more button shown below the breakpoints.",
+              "name": "more-button"
+            },
+            {
+              "description": "Deprecated alias of the `more-button` part; removed in 4.0.0.",
+              "name": "left-more-button"
+            }
+          ],
           "slots": [
             {
               "description": "Custom icon representing the application or brand (shown when `showAppIcon` is true)",
@@ -91406,19 +91416,28 @@
             },
             {
               "kind": "field",
-              "name": "leftMoreButtonActivated",
+              "name": "moreButtonActivated",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Highlights the left more button as active.\n\nAvailable when `inactive==false`.",
-              "attribute": "leftMoreButtonActivated",
+              "description": "Highlights the more button as active.\n\nAvailable when `inactive==false`.",
+              "attribute": "moreButtonActivated",
               "availableWhen": "inactive==false",
               "availableWhenIf": {
                 "arg": "inactive",
                 "truthy": false
               }
             },
+            {
+              "kind": "field",
+              "name": "leftMoreButtonActivated",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "deprecated": "Use `moreButtonActivated`. Removed in 4.0.0.",
+              "attribute": "leftMoreButtonActivated"
+            },
             {
               "kind": "field",
               "name": "userButtonActivated",
@@ -91619,7 +91638,7 @@
             },
             {
               "kind": "method",
-              "name": "leftMoreButtonClicked",
+              "name": "moreButtonClicked",
               "privacy": "private"
             },
             {
@@ -91723,12 +91742,19 @@
               },
               "description": "Fired when the apps button is clicked"
             },
+            {
+              "name": "more-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the more button is clicked"
+            },
             {
               "name": "left-more-button-clicked",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the left more button is clicked"
+              "description": "Deprecated: listen to `more-button-clicked` instead. Fired together with it; removed in 4.0.0."
             },
             {
               "name": "user-button-clicked",
@@ -91832,12 +91858,20 @@
               "fieldName": "appsButtonActivated"
             },
             {
-              "name": "leftMoreButtonActivated",
+              "name": "moreButtonActivated",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Highlights the left more button as active.\n\nAvailable when `inactive==false`.",
+              "description": "Highlights the more button as active.\n\nAvailable when `inactive==false`.",
+              "fieldName": "moreButtonActivated"
+            },
+            {
+              "name": "leftMoreButtonActivated",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "deprecated": "Use `moreButtonActivated`. Removed in 4.0.0.",
               "fieldName": "leftMoreButtonActivated"
             },
             {

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.2.0-next.1",
+  "version": "2.2.0-next.2",
   "type": "module",
   "repository": {
     "type": "git",