@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

package/src/building-blocks/chart-line/chart-sizing-battleground.stories.ts

@@ -117,6 +117,23 @@ const SUBJECTS: Subject[] = [
         .primaryTickmarkInterval=${25}
       ></obc-gauge-trend>`,
   },
+  {
+    label: 'gauge-trend + range labels',
+    contract: SizingContract.fills,
+    feedsSize: true,
+    render: () =>
+      html`<obc-gauge-trend
+        style=${FILL_STYLE}
+        .data=${DATA}
+        .minValue=${0}
+        .maxValue=${100}
+        .value=${55}
+        .chartFill=${true}
+        .hasBar=${true}
+        .hasScale=${true}
+        .rangeLabels=${'xy'}
+      ></obc-gauge-trend>`,
+  },
   {
     label: 'gauge-trend + advice + setpoint',
     contract: SizingContract.fills,

package/src/building-blocks/external-scale/external-scale.spec.ts

@@ -0,0 +1,154 @@
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {render, svg, type SVGTemplateResult} from 'lit';
+import {
+  renderExternalScale,
+  ExternalScaleOrientation,
+  ExternalScaleSide,
+  ScaleType,
+  FillMode,
+  AdvicePosition,
+  EXTERNAL_SCALE_MAX_TICKS,
+  type ExternalScaleConfig,
+} from './external-scale.js';
+import {
+  FrameStyle,
+  InstrumentState,
+  Priority,
+} from '../../navigation-instruments/types.js';
+
+const bottomScale = (
+  overrides: Partial<ExternalScaleConfig>
+): ExternalScaleConfig => ({
+  orientation: ExternalScaleOrientation.horizontal,
+  side: ExternalScaleSide.bottom,
+  length: 600,
+  paddingStart: 32,
+  paddingEnd: 32,
+  minValue: 0,
+  maxValue: 100,
+  hasBar: false,
+  hasScale: true,
+  labels: true,
+  scaleBackground: false,
+  barThickness: 24,
+  tickThickness: 24,
+  labelThickness: 60,
+  mainTickmarks: [],
+  scaleType: ScaleType.regular,
+  frameStyle: FrameStyle.regular,
+  priority: Priority.regular,
+  fillMode: FillMode.fill,
+  atSetpoint: false,
+  autoAtSetpoint: true,
+  autoAtSetpointDeadband: 1,
+  setpointAtZeroDeadband: 0.5,
+  state: InstrumentState.active,
+  advicePosition: AdvicePosition.inner,
+  ...overrides,
+});
+
+// A twelve-minute window in epoch milliseconds — what a slotted scale
+// receives from a chart on a time axis.
+const TWELVE_MINUTES_MS = 12 * 60_000;
+
+describe('tick ladder density guard (#1219)', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('drops a ladder that would exceed the tick cap instead of building it', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const parts = renderExternalScale(
+      bottomScale({
+        minValue: 0,
+        maxValue: TWELVE_MINUTES_MS,
+        primaryTickmarkInterval: 2,
+        secondaryTickmarkInterval: 1,
+      })
+    );
+    expect(parts.tickmarks.length).toBeLessThan(EXTERNAL_SCALE_MAX_TICKS);
+    expect(parts.labels).toEqual([]);
+    expect(warn).toHaveBeenCalled();
+  });
+
+  it('counts both endpoints: a range of exactly the cap in steps is one over', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const parts = renderExternalScale(
+      bottomScale({
+        minValue: 0,
+        maxValue: EXTERNAL_SCALE_MAX_TICKS,
+        primaryTickmarkInterval: 1,
+      })
+    );
+    expect(parts.labels).toEqual([]);
+    expect(warn).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps a ladder whose count is under the cap', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const parts = renderExternalScale(
+      bottomScale({
+        minValue: 0,
+        maxValue: TWELVE_MINUTES_MS,
+        primaryTickmarkInterval: 2 * 60_000,
+      })
+    );
+    // 0, 2 … 12 minutes: seven labels.
+    expect(parts.labels).toHaveLength(7);
+    expect(parts.tickmarks.length).toBeGreaterThan(0);
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+
+/** Renders one label fragment into a detached <svg> and returns its <text>. */
+function labelElement(label: SVGTemplateResult): SVGTextElement {
+  const host = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  render(svg`${label}`, host);
+  return host.querySelector('text')!;
+}
+
+const labelText = (label: SVGTemplateResult) =>
+  labelElement(label).textContent?.trim();
+const labelAttr = (label: SVGTemplateResult, name: string) =>
+  labelElement(label).getAttribute(name);
+
+describe('main tickmark labels (#1191)', () => {
+  it('labels [min, 0, max] instead of the interval ladder', () => {
+    const parts = renderExternalScale(
+      bottomScale({
+        minValue: -50,
+        maxValue: 100,
+        primaryTickmarkInterval: 10,
+        mainTickmarkLabels: true,
+      })
+    );
+    expect(parts.labels.map(labelText)).toEqual(['-50', '0', '100']);
+  });
+
+  it('clamps the end labels inward on a horizontal scale', () => {
+    const parts = renderExternalScale(
+      bottomScale({minValue: 0, maxValue: 100, mainTickmarkLabels: true})
+    );
+    expect(parts.labels.map((l) => labelAttr(l, 'text-anchor'))).toEqual([
+      'start',
+      'end',
+    ]);
+  });
+
+  it('clamps the end labels inward on a vertical scale', () => {
+    const parts = renderExternalScale(
+      bottomScale({
+        orientation: ExternalScaleOrientation.vertical,
+        side: ExternalScaleSide.left,
+        minValue: 0,
+        maxValue: 100,
+        mainTickmarkLabels: true,
+      })
+    );
+    // min sits at the bottom and hangs upward, max at the top hangs downward.
+    expect(parts.labels.map((l) => labelAttr(l, 'dominant-baseline'))).toEqual([
+      'auto',
+      'hanging',
+    ]);
+  });
+});

package/src/building-blocks/external-scale/external-scale.ts

@@ -424,6 +424,11 @@ export interface ExternalScaleConfig {
   hasScale: boolean;
   /** Show labels at primary tickmark intervals. */
   labels?: boolean;
+  /**
+   * Label the main tickmarks (`mainTickmarks`, or min / 0 / max) instead of
+   * the primary interval ladder. For scales too short for a ladder.
+   */
+  mainTickmarkLabels?: boolean;
   /** Show bar. */
   hasBar: boolean;
   /** Show background behind the scale tickmarks. */
@@ -932,6 +937,50 @@ function rangeIncludesZero(minValue: number, maxValue: number): boolean {
   return minValue <= 0 && maxValue >= 0;
 }
 
+/** The main tickmark values inside the range, ascending, without repeats. */
+function resolveMainTickmarkValues(
+  config: Pick<ExternalScaleConfig, 'mainTickmarks' | 'minValue' | 'maxValue'>
+): number[] {
+  const source = config.mainTickmarks?.length
+    ? config.mainTickmarks
+    : [config.minValue, 0, config.maxValue];
+  return [...new Set(source)]
+    .filter((v) => v >= config.minValue && v <= config.maxValue)
+    .sort((a, b) => a - b);
+}
+
+/**
+ * Ticks one ladder (primary, secondary, tertiary or labels) may hold. A
+ * denser ladder cannot be read on any scale length, and building it would
+ * exhaust the call stack.
+ */
+export const EXTERNAL_SCALE_MAX_TICKS = 1000;
+
+// Bounded: a scale re-renders on every property change, and a live range
+// that stays dense would otherwise grow this without limit.
+const DENSE_LADDER_WARNINGS_KEPT = 64;
+const warnedDenseLadders = new Set<string>();
+
+/** True when `interval` would put more than the cap on the range; warns once per pair. */
+function isLadderTooDense(
+  config: Pick<ExternalScaleConfig, 'minValue' | 'maxValue'>,
+  interval: number
+): boolean {
+  const count = Math.floor((config.maxValue - config.minValue) / interval) + 1;
+  if (!(count > EXTERNAL_SCALE_MAX_TICKS)) return false;
+  const key = `${config.minValue}/${config.maxValue}/${interval}`;
+  if (!warnedDenseLadders.has(key)) {
+    if (warnedDenseLadders.size >= DENSE_LADDER_WARNINGS_KEPT) {
+      warnedDenseLadders.clear();
+    }
+    warnedDenseLadders.add(key);
+    console.warn(
+      `[external-scale] tick interval ${interval} over the range ${config.minValue}…${config.maxValue} is ${count} ticks; the ladder is not drawn (limit ${EXTERNAL_SCALE_MAX_TICKS}). A range in epoch milliseconds needs an interval in milliseconds.`
+    );
+  }
+  return true;
+}
+
 function calculateAtSetpoint(config: ExternalScaleConfig): boolean {
   const isTouching = config.touching ?? false;
   return computeAtSetpoint({
@@ -1207,6 +1256,7 @@ function generateTickmarksAtInterval(
   const values: number[] = [];
 
   if (interval <= 0 || !Number.isFinite(interval)) return {svgs, values};
+  if (isLadderTooDense(config, interval)) return {svgs, values};
 
   const includesZero = rangeIncludesZero(config.minValue, config.maxValue);
 
@@ -1271,16 +1321,7 @@ function generateTickmarks(config: ExternalScaleConfig): SVGTemplateResult[] {
     const mainLen = config.frameStyle === 'flat' ? main + 4 : main;
     const dirLen = isOutwardPositive(config) ? mainLen : -mainLen;
 
-    // Use provided array or default to [minValue, 0, maxValue]
-    const mainTickValues =
-      config.mainTickmarks.length > 0
-        ? config.mainTickmarks
-        : [config.minValue, 0, config.maxValue];
-
-    for (const value of mainTickValues) {
-      // Skip if outside range
-      if (value < config.minValue || value > config.maxValue) continue;
-
+    for (const value of resolveMainTickmarkValues(config)) {
       // Skip min/max tickmarks when scaleBackground is enabled (they align with the background edges)
       if (
         config.scaleBackground &&
@@ -1347,10 +1388,7 @@ function generateTickmarks(config: ExternalScaleConfig): SVGTemplateResult[] {
 }
 
 function generateLabels(config: ExternalScaleConfig): SVGTemplateResult[] {
-  if (!config.labels || config.primaryTickmarkInterval === undefined) return [];
-
-  const interval = config.primaryTickmarkInterval;
-  if (interval <= 0 || !Number.isFinite(interval)) return [];
+  if (!config.labels) return [];
 
   const fontFamily = 'var(--font-family-main)';
   const fontColor = 'var(--instrument-tick-mark-label-secondary-color)';
@@ -1365,18 +1403,17 @@ function generateLabels(config: ExternalScaleConfig): SVGTemplateResult[] {
     ? base + (config.hasScale ? effectiveTickThickness : 0) + labelGap()
     : base - (config.hasScale ? effectiveTickThickness : 0) - labelGap();
 
-  const includesZero = rangeIncludesZero(config.minValue, config.maxValue);
-
   const labels: SVGTemplateResult[] = [];
 
-  const push = (v: number) => {
+  const push = (v: number, edge?: {anchor: string; baseline: string}) => {
     const main = valueToMainAxis(config, v);
     if (isVertical(config)) {
       const x = labelPos;
       const y = main;
       const anchor = isOutwardPositive(config) ? 'start' : 'end';
+      const baseline = edge?.baseline ?? 'middle';
       labels.push(
-        svg`<text x=${x} y=${y} text-anchor=${anchor} dominant-baseline="middle" font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v}</text>`
+        svg`<text x=${x} y=${y} text-anchor=${anchor} dominant-baseline=${baseline} font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v}</text>`
       );
       return;
     }
@@ -1384,12 +1421,33 @@ function generateLabels(config: ExternalScaleConfig): SVGTemplateResult[] {
     const y = labelPos;
     const x = main;
     const baseline = isOutwardPositive(config) ? 'hanging' : 'auto';
+    const anchor = edge?.anchor ?? 'middle';
     labels.push(
-      svg`<text x=${x} y=${y} text-anchor="middle" dominant-baseline=${baseline} font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v}</text>`
+      svg`<text x=${x} y=${y} text-anchor=${anchor} dominant-baseline=${baseline} font-family=${fontFamily} style="font-size: ${fontSize}" fill=${fontColor}>${v}</text>`
     );
   };
 
-  if (includesZero) {
+  if (config.mainTickmarkLabels) {
+    // The end labels turn inward so they stay inside the drawing length.
+    for (const v of resolveMainTickmarkValues(config)) {
+      const edge =
+        v === config.minValue
+          ? {anchor: 'start', baseline: 'auto'}
+          : v === config.maxValue
+            ? {anchor: 'end', baseline: 'hanging'}
+            : undefined;
+      push(v, edge);
+    }
+    return labels;
+  }
+
+  const interval = config.primaryTickmarkInterval;
+  if (interval === undefined || interval <= 0 || !Number.isFinite(interval)) {
+    return [];
+  }
+  if (isLadderTooDense(config, interval)) return [];
+
+  if (rangeIncludesZero(config.minValue, config.maxValue)) {
     for (let v = 0; v <= config.maxValue; v += interval) push(v);
     for (let v = -interval; v >= config.minValue; v -= interval) push(v);
   } else {

package/src/charthelpers/index.ts

@@ -8,3 +8,4 @@ export * from './tooltip.js';
 export * from './legend.js';
 export * from './x-value.js';
 export * from './label-threshold.js';
+export * from './range-labels.js';

package/src/charthelpers/range-labels.spec.ts

@@ -0,0 +1,46 @@
+import {describe, it, expect} from 'vitest';
+import {
+  formatRangeValue,
+  yRangeLabelValues,
+  measureRangeLabelGutters,
+  rangeLabelLineHeight,
+} from './range-labels.js';
+
+const font = {family: 'sans-serif', sizePx: 12, weight: '400'};
+
+describe('range label values', () => {
+  it('keeps integers integer and non-integers at one decimal', () => {
+    expect(formatRangeValue(7, 3, 7)).toBe('7');
+    expect(formatRangeValue(3.5, 3.5, 7)).toBe('3.5');
+    expect(formatRangeValue(7, 3.5, 7)).toBe('7.0');
+  });
+
+  it('adds 0 only when strictly inside the range', () => {
+    expect(yRangeLabelValues(-100, 100)).toEqual([-100, 0, 100]);
+    expect(yRangeLabelValues(0, 100)).toEqual([0, 100]);
+    expect(yRangeLabelValues(3, 7)).toEqual([3, 7]);
+  });
+});
+
+describe('range label gutters', () => {
+  const ctx = document.createElement('canvas').getContext('2d')!;
+
+  it('reserves the widest y label plus the gap, and one line for x', () => {
+    const g = measureRangeLabelGutters(
+      ctx,
+      font,
+      ['3', '1000'],
+      ['Jan', 'Dec']
+    );
+    ctx.font = '400 12px sans-serif';
+    expect(g.side).toBe(Math.ceil(ctx.measureText('1000').width) + 8);
+    expect(g.bottom).toBe(rangeLabelLineHeight(font) + 4);
+  });
+
+  it('reserves nothing for an axis without labels', () => {
+    expect(measureRangeLabelGutters(ctx, font, [], [])).toEqual({
+      side: 0,
+      bottom: 0,
+    });
+  });
+});

package/src/charthelpers/range-labels.ts

@@ -0,0 +1,93 @@
+/**
+ * Min / max labels for charts below the label threshold: which values to
+ * show and how much gutter their text needs. Pure; the chart measures on
+ * its own canvas and draws with its own plugin.
+ */
+export interface RangeLabelFont {
+  family: string;
+  sizePx: number;
+  weight: string;
+}
+
+/**
+ * @param font - Family, size in px and weight of the label text
+ * @returns The canvas `font` shorthand for that text
+ */
+export function rangeLabelFontString(font: RangeLabelFont): string {
+  return `${font.weight} ${font.sizePx}px ${font.family}`;
+}
+
+/**
+ * Chart.js' own line-height ratio, so the gutter matches its tick labels.
+ *
+ * @param font - The label font
+ * @returns One text line in px
+ */
+export function rangeLabelLineHeight(font: RangeLabelFont): number {
+  return Math.round(font.sizePx * 1.2);
+}
+
+/**
+ * One decimal only when an end of the range needs it; both ends share it.
+ *
+ * @param value - The value to print
+ * @param min - Lower end of the range the value belongs to
+ * @param max - Upper end of the range
+ * @returns The label text
+ */
+export function formatRangeValue(
+  value: number,
+  min: number,
+  max: number
+): string {
+  const decimals = Number.isInteger(min) && Number.isInteger(max) ? 0 : 1;
+  return value.toFixed(decimals);
+}
+
+/**
+ * @param min - Lower end of the y range
+ * @param max - Upper end of the y range
+ * @returns `[min, 0, max]`, with 0 only strictly inside the range
+ */
+export function yRangeLabelValues(min: number, max: number): number[] {
+  return min < 0 && max > 0 ? [min, 0, max] : [min, max];
+}
+
+export interface RangeLabelGutters {
+  /** Room on the y-axis side: the widest label plus the gap. */
+  side: number;
+  /** Room below the plot: one line plus the gap. */
+  bottom: number;
+}
+
+const SIDE_GAP = 8;
+const BOTTOM_GAP = 4;
+
+/**
+ * The x labels sit in a band one line tall, so only their count matters;
+ * their width is not measured.
+ *
+ * @param ctx - A 2d context to measure on; its font is restored afterwards
+ * @param font - The label font
+ * @param yTexts - Labels for the y side, empty when that side has none
+ * @param xTexts - Labels for the bottom, empty when the x side has none
+ * @returns Gutter sizes in px; 0 for a side without labels
+ */
+export function measureRangeLabelGutters(
+  ctx: CanvasRenderingContext2D,
+  font: RangeLabelFont,
+  yTexts: string[],
+  xTexts: string[]
+): RangeLabelGutters {
+  ctx.save();
+  ctx.font = rangeLabelFontString(font);
+  const widest = yTexts.reduce(
+    (width, text) => Math.max(width, ctx.measureText(text).width),
+    0
+  );
+  ctx.restore();
+  return {
+    side: yTexts.length ? Math.ceil(widest) + SIDE_GAP : 0,
+    bottom: xTexts.length ? rangeLabelLineHeight(font) + BOTTOM_GAP : 0,
+  };
+}

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

@@ -167,53 +167,40 @@ button {
   }
 }
 
-.blinking.alert-type-warning .alert-button,
-.blinking.alert-type-level-medium .alert-button {
+.flash-fast .alert-button {
   .visible-wrapper {
-    opacity: var(--warning-blink-on);
+    opacity: var(--flash-fast-on);
   }
 
   .blink {
-    opacity: var(--warning-blink-off);
+    opacity: var(--flash-fast-off);
   }
 }
 
-.blinking.alert-type-level-critical .alert-button {
+.flash-slow .alert-button {
   .visible-wrapper {
-    opacity: var(--critical-blink-on);
+    opacity: var(--flash-slow-on);
   }
 
   .blink {
-    opacity: var(--critical-blink-off);
+    opacity: var(--flash-slow-off);
   }
 }
 
-.blinking.alert-type-alarm .alert-button,
-.blinking.alert-type-level-high .alert-button {
+.flash-very-slow .alert-button {
   .visible-wrapper {
-    opacity: var(--alarm-blink-on);
+    opacity: var(--flash-very-slow-on);
   }
 
   .blink {
-    opacity: var(--alarm-blink-off);
-  }
-}
-
-.blinking.alert-type-caution .alert-button,
-.blinking.alert-type-level-low .alert-button {
-  .visible-wrapper {
-    opacity: var(--low-blink-on);
-  }
-
-  .blink {
-    opacity: var(--low-blink-off);
+    opacity: var(--flash-very-slow-off);
   }
 }
 
 .counter .alert-button .visible-wrapper,
 .counter .alert-button .blink {
   padding: 0px var(--ui-components-button-padding-horizontal);
-  gap: var(--app-components-global-alert-item-counter-spacing);
+  gap: var(--app-components-alert-button-item-counter-spacing);
 }
 
 .alert-type-alarm {

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

@@ -3,24 +3,67 @@ import './alert-button.js';
 import {ObcAlertButton} from './alert-button.js';
 import {render} from 'vitest-browser-lit';
 import {html} from 'lit';
+import {AlertType, FlashingSpeed} from '../../types.js';
 
-describe('obc-alert-button blinking lifecycle', () => {
-  async function setup() {
-    const screen = render(html`<obc-alert-button></obc-alert-button>`);
-    const el = screen.baseElement.querySelector(
+function durations(el: HTMLElement): number[] {
+  return el
+    .getAnimations()
+    .map((a) => (a.effect as KeyframeEffect).getTiming().duration as number);
+}
+
+describe('obc-alert-button flashing lifecycle', () => {
+  async function setup(
+    props: Partial<
+      Pick<
+        ObcAlertButton,
+        'nAlerts' | 'alertType' | 'blinking' | 'flashingSpeed'
+      >
+    > = {}
+  ) {
+    const screen = render(
+      html`<obc-alert-button
+        .nAlerts=${props.nAlerts ?? 1}
+        .alertType=${props.alertType ?? AlertType.Alarm}
+        .blinking=${props.blinking ?? true}
+        .flashingSpeed=${props.flashingSpeed ?? FlashingSpeed.Default}
+      ></obc-alert-button>`
+    );
+    const el = screen.container.querySelector(
       'obc-alert-button'
     ) as ObcAlertButton;
     await el.updateComplete;
     return el;
   }
 
-  it('installs the blink animations on first render', async () => {
+  it('flashes fast for a blinking alarm button with alerts', async () => {
     const el = await setup();
 
-    expect(el.getAnimations().length).toBeGreaterThan(0);
+    expect(durations(el)).toEqual([800]);
+    expect(el.shadowRoot!.querySelector('.wrapper.flash-fast')).not.toBeNull();
+  });
+
+  it('flashes slow for a warning and never for caution', async () => {
+    expect(durations(await setup({alertType: AlertType.Warning}))).toEqual([
+      1600,
+    ]);
+    expect(durations(await setup({alertType: AlertType.Caution}))).toEqual([]);
+  });
+
+  it('keeps blinking as the gate', async () => {
+    expect(durations(await setup({blinking: false}))).toEqual([]);
+    expect(durations(await setup({nAlerts: 0}))).toEqual([]);
+  });
+
+  it('honours an explicit flashingSpeed', async () => {
+    expect(
+      durations(await setup({flashingSpeed: FlashingSpeed.VerySlow}))
+    ).toEqual([3200]);
+    expect(
+      durations(await setup({flashingSpeed: FlashingSpeed.Fixed}))
+    ).toEqual([]);
   });
 
-  it('cancels the blink animations on disconnect', async () => {
+  it('cancels the animation on disconnect', async () => {
     const el = await setup();
 
     el.parentElement!.removeChild(el);
@@ -28,31 +71,29 @@ describe('obc-alert-button blinking lifecycle', () => {
     expect(el.getAnimations()).toHaveLength(0);
   });
 
-  it('resumes blinking after disconnect and reconnect', async () => {
+  it('resumes flashing 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.
+    // again, so this only passes if the controller re-syncs on connect.
     parent.appendChild(el);
     await el.updateComplete;
 
-    expect(el.getAnimations()).toHaveLength(initial);
+    expect(durations(el)).toEqual([800]);
   });
 
   it('does not accumulate animations across repeated updates', async () => {
     const el = await setup();
-    const initial = el.getAnimations().length;
 
-    el.nAlerts = 3;
+    el.large = true;
     await el.updateComplete;
-    el.nAlerts = 5;
+    el.counter = true;
     await el.updateComplete;
 
-    expect(el.getAnimations()).toHaveLength(initial);
+    expect(el.getAnimations()).toHaveLength(1);
   });
 });

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

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {ObcAlertButton, ObcAlertButtonType} from './alert-button.js';
-import {AlertType} from '../../types.js';
+import {AlertType, FlashingSpeed} from '../../types.js';
 import './alert-button.js';
 import {widthDecorator} from '../../storybook-util.js';
 
@@ -27,6 +27,10 @@ const meta: Meta<typeof ObcAlertButton> = {
       options: Object.values(ObcAlertButtonType),
       control: {type: 'select'},
     },
+    flashingSpeed: {
+      options: Object.values(FlashingSpeed),
+      control: {type: 'select'},
+    },
     width: {control: {type: 'range', min: 64, max: 1028, step: 1}},
   },
   decorators: [widthDecorator],