@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.143 → 2.0.0-next.145

package/src/components/checkbox-list/checkbox-list.spec.ts

@@ -0,0 +1,93 @@
+import {afterEach, describe, expect, it} from 'vitest';
+import './checkbox-list.js';
+import '../checkbox-item/checkbox-item.js';
+import type {ObcCheckboxItem} from '../checkbox-item/checkbox-item.js';
+import {ObcCheckboxItemHoverStyle} from '../checkbox-item/checkbox-item.js';
+
+const nextTick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+function item(level: number, expandable = false, expanded = false) {
+  const el = document.createElement('obc-checkbox-item');
+  el.label = `Level ${level}`;
+  el.level = level;
+  el.expandable = expandable;
+  el.expanded = expanded;
+  return el;
+}
+
+async function mount(items: ObcCheckboxItem[]) {
+  const list = document.createElement('obc-checkbox-list');
+  items.forEach((i) => list.appendChild(i));
+  document.body.appendChild(list);
+  await list.updateComplete;
+  await nextTick();
+  return list;
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('obc-checkbox-list', () => {
+  it('hides rows under a collapsed parent', async () => {
+    const rows = [item(1, true, false), item(2), item(1)];
+    await mount(rows);
+    expect(rows.map((r) => r.hidden)).toEqual([false, true, false]);
+  });
+
+  it('applies expand-toggle to the item and recomputes', async () => {
+    const rows = [item(1, true, false), item(2)];
+    await mount(rows);
+    rows[0]
+      .shadowRoot!.querySelector<HTMLButtonElement>('.chevron-button')!
+      .click();
+    await rows[0].updateComplete;
+    await nextTick();
+    expect(rows[0].expanded).toBe(true);
+    expect(rows[1].hidden).toBe(false);
+  });
+
+  it('recomputes when expanded is changed from outside', async () => {
+    const rows = [item(1, true, true), item(2)];
+    await mount(rows);
+    rows[0].expanded = false;
+    await rows[0].updateComplete;
+    await nextTick();
+    expect(rows[1].hidden).toBe(true);
+  });
+
+  it('forwards hoverStyle to every item, including late ones', async () => {
+    const rows = [item(0), item(0)];
+    const list = await mount(rows);
+    list.hoverStyle = ObcCheckboxItemHoverStyle.visualTarget;
+    await list.updateComplete;
+    expect(rows.map((r) => r.hoverStyle)).toEqual([
+      'visual-target',
+      'visual-target',
+    ]);
+    const late = item(0);
+    list.appendChild(late);
+    await nextTick();
+    expect(late.hoverStyle).toBe('visual-target');
+  });
+
+  it('recomputes when a collapsed row stops being expandable', async () => {
+    const rows = [item(1, true, false), item(2)];
+    await mount(rows);
+    expect(rows[1].hidden).toBe(true);
+    rows[0].expandable = false;
+    await rows[0].updateComplete;
+    await nextTick();
+    expect(rows[1].hidden).toBe(false);
+  });
+
+  it('is the group and keeps a role the consumer set', async () => {
+    const list = await mount([]);
+    expect(list.getAttribute('role')).toBe('group');
+    const custom = document.createElement('obc-checkbox-list');
+    custom.setAttribute('role', 'presentation');
+    document.body.appendChild(custom);
+    await custom.updateComplete;
+    expect(custom.getAttribute('role')).toBe('presentation');
+  });
+});

package/src/components/checkbox-list/checkbox-list.stories.ts

@@ -0,0 +1,161 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {ObcCheckboxList} from './checkbox-list.js';
+import './checkbox-list.js';
+import '../checkbox-item/checkbox-item.js';
+import {ObcCheckboxItemHoverStyle} from '../checkbox-item/checkbox-item.js';
+import {CheckboxStatus} from '../checkbox/checkbox.js';
+
+const meta = {
+  title: 'UI Components/Selection Controls and Switches/Checkbox List',
+  tags: ['autodocs', '6.1', 'beta'],
+  component: 'obc-checkbox-list',
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: ['change', 'expand-toggle'],
+    },
+  },
+  argTypes: {
+    hoverStyle: {
+      name: 'Hover style',
+      options: Object.values(ObcCheckboxItemHoverStyle),
+      control: {type: 'select'},
+    },
+  },
+  args: {
+    hoverStyle: ObcCheckboxItemHoverStyle.touchTarget,
+  },
+} satisfies Meta<ObcCheckboxList>;
+
+export default meta;
+type Story = StoryObj<ObcCheckboxList>;
+
+const regularRows = html`
+  <obc-checkbox-item label="Label"></obc-checkbox-item>
+  <obc-checkbox-item
+    label="Label"
+    status=${CheckboxStatus.checked}
+  ></obc-checkbox-item>
+  <obc-checkbox-item
+    label="Label"
+    status=${CheckboxStatus.checked}
+  ></obc-checkbox-item>
+  <obc-checkbox-item label="Label"></obc-checkbox-item>
+`;
+
+const nestedRows = html`
+  <obc-checkbox-item
+    level="1"
+    expandable
+    expanded
+    label="Label"
+    status=${CheckboxStatus.mixed}
+  ></obc-checkbox-item>
+  <obc-checkbox-item
+    level="2"
+    label="Label"
+    status=${CheckboxStatus.checked}
+  ></obc-checkbox-item>
+  <obc-checkbox-item level="2" label="Label"></obc-checkbox-item>
+  <obc-checkbox-item level="1" expandable label="Label"></obc-checkbox-item>
+  <obc-checkbox-item
+    level="2"
+    label="Hidden until expanded"
+  ></obc-checkbox-item>
+`;
+
+/** The Figma frame widths: 240px for a regular list, 320px for a nested one. */
+const renderRegular: Story['render'] = (args) =>
+  html`<obc-checkbox-list style="width:240px" .hoverStyle=${args.hoverStyle}>
+    ${regularRows}
+  </obc-checkbox-list>`;
+
+const renderNested: Story['render'] = (args) =>
+  html`<obc-checkbox-list style="width:320px" .hoverStyle=${args.hoverStyle}>
+    ${nestedRows}
+  </obc-checkbox-list>`;
+
+export const Regular: Story = {
+  render: renderRegular,
+};
+
+export const Nested: Story = {
+  render: renderNested,
+};
+
+export const RegularVisualTarget: Story = {
+  args: {hoverStyle: ObcCheckboxItemHoverStyle.visualTarget},
+  render: renderRegular,
+};
+
+export const NestedVisualTarget: Story = {
+  args: {hoverStyle: ObcCheckboxItemHoverStyle.visualTarget},
+  render: renderNested,
+};
+
+export const WithDescriptions: Story = {
+  render: (args) =>
+    html`<obc-checkbox-list style="width:320px" .hoverStyle=${args.hoverStyle}>
+      <obc-checkbox-item
+        level="1"
+        expandable
+        expanded
+        label="Reports"
+        description="All report types"
+        status=${CheckboxStatus.mixed}
+      ></obc-checkbox-item>
+      <obc-checkbox-item
+        level="2"
+        label="Monthly"
+        description="Sent on the 1st"
+        status=${CheckboxStatus.checked}
+      ></obc-checkbox-item>
+      <obc-checkbox-item
+        level="2"
+        label="Quarterly"
+        description="Sent every third month"
+      ></obc-checkbox-item>
+    </obc-checkbox-list>`,
+};
+
+/** `level` is not capped at 2: each level above 1 adds one more spacer. */
+export const DeepNesting: Story = {
+  render: (args) =>
+    html`<obc-checkbox-list style="width:320px" .hoverStyle=${args.hoverStyle}>
+      <obc-checkbox-item
+        level="1"
+        expandable
+        expanded
+        label="Documents"
+        status=${CheckboxStatus.mixed}
+      ></obc-checkbox-item>
+      <obc-checkbox-item
+        level="2"
+        expandable
+        expanded
+        label="Reports"
+        status=${CheckboxStatus.mixed}
+      ></obc-checkbox-item>
+      <obc-checkbox-item
+        level="3"
+        label="Monthly"
+        status=${CheckboxStatus.checked}
+      ></obc-checkbox-item>
+      <obc-checkbox-item level="3" label="Quarterly"></obc-checkbox-item>
+      <obc-checkbox-item
+        level="2"
+        expandable
+        label="Presentations"
+      ></obc-checkbox-item>
+      <obc-checkbox-item
+        level="3"
+        label="Hidden until expanded"
+      ></obc-checkbox-item>
+      <obc-checkbox-item
+        level="1"
+        expandable
+        label="Images"
+      ></obc-checkbox-item>
+    </obc-checkbox-list>`,
+};

