@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.118 → 2.0.0-next.120

package/src/bars-graphs/pie-chart/pie-chart.stories.ts

@@ -43,7 +43,7 @@ const SUNBURST_DATA = [
 const meta: Meta = {
   title: 'Bars and Graphs/Pie Chart',
   component: 'obc-pie-chart',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   argTypes: {
     fixedHeight: {
       control: {type: 'range', min: 48, max: 512},

package/src/bars-graphs/polar-chart/polar-chart.stories.ts

@@ -23,7 +23,7 @@ const SAMPLE_DATA = [
 const meta: Meta = {
   title: 'Bars and Graphs/Polar Chart',
   component: 'obc-polar-chart',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   argTypes: {
     fixedHeight: {
       control: {type: 'range', min: 48, max: 512, step: 8},

package/src/bars-graphs/radial-bar-chart/radial-bar-chart.stories.ts

@@ -10,7 +10,7 @@ const SAMPLE_DATA = [70, 50, 30];
 const meta: Meta = {
   title: 'Bars and Graphs/Radial Bar Chart',
   component: 'obc-radial-bar-chart',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   argTypes: {
     fixedHeight: {
       control: {type: 'range', min: 48, max: 512, step: 8},

package/src/building-blocks/bar-horizontal/bar-horizontal.stories.ts

@@ -31,7 +31,7 @@ const SAMPLE_DATA = [
 
 const meta: Meta = {
   title: 'Bars and Graphs/Bar Horizontal',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   component: 'obc-bar-horizontal',
   argTypes: {
     minValue: {control: {type: 'range', min: -100, max: 100}},

package/src/building-blocks/bar-vertical/bar-vertical.stories.ts

@@ -32,7 +32,7 @@ const SAMPLE_DATA = [
 
 const meta: Meta = {
   title: 'Bars and Graphs/Bar Vertical',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   component: 'obc-bar-vertical',
   argTypes: {
     minValue: {control: {type: 'range', min: -100, max: 100}},

package/src/building-blocks/chart-line/chart-line-base.stories.ts

@@ -85,7 +85,7 @@ const SAMPLE_MULTI_DATASETS = [
 const meta: Meta = {
   title: 'Building Blocks/Line Area Chart Base',
   component: 'obc-area-graph',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   parameters: {
     docs: {
       description: {

package/src/building-blocks/instrument-radial/instrument-radial.stories.ts

@@ -23,7 +23,7 @@ type InstrumentRadialStoryArgs = Partial<ObcInstrumentRadial> & {
 
 const meta: Meta<InstrumentRadialStoryArgs> = {
   title: 'Building Blocks/Instrument Radial',
-  tags: ['6.0'],
+  tags: ['6.0', 'experimental'],
   component: 'obc-instrument-radial',
   decorators: [widthDecorator],
   args: {

package/src/building-blocks/readout-block/readout-block.stories.ts

@@ -120,7 +120,7 @@ function renderShowcase(cards: ShowcaseCard[]) {
 
 const meta = {
   title: 'Building Blocks/Readout Block',
-  tags: ['autodocs', '6.0', 'wip'],
+  tags: ['autodocs', '6.0', 'experimental'],
   component: 'obc-readout-block',
   decorators: [themedDecorator],
   parameters: {

package/src/components/advice-floating-item/advice-floating-item.stories.ts

@@ -13,7 +13,7 @@ import '../../icons/icon-ship.js';
 const meta: Meta<ObcAdviceFloatingItem> = {
   title: 'Application Components/Notifications/Advice Floating Item',
   component: 'obc-advice-floating-item',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   argTypes: {
     type: {
       control: 'select',

package/src/components/advice-menu-item/advice-menu-item.stories.ts

@@ -6,7 +6,7 @@ import {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js'
 
 const meta: Meta<typeof ObcAdviceMenuItem> = {
   title: 'Application Components/Notifications/Advice Menu Item',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   component: 'obc-advice-menu-item',
   args: {
     title: 'Advice title',

package/src/components/advice-message-item/advice-message-item.stories.ts

@@ -6,7 +6,7 @@ import {html} from 'lit';
 
 const meta: Meta<typeof ObcAdviceMessageItem> = {
   title: 'Application Components/Notifications/Advice Message Item',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-advice-message-item',
   args: {
     title: 'Advice title',

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

@@ -0,0 +1,58 @@
+import {describe, expect, it} from 'vitest';
+import './alert-button.js';
+import {ObcAlertButton} from './alert-button.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+
+describe('obc-alert-button blinking lifecycle', () => {
+  async function setup() {
+    const screen = render(html`<obc-alert-button></obc-alert-button>`);
+    const el = screen.baseElement.querySelector(
+      'obc-alert-button'
+    ) as ObcAlertButton;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('installs the blink animations on first render', async () => {
+    const el = await setup();
+
+    expect(el.getAnimations().length).toBeGreaterThan(0);
+  });
+
+  it('cancels the blink animations on disconnect', async () => {
+    const el = await setup();
+
+    el.parentElement!.removeChild(el);
+
+    expect(el.getAnimations()).toHaveLength(0);
+  });
+
+  it('resumes blinking after disconnect and reconnect', async () => {
+    const el = await setup();
+    const parent = el.parentElement!;
+    const initial = el.getAnimations().length;
+
+    parent.removeChild(el);
+    expect(el.getAnimations()).toHaveLength(0);
+
+    // Reconnect without touching any property. firstUpdated() will not run
+    // again, so this only passes if blinking is reinstalled on update.
+    parent.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.getAnimations()).toHaveLength(initial);
+  });
+
+  it('does not accumulate animations across repeated updates', async () => {
+    const el = await setup();
+    const initial = el.getAnimations().length;
+
+    el.nAlerts = 3;
+    await el.updateComplete;
+    el.nAlerts = 5;
+    await el.updateComplete;
+
+    expect(el.getAnimations()).toHaveLength(initial);
+  });
+});

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

@@ -20,6 +20,7 @@ import {
 } from '../../alert-severity.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement} from '../../decorator.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 /**
  * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.
@@ -202,10 +203,14 @@ export class ObcAlertButton extends LitElement {
   override connectedCallback() {
     super.connectedCallback();
     window.addEventListener('resize', this.resizeListener);
+    if (this.hasUpdated) {
+      this.installBlinking();
+    }
   }
 
   override disconnectedCallback() {
     window.removeEventListener('resize', this.resizeListener);
+    this._blinkAnimationCancel?.();
     super.disconnectedCallback();
   }
 
@@ -280,6 +285,17 @@ export class ObcAlertButton extends LitElement {
     );
   }
 
+  private _blinkAnimationCancel?: () => void;
+
+  private installBlinking() {
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = blinkingAll(this);
+  }
+
+  override updated() {
+    this.installBlinking();
+  }
+
   override render() {
     const hasAlerts = this.nAlerts > 0;
     const showCounter =

package/src/components/alert-frame/alert-frame.css

@@ -78,6 +78,7 @@
 
   &.level-critical {
     --bg-color: var(--critical-enabled-background-color);
+    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 

package/src/components/alert-frame/alert-frame.spec.ts

@@ -0,0 +1,122 @@
+import {describe, expect, it} from 'vitest';
+import './alert-frame.js';
+import {ObcAlertFrame, ObcAlertFrameMode} from './alert-frame.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+
+describe('obc-alert-frame blinking lifecycle', () => {
+  async function setup(mode: ObcAlertFrameMode) {
+    const screen = render(
+      html`<obc-alert-frame .mode=${mode}></obc-alert-frame>`
+    );
+    const el = screen.baseElement.querySelector(
+      'obc-alert-frame'
+    ) as ObcAlertFrame;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('blinks while mode is unacked-active', async () => {
+    const el = await setup(ObcAlertFrameMode.unackedActive);
+
+    expect(el.getAnimations().length).toBeGreaterThan(0);
+  });
+
+  it('does not blink in other modes', async () => {
+    const el = await setup(ObcAlertFrameMode.ackedActive);
+
+    expect(el.getAnimations()).toHaveLength(0);
+  });
+
+  describe('mode transitions', () => {
+    it('starts blinking when mode becomes unacked-active', async () => {
+      const el = await setup(ObcAlertFrameMode.ackedActive);
+      expect(el.getAnimations()).toHaveLength(0);
+
+      el.mode = ObcAlertFrameMode.unackedActive;
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+    });
+
+    it('stops blinking when mode leaves unacked-active', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+
+      el.mode = ObcAlertFrameMode.ackedActive;
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(0);
+    });
+
+    it('stops blinking when mode becomes unacked-rectified', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+
+      el.mode = ObcAlertFrameMode.unackedRectified;
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(0);
+    });
+
+    it('does not accumulate animations across repeated updates', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+      const initial = el.getAnimations().length;
+
+      el.fullWidth = true;
+      await el.updateComplete;
+      el.showIcon = true;
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(initial);
+    });
+  });
+
+  describe('reconnection', () => {
+    it('resumes blinking after disconnect and reconnect', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+      const parent = el.parentElement!;
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+
+      parent.removeChild(el);
+      expect(el.getAnimations()).toHaveLength(0);
+
+      // Reconnect without touching any property. firstUpdated() will not run
+      // again, so this only passes if blinking is reinstalled on update.
+      parent.appendChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+    });
+
+    it('does not resume blinking on reconnect when mode is not unacked-active', async () => {
+      const el = await setup(ObcAlertFrameMode.ackedActive);
+      const parent = el.parentElement!;
+
+      parent.removeChild(el);
+      parent.appendChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(0);
+    });
+
+    it('does not blink after disconnection when mode became unacked-active while detached', async () => {
+      const el = await setup(ObcAlertFrameMode.ackedActive);
+      const parent = el.parentElement!;
+
+      parent.removeChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBe(0);
+
+      el.mode = ObcAlertFrameMode.unackedActive;
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBe(0);
+
+      parent.appendChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+    });
+  });
+});

package/src/components/alert-frame/alert-frame.stories.ts

@@ -13,7 +13,7 @@ import {html} from 'lit';
 
 const meta: Meta<typeof ObcAlertFrame> = {
   title: 'UI Components/Message and Alerts/Alert Frame',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   component: 'obc-alert-frame',
   args: {
     type: ObcAlertFrameType.SmallSideFlip,
@@ -261,3 +261,15 @@ export const RectifiedUnactive: Story = {
     mode: ObcAlertFrameMode.unackedRectified,
   },
 };
+
+export const CriticalUnacked: Story = {
+  args: {
+    type: ObcAlertFrameType.SmallSideFlip,
+    thickness: ObcAlertFrameThickness.Small,
+    status: ObcAlertFrameStatus.LevelCritical,
+    mode: ObcAlertFrameMode.unackedActive,
+    demoWidth: 200,
+    showIcon: true,
+    showAlertCategoryIcon: true,
+  },
+};

package/src/components/alert-frame/alert-frame.ts

@@ -20,6 +20,7 @@ import {
   getAlertBadgeComponent,
   AlertBadgeComponent,
 } from '../../alert-severity.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 export {AlertType as ObcAlertFrameStatus} from '../../types.js';
 
@@ -256,6 +257,42 @@ export class ObcAlertFrame extends LitElement {
     `;
   }
 
+  private _blinkAnimationCancel?: () => void;
+
+  private syncBlinking() {
+    if (
+      this.mode !== ObcAlertFrameMode.unackedActive &&
+      this._blinkAnimationCancel
+    ) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = undefined;
+    }
+
+    if (
+      this.mode === ObcAlertFrameMode.unackedActive &&
+      !this._blinkAnimationCancel
+    ) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+
+  override updated() {
+    this.syncBlinking();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = undefined;
+  }
+
   private flap() {
     if (this.type === ObcAlertFrameType.Regular) {
       return nothing;

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

@@ -0,0 +1,76 @@
+import {describe, expect, it} from 'vitest';
+import './alert-icon.js';
+import {ObcAlertIcon} from './alert-icon.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+import {AlertType} from '../../types.js';
+
+describe('obc-alert-icon blinking lifecycle', () => {
+  async function setup(acknowledged = false) {
+    const screen = render(
+      html`<obc-alert-icon
+        .alertType=${AlertType.Alarm}
+        .acknowledged=${acknowledged}
+      ></obc-alert-icon>`
+    );
+    const el = screen.baseElement.querySelector(
+      'obc-alert-icon'
+    ) as ObcAlertIcon;
+    await el.updateComplete;
+    return el;
+  }
+
+  function wrapperAnimations(el: ObcAlertIcon) {
+    return el.getAnimations();
+  }
+
+  it('blinks for an unacknowledged blinking alert type', async () => {
+    const el = await setup();
+
+    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+  });
+
+  it('does not blink once acknowledged', async () => {
+    const el = await setup(true);
+
+    expect(wrapperAnimations(el)).toHaveLength(0);
+  });
+
+  it('stops blinking when the alert is acknowledged', async () => {
+    const el = await setup();
+    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+
+    el.acknowledged = true;
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(0);
+  });
+
+  it('resumes blinking after disconnect and reconnect', async () => {
+    const el = await setup();
+    const parent = el.parentElement!;
+    const initial = wrapperAnimations(el).length;
+    expect(initial).toBeGreaterThan(0);
+
+    parent.removeChild(el);
+    expect(wrapperAnimations(el)).toHaveLength(0);
+
+    // Reconnect without touching any property, so no Lit update is scheduled.
+    parent.appendChild(el);
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(initial);
+  });
+
+  it('does not accumulate animations across repeated updates', async () => {
+    const el = await setup();
+    const initial = wrapperAnimations(el).length;
+
+    el.active = true;
+    await el.updateComplete;
+    el.silenced = true;
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(initial);
+  });
+});

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

@@ -50,6 +50,7 @@ import {
 import {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';
 import {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';
 import {lowAcknowledged} from './icons/icon-low-acknowledged.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 enum AlertIconState {
   Silenced = 'silenced',
@@ -343,6 +344,43 @@ export class ObcAlertIcon extends LitElement {
     return html`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
 
+  private _blinkAnimationCancel?: () => void;
+
+  private syncBlinking(): void {
+    if (
+      this._blinkAnimationCancel &&
+      !supportsBlinking(this._effectiveType, this.acknowledged ?? false)
+    ) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = undefined;
+    }
+    if (
+      !this._blinkAnimationCancel &&
+      supportsBlinking(this._effectiveType, this.acknowledged ?? false)
+    ) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+
+  override updated(): void {
+    this.syncBlinking();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._blinkAnimationCancel) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = undefined;
+    }
+  }
+
   static override styles = css`
     .wrapper {
       height: 100%;

package/src/components/attachment-list-item/attachment-list-item.stories.ts

@@ -8,7 +8,7 @@ import {html} from 'lit';
 
 const meta: Meta<ObcAttachmentListItem> = {
   title: 'UI Components/Tables and Lists/Attachment List Item',
-  tags: ['autodocs', '6.1'],
+  tags: ['autodocs', '6.1', 'beta'],
   component: 'obc-attachment-list-item',
   args: {
     label: 'Document.pdf',

package/src/components/audio-output/audio-output.stories.ts

@@ -4,7 +4,7 @@ import './audio-output.js';
 
 const meta: Meta<ObcAudioOutput> = {
   title: 'UI Components/Media/Audio Output',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-audio-output',
   args: {},
   argTypes: {

package/src/components/audio-recording-item/audio-recording-item.stories.ts

@@ -9,7 +9,7 @@ import '../button/button.js';
 
 const meta = {
   title: 'UI Components/Media/Audio Recording Item',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   component: 'obc-audio-recording-item',
   args: {},
   argTypes: {

package/src/components/automation-button-readout-stack/automation-button-readout-stack.stories.ts

@@ -9,7 +9,7 @@ import {html} from 'lit';
 
 const meta: Meta = {
   title: 'Building Blocks/Automation Button Readout Stack',
-  tags: ['6.0'],
+  tags: ['6.0', 'experimental'],
   component: 'obc-automation-button-readout-stack',
   args: {
     tag: '#0000',

package/src/components/badge/badge.stories.ts

@@ -8,7 +8,7 @@ import '../../icons/icon-alarm-badge.js';
 
 const meta: Meta<typeof ObcBadge> = {
   title: 'UI Components/Message and Alerts/Badge',
-  tags: ['autodocs'],
+  tags: ['autodocs', 'beta'],
   component: 'obc-badge',
   args: {
     number: 9,

package/src/components/calendar/calendar.stories.ts

@@ -338,7 +338,7 @@ function renderCalendar(args: CalendarStoryArgs) {
 
 const meta: Meta<CalendarStoryArgs> = {
   title: 'Application Components/Calendar/Calendar',
-  tags: ['autodocs', '6.0'],
+  tags: ['autodocs', '6.0', 'beta'],
   component: 'obc-calendar',
   render: renderCalendar,
   argTypes: {

package/src/components/command-button/command-button.stories.ts

@@ -4,7 +4,7 @@ import './command-button.js';
 
 const meta: Meta<typeof ObcCommandButton> = {
   title: 'Application Components/Menus/Command Button',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-command-button',
   args: {},
 } satisfies Meta<ObcCommandButton>;

package/src/components/command-menu/command-menu.stories.ts

@@ -72,7 +72,7 @@ customElements.define('command-menu-story-wrapper', CommandMenuStoryWrapper);
 
 const meta: Meta<typeof ObcCommandMenu> = {
   title: 'Application Components/Menus/Command Menu',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-command-menu',
   args: {
     showLocation: true,

package/src/components/communication-table/communication-table.stories.ts

@@ -8,7 +8,7 @@ import '../user-button/user-button.js';
 
 const meta: Meta<typeof ObcCommunicationTable> = {
   title: 'UI Components/Communication/Communication Table',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-communication-table',
   args: {
     data: [

package/src/components/context-menu-input/context-menu-input.stories.ts

@@ -6,7 +6,7 @@ import '../../icons/icon-placeholder.js';
 
 const meta: Meta<typeof ObcContextMenuInput> = {
   title: 'UI Components/Menus and Navigation/Context Menu Input',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-context-menu-input',
   argTypes: {
     type: {

package/src/components/date-item/date-item.stories.ts

@@ -10,7 +10,7 @@ interface DateItemStoryArgs extends Partial<ObcDateItem> {
 
 const meta: Meta<DateItemStoryArgs> = {
   title: 'Application Components/Calendar/Date Item',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-date-item',
   argTypes: {
     width: {

package/src/components/event-item/event-item.stories.ts

@@ -9,7 +9,7 @@ interface EventItemStoryArgs extends Partial<ObcEventItem> {
 
 const meta: Meta<EventItemStoryArgs> = {
   title: 'Application Components/Calendar/Event Item',
-  tags: ['6.0'],
+  tags: ['6.0', 'beta'],
   component: 'obc-event-item',
   decorators: [widthDecorator],
   argTypes: {