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

package/custom-elements.json

@@ -6192,7 +6192,7 @@
         {
           "kind": "variable",
           "name": "ObcIconButton",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.variant = \"normal\"; this.activated = false; this.cornerLeft = false; this.cornerRight = false; this.activeColor = false; this.wide = false; this.disabled = false; this.progress = void 0; this.hasLabel = false; this.showDivider = true; } get progressSpinner() { if (this.progress === void 0) { return nothing; } if (this.progress === 100) { return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#325B9A\" stroke-width=\"4\" fill=\"none\" /> </svg> </div>`; } const angleRad = degToRad(this.progress * 0.95 * 3.6); const x = 20 + 18 * Math.sin(angleRad); const y = 20 - 18 * Math.cos(angleRad); const largeArcFlag = angleRad > Math.PI ? 1 : 0; return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"var(--container-backdrop-color)\" stroke-width=\"4\" fill=\"none\" /> <path d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\" stroke=\"var(--instrument-enhanced-secondary-color)\" stroke-width=\"4\" stroke-linecap=\"round\" /> </svg> </div>`; } render() { return html` <button class=${classMap({ wrapper: true, [\"variant-\" + this.variant]: true, activated: this.activated, \"corner-left\": this.cornerLeft, \"corner-right\": this.cornerRight, \"active-color\": this.activeColor, \"has-label\": this.hasLabel, wide: this.wide, progress: this.progress !== void 0, \"hide-divider\": !this.showDivider })} ?disabled=${this.disabled} part=\"wrapper\" > ${this.progress !== void 0 ? this.progressSpinner : nothing} <div class=\"visible-wrapper\" part=\"visible-wrapper\"> <div class=\"icon\" part=\"icon\"> <slot></slot> </div> </div> ${this.hasLabel ? html`<div class=\"label\" part=\"label\"> <slot name=\"label\"></slot> </div>` : nothing} </button> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.variant = \"normal\"; this.activated = false; this.cornerLeft = false; this.cornerRight = false; this.activeColor = false; this.wide = false; this.disabled = false; this.progress = void 0; this.hasLabel = false; this.showDivider = true; this.ariaLabel = null; } get progressSpinner() { if (this.progress === void 0) { return nothing; } if (this.progress === 100) { return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"#325B9A\" stroke-width=\"4\" fill=\"none\" /> </svg> </div>`; } const angleRad = degToRad(this.progress * 0.95 * 3.6); const x = 20 + 18 * Math.sin(angleRad); const y = 20 - 18 * Math.cos(angleRad); const largeArcFlag = angleRad > Math.PI ? 1 : 0; return html`<div class=\"progress-spinner\"> <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" > <circle cx=\"20\" cy=\"20\" r=\"18\" stroke=\"var(--container-backdrop-color)\" stroke-width=\"4\" fill=\"none\" /> <path d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\" stroke=\"var(--instrument-enhanced-secondary-color)\" stroke-width=\"4\" stroke-linecap=\"round\" /> </svg> </div>`; } render() { return html` <button class=${classMap({ wrapper: true, [\"variant-\" + this.variant]: true, activated: this.activated, \"corner-left\": this.cornerLeft, \"corner-right\": this.cornerRight, \"active-color\": this.activeColor, \"has-label\": this.hasLabel, wide: this.wide, progress: this.progress !== void 0, \"hide-divider\": !this.showDivider })} ?disabled=${this.disabled} aria-label=${ifDefined(this.ariaLabel ?? void 0)} part=\"wrapper\" > ${this.progress !== void 0 ? this.progressSpinner : nothing} <div class=\"visible-wrapper\" part=\"visible-wrapper\"> <div class=\"icon\" part=\"icon\"> <slot></slot> </div> </div> ${this.hasLabel ? html`<div class=\"label\" part=\"label\"> <slot name=\"label\"></slot> </div>` : nothing} </button> `; } }"
         }
       ],
       "exports": [
@@ -8220,7 +8220,7 @@
         {
           "kind": "variable",
           "name": "ObcTopBar",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.appTitle = \"App\"; this.pageName = \"Page\"; this.menuButtonIcon = \"menu\"; this.menuButtonActivated = false; this.dimmingButtonActivated = false; this.appsButtonActivated = false; this.leftMoreButtonActivated = false; this.userButtonActivated = false; this.userButtonDisabled = false; this.tall = false; this.wideMenuButton = false; this.showAppsButton = false; this.showDimmingButton = false; this.showUserButton = false; this.showClock = false; this.showDate = false; this.showAppIcon = false; this.inactive = false; this.appButtonBreakpointPx = 500; this.dimmingButtonBreakpointPx = 500; this.appTitleBreakpointPx = 500; this.userButtonBreakpointPx = 500; this.appIconBreakpointPx = 500; this.settings = false; this.breadcrumbItems = []; this.leftButtonEvent = null; this.leftButtonTimeout = null; this.isLeftButtonDown = false; this.isEmergencyBrightness = false; } dimmingButtonClicked() { this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\")); } appsButtonClicked() { this.dispatchEvent(new CustomEvent(\"apps-button-clicked\")); } leftMoreButtonClicked() { this.dispatchEvent(new CustomEvent(\"left-more-button-clicked\")); } userButtonClicked() { this.dispatchEvent(new CustomEvent(\"user-button-clicked\")); } leftButtonDown(event) { this.leftButtonEvent = event; this.isLeftButtonDown = true; this.leftButtonTimeout = setTimeout(() => { this.leftButtonEvent = null; this.dispatchEvent(new CustomEvent(\"emergency-brightness-start\")); this.isEmergencyBrightness = true; }, 500); } leftButtonUp() { if (this.leftButtonEvent) { this.dispatchEvent(this.leftButtonEvent); this.leftButtonEvent = null; } if (this.leftButtonTimeout) { clearTimeout(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } leftButtonLeave() { if (!this.isLeftButtonDown) return; if (this.leftButtonTimeout) { clearInterval(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } render() { const leftGroup = []; if (this.settings) { leftGroup.push( html`<div class=\"menu-button\"> <obc-icon-button variant=\"flat\" @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"close\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} > <obi-close-google></obi-close-google> </obc-icon-button> </div>` ); leftGroup.push( html`<obc-icon-button variant=\"flat\" @click=${() => this.dispatchEvent(new CustomEvent(\"back\"))} > <obi-arrow-left-google></obi-arrow-left-google> </obc-icon-button>` ); leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); leftGroup.push( html`<obc-breadcrumb .items=${this.breadcrumbItems} @breadcrumb-click=${(e) => this.dispatchEvent( new CustomEvent(\"breadcrumb-click\", { detail: e.detail }) )} ></obc-breadcrumb>` ); } else { if (!this.inactive) { leftGroup.push( html`<div class=\"menu-button ${this.wideMenuButton ? \"wide\" : null}\"> <obc-icon-button variant=\"flat\" @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"menu-button-clicked\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} ?activated=${this.menuButtonActivated} > ${this.menuButtonIcon === \"menu\" ? html`<obi-menu-iec></obi-menu-iec>` : html`<obi-home></obi-home>`} </obc-icon-button> </div>` ); } if (this.showAppIcon) { leftGroup.push( html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>` ); } leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); 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 ); return html` <style> @media (max-width: ${breakpointMoreButton}px) { .left-more-button { display: revert !important; } .group.left > * { margin-right: 4px; margin-left: 4px; } } @media (max-width: ${this.appButtonBreakpointPx}px) { .apps-button { display: none; } } @media (max-width: ${this.dimmingButtonBreakpointPx}px) { .dimming-button { display: none; } } @media (max-width: ${this.appTitleBreakpointPx}px) { .title { display: none !important; /* the stylesheet's display wins over this inline rule otherwise */ } } @media (max-width: ${this.userButtonBreakpointPx}px) { .user-button { display: none; } } @media (max-width: ${this.appIconBreakpointPx}px) { .app-icon { display: none; } } </style> <nav class=${classMap({ wrapper: true, inactive: this.inactive, settings: this.settings, tall: this.tall })} role=\"menubar\" > <div class=\"left group\">${leftGroup}</div> <div class=\"right group\"> <div class=\"alert-container\"> <slot name=\"alerts\"></slot> </div> ${this.showDimmingButton && !this.inactive ? html`<obc-icon-button class=\"dimming-button\" part=\"dimming-button\" variant=\"flat\" @click=${this.dimmingButtonClicked} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton && !this.inactive ? html`<obc-icon-button class=\"user-button\" variant=\"flat\" part=\"user-button\" @click=${this.userButtonClicked} ?activated=${this.userButtonActivated} ?disabled=${this.userButtonDisabled} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showAppsButton && !this.inactive ? html`<obc-icon-button class=\"apps-button\" variant=\"flat\" part=\"apps-button\" @click=${this.appsButtonClicked} ?activated=${this.appsButtonActivated} > <obi-applications></obi-applications> </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\" variant=\"flat\" @click=${this.leftMoreButtonClicked} ?activated=${this.leftMoreButtonActivated} > <obi-more-vertical-google></obi-more-vertical-google> </obc-icon-button>` : null} </div> </nav> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.appTitle = \"App\"; this.pageName = \"Page\"; this.menuButtonIcon = \"menu\"; this.menuButtonActivated = false; this.dimmingButtonActivated = false; this.appsButtonActivated = false; this.leftMoreButtonActivated = false; this.userButtonActivated = false; this.userButtonDisabled = false; this.tall = false; this.wideMenuButton = false; this.showAppsButton = false; this.showDimmingButton = false; this.showUserButton = false; this.showClock = false; this.showDate = false; this.showAppIcon = false; this.inactive = false; this.appButtonBreakpointPx = 500; this.dimmingButtonBreakpointPx = 500; this.appTitleBreakpointPx = 500; this.userButtonBreakpointPx = 500; this.appIconBreakpointPx = 500; this.settings = false; this.breadcrumbItems = []; this.leftButtonEvent = null; this.leftButtonTimeout = null; this.isLeftButtonDown = false; this.isEmergencyBrightness = false; } dimmingButtonClicked() { this.dispatchEvent(new CustomEvent(\"dimming-button-clicked\")); } appsButtonClicked() { this.dispatchEvent(new CustomEvent(\"apps-button-clicked\")); } leftMoreButtonClicked() { this.dispatchEvent(new CustomEvent(\"left-more-button-clicked\")); } userButtonClicked() { this.dispatchEvent(new CustomEvent(\"user-button-clicked\")); } leftButtonDown(event) { this.leftButtonEvent = event; this.isLeftButtonDown = true; this.leftButtonTimeout = setTimeout(() => { this.leftButtonEvent = null; this.dispatchEvent(new CustomEvent(\"emergency-brightness-start\")); this.isEmergencyBrightness = true; }, 500); } leftButtonUp() { if (this.leftButtonEvent) { this.dispatchEvent(this.leftButtonEvent); this.leftButtonEvent = null; } if (this.leftButtonTimeout) { clearTimeout(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } leftButtonLeave() { if (!this.isLeftButtonDown) return; if (this.leftButtonTimeout) { clearInterval(this.leftButtonTimeout); this.leftButtonTimeout = null; } if (this.isEmergencyBrightness) { this.dispatchEvent(new CustomEvent(\"emergency-brightness-stop\")); this.isEmergencyBrightness = false; } this.isLeftButtonDown = false; } render() { const leftGroup = []; if (this.settings) { leftGroup.push( 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()} > <obi-close-google></obi-close-google> </obc-icon-button> </div>` ); 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> </obc-icon-button>` ); leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); leftGroup.push( html`<obc-breadcrumb .items=${this.breadcrumbItems} @breadcrumb-click=${(e) => this.dispatchEvent( new CustomEvent(\"breadcrumb-click\", { detail: e.detail }) )} ></obc-breadcrumb>` ); } else { if (!this.inactive) { leftGroup.push( html`<div class=\"menu-button ${this.wideMenuButton ? \"wide\" : null}\"> <obc-icon-button variant=\"flat\" aria-label=${this.menuButtonIcon === \"menu\" ? msg(\"Menu\") : msg(\"Home\")} @pointerdown=${() => this.leftButtonDown(new CustomEvent(\"menu-button-clicked\"))} @pointerup=${() => this.leftButtonUp()} @pointerleave=${() => this.leftButtonLeave()} ?activated=${this.menuButtonActivated} > ${this.menuButtonIcon === \"menu\" ? html`<obi-menu-iec></obi-menu-iec>` : html`<obi-home></obi-home>`} </obc-icon-button> </div>` ); } if (this.showAppIcon) { leftGroup.push( html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>` ); } leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`); 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 ); return html` <style> @media (max-width: ${breakpointMoreButton}px) { .left-more-button { display: revert !important; } .group.left > * { margin-right: 4px; margin-left: 4px; } } @media (max-width: ${this.appButtonBreakpointPx}px) { .apps-button { display: none; } } @media (max-width: ${this.dimmingButtonBreakpointPx}px) { .dimming-button { display: none; } } @media (max-width: ${this.appTitleBreakpointPx}px) { .title { display: none !important; /* the stylesheet's display wins over this inline rule otherwise */ } } @media (max-width: ${this.userButtonBreakpointPx}px) { .user-button { display: none; } } @media (max-width: ${this.appIconBreakpointPx}px) { .app-icon { display: none; } } </style> <nav class=${classMap({ wrapper: true, inactive: this.inactive, settings: this.settings, tall: this.tall })} role=\"menubar\" > <div class=\"left group\">${leftGroup}</div> <div class=\"right group\"> <div class=\"alert-container\"> <slot name=\"alerts\"></slot> </div> ${this.showDimmingButton && !this.inactive ? html`<obc-icon-button class=\"dimming-button\" part=\"dimming-button\" variant=\"flat\" aria-label=${msg(\"Dimming\")} @click=${this.dimmingButtonClicked} ?activated=${this.dimmingButtonActivated} > <obi-palette-day-night-iec></obi-palette-day-night-iec> </obc-icon-button>` : null} ${this.showUserButton && !this.inactive ? html`<obc-icon-button class=\"user-button\" variant=\"flat\" part=\"user-button\" aria-label=${msg(\"User\")} @click=${this.userButtonClicked} ?activated=${this.userButtonActivated} ?disabled=${this.userButtonDisabled} > <obi-user></obi-user> </obc-icon-button>` : null} ${this.showAppsButton && !this.inactive ? html`<obc-icon-button class=\"apps-button\" variant=\"flat\" part=\"apps-button\" aria-label=${msg(\"Apps\")} @click=${this.appsButtonClicked} ?activated=${this.appsButtonActivated} > <obi-applications></obi-applications> </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\" variant=\"flat\" aria-label=${msg(\"More\")} @click=${this.leftMoreButtonClicked} ?activated=${this.leftMoreButtonActivated} > <obi-more-vertical-google></obi-more-vertical-google> </obc-icon-button>` : null} </div> </nav> `; } }"
         }
       ],
       "exports": [
@@ -8505,7 +8505,7 @@
         {
           "kind": "variable",
           "name": "ObcIntegrationBarDropdown",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.showHomeButton = false; this.homeButtonActivated = false; this.showClock = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.notificationCount = 0; this.showNotificationCount = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.nStatusFields = 0; } renderStatusFields() { if (this.nStatusFields <= 0) { return nothing; } const result = []; for (let i = 0; i < this.nStatusFields; i++) { if (i > 0) { result.push(html`<div class=\"divider\"></div>`); } result.push(html` <div class=\"status-item\"> <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot> <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot> </div> `); } return html`<div class=\"status\">${result}</div>`; } 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} <slot name=\"vessel-selector\"></slot> ${this.renderStatusFields()} </div> <div class=\"right-side\"> ${this.showNotificationButton ? html`<obc-notification-button @click=${() => this.dispatchEvent( 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} </div> </div> `; } }"