package/src/components/checkbox-list/checkbox-list.ts

@@ -0,0 +1,130 @@
+import {LitElement, html, unsafeCSS, type PropertyValues} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../../decorator.js';
+import componentStyle from './checkbox-list.css?inline';
+import {
+  ObcCheckboxItem,
+  ObcCheckboxItemHoverStyle,
+  type ObcCheckboxItemExpandToggleEvent,
+} from '../checkbox-item/checkbox-item.js';
+import {computeHiddenRows} from './checkbox-list-visibility.js';
+
+/**
+ * `<obc-checkbox-list>` – A vertical list of `<obc-checkbox-item>` rows that
+ * collapses the rows under a closed parent.
+ *
+ * ### Overview
+ * Rows are slotted flat, in document order; the tree is read from each row's
+ * `level`. When an expandable row is collapsed, the list sets `hidden` on
+ * every following row with a greater level until a row of equal or smaller
+ * level. The list also applies its `hoverStyle` to every row so a list reads
+ * as one surface.
+ *
+ * ### Features
+ * - Flat markup, level-driven hierarchy — no nesting of elements required.
+ * - Handles `expand-toggle`: sets the row's `expanded` and recomputes.
+ * - Reacts to `expandable`, `expanded` and `level` changes made from outside.
+ * - `hoverStyle` forwarded to slotted rows, including rows added later.
+ *
+ * ### Usage Guidelines
+ * - Start levels at 1 when any row is expandable so chevrons and checkboxes
+ *   align; use level 0 for a plain list.
+ * - The list owns the `hidden` attribute of its rows; do not bind it yourself.
+ * - Selection stays per row: listen to each row's `change`.
+ *
+ * ### Accessibility
+ * The host is the `role="group"`; rows are ordinary checkboxes and buttons in
+ * the natural tab order and hidden rows leave it. This is a group of
+ * checkboxes with disclosure buttons, not a tree widget, so there is no
+ * roving tabindex. Name the group with `aria-label` or `aria-labelledby` on
+ * the host.
+ *
+ * ### Example
+ * ```html
+ * <obc-checkbox-list aria-label="Report types">
+ *   <obc-checkbox-item level="1" expandable expanded status="mixed" label="Reports"></obc-checkbox-item>
+ *   <obc-checkbox-item level="2" status="checked" label="Monthly"></obc-checkbox-item>
+ *   <obc-checkbox-item level="2" label="Quarterly"></obc-checkbox-item>
+ *   <obc-checkbox-item level="1" expandable label="Archive"></obc-checkbox-item>
+ * </obc-checkbox-list>
+ * ```
+ *
+ * @property hoverStyle - Hover treatment applied to every slotted row: `touch-target` or `visual-target`.
+ * @slot - `obc-checkbox-item` rows in document order; hierarchy comes from each row's `level`.
+ * @beta
+ */
+@customElement('obc-checkbox-list')
+export class ObcCheckboxList extends LitElement {
+  @property({type: String}) hoverStyle: ObcCheckboxItemHoverStyle =
+    ObcCheckboxItemHoverStyle.touchTarget;
+
+  private mutationObserver?: MutationObserver;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    // The role sits on the host so a consumer's aria-label / aria-labelledby
+    // names the group.
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'group');
+    // Rows are light-DOM children owned by the consumer, so `expandable`,
+    // `expanded` and `level` can change without any event reaching the list.
+    this.mutationObserver = new MutationObserver(() => this.sync());
+    this.mutationObserver.observe(this, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ['expandable', 'expanded', 'level'],
+      subtree: true,
+    });
+    this.addEventListener('expand-toggle', this.onExpandToggle);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+    this.mutationObserver = undefined;
+    this.removeEventListener('expand-toggle', this.onExpandToggle);
+  }
+
+  override firstUpdated(): void {
+    this.sync();
+  }
+
+  override updated(changed: PropertyValues<this>): void {
+    if (changed.has('hoverStyle')) this.sync();
+  }
+
+  private onExpandToggle = (event: Event): void => {
+    const row = event.target;
+    if (!(row instanceof ObcCheckboxItem)) return;
+    row.expanded = (event as ObcCheckboxItemExpandToggleEvent).detail;
+    this.sync();
+  };
+
+  private rows(): ObcCheckboxItem[] {
+    return Array.from(this.children).filter(
+      (el): el is ObcCheckboxItem => el instanceof ObcCheckboxItem
+    );
+  }
+
+  private sync(): void {
+    const rows = this.rows();
+    const hidden = computeHiddenRows(rows);
+    rows.forEach((row, i) => {
+      row.hoverStyle = this.hoverStyle;
+      row.hidden = hidden[i];
+    });
+  }
+
+  override render() {
+    return html`<div class="list">
+      <slot @slotchange=${() => this.sync()}></slot>
+    </div>`;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-checkbox-list': ObcCheckboxList;
+  }
+}

