@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.148 → 2.0.0-next.149

package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import '../integration-tabs/integration-tabs.js';
 import '../../components/clock/clock.js';
 import '../../components/icon-button/icon-button.js';
@@ -7,13 +7,42 @@ import '../../icons/icon-user.js';
 import '../../icons/icon-configure.js';
 import '../../icons/icon-notification.js';
 import '../../icons/icon-home.js';
+import '../../icons/icon-screen-desk.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-link.js';
 /**
+ * `<obc-integration-bar-dropdown>` – A compact top-level integration header with a dropdown selector, status fields and system action buttons.
  *
- * @fires home-button-clicked - Fired when the home button is clicked
- * @fires dimming-button-clicked - Fired when the dimming button is clicked
- * @fires notification-button-clicked - Fired when the notification button is clicked
- * @fires user-button-clicked - Fired when the user button is clicked
- * @fires system-button-clicked - Fired when the system button is clicked
+ * @property showHomeButton - Home button at the left end of the bar.
+ * @property homeButtonActivated - Pressed styling for the home button.
+ * @availableWhen homeButtonActivated showHomeButton==true
+ * @property showLinkButton - Link button, between home and the selector.
+ * @property linkButtonActivated - Pressed styling for the link button.
+ * @availableWhen linkButtonActivated showLinkButton==true
+ * @property showClock - Renders the `clock` slot at the right end.
+ * @property showAlertButton - Alert button, first in the right-hand group.
+ * @property alertButtonActivated - Pressed styling for the alert button.
+ * @availableWhen alertButtonActivated showAlertButton==true
+ * @property showNotificationButton - Notification button, after the alert button.
+ * @property notificationButtonActivated - Pressed styling; the count badge only appears in this state.
+ * @availableWhen notificationButtonActivated showNotificationButton==true
+ * @property notificationCount - Number drawn in the count badge.
+ * @availableWhen notificationCount showNotificationButton==true && showNotificationCount==true && notificationButtonActivated==true
+ * @property showNotificationCount - Draws the count badge on the notification button.
+ * @availableWhen showNotificationCount showNotificationButton==true && notificationButtonActivated==true
+ * @property showScreenButton - Screen button, after the notification button.
+ * @property screenButtonActivated - Pressed styling for the screen button.
+ * @availableWhen screenButtonActivated showScreenButton==true
+ * @property showUserButton - User button, last before the clock.
+ * @property userButtonActivated - Pressed styling for the user button.
+ * @availableWhen userButtonActivated showUserButton==true
+ * @property showDimmingButton - Dimming button, between system and user.
+ * @property dimmingButtonActivated - Pressed styling for the dimming button.
+ * @availableWhen dimmingButtonActivated showDimmingButton==true
+ * @property showSystemButton - System button, after the screen button.
+ * @property systemButtonActivated - Pressed styling for the system button.
+ * @availableWhen systemButtonActivated showSystemButton==true
+ * @property nStatusFields - How many `status-icon-N`/`status-label-N` slot pairs are rendered.
  *
  * @slot vessel-selector - Vessel selector content
  * @slot status-label-1 - Label for the first status field
@@ -23,25 +52,61 @@ import '../../icons/icon-home.js';
  * @slot status-label-3 - Label for the third status field
  * @slot status-icon-3 - Icon for the third status field
  * @slot clock - Custom clock content, rendered when `showClock` is true
+ *
+ * @fires {CustomEvent} home-button-clicked - Fired when the home button is clicked
+ * @fires {CustomEvent} link-button-clicked - Fired when the link button is clicked
+ * @fires {CustomEvent} alert-button-clicked - Fired when the alert button is clicked
+ * @fires {CustomEvent} dimming-button-clicked - Fired when the dimming button is clicked
+ * @fires {CustomEvent} notification-button-clicked - Fired when the notification button is clicked
+ * @fires {CustomEvent} screen-button-clicked - Fired when the screen button is clicked
+ * @fires {CustomEvent} user-button-clicked - Fired when the user button is clicked
+ * @fires {CustomEvent} system-button-clicked - Fired when the system button is clicked
  * @experimental
  */
 export declare class ObcIntegrationBarDropdown extends LitElement {
+    /** Home button at the left end of the bar. */
     showHomeButton: boolean;
+    /** Pressed styling for the home button. */
     homeButtonActivated: boolean;
+    /** Link button, between home and the selector. */
+    showLinkButton: boolean;
+    /** Pressed styling for the link button. */
+    linkButtonActivated: boolean;
+    /** Renders the `clock` slot at the right end. */
     showClock: boolean;
+    /** Alert button, first in the right-hand group. */
+    showAlertButton: boolean;
+    /** Pressed styling for the alert button. */
+    alertButtonActivated: boolean;
+    /** Notification button, after the alert button. */
     showNotificationButton: boolean;
+    /** Pressed styling; the count badge only appears in this state. */
     notificationButtonActivated: boolean;
+    /** Number drawn in the count badge. */
     notificationCount: number;
+    /** Draws the count badge on the notification button. */
     showNotificationCount: boolean;
+    /** Screen button, after the notification button. */
+    showScreenButton: boolean;
+    /** Pressed styling for the screen button. */
+    screenButtonActivated: boolean;
+    /** User button, last before the clock. */
     showUserButton: boolean;
+    /** Pressed styling for the user button. */
     userButtonActivated: boolean;
+    /** Dimming button, between system and user. */
     showDimmingButton: boolean;
+    /** Pressed styling for the dimming button. */
     dimmingButtonActivated: boolean;
+    /** System button, after the screen button. */
     showSystemButton: boolean;
+    /** Pressed styling for the system button. */
     systemButtonActivated: boolean;
+    /** How many `status-icon-N`/`status-label-N` slot pairs are rendered. */
     nStatusFields: number;
     private renderStatusFields;
-    render(): import('lit-html').TemplateResult<1>;
+    private renderIconButton;
+    render(): TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }
 declare global {

package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-bar-dropdown.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,6CAA6C,CAAC;AACrD,OAAO,2CAA2C,CAAC;AACnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,SAAS,UAAS;IAClB,sBAAsB,UAAS;IAC/B,2BAA2B,UAAS;IACrC,iBAAiB,SAAK;IACrB,qBAAqB,UAAS;IAC9B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,iBAAiB,UAAS;IAC1B,sBAAsB,UAAS;IAC/B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC/B,aAAa,SAAK;IAE5C,OAAO,CAAC,kBAAkB;IAmBjB,MAAM;IA0Ef,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}
+{"version":3,"file":"integration-bar-dropdown.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAG9E,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,6CAA6C,CAAC;AACrD,OAAO,2CAA2C,CAAC;AACnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAKlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,SAAS,UAAS;IAClB,eAAe,UAAS;IACxB,oBAAoB,UAAS;IAC7B,sBAAsB,UAAS;IAC/B,2BAA2B,UAAS;IACrC,iBAAiB,SAAK;IACrB,qBAAqB,UAAS;IAC9B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC9B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,iBAAiB,UAAS;IAC1B,sBAAsB,UAAS;IAC/B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC/B,aAAa,SAAK;IAE5C,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,gBAAgB;IAmBf,MAAM;IA+Ff,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}

package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js

@@ -9,8 +9,12 @@ import "../../icons/icon-user.js";
 import "../../icons/icon-configure.js";
 import "../../icons/icon-notification.js";
 import "../../icons/icon-home.js";
+import "../../icons/icon-screen-desk.js";
+import "../../icons/icon-alerts.js";
+import "../../icons/icon-link.js";
 import { NotificationButtonStyle } from "../../components/notification-button/notification-button.js";
 import { property } from "lit/decorators.js";
+import { msg } from "@lit/localize";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,11 +30,17 @@ let ObcIntegrationBarDropdown = class extends LitElement {
     super(...arguments);
     this.showHomeButton = false;
     this.homeButtonActivated = false;
+    this.showLinkButton = false;
+    this.linkButtonActivated = false;
     this.showClock = false;
+    this.showAlertButton = false;
+    this.alertButtonActivated = false;
     this.showNotificationButton = false;
     this.notificationButtonActivated = false;
     this.notificationCount = 0;
     this.showNotificationCount = false;
+    this.showScreenButton = false;
+    this.screenButtonActivated = false;
     this.showUserButton = false;
     this.userButtonActivated = false;
     this.showDimmingButton = false;
@@ -57,60 +67,90 @@ let ObcIntegrationBarDropdown = class extends LitElement {
     }
     return html`<div class="status">${result}</div>`;
   }
+  // The event name stays a literal at each call site so `cem analyze` can read it.
+  renderIconButton(name, activated, label, icon, onClick) {
+    return html`<obc-icon-button
+      class="${name}-button"
+      part="${name}-button"
+      variant="integration"
+      aria-label=${label}
+      @click=${onClick}
+      ?activated=${activated}
+    >
+      ${icon}
+    </obc-icon-button>`;
+  }
   render() {
     return html`
       <div class="wrapper">
         <div class="left-side">
-          ${this.showHomeButton ? html`<obc-icon-button
-                class="home-button"
-                part="home-button"
-                variant="integration"
-                @click=${() => this.dispatchEvent(new CustomEvent("home-button-clicked"))}
-                ?activated=${this.homeButtonActivated}
-              >
-                <obi-home></obi-home>
-              </obc-icon-button>` : null}
+          ${this.showHomeButton ? this.renderIconButton(
+      "home",
+      this.homeButtonActivated,
+      msg("Home"),
+      html`<obi-home></obi-home>`,
+      () => this.dispatchEvent(new CustomEvent("home-button-clicked"))
+    ) : nothing}
+          ${this.showLinkButton ? this.renderIconButton(
+      "link",
+      this.linkButtonActivated,
+      msg("Link"),
+      html`<obi-link></obi-link>`,
+      () => this.dispatchEvent(new CustomEvent("link-button-clicked"))
+    ) : nothing}
           <slot name="vessel-selector"></slot>
           ${this.renderStatusFields()}
         </div>
         <div class="right-side">
-          ${this.showNotificationButton ? html`<obc-notification-button
+          ${this.showAlertButton ? this.renderIconButton(
+      "alert",
+      this.alertButtonActivated,
+      msg("Alerts"),
+      html`<obi-alerts></obi-alerts>`,
+      () => this.dispatchEvent(new CustomEvent("alert-button-clicked"))
+    ) : nothing}
+          ${this.showNotificationButton ? (
+      // TODO(designer): keep the Enhanced badge button here, or match the
+      // sibling bar's plain notification icon button? (#624)
+      html`<obc-notification-button
                 @click=${() => this.dispatchEvent(
-      new CustomEvent("notification-button-clicked")
-    )}
+        new CustomEvent("notification-button-clicked")
+      )}
                 .buttonStyle=${NotificationButtonStyle.Enhanced}
                 .showCount=${this.showNotificationCount}
                 .count=${this.notificationCount}
                 ?isActive=${this.notificationButtonActivated}
-              ></obc-notification-button>` : nothing}
-          ${this.showSystemButton ? html`<obc-icon-button
-                class="system-button"
-                part="system-button"
-                variant="integration"
-                @click=${() => this.dispatchEvent(new CustomEvent("system-button-clicked"))}
-                ?activated=${this.systemButtonActivated}
-              >
-                <obi-configure></obi-configure>
-              </obc-icon-button>` : null}
-          ${this.showDimmingButton ? html`<obc-icon-button
-                class="dimming-button"
-                part="dimming-button"
-                variant="integration"
-                @click=${() => this.dispatchEvent(new CustomEvent("dimming-button-clicked"))}
-                ?activated=${this.dimmingButtonActivated}
-              >
-                <obi-palette-day-night-iec></obi-palette-day-night-iec>
-              </obc-icon-button>` : null}
-          ${this.showUserButton ? html`<obc-icon-button
-                class="user-button"
-                part="user-button"
-                variant="integration"
-                @click=${() => this.dispatchEvent(new CustomEvent("user-button-clicked"))}
-                ?activated=${this.userButtonActivated}
-              >
-                <obi-user></obi-user>
-              </obc-icon-button>` : null}
-          ${this.showClock ? html`<slot name="clock"></slot>` : null}
+              ></obc-notification-button>`
+    ) : nothing}
+          ${this.showScreenButton ? this.renderIconButton(
+      "screen",
+      this.screenButtonActivated,
+      msg("Screen"),
+      html`<obi-screen-desk></obi-screen-desk>`,
+      () => this.dispatchEvent(new CustomEvent("screen-button-clicked"))
+    ) : nothing}
+          ${this.showSystemButton ? this.renderIconButton(
+      "system",
+      this.systemButtonActivated,
+      msg("System"),
+      html`<obi-configure></obi-configure>`,
+      () => this.dispatchEvent(new CustomEvent("system-button-clicked"))
+    ) : nothing}
+          ${this.showDimmingButton ? this.renderIconButton(
+      "dimming",
+      this.dimmingButtonActivated,
+      msg("Dimming"),
+      html`<obi-palette-day-night-iec></obi-palette-day-night-iec>`,
+      () => this.dispatchEvent(new CustomEvent("dimming-button-clicked"))
+    ) : nothing}
+          ${this.showUserButton ? this.renderIconButton(
+      "user",
+      this.userButtonActivated,
+      msg("User"),
+      html`<obi-user></obi-user>`,
+      () => this.dispatchEvent(new CustomEvent("user-button-clicked"))
+    ) : nothing}
+          ${this.showClock ? html`<slot name="clock"></slot>` : nothing}
         </div>
       </div>
     `;
@@ -123,9 +163,21 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "homeButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "showLinkButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "linkButtonActivated", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showClock", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "showAlertButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "alertButtonActivated", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showNotificationButton", 2);
@@ -138,6 +190,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showNotificationCount", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "showScreenButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "screenButtonActivated", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showUserButton", 2);

package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-bar-dropdown.js","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-bar-dropdown.css?inline';\nimport '../integration-tabs/integration-tabs.js';\nimport '../../components/clock/clock.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-user.js';\nimport '../../icons/icon-configure.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-home.js';\nimport {NotificationButtonStyle} from '../../components/notification-button/notification-button.js';\nimport {property} from 'lit/decorators.js';\n\n/**\n *\n * @fires home-button-clicked - Fired when the home button is clicked\n * @fires dimming-button-clicked - Fired when the dimming button is clicked\n * @fires notification-button-clicked - Fired when the notification button is clicked\n * @fires user-button-clicked - Fired when the user button is clicked\n * @fires system-button-clicked - Fired when the system button is clicked\n *\n * @slot vessel-selector - Vessel selector content\n * @slot status-label-1 - Label for the first status field\n * @slot status-icon-1 - Icon for the first status field\n * @slot status-label-2 - Label for the second status field\n * @slot status-icon-2 - Icon for the second status field\n * @slot status-label-3 - Label for the third status field\n * @slot status-icon-3 - Icon for the third status field\n * @slot clock - Custom clock content, rendered when `showClock` is true\n * @experimental\n */\n@customElement('obc-integration-bar-dropdown')\nexport class ObcIntegrationBarDropdown extends LitElement {\n  @property({type: Boolean}) showHomeButton = false;\n  @property({type: Boolean}) homeButtonActivated = false;\n  @property({type: Boolean}) showClock = false;\n  @property({type: Boolean}) showNotificationButton = false;\n  @property({type: Boolean}) notificationButtonActivated = false;\n  @property({type: Number}) notificationCount = 0;\n  @property({type: Boolean}) showNotificationCount = false;\n  @property({type: Boolean}) showUserButton = false;\n  @property({type: Boolean}) userButtonActivated = false;\n  @property({type: Boolean}) showDimmingButton = false;\n  @property({type: Boolean}) dimmingButtonActivated = false;\n  @property({type: Boolean}) showSystemButton = false;\n  @property({type: Boolean}) systemButtonActivated = false;\n  @property({type: Number}) nStatusFields = 0;\n\n  private renderStatusFields() {\n    if (this.nStatusFields <= 0) {\n      return nothing;\n    }\n    const result = [];\n    for (let i = 0; i < this.nStatusFields; i++) {\n      if (i > 0) {\n        result.push(html`<div class=\"divider\"></div>`);\n      }\n      result.push(html`\n        <div class=\"status-item\">\n          <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot>\n          <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot>\n        </div>\n      `);\n    }\n    return html`<div class=\"status\">${result}</div>`;\n  }\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"left-side\">\n          ${this.showHomeButton\n            ? html`<obc-icon-button\n                class=\"home-button\"\n                part=\"home-button\"\n                variant=\"integration\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('home-button-clicked'))}\n                ?activated=${this.homeButtonActivated}\n              >\n                <obi-home></obi-home>\n              </obc-icon-button>`\n            : null}\n          <slot name=\"vessel-selector\"></slot>\n          ${this.renderStatusFields()}\n        </div>\n        <div class=\"right-side\">\n          ${this.showNotificationButton\n            ? html`<obc-notification-button\n                @click=${() =>\n                  this.dispatchEvent(\n                    new CustomEvent('notification-button-clicked')\n                  )}\n                .buttonStyle=${NotificationButtonStyle.Enhanced}\n                .showCount=${this.showNotificationCount}\n                .count=${this.notificationCount}\n                ?isActive=${this.notificationButtonActivated}\n              ></obc-notification-button>`\n            : nothing}\n          ${this.showSystemButton\n            ? html`<obc-icon-button\n                class=\"system-button\"\n                part=\"system-button\"\n                variant=\"integration\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('system-button-clicked'))}\n                ?activated=${this.systemButtonActivated}\n              >\n                <obi-configure></obi-configure>\n              </obc-icon-button>`\n            : null}\n          ${this.showDimmingButton\n            ? html`<obc-icon-button\n                class=\"dimming-button\"\n                part=\"dimming-button\"\n                variant=\"integration\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('dimming-button-clicked'))}\n                ?activated=${this.dimmingButtonActivated}\n              >\n                <obi-palette-day-night-iec></obi-palette-day-night-iec>\n              </obc-icon-button>`\n            : null}\n          ${this.showUserButton\n            ? html`<obc-icon-button\n                class=\"user-button\"\n                part=\"user-button\"\n                variant=\"integration\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('user-button-clicked'))}\n                ?activated=${this.userButtonActivated}\n              >\n                <obi-user></obi-user>\n              </obc-icon-button>`\n            : null}\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-bar-dropdown': ObcIntegrationBarDropdown;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"integration-bar-dropdown.js","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-bar-dropdown.css?inline';\nimport '../integration-tabs/integration-tabs.js';\nimport '../../components/clock/clock.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-user.js';\nimport '../../icons/icon-configure.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-screen-desk.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-link.js';\nimport {NotificationButtonStyle} from '../../components/notification-button/notification-button.js';\nimport {property} from 'lit/decorators.js';\nimport {msg} from '@lit/localize';\n\n/**\n * `<obc-integration-bar-dropdown>` – A compact top-level integration header with a dropdown selector, status fields and system action buttons.\n *\n * @property showHomeButton - Home button at the left end of the bar.\n * @property homeButtonActivated - Pressed styling for the home button.\n * @availableWhen homeButtonActivated showHomeButton==true\n * @property showLinkButton - Link button, between home and the selector.\n * @property linkButtonActivated - Pressed styling for the link button.\n * @availableWhen linkButtonActivated showLinkButton==true\n * @property showClock - Renders the `clock` slot at the right end.\n * @property showAlertButton - Alert button, first in the right-hand group.\n * @property alertButtonActivated - Pressed styling for the alert button.\n * @availableWhen alertButtonActivated showAlertButton==true\n * @property showNotificationButton - Notification button, after the alert button.\n * @property notificationButtonActivated - Pressed styling; the count badge only appears in this state.\n * @availableWhen notificationButtonActivated showNotificationButton==true\n * @property notificationCount - Number drawn in the count badge.\n * @availableWhen notificationCount showNotificationButton==true && showNotificationCount==true && notificationButtonActivated==true\n * @property showNotificationCount - Draws the count badge on the notification button.\n * @availableWhen showNotificationCount showNotificationButton==true && notificationButtonActivated==true\n * @property showScreenButton - Screen button, after the notification button.\n * @property screenButtonActivated - Pressed styling for the screen button.\n * @availableWhen screenButtonActivated showScreenButton==true\n * @property showUserButton - User button, last before the clock.\n * @property userButtonActivated - Pressed styling for the user button.\n * @availableWhen userButtonActivated showUserButton==true\n * @property showDimmingButton - Dimming button, between system and user.\n * @property dimmingButtonActivated - Pressed styling for the dimming button.\n * @availableWhen dimmingButtonActivated showDimmingButton==true\n * @property showSystemButton - System button, after the screen button.\n * @property systemButtonActivated - Pressed styling for the system button.\n * @availableWhen systemButtonActivated showSystemButton==true\n * @property nStatusFields - How many `status-icon-N`/`status-label-N` slot pairs are rendered.\n *\n * @slot vessel-selector - Vessel selector content\n * @slot status-label-1 - Label for the first status field\n * @slot status-icon-1 - Icon for the first status field\n * @slot status-label-2 - Label for the second status field\n * @slot status-icon-2 - Icon for the second status field\n * @slot status-label-3 - Label for the third status field\n * @slot status-icon-3 - Icon for the third status field\n * @slot clock - Custom clock content, rendered when `showClock` is true\n *\n * @fires {CustomEvent} home-button-clicked - Fired when the home button is clicked\n * @fires {CustomEvent} link-button-clicked - Fired when the link button is clicked\n * @fires {CustomEvent} alert-button-clicked - Fired when the alert button is clicked\n * @fires {CustomEvent} dimming-button-clicked - Fired when the dimming button is clicked\n * @fires {CustomEvent} notification-button-clicked - Fired when the notification button is clicked\n * @fires {CustomEvent} screen-button-clicked - Fired when the screen button is clicked\n * @fires {CustomEvent} user-button-clicked - Fired when the user button is clicked\n * @fires {CustomEvent} system-button-clicked - Fired when the system button is clicked\n * @experimental\n */\n@customElement('obc-integration-bar-dropdown')\nexport class ObcIntegrationBarDropdown extends LitElement {\n  @property({type: Boolean}) showHomeButton = false;\n  @property({type: Boolean}) homeButtonActivated = false;\n  @property({type: Boolean}) showLinkButton = false;\n  @property({type: Boolean}) linkButtonActivated = false;\n  @property({type: Boolean}) showClock = false;\n  @property({type: Boolean}) showAlertButton = false;\n  @property({type: Boolean}) alertButtonActivated = false;\n  @property({type: Boolean}) showNotificationButton = false;\n  @property({type: Boolean}) notificationButtonActivated = false;\n  @property({type: Number}) notificationCount = 0;\n  @property({type: Boolean}) showNotificationCount = false;\n  @property({type: Boolean}) showScreenButton = false;\n  @property({type: Boolean}) screenButtonActivated = false;\n  @property({type: Boolean}) showUserButton = false;\n  @property({type: Boolean}) userButtonActivated = false;\n  @property({type: Boolean}) showDimmingButton = false;\n  @property({type: Boolean}) dimmingButtonActivated = false;\n  @property({type: Boolean}) showSystemButton = false;\n  @property({type: Boolean}) systemButtonActivated = false;\n  @property({type: Number}) nStatusFields = 0;\n\n  private renderStatusFields() {\n    if (this.nStatusFields <= 0) {\n      return nothing;\n    }\n    const result = [];\n    for (let i = 0; i < this.nStatusFields; i++) {\n      if (i > 0) {\n        result.push(html`<div class=\"divider\"></div>`);\n      }\n      result.push(html`\n        <div class=\"status-item\">\n          <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot>\n          <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot>\n        </div>\n      `);\n    }\n    return html`<div class=\"status\">${result}</div>`;\n  }\n\n  // The event name stays a literal at each call site so `cem analyze` can read it.\n  private renderIconButton(\n    name: string,\n    activated: boolean,\n    label: string,\n    icon: TemplateResult,\n    onClick: () => void\n  ) {\n    return html`<obc-icon-button\n      class=\"${name}-button\"\n      part=\"${name}-button\"\n      variant=\"integration\"\n      aria-label=${label}\n      @click=${onClick}\n      ?activated=${activated}\n    >\n      ${icon}\n    </obc-icon-button>`;\n  }\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"left-side\">\n          ${this.showHomeButton\n            ? this.renderIconButton(\n                'home',\n                this.homeButtonActivated,\n                msg('Home'),\n                html`<obi-home></obi-home>`,\n                () => this.dispatchEvent(new CustomEvent('home-button-clicked'))\n              )\n            : nothing}\n          ${this.showLinkButton\n            ? this.renderIconButton(\n                'link',\n                this.linkButtonActivated,\n                msg('Link'),\n                html`<obi-link></obi-link>`,\n                () => this.dispatchEvent(new CustomEvent('link-button-clicked'))\n              )\n            : nothing}\n          <slot name=\"vessel-selector\"></slot>\n          ${this.renderStatusFields()}\n        </div>\n        <div class=\"right-side\">\n          ${this.showAlertButton\n            ? this.renderIconButton(\n                'alert',\n                this.alertButtonActivated,\n                msg('Alerts'),\n                html`<obi-alerts></obi-alerts>`,\n                () =>\n                  this.dispatchEvent(new CustomEvent('alert-button-clicked'))\n              )\n            : nothing}\n          ${this.showNotificationButton\n            ? // TODO(designer): keep the Enhanced badge button here, or match the\n              // sibling bar's plain notification icon button? (#624)\n              html`<obc-notification-button\n                @click=${() =>\n                  this.dispatchEvent(\n                    new CustomEvent('notification-button-clicked')\n                  )}\n                .buttonStyle=${NotificationButtonStyle.Enhanced}\n                .showCount=${this.showNotificationCount}\n                .count=${this.notificationCount}\n                ?isActive=${this.notificationButtonActivated}\n              ></obc-notification-button>`\n            : nothing}\n          ${this.showScreenButton\n            ? this.renderIconButton(\n                'screen',\n                this.screenButtonActivated,\n                msg('Screen'),\n                html`<obi-screen-desk></obi-screen-desk>`,\n                () =>\n                  this.dispatchEvent(new CustomEvent('screen-button-clicked'))\n              )\n            : nothing}\n          ${this.showSystemButton\n            ? this.renderIconButton(\n                'system',\n                this.systemButtonActivated,\n                msg('System'),\n                html`<obi-configure></obi-configure>`,\n                () =>\n                  this.dispatchEvent(new CustomEvent('system-button-clicked'))\n              )\n            : nothing}\n          ${this.showDimmingButton\n            ? this.renderIconButton(\n                'dimming',\n                this.dimmingButtonActivated,\n                msg('Dimming'),\n                html`<obi-palette-day-night-iec></obi-palette-day-night-iec>`,\n                () =>\n                  this.dispatchEvent(new CustomEvent('dimming-button-clicked'))\n              )\n            : nothing}\n          ${this.showUserButton\n            ? this.renderIconButton(\n                'user',\n                this.userButtonActivated,\n                msg('User'),\n                html`<obi-user></obi-user>`,\n                () => this.dispatchEvent(new CustomEvent('user-button-clicked'))\n              )\n            : nothing}\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-bar-dropdown': ObcIntegrationBarDropdown;\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.148",
+  "version": "2.0.0-next.149",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/icon-button/icon-button.spec.ts

@@ -0,0 +1,52 @@
+import {describe, expect, it} from 'vitest';
+import './icon-button.js';
+import {ObcIconButton} from './icon-button.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+
+describe('obc-icon-button accessible name', () => {
+  async function setup(template: ReturnType<typeof html>) {
+    const screen = render(template);
+    const el = screen.baseElement.querySelector(
+      'obc-icon-button'
+    ) as ObcIconButton;
+    await el.updateComplete;
+    return el;
+  }
+
+  function shadowButton(el: ObcIconButton) {
+    return el.shadowRoot!.querySelector('button')!;
+  }
+
+  it('forwards the host aria-label to the shadow button', async () => {
+    const el = await setup(
+      html`<obc-icon-button aria-label="Play"></obc-icon-button>`
+    );
+
+    expect(shadowButton(el).getAttribute('aria-label')).toBe('Play');
+  });
+
+  it('follows later changes to the host aria-label', async () => {
+    const el = await setup(
+      html`<obc-icon-button aria-label="Play"></obc-icon-button>`
+    );
+
+    el.setAttribute('aria-label', 'Pause');
+    await el.updateComplete;
+
+    expect(shadowButton(el).getAttribute('aria-label')).toBe('Pause');
+  });
+
+  it('does not forward aria-labelledby, which cannot resolve across the shadow boundary', async () => {
+    const el = await setup(
+      html`<obc-icon-button
+        aria-label="Play"
+        aria-labelledby="external-label"
+      ></obc-icon-button>`
+    );
+
+    const button = shadowButton(el);
+    expect(button.hasAttribute('aria-labelledby')).toBe(false);
+    expect(button.getAttribute('aria-label')).toBe('Play');
+  });
+});

package/src/components/icon-button/icon-button.ts

@@ -2,6 +2,7 @@ import {LitElement, html, nothing, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import iconStyle from './icon-button.css?inline';
 import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import {customElement} from '../../decorator.js';
 import {degToRad} from '../../svghelpers/math.js';
 
@@ -96,6 +97,7 @@ export enum IconButtonVariant {
  *   If undefined, no progress indicator is shown.
  * @property hasLabel - If true, displays a label below the icon using the `label` slot.
  * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.
+ * @property ariaLabel - Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.
  * @slot - Icon slot (default): Place an icon such as <obi-search> here.
  * @slot label - Optional label shown below the icon when `hasLabel` is true.
  * @fires click - Fired when the button is clicked (if not disabled).
@@ -130,6 +132,10 @@ export class ObcIconButton extends LitElement {
 
   @property({type: Boolean, attribute: false}) showDivider = true;
 
+  // Reactive so a consumer swapping the name (Play → Pause) re-renders the shadow button.
+  @property({type: String, attribute: 'aria-label'})
+  override ariaLabel: string | null = null;
+
   get progressSpinner() {
     if (this.progress === undefined) {
       return nothing;
@@ -200,6 +206,7 @@ export class ObcIconButton extends LitElement {
           'hide-divider': !this.showDivider,
         })}
         ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.ariaLabel ?? undefined)}
         part="wrapper"
       >
         ${this.progress !== undefined ? this.progressSpinner : nothing}

package/src/components/top-bar/top-bar.ts

@@ -1,6 +1,7 @@
 import {LitElement, html, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {msg} from '@lit/localize';
 import compentStyle from './top-bar.css?inline';
 import '../icon-button/icon-button.js';
 import '../clock/clock.js';
@@ -429,6 +430,7 @@ export class ObcTopBar extends LitElement {
         html`<div class="menu-button">
           <obc-icon-button
             variant="flat"
+            aria-label=${msg('Close')}
             @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}
             @pointerup=${() => this.leftButtonUp()}
             @pointerleave=${() => this.leftButtonLeave()}
@@ -440,6 +442,7 @@ export class ObcTopBar extends LitElement {
       leftGroup.push(
         html`<obc-icon-button
           variant="flat"
+          aria-label=${msg('Back')}
           @click=${() => this.dispatchEvent(new CustomEvent('back'))}
         >
           <obi-arrow-left-google></obi-arrow-left-google>
@@ -463,6 +466,9 @@ export class ObcTopBar extends LitElement {
           html`<div class="menu-button ${this.wideMenuButton ? 'wide' : null}">
             <obc-icon-button
               variant="flat"
+              aria-label=${this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu
+                ? msg('Menu')
+                : msg('Home')}
               @pointerdown=${() =>
                 this.leftButtonDown(new CustomEvent('menu-button-clicked'))}
               @pointerup=${() => this.leftButtonUp()}
@@ -553,6 +559,7 @@ export class ObcTopBar extends LitElement {
                 class="dimming-button"
                 part="dimming-button"
                 variant="flat"
+                aria-label=${msg('Dimming')}
                 @click=${this.dimmingButtonClicked}
                 ?activated=${this.dimmingButtonActivated}
               >
@@ -564,6 +571,7 @@ export class ObcTopBar extends LitElement {
                 class="user-button"
                 variant="flat"
                 part="user-button"
+                aria-label=${msg('User')}
                 @click=${this.userButtonClicked}
                 ?activated=${this.userButtonActivated}
                 ?disabled=${this.userButtonDisabled}
@@ -576,6 +584,7 @@ export class ObcTopBar extends LitElement {
                 class="apps-button"
                 variant="flat"
                 part="apps-button"
+                aria-label=${msg('Apps')}
                 @click=${this.appsButtonClicked}
                 ?activated=${this.appsButtonActivated}
               >
@@ -588,6 +597,7 @@ export class ObcTopBar extends LitElement {
                 class="left-more-button"
                 part="left-more-button"
                 variant="flat"
+                aria-label=${msg('More')}
                 @click=${this.leftMoreButtonClicked}
                 ?activated=${this.leftMoreButtonActivated}
               >

package/src/generated/locales/es-419.ts

@@ -54,6 +54,14 @@
 'sdb1595f5c742dfbb': `Input`,
 's37cbecaec58e2192': `Mode`,
 's065289e6cba017c6': `Transcribe`,
+'s5e8250fb85d64c23': `Close`,
+'sc16e00a7a8b2fde2': `Back`,
+'s6d8c02aee480af7a': `Menu`,
+'s6abb1cd87fe0114e': `Home`,
+'s18c92783d4042bbc': `Dimming`,
+'sa48f81f001b893d2': `User`,
+'sf7eeef8b4d6e602d': `Apps`,
+'s37a9e8aec5713460': `More`,
 's76b886a513fca0d8': `Username is required`,
 'seb1d48da15e775c9': `Password is required`,
 's5e27738a2e8eb763': `Sign in`,
@@ -61,8 +69,10 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
-'sa48f81f001b893d2': `User`,
 's7cfe12cd14df9950': `Sign out`,
+'s5be3c6d61cd9182f': `Notifications`,
+'s744d993d03f29851': `Screen`,
+'sa81e2cdaf6921adc': `System`,
 's3374200692e9843d': `No alerts`,
 's6686fcc6d2c8f0bd': `Note`,
 'sfbc33dd48f23752c': `Tag ID`,

package/src/generated/locales/fi-FI.ts

@@ -64,6 +64,14 @@
 'sdb1595f5c742dfbb': `Input`,
 's37cbecaec58e2192': `Mode`,
 's065289e6cba017c6': `Transcribe`,
+'s5e8250fb85d64c23': `Close`,
+'sc16e00a7a8b2fde2': `Back`,
+'s6d8c02aee480af7a': `Menu`,
+'s6abb1cd87fe0114e': `Home`,
+'s18c92783d4042bbc': `Dimming`,
+'sa48f81f001b893d2': `User`,
+'sf7eeef8b4d6e602d': `Apps`,
+'s37a9e8aec5713460': `More`,
 's76b886a513fca0d8': `Username is required`,
 'seb1d48da15e775c9': `Password is required`,
 's5e27738a2e8eb763': `Sign in`,
@@ -71,8 +79,10 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
-'sa48f81f001b893d2': `User`,
 's7cfe12cd14df9950': `Sign out`,
+'s5be3c6d61cd9182f': `Notifications`,
+'s744d993d03f29851': `Screen`,
+'sa81e2cdaf6921adc': `System`,
 's3374200692e9843d': `No alerts`,
     };