+          "default": "class extends LitElement { constructor() { 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; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.nStatusFields = 0; } renderStatusFields() { if (this.nStatusFields <= 0) { return nothing; } const result = []; for (let i = 0; i < this.nStatusFields; i++) { if (i > 0) { result.push(html`<div class=\"divider\"></div>`); } result.push(html` <div class=\"status-item\"> <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot> <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot> </div> `); } 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 ? 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.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\") )} .buttonStyle=${NotificationButtonStyle.Enhanced} .showCount=${this.showNotificationCount} .count=${this.notificationCount} ?isActive=${this.notificationButtonActivated} ></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> `; } }"
         }
       ],
       "exports": [
@@ -8526,7 +8526,7 @@
         {
           "kind": "variable",
           "name": "ObcIntegrationBar",
-          "default": "class extends LitElement { constructor() { super(...arguments); this.hideHomeButton = false; this.showClock = false; this.showLinkButton = false; this.linkButtonActivated = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.showScreenButton = false; this.screenButtonActivated = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.showAlertButton = false; this.alertButtonActivated = false; this.showFleetButton = false; this.fleetButtonSelected = false; this.fleetButtonActivated = false; this.fleetButtonLabel = \"Fleet\"; this.buttonsOnBar = false; } onFleetButtonClick() { this.dispatchEvent(new CustomEvent(\"fleet-button-click\")); } onHugButtonsSlotChange(event) { const slot = event.currentTarget; const assignedElements = slot.assignedElements({ flatten: true }); assignedElements.forEach((element) => { if (element.tagName === \"OBC-INTEGRATION-BUTTON\") { const integrationButton = element; integrationButton.type = IntegrationButtonType.hug; } }); this.buttonsOnBar = true; } onButtonsSlotChange() { this.buttonsOnBar = true; } render() { const isFleetButtonAnchored = this.fleetButtonActivated; return html` <nav class=\"wrapper\"> <div class=\"content-container\"> ${!this.hideHomeButton ? html`<obc-icon-button class=\"home-button\" variant=\"integration\"> <obi-home></obi-home> </obc-icon-button>` : null} ${this.showLinkButton ? html`<obc-icon-button class=${classMap({ \"link-button\": true, activated: this.linkButtonActivated })} part=\"link-button\" variant=\"integration\" @click=${() => this.dispatchEvent(new CustomEvent(\"link-button-clicked\"))} ?activated=${this.linkButtonActivated} > <obi-link></obi-link> </obc-icon-button>` : null} <div class=${classMap({ \"fleet-vessel-container\": true })}> ${this.showFleetButton ? html`<obc-integration-button class=\"fleet-button\" .variant=${IntegrationButtonVariant.normal} ?selected=${this.fleetButtonSelected} ?activated=${this.fleetButtonActivated} style=${isFleetButtonAnchored ? \"anchor-name: --integration-menu-anchor;\" : \"\"} @click=${() => this.onFleetButtonClick()} > <span slot=\"label\">${this.fleetButtonLabel}</span> </obc-integration-button>` : nothing} <div class=\"vessel-container\"> ${this.buttonsOnBar ? nothing : html`<div class=\"vessel-button-placeholder\"></div>`} <slot class=\"hug-buttons-slot\" name=\"hug-buttons\" @slotchange=${this.onHugButtonsSlotChange} ></slot> <slot class=\"integration-buttons-slot\" name=\"integration-buttons\" @slotchange=${this.onButtonsSlotChange} ></slot> </div> </div> </div> <div class=${classMap({ \"buttons-on-bar\": this.buttonsOnBar, \"right-content-container\": true })} > ${this.showAlertButton ? html`<obc-icon-button class=${classMap({ \"alert-button\": true, activated: this.alertButtonActivated })} part=\"alert-button\" variant=\"integration\" style=${this.alertButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"alert-button-clicked\"))} ?activated=${this.alertButtonActivated} > <obi-alerts></obi-alerts> </obc-icon-button>` : null} ${this.showNotificationButton ? html`<obc-icon-button class=${classMap({ \"notification-button\": true, activated: this.notificationButtonActivated })} part=\"notification-button\" variant=\"integration\" style=${this.notificationButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent( new CustomEvent(\"notification-button-clicked\") )} ?activated=${this.notificationButtonActivated} > <obi-notification></obi-notification> </obc-icon-button>` : null} ${this.showScreenButton ? html`<obc-icon-button class=${classMap({ \"screen-button\": true, activated: this.screenButtonActivated })} part=\"screen-button\" variant=\"integration\" style=${this.screenButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"screen-button-clicked\"))} ?activated=${this.screenButtonActivated} > <obi-screen-desk></obi-screen-desk> </obc-icon-button>` : null} ${this.showSystemButton ? html`<obc-icon-button class=${classMap({ \"system-button\": true, activated: this.systemButtonActivated })} part=\"system-button\" variant=\"integration\" style=${this.systemButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @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=${classMap({ \"dimming-button\": true, activated: this.dimmingButtonActivated })} part=\"dimming-button\" variant=\"integration\" style=${this.dimmingButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @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=${classMap({ \"user-button\": true, activated: this.userButtonActivated })} part=\"user-button\" variant=\"integration\" style=${this.userButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @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} </div> </nav> `; } }"
+          "default": "class extends LitElement { constructor() { super(...arguments); this.hideHomeButton = false; this.showClock = false; this.showLinkButton = false; this.linkButtonActivated = false; this.showUserButton = false; this.userButtonActivated = false; this.showDimmingButton = false; this.dimmingButtonActivated = false; this.showSystemButton = false; this.systemButtonActivated = false; this.showScreenButton = false; this.screenButtonActivated = false; this.showNotificationButton = false; this.notificationButtonActivated = false; this.showAlertButton = false; this.alertButtonActivated = false; this.showFleetButton = false; this.fleetButtonSelected = false; this.fleetButtonActivated = false; this.fleetButtonLabel = \"Fleet\"; this.buttonsOnBar = false; } onFleetButtonClick() { this.dispatchEvent(new CustomEvent(\"fleet-button-click\")); } onHugButtonsSlotChange(event) { const slot = event.currentTarget; const assignedElements = slot.assignedElements({ flatten: true }); assignedElements.forEach((element) => { if (element.tagName === \"OBC-INTEGRATION-BUTTON\") { const integrationButton = element; integrationButton.type = IntegrationButtonType.hug; } }); this.buttonsOnBar = true; } onButtonsSlotChange() { this.buttonsOnBar = true; } render() { const isFleetButtonAnchored = this.fleetButtonActivated; return html` <nav class=\"wrapper\"> <div class=\"content-container\"> ${!this.hideHomeButton ? html`<obc-icon-button class=\"home-button\" variant=\"integration\" aria-label=${msg(\"Home\")} > <obi-home></obi-home> </obc-icon-button>` : null} ${this.showLinkButton ? html`<obc-icon-button class=${classMap({ \"link-button\": true, activated: this.linkButtonActivated })} part=\"link-button\" variant=\"integration\" aria-label=${msg(\"Link\")} @click=${() => this.dispatchEvent(new CustomEvent(\"link-button-clicked\"))} ?activated=${this.linkButtonActivated} > <obi-link></obi-link> </obc-icon-button>` : null} <div class=${classMap({ \"fleet-vessel-container\": true })}> ${this.showFleetButton ? html`<obc-integration-button class=\"fleet-button\" .variant=${IntegrationButtonVariant.normal} ?selected=${this.fleetButtonSelected} ?activated=${this.fleetButtonActivated} style=${isFleetButtonAnchored ? \"anchor-name: --integration-menu-anchor;\" : \"\"} @click=${() => this.onFleetButtonClick()} > <span slot=\"label\">${this.fleetButtonLabel}</span> </obc-integration-button>` : nothing} <div class=\"vessel-container\"> ${this.buttonsOnBar ? nothing : html`<div class=\"vessel-button-placeholder\"></div>`} <slot class=\"hug-buttons-slot\" name=\"hug-buttons\" @slotchange=${this.onHugButtonsSlotChange} ></slot> <slot class=\"integration-buttons-slot\" name=\"integration-buttons\" @slotchange=${this.onButtonsSlotChange} ></slot> </div> </div> </div> <div class=${classMap({ \"buttons-on-bar\": this.buttonsOnBar, \"right-content-container\": true })} > ${this.showAlertButton ? html`<obc-icon-button class=${classMap({ \"alert-button\": true, activated: this.alertButtonActivated })} part=\"alert-button\" variant=\"integration\" aria-label=${msg(\"Alerts\")} style=${this.alertButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"alert-button-clicked\"))} ?activated=${this.alertButtonActivated} > <obi-alerts></obi-alerts> </obc-icon-button>` : null} ${this.showNotificationButton ? html`<obc-icon-button class=${classMap({ \"notification-button\": true, activated: this.notificationButtonActivated })} part=\"notification-button\" variant=\"integration\" aria-label=${msg(\"Notifications\")} style=${this.notificationButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent( new CustomEvent(\"notification-button-clicked\") )} ?activated=${this.notificationButtonActivated} > <obi-notification></obi-notification> </obc-icon-button>` : null} ${this.showScreenButton ? html`<obc-icon-button class=${classMap({ \"screen-button\": true, activated: this.screenButtonActivated })} part=\"screen-button\" variant=\"integration\" aria-label=${msg(\"Screen\")} style=${this.screenButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @click=${() => this.dispatchEvent(new CustomEvent(\"screen-button-clicked\"))} ?activated=${this.screenButtonActivated} > <obi-screen-desk></obi-screen-desk> </obc-icon-button>` : null} ${this.showSystemButton ? html`<obc-icon-button class=${classMap({ \"system-button\": true, activated: this.systemButtonActivated })} part=\"system-button\" variant=\"integration\" aria-label=${msg(\"System\")} style=${this.systemButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @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=${classMap({ \"dimming-button\": true, activated: this.dimmingButtonActivated })} part=\"dimming-button\" variant=\"integration\" aria-label=${msg(\"Dimming\")} style=${this.dimmingButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @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=${classMap({ \"user-button\": true, activated: this.userButtonActivated })} part=\"user-button\" variant=\"integration\" aria-label=${msg(\"User\")} style=${this.userButtonActivated ? \"anchor-name: --settings-menu-anchor;\" : \"\"} @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} </div> </nav> `; } }"
         }
       ],
       "exports": [
@@ -55348,6 +55348,15 @@
               "default": "true",
               "description": "If false, and cornerLeft or cornerRight is true, the divider is not shown."
             },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "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."