package/src/integration-systems/integration-app-bar/integration-app-bar-sizing.stories.ts

@@ -0,0 +1,130 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {ObcIntegrationAppBar} from './integration-app-bar.js';
+import './integration-app-bar.js';
+import '../../components/app-button/app-button.js';
+import '../../icons/icon-placeholder.js';
+import {html} from 'lit';
+
+const appLabels = [
+  'Home',
+  'Diagnostics',
+  'Data Explorer',
+  'Settings',
+  'Alerts',
+  'Reports',
+  'System Overview',
+  'Logs',
+];
+
+const appBar = (labels: string[]) => html`
+  <obc-integration-app-bar>
+    ${labels.map(
+      (label, i) => html`
+        <obc-app-button
+          slot="apps"
+          size="small"
+          label=${label}
+          integration
+          ?checked=${i === 0}
+        >
+          <obi-placeholder slot="icon"></obi-placeholder>
+        </obc-app-button>
+      `
+    )}
+  </obc-integration-app-bar>
+`;
+
+const meta: Meta<typeof ObcIntegrationAppBar> = {
+  title: 'Integration Systems/App Bar/Sizing',
+  tags: ['experimental'],
+  component: 'obc-integration-app-bar',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'How `obc-integration-app-bar` sizes labelled app buttons. The app row is a grid of auto-placed columns sized `minmax(var(--obc-integration-app-bar-app-width, max-content), 1fr)`; the cases below show how those equal-width tracks respond to mixed label lengths, narrow containers and wrapper elements.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ObcIntegrationAppBar>;
+
+export const EightLabelledApps: Story = {
+  render: () => appBar(appLabels),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'In a wide bar, the grid gives every app the same column width, resolved from the widest label in the set. Short labels keep extra inline space, long labels stay on one line, and the row remains centred because every track uses the same size.',
+      },
+    },
+  },
+};
+
+export const NarrowBar: Story = {
+  render: () => html`
+    <div style="width: 560px; outline: 1px dashed magenta;">
+      ${appBar(appLabels)}
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The same eight buttons in a 560px wide bar. The grid keeps equal columns, but their combined minimum width can still exceed the available space, so the centred app row overflows the dashed frame instead of shrinking the buttons.',
+      },
+    },
+  },
+};
+
+export const LabelsSetAfterFirstRender: Story = {
+  render: () =>
+    appBar(['App', 'App', 'App', 'App', 'App', 'App', 'App', 'App']),
+  play: async ({canvasElement}) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const buttons = canvasElement.querySelectorAll('obc-app-button');
+    buttons.forEach((button, i) => {
+      button.label = appLabels[i];
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The bar renders with placeholder labels and the real labels are assigned a second later, which matches data-bound or translated labels. CSS Grid recalculates the column sizing from the updated content, so the buttons expand from the placeholder width to the widest final label without a second measurement pass.',
+      },
+    },
+  },
+};
+
+export const ButtonsWrappedInAnElement: Story = {
+  render: () => html`
+    <obc-integration-app-bar>
+      ${appLabels.map(
+        (label, i) => html`
+          <div slot="apps">
+            <obc-app-button
+              size="small"
+              label=${label}
+              integration
+              ?checked=${i === 0}
+            >
+              <obi-placeholder slot="icon"></obi-placeholder>
+            </obc-app-button>
+          </div>
+        `
+      )}
+    </obc-integration-app-bar>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Every app button sits inside a wrapper element, here a plain `div` standing in for the tooltip trigger a framework wrapper emits. The slotted wrapper is flattened with `display: contents`, so the button still becomes the grid item and keeps the same equal-width column sizing as the unwrapped case.',
+      },
+    },
+  },
+};