+            },
             {
               "kind": "field",
               "name": "progressSpinner",
@@ -70804,7 +70813,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "`<obc-integration-bar-dropdown>` – A compact top-level integration header with a dropdown selector, status fields and system action buttons.",
           "name": "ObcIntegrationBarDropdown",
           "slots": [
             {
@@ -70847,7 +70856,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Home button at the left end of the bar."
             },
             {
               "kind": "field",
@@ -70855,7 +70865,26 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the home button."
+            },
+            {
+              "kind": "field",
+              "name": "showLinkButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Link button, between home and the selector."
+            },
+            {
+              "kind": "field",
+              "name": "linkButtonActivated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pressed styling for the link button."
             },
             {
               "kind": "field",
@@ -70863,7 +70892,26 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Renders the `clock` slot at the right end."
+            },
+            {
+              "kind": "field",
+              "name": "showAlertButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Alert button, first in the right-hand group."
+            },
+            {
+              "kind": "field",
+              "name": "alertButtonActivated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pressed styling for the alert button."
             },
             {
               "kind": "field",
@@ -70871,7 +70919,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Notification button, after the alert button."
             },
             {
               "kind": "field",
@@ -70879,7 +70928,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling; the count badge only appears in this state."
             },
             {
               "kind": "field",
@@ -70887,7 +70937,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "0",
+              "description": "Number drawn in the count badge."
             },
             {
               "kind": "field",
@@ -70895,7 +70946,26 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Draws the count badge on the notification button."
+            },
+            {
+              "kind": "field",
+              "name": "showScreenButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Screen button, after the notification button."
+            },
+            {
+              "kind": "field",
+              "name": "screenButtonActivated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Pressed styling for the screen button."
             },
             {
               "kind": "field",
@@ -70903,7 +70973,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "User button, last before the clock."
             },
             {
               "kind": "field",
@@ -70911,7 +70982,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the user button."
             },
             {
               "kind": "field",
@@ -70919,7 +70991,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Dimming button, between system and user."
             },
             {
               "kind": "field",
@@ -70927,7 +71000,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the dimming button."
             },
             {
               "kind": "field",
@@ -70935,7 +71009,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "System button, after the screen button."
             },
             {
               "kind": "field",
@@ -70943,7 +71018,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Pressed styling for the system button."
             },
             {
               "kind": "field",
@@ -70951,13 +71027,51 @@
               "type": {
                 "text": "number"
               },
-              "default": "0"
+              "default": "0",
+              "description": "How many `status-icon-N`/`status-label-N` slot pairs are rendered."
             },
             {
               "kind": "method",
               "name": "renderStatusFields",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderIconButton",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "activated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                },
+                {
+                  "name": "onClick",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "render"
@@ -70976,6 +71090,20 @@
               },
               "description": "Fired when the home button is clicked"
             },
+            {
+              "name": "link-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the link button is clicked"
+            },
+            {
+              "name": "alert-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the alert button is clicked"
+            },
             {
               "name": "notification-button-clicked",
               "type": {
@@ -70983,6 +71111,13 @@
               },
               "description": "Fired when the notification button is clicked"
             },
+            {
+              "name": "screen-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the screen button is clicked"
+            },
             {
               "name": "system-button-clicked",
               "type": {

package/dist/components/icon-button/icon-button.d.ts

@@ -89,6 +89,7 @@ export declare 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).
@@ -120,6 +121,8 @@ export declare class ObcIconButton extends LitElement {
     hasLabel: boolean;
     /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */
     showDivider: boolean;
+    /** 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. */
+    ariaLabel: string | null;
     get progressSpinner(): import('lit-html').TemplateResult<1> | typeof nothing;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;

package/dist/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAOzD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAEA,SAAS,UAAS;IAElB,UAAU,UAAS;IAEnB,WAAW,UAAS;IAEpB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAEb,QAAQ,UAAS;IAElB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAExC,QAAQ,EAAE,OAAO,CAAS;IAER,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAQzD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAEA,SAAS,UAAS;IAElB,UAAU,UAAS;IAEnB,WAAW,UAAS;IAEpB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAEb,QAAQ,UAAS;IAElB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAExC,QAAQ,EAAE,OAAO,CAAS;IAER,WAAW,UAAQ;IAIvD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAkCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/icon-button/icon-button.js

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import iconStyle from "./icon-button.css.js";
 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";
 var __defProp = Object.defineProperty;
@@ -34,6 +35,7 @@ let ObcIconButton = class extends LitElement {
     this.progress = void 0;
     this.hasLabel = false;
     this.showDivider = true;
+    this.ariaLabel = null;
   }
   get progressSpinner() {
     if (this.progress === void 0) {
@@ -104,6 +106,7 @@ let ObcIconButton = class extends LitElement {
       "hide-divider": !this.showDivider
     })}
         ?disabled=${this.disabled}
+        aria-label=${ifDefined(this.ariaLabel ?? void 0)}
         part="wrapper"
       >
         ${this.progress !== void 0 ? this.progressSpinner : nothing}
@@ -150,6 +153,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], ObcIconButton.prototype, "showDivider", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], ObcIconButton.prototype, "ariaLabel", 2);
 ObcIconButton = __decorateClass([
   customElement("obc-icon-button")
 ], ObcIconButton);

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport {degToRad} from '../../svghelpers/math.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @property activated - Whether the button is in an activated (selected/toggled) state.\n *   Visually highlights the button to indicate selection.\n * @property cornerLeft - If true, aligns the button to the left edge and removes left border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property cornerRight - If true, aligns the button to the right edge and removes right border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property activeColor - Applies an accent color to the button for emphasis.\n *   Used to visually distinguish active or important actions.\n * @property wide - Increases the button's width for larger touch targets or visual balance.\n * @property disabled - Disables the button, preventing user interaction and dimming its appearance.\n * @property progress - Shows a circular progress indicator overlay when set (0–100).\n *   Use to indicate ongoing actions or loading states.\n *   If undefined, no progress indicator is shown.\n * @property hasLabel - If true, displays a label below the icon using the `label` slot.\n * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n * @stable\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) cornerLeft = false;\n\n  @property({type: Boolean}) cornerRight = false;\n\n  @property({type: Boolean}) activeColor = false;\n\n  @property({type: Boolean}) wide = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = degToRad(this.progress * 0.95 * 3.6);\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport {degToRad} from '../../svghelpers/math.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @property activated - Whether the button is in an activated (selected/toggled) state.\n *   Visually highlights the button to indicate selection.\n * @property cornerLeft - If true, aligns the button to the left edge and removes left border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property cornerRight - If true, aligns the button to the right edge and removes right border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property activeColor - Applies an accent color to the button for emphasis.\n *   Used to visually distinguish active or important actions.\n * @property wide - Increases the button's width for larger touch targets or visual balance.\n * @property disabled - Disables the button, preventing user interaction and dimming its appearance.\n * @property progress - Shows a circular progress indicator overlay when set (0–100).\n *   Use to indicate ongoing actions or loading states.\n *   If undefined, no progress indicator is shown.\n * @property hasLabel - If true, displays a label below the icon using the `label` slot.\n * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.\n * @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.\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n * @stable\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) cornerLeft = false;\n\n  @property({type: Boolean}) cornerRight = false;\n\n  @property({type: Boolean}) activeColor = false;\n\n  @property({type: Boolean}) wide = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  // Reactive so a consumer swapping the name (Play → Pause) re-renders the shadow button.\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel: string | null = null;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = degToRad(this.progress * 0.95 * 3.6);\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}

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;AAIhD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC;;;;OAIG;IACuB,QAAQ,SAAS;IAE3C;;;;;OAKG;IACuB,QAAQ,SAAU;IAElB,cAAc,0BAAgC;IAExE;;;;;OAKG;IAEH,mBAAmB,UAAS;IAE5B;;;;;OAKG;IAEH,sBAAsB,UAAS;IAE/B;;;;;OAKG;IAEH,mBAAmB,UAAS;IAE5B;;;;;OAKG;IAEH,uBAAuB,UAAS;IAEhC;;;;;OAKG;IAEH,mBAAmB,UAAS;IAE5B;;;;;OAKG;IAEH,kBAAkB,UAAS;IAE3B;;;;OAIG;IACwB,IAAI,UAAS;IAExC;;;;;OAKG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IAEH,iBAAiB,UAAS;IAE1B;;;;OAIG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IACwB,SAAS,UAAS;IAE7C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACwB,WAAW,UAAS;IAE/C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IAEH,qBAAqB,SAAO;IAE5B;;;;OAIG;IAEH,yBAAyB,SAAO;IAEhC;;;;OAIG;IAEH,oBAAoB,SAAO;IAE3B;;;;OAIG;IAEH,sBAAsB,SAAO;IAE7B;;;;OAIG;IAEH,mBAAmB,SAAO;IAE1B;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;;OAKG;IAEH,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,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,eAAe;IAad,MAAM;IAiLf,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC;;;;OAIG;IACuB,QAAQ,SAAS;IAE3C;;;;;OAKG;IACuB,QAAQ,SAAU;IAElB,cAAc,0BAAgC;IAExE;;;;;OAKG;IAEH,mBAAmB,UAAS;IAE5B;;;;;OAKG;IAEH,sBAAsB,UAAS;IAE/B;;;;;OAKG;IAEH,mBAAmB,UAAS;IAE5B;;;;;OAKG;IAEH,uBAAuB,UAAS;IAEhC;;;;;OAKG;IAEH,mBAAmB,UAAS;IAE5B;;;;;OAKG;IAEH,kBAAkB,UAAS;IAE3B;;;;OAIG;IACwB,IAAI,UAAS;IAExC;;;;;OAKG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IAEH,iBAAiB,UAAS;IAE1B;;;;OAIG;IACwB,cAAc,UAAS;IAElD;;;;OAIG;IACwB,SAAS,UAAS;IAE7C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACwB,WAAW,UAAS;IAE/C;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IAEH,qBAAqB,SAAO;IAE5B;;;;OAIG;IAEH,yBAAyB,SAAO;IAEhC;;;;OAIG;IAEH,oBAAoB,SAAO;IAE3B;;;;OAIG;IAEH,sBAAsB,SAAO;IAE7B;;;;OAIG;IAEH,mBAAmB,SAAO;IAE1B;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;;OAKG;IAEH,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,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,eAAe;IAad,MAAM;IA0Lf,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