package/src/integration-systems/integration-app-bar/integration-app-bar.css

@@ -24,8 +24,18 @@
   }
 
   .center {
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(
+      var(--obc-integration-app-bar-app-width, max-content),
+      1fr
+    );
     gap: var(--app-components-app-menu-app-button-spacing);
     justify-content: center;
   }
 }
+
+/* Svelte wrappers add a slot container that must not become a grid item. */
+slot[name="apps"]::slotted(:not(obc-app-button)) {
+  display: contents;
+}

package/src/integration-systems/integration-app-bar/integration-app-bar.ts

@@ -3,7 +3,8 @@ import {customElement} from '../../decorator.js';
 import compentStyle from './integration-app-bar.css?inline';
 
 /**
- * @slot apps - Application buttons; slotted elements are normalized to a uniform width
+ * @slot apps - Application buttons; every button is laid out at the width of the widest one
+ * @cssprop [--obc-integration-app-bar-app-width=max-content] - Minimum width of each app-button grid track. Tracks may grow equally to fit wider content.
  * @experimental
  */
 @customElement('obc-integration-app-bar')
@@ -13,38 +14,13 @@ export class ObcIntegrationAppBar extends LitElement {
       <div class="wrapper">
         <div class="left-side"></div>
         <div class="center">
-          <slot name="apps" @slotchange=${this.handleAppsSlotChange}></slot>
+          <slot name="apps"></slot>
         </div>
         <div class="right-side"></div>
       </div>
     `;
   }
 
-  private handleAppsSlotChange(event: Event) {
-    const slot = event.target as HTMLSlotElement;
-    const buttons = slot.assignedElements() as HTMLElement[];
-
-    if (buttons.length === 0) {
-      return;
-    }
-
-    for (const btn of buttons) {
-      btn.style.width = '';
-    }
-
-    requestAnimationFrame(() => {
-      const maxWidth = Math.max(
-        ...buttons.map((btn) => btn.getBoundingClientRect().width)
-      );
-
-      if (maxWidth > 0) {
-        for (const btn of buttons) {
-          btn.style.width = `${maxWidth}px`;
-        }
-      }
-    });
-  }
-
   static override styles = unsafeCSS(compentStyle);
 }
 

package/src/navigation-instruments/readout/readout.stories.ts

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {html, nothing} from 'lit';
-import {userEvent} from 'storybook/test';
+import {expect, spyOn, userEvent} from 'storybook/test';
 import {gsap} from 'gsap';
 import './readout.js';
 import '../../components/navigation-item/navigation-item.js';
@@ -1587,20 +1587,17 @@ export const TestCases: Story = {
       </style>
       <div class="test-case-container">
         <obc-readout
-          .size=${ReadoutSize.small}
           .direction=${ReadoutDirection.horizontal}
           .value=${123}
           .unit=${'kn'}
         ></obc-readout>
         <obc-readout
-          .size=${ReadoutSize.small}
           .direction=${ReadoutDirection.horizontal}
           .value=${'Thermo On'}
           .valueType=${ReadoutValueType.text}
           .label=${'Operating mode'}
         ></obc-readout>
         <obc-readout
-          .size=${ReadoutSize.small}
           .direction=${ReadoutDirection.horizontal}
           .value=${'Normal'}
           .valueType=${ReadoutValueType.text}
@@ -1610,6 +1607,62 @@ export const TestCases: Story = {
   },
 };
 
+/**
+ * A horizontal readout given a `size` other than `large` warns once per
+ * element. The tier is discarded (the arrangement exists in the large tier
+ * only), and a silent discard is indistinguishable from a bug to a consumer
+ * (#1182). A removed `size` attribute arrives as `null` through Lit's String
+ * converter and counts as unset. Driven through `willUpdate` on detached
+ * elements, like `Readout Block → TestValidationSurvivesUnrelatedUpdate`.
+ */
+export const TestHorizontalSizeWarning: Story = {
+  render: () => html`<span>Regression test — see the play function.</span>`,
+  play: async () => {
+    type Probe = HTMLElement & {
+      size?: ReadoutSize;
+      direction?: ReadoutDirection;
+      willUpdate: (changed: Map<string, unknown>) => void;
+    };
+    const probe = (
+      size: ReadoutSize | undefined,
+      direction: ReadoutDirection
+    ) => {
+      const el = document.createElement('obc-readout') as Probe;
+      el.size = size;
+      el.direction = direction;
+      return el;
+    };
+    const update = (el: Probe) => el.willUpdate(new Map());
+    const warn = spyOn(console, 'warn').mockImplementation(() => undefined);
+    try {
+      update(probe(ReadoutSize.large, ReadoutDirection.horizontal));
+      update(probe(ReadoutSize.small, ReadoutDirection.vertical));
+      update(probe(undefined, ReadoutDirection.horizontal));
+      const removed = probe(ReadoutSize.small, ReadoutDirection.horizontal);
+      removed.setAttribute('size', ReadoutSize.small);
+      removed.removeAttribute('size');
+      update(removed);
+      await expect(warn).not.toHaveBeenCalled();
+
+      const small = probe(ReadoutSize.small, ReadoutDirection.horizontal);
+      update(small);
+      await expect(warn).toHaveBeenCalledTimes(1);
+      await expect(warn.mock.calls[0][0]).toMatch(
+        /\[obc-readout\].*size.*horizontal/
+      );
+      await expect(warn.mock.calls[0][1]).toBe(small);
+
+      update(small);
+      await expect(warn).toHaveBeenCalledTimes(1);
+
+      update(probe(ReadoutSize.medium, ReadoutDirection.horizontal));
+      await expect(warn).toHaveBeenCalledTimes(2);
+    } finally {
+      warn.mockRestore();
+    }
+  },
+};
+
 /**
  * Figma 6.1 "Equal size": value and setpoint always share the primary size —
  * the missing fourth mode beside primary-secondary (`always-visible`),