@@ -1,6 +1,7 @@
 import { unsafeCSS, LitElement, html } 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.js";
 import "../icon-button/icon-button.js";
 import "../clock/clock.js";
@@ -119,6 +120,7 @@ let ObcTopBar = class 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()}
@@ -130,6 +132,7 @@ let ObcTopBar = class 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>
@@ -152,6 +155,7 @@ let ObcTopBar = class extends LitElement {
           html`<div class="menu-button ${this.wideMenuButton ? "wide" : null}">
             <obc-icon-button
               variant="flat"
+              aria-label=${this.menuButtonIcon === "menu" ? msg("Menu") : msg("Home")}
               @pointerdown=${() => this.leftButtonDown(new CustomEvent("menu-button-clicked"))}
               @pointerup=${() => this.leftButtonUp()}
               @pointerleave=${() => this.leftButtonLeave()}
@@ -236,6 +240,7 @@ let ObcTopBar = class extends LitElement {
                 class="dimming-button"
                 part="dimming-button"
                 variant="flat"
+                aria-label=${msg("Dimming")}
                 @click=${this.dimmingButtonClicked}
                 ?activated=${this.dimmingButtonActivated}
               >
@@ -245,6 +250,7 @@ let ObcTopBar = class extends LitElement {
                 class="user-button"
                 variant="flat"
                 part="user-button"
+                aria-label=${msg("User")}
                 @click=${this.userButtonClicked}
                 ?activated=${this.userButtonActivated}
                 ?disabled=${this.userButtonDisabled}
@@ -255,6 +261,7 @@ let ObcTopBar = class extends LitElement {
                 class="apps-button"
                 variant="flat"
                 part="apps-button"
+                aria-label=${msg("Apps")}
                 @click=${this.appsButtonClicked}
                 ?activated=${this.appsButtonActivated}
               >
@@ -265,6 +272,7 @@ let ObcTopBar = class extends LitElement {
                 class="left-more-button"
                 part="left-more-button"
                 variant="flat"
+                aria-label=${msg("More")}
                 @click=${this.leftMoreButtonClicked}
                 ?activated=${this.leftMoreButtonActivated}
               >