@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.48 → 2.0.0-next.50

package/script/generate-bundle-entry.ts

@@ -0,0 +1,77 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import {globSync} from 'glob';
+
+const BUNDLE_FILE = 'bundle.ts';
+
+function findComponentFiles(
+  directory: string,
+  excludeFiles: string[] = []
+): string[] {
+  const components: string[] = [];
+  const fullPath = path.join(process.cwd(), directory);
+
+  if (!fs.existsSync(fullPath)) {
+    return components;
+  }
+
+  const items = globSync(`${fullPath}/**/*.ts`, {
+    ignore: [
+      '**/*.stories.ts',
+      '**/*.spec.ts',
+      '**/*.test.ts',
+      '**/_test-utils.ts',
+    ],
+  });
+  const rootPath = path.join(process.cwd());
+
+  for (const item of items) {
+    if (
+      item.endsWith('.ts') &&
+      !item.endsWith('.stories.ts') &&
+      !excludeFiles.includes(item)
+    ) {
+      const filename = item.replace('.ts', '');
+      const relativePath = filename.replace(rootPath, '');
+
+      components.push(relativePath);
+    }
+  }
+
+  return components.sort((a, b) => a.localeCompare(b));
+}
+
+function generateBundleFile() {
+  console.log(`Generating ${BUNDLE_FILE}...`);
+
+  let content = `// Bundle entry file - imports all web components for standalone browser usage
+// Auto-generated by script/generate-bundle-entry.ts - do not edit manually
+
+// Types
+export * from './src/types.js';
+
+`;
+  const folders = fs
+    .readdirSync('src')
+    .map((dir) => path.join('src', dir))
+    .filter((dir) => fs.statSync(dir).isDirectory());
+
+  for (const folder of folders) {
+    console.log(`Adding components from ${folder}...`);
+    const components = findComponentFiles(folder);
+
+    if (components.length > 0) {
+      content += `// ${folder}\n`;
+      for (const comp of components) {
+        content += `import '.${comp}.js';\n`;
+      }
+      content += '\n';
+    }
+  }
+
+  fs.writeFileSync(BUNDLE_FILE, content, 'utf-8');
+
+  console.log(`✓ Generated ${BUNDLE_FILE} with all component imports`);
+}
+
+generateBundleFile();

package/script/prepare-full-bundle.ts

@@ -0,0 +1,105 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const scriptPath = path.resolve(process.argv[1]);
+const scriptDirectory = path.dirname(scriptPath);
+
+const packageRoot = path.resolve(scriptDirectory, '..');
+const sourcePackagePath = path.join(packageRoot, 'package.json');
+const fullBundlePackageRoot = path.join(packageRoot, '.full-bundle-publish');
+const sourcePackage = JSON.parse(fs.readFileSync(sourcePackagePath, 'utf-8'));
+const releaseVersion = process.argv[2] ?? sourcePackage.version;
+const {scripts: _scripts, ...sourcePackageWithoutScripts} = sourcePackage;
+
+const nonWorkingScripts = new Set([
+  'wrappers',
+  'build:full',
+  'wrappers:clean',
+  'wrappers:build',
+  'wrappers:generate',
+  'wrappers:post-fix',
+  'test-storybook:docker',
+]);
+
+const scripts = Object.fromEntries(
+  Object.entries(_scripts).filter(([name]) => !nonWorkingScripts.has(name))
+);
+
+const fullBundlePackage = {
+  ...sourcePackageWithoutScripts,
+  name: '@oicl/openbridge-webcomponents-full-bundle',
+  version: releaseVersion,
+  scripts,
+  files: [
+    'dist',
+    '!dist/AR-test-image.png',
+    '!dist/companylogo-day.png',
+    'bundle/openbridge-webcomponents.bundle.js',
+    'bundle/openbridge-webcomponents.bundle.js.map',
+    '.storybook',
+    'script',
+    'xliff',
+    'src',
+    'docs',
+    'custom-elements.json',
+    'tsconfig.json',
+    'eslint.config.mjs',
+    'vite.config.ts',
+    'postcss.config.mjs',
+    'lit-localize.json',
+    'new-component.ts',
+    'fix-imports.mjs',
+    'fix-js-extensions.mjs',
+    'vitest.browser.config.ts',
+    'vitest.config.ts',
+  ],
+};
+
+fs.rmSync(fullBundlePackageRoot, {recursive: true, force: true});
+fs.mkdirSync(fullBundlePackageRoot, {recursive: true});
+
+for (const dirName of [
+  'dist',
+  'bundle',
+  'src',
+  'docs',
+  'xliff',
+  'script',
+  '.storybook',
+]) {
+  fs.cpSync(
+    path.join(packageRoot, dirName),
+    path.join(fullBundlePackageRoot, dirName),
+    {
+      recursive: true,
+    }
+  );
+}
+
+for (const file of [
+  'custom-elements.json',
+  'tsconfig.json',
+  'vite.config.ts',
+  'eslint.config.mjs',
+  'postcss.config.mjs',
+  'lit-localize.json',
+  'new-component.ts',
+  'fix-imports.mjs',
+  'fix-js-extensions.mjs',
+  'vitest.browser.config.ts',
+  'vitest.config.ts',
+]) {
+  fs.copyFileSync(
+    path.join(packageRoot, file),
+    path.join(fullBundlePackageRoot, file)
+  );
+}
+
+fs.writeFileSync(
+  path.join(fullBundlePackageRoot, 'package.json'),
+  JSON.stringify(fullBundlePackage, null, 2) + '\n'
+);
+
+console.log(
+  `✓ Prepared full-bundle publish directory: ${fullBundlePackageRoot}`
+);

package/script/sort-custom-element-manifest.ts

@@ -0,0 +1,67 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+interface Declaration {
+  kind: string;
+  name?: string;
+  [key: string]: unknown;
+}
+
+interface Module {
+  kind: string;
+  path: string;
+  declarations?: Declaration[];
+  exports?: unknown[];
+  [key: string]: unknown;
+}
+
+interface CustomElementsJson {
+  schemaVersion: string;
+  readme: string;
+  modules: Module[];
+}
+
+const filePath = path.join(process.cwd(), 'custom-elements.json');
+
+const data: CustomElementsJson = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+
+const filteredModules = data.modules
+  .map((module): Module | null => {
+    if (!module.declarations || !Array.isArray(module.declarations)) {
+      return null;
+    }
+
+    const filteredDeclarations = module.declarations.filter(
+      (declaration: Declaration) => {
+        return declaration.name && declaration.name.startsWith('Obc');
+      }
+    );
+
+    if (filteredDeclarations.length === 0) {
+      return null;
+    }
+
+    return {
+      ...module,
+      declarations: filteredDeclarations,
+    };
+  })
+  .filter((module): module is Module => module !== null);
+
+filteredModules.sort((a, b) => {
+  const pathA = a.path || '';
+  const pathB = b.path || '';
+  return pathA.localeCompare(pathB);
+});
+
+const result: CustomElementsJson = {
+  ...data,
+  modules: filteredModules,
+};
+
+fs.writeFileSync(filePath, JSON.stringify(result, null, 2) + '\n', 'utf8');
+
+console.log(
+  `Filtered and sorted ${filteredModules.length} modules with Obc declarations`
+);
+console.log(`Original file had ${data.modules.length} modules`);

package/src/automation/automation-tank/automation-tank.css

@@ -212,14 +212,6 @@
 :host([static]) .halo > .tag {
   flex: 0 0 auto;
 }
-/* Override the global `min-height: 24px` on `.badges` so empty badge rows
- * don't reserve space in compact/static — the spec says "if there are no
- * badges it would grow upward". The slot-driven `?hidden` attribute on
- * empty cells makes them `display: none` (see below). */
-:host([compact]) .halo > .badges,
-:host([static]) .halo > .badges {
-  min-height: 0;
-}
 /* `hidden` attribute support: needed because the cells set an explicit
  * display value (`flex` / `block`), which would otherwise override
  * `hidden`'s default `display: none`. Removing the cell from the flex
@@ -331,7 +323,7 @@
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 .tank-frame:not(.orientation-horizontal) .grid > .readout {
   grid-row: 2;
@@ -357,7 +349,7 @@
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 .tank-frame.orientation-horizontal .grid > .bar-container {
   grid-row: 2;
@@ -367,7 +359,6 @@
   grid-row: 2;
   grid-column: 2;
   align-self: stretch;
-  padding-left: 8px;
   min-width: 96px;
 }
 
@@ -375,7 +366,7 @@
 .badges {
   display: flex;
   justify-content: end;
-  min-height: 24px;
+  gap: 4px;
   pointer-events: auto;
 }
 
@@ -383,7 +374,7 @@
   display: block;
   pointer-events: auto;
   @mixin font-instrument-label;
-  color: var(--instrument-regular-secondary-color);
+  color: var(--element-neutral-color);
   /* Tag text must never break across lines — it is a fixed identifier
    * (e.g. `FUEL`, `#0000`) that loses meaning if hyphenated or wrapped. */
   white-space: nowrap;
@@ -403,11 +394,31 @@
   /* Keep `90%` together — the parent flex prevents flex-item wrapping but
    * not text wrapping inside `.percent` (number + `<span>%</span>`). */
   white-space: nowrap;
-  @mixin font-instrument-label;
-  color: var(--instrument-regular-secondary-color);
+  color: var(--element-neutral-color);
+
+  .percent {
+    @mixin font-instrument-value-regular-neutral;
+  }
+
+  .percent-symbol {
+    @mixin font-instrument-unit;
+    margin-left: 1px;
+  }
 }
-.readout-compact .percent-symbol {
-  margin-left: 1px;
+
+/* Static readout: max-value + unit (no percent, no trend icon). Tighter
+ * 2px gap and small-neutral value sizing per design spec. Color is
+ * inherited from `.readout-compact`. */
+.readout-static {
+  gap: 2px;
+
+  slot[name="max-value"] {
+    @mixin font-instrument-value-small-neutral;
+  }
+
+  slot[name="unit"] {
+    @mixin font-instrument-unit;
+  }
 }
 
 .header {
@@ -415,18 +426,23 @@
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
-  /* TODO: we will need such divider in the future for the 'rich' option */
-  /* border-bottom: 1px solid var(--border-outline-color); */
-  padding-bottom: 2px;
 
   .percent {
     @mixin font-instrument-value-enhanced-neutral;
+    color: var(--element-neutral-color);
+    padding-bottom: var(
+      --global-typography-instrument-value-large-padding-bottom
+    );
     /* Keep the number and the trailing `%` symbol on one line. */
     white-space: nowrap;
   }
 
   .percent-symbol {
-    @mixin font-body;
+    @mixin font-instrument-unit;
+    /* `inline-block` so `padding-bottom` actually applies (ignored on
+     * plain inline text). */
+    display: inline-block;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 }
 
@@ -444,18 +460,100 @@
 
   .current-value {
     @mixin font-instrument-value-regular-active;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
   }
 
   .divider {
     padding-left: 4px;
     padding-right: 4px;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
   .max-value {
     @mixin font-instrument-value-regular-neutral;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
+  }
+
+  .unit {
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 }
 
+.rich-divider {
+  border-top: 1px solid var(--border-divider-color);
+  margin-top: 8px;
+}
+
+.rich {
+  display: grid;
+  /* label takes remaining space; value (right-aligned) and suffix
+   * (left-aligned) form fixed content columns so digit right edges and
+   * suffix left edges align vertically across all rows. */
+  grid-template-columns: 1fr auto auto;
+  align-items: baseline;
+  row-gap: 4px;
+  padding-top: 8px;
+  white-space: nowrap;
+  @mixin font-instrument-unit;
+}
+
+.rich-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: baseline;
+  padding-left: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+  padding-right: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+}
+
+.rich-label {
+  @mixin font-instrument-label;
+  color: var(--element-inactive-color);
+  padding-right: 8px;
+  text-align: left;
+}
+
+.rich-value {
+  @mixin font-instrument-value-regular-neutral;
+  color: var(--element-neutral-color);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.rich-suffix {
+  display: inline-flex;
+  align-items: baseline;
+  /* Default 2px gap between value and unit when there is no degree/percent
+   * glyph. When a glyph is present it sits flush against the value and the
+   * unit follows flush after the glyph (see `.rich-glyph + .rich-unit`). */
+  padding-left: 2px;
+}
+
+.rich-suffix:has(.rich-glyph) {
+  padding-left: 0;
+}
+
+.rich-glyph {
+  @mixin font-instrument-value-regular-neutral;
+  color: var(--element-neutral-color);
+}
+
+.rich-unit {
+  color: var(--element-inactive-color);
+}
+
+.rich-glyph + .rich-unit {
+  padding-left: 0;
+}
+
 /* The chart cell is a plain sizing/clipping box. Both child renderers —
  * `obc-gauge-trend` (graph / graph-and-bar modes) and `obc-bar-vertical`
  * (bar mode) — paint their own background, border and border-radius. */

package/src/automation/automation-tank/automation-tank.stories.ts

@@ -6,6 +6,7 @@ import {
   TankPositioning,
   TankTrend,
   TankType,
+  type TankReadoutItem,
 } from './automation-tank.js';
 import './automation-tank.js';
 import {html} from 'lit';
@@ -56,6 +57,12 @@ const SAMPLE_ADVICE: LinearAdvice[] = [
   {min: 7500, max: 9000, type: AdviceType.advice, hinted: false},
 ];
 
+const SAMPLE_READOUT: TankReadoutItem[] = [
+  {label: 'Temperature', value: 45, hasDegree: true, unit: 'C'},
+  {label: 'Pressure', value: 45, unit: 'Pa'},
+  {label: 'Flow speed', value: 45, unit: 'm/s'},
+];
+
 const renderTank = (args: StoryArgs) => html`
   <obc-automation-tank
     .value=${args.value}
@@ -74,6 +81,7 @@ const renderTank = (args: StoryArgs) => html`
     .hasGraphIcon=${args.hasGraphIcon}
     .showTrendSymbol=${args.showTrendSymbol}
     .percentFractionDigits=${args.percentFractionDigits}
+    .readout=${args.readout}
     ?alert=${args.alert}
     .alertFrameType=${args.alertFrameType}
     .alertFrameThickness=${args.alertFrameThickness}
@@ -110,6 +118,7 @@ const meta: Meta<StoryArgs> = {
     hasGraphIcon: false,
     showTrendSymbol: true,
     percentFractionDigits: 0,
+    readout: [],
     alert: false,
     alertFrameType: ObcAlertFrameType.SmallSideFlip,
     alertFrameThickness: ObcAlertFrameThickness.Small,
@@ -177,6 +186,11 @@ const meta: Meta<StoryArgs> = {
       description:
         'Advice overlay bands. `min`/`max` are in the same units as `max`. Toggle visibility with `hasAdvice`. Works in all three `chartMode` variants — `bar` overlays advice pills on the static bar, `graph` and `graph-and-bar` forward them to the embedded `obc-gauge-trend`.',
     },
+    readout: {
+      control: {type: 'object'},
+      description:
+        'Rich detail rows shown below the main percent/value block in the regular (non-compact, non-static) layout, separated by a divider. Each row: `{label, value, hasDegree?, hasPercentage?, unit}`. Empty array — nothing is rendered. Values use `percentFractionDigits` for formatting. Override the whole block via `slot="rich"`.',
+    },
     badgeControl: {
       options: Object.values(AutomationButtonBadgeControl),
       control: {type: 'select'},
@@ -355,6 +369,23 @@ export const BatteryWithGraphIcon: Story = {
   },
 };
 
+export const Rich: Story = {
+  args: {
+    type: TankType.atmospheric,
+    chartMode: TankChartMode.graphAndBar,
+    readout: SAMPLE_READOUT,
+  },
+};
+
+export const HorizontalRich: Story = {
+  args: {
+    type: TankType.atmospheric,
+    orientation: TankOrientation.horizontal,
+    chartMode: TankChartMode.graphAndBar,
+    readout: SAMPLE_READOUT,
+  },
+};
+
 /**
  * Demonstrates fractional precision in the non-compact readout. The percent
  * readout is controlled by the `percentFractionDigits` property (here `1`,
@@ -367,6 +398,10 @@ export const BatteryWithGraphIcon: Story = {
  * The compact / static layouts only show the percent (no absolute value)
  * and always render it as an integer to keep their fixed-width footprint
  * stable, so fraction-digit control only applies to the non-compact layout.
+ *
+ * `percentFractionDigits` is also applied uniformly to every row of the
+ * `readout` rich list (see the `Rich` story) — all rows share one digit
+ * count so the right-aligned numeric column stays visually consistent.
  */
 export const WithFractionDigits: Story = {
   args: {
@@ -396,6 +431,7 @@ export const WithFractionDigits: Story = {
       .showTrendSymbol=${args.showTrendSymbol}
       .priority=${args.priority}
       .percentFractionDigits=${args.percentFractionDigits}
+      .readout=${args.readout}
     >
       <span slot="current-value">${args.value.toFixed(2)}</span>
       <span slot="max-value">${args.max.toFixed(2)}</span>
@@ -434,6 +470,7 @@ export const WithAlertAlarm: Story = {
       .hasGraphIcon=${args.hasGraphIcon}
       .showTrendSymbol=${args.showTrendSymbol}
       .percentFractionDigits=${args.percentFractionDigits}
+      .readout=${args.readout}
       ?alert=${args.alert}
       .alertFrameType=${args.alertFrameType}
       .alertFrameThickness=${args.alertFrameThickness}
@@ -534,6 +571,7 @@ export const Responsive: Story = {
           .hasGraphIcon=${args.hasGraphIcon}
           .showTrendSymbol=${args.showTrendSymbol}
           .percentFractionDigits=${args.percentFractionDigits}
+          .readout=${args.readout}
           ?alert=${args.alert}
           .alertFrameType=${args.alertFrameType}
           .alertFrameThickness=${args.alertFrameThickness}

package/src/automation/automation-tank/automation-tank.ts

@@ -94,6 +94,25 @@ export enum TankChartMode {
   graphAndBar = 'graph-and-bar',
 }
 
+/**
+ * A single detail row rendered in the tank's `readout` rich list (below the
+ * main percent / value block, separated by a divider). Each row is rendered
+ * as `<label>` on the left and `<value><degree?><percent?><unit>` on the
+ * right, all on a single line.
+ */
+export interface TankReadoutItem {
+  /** Left-aligned label text (e.g. `Temperature`). */
+  label: string;
+  /** Numeric value, formatted with the tank's `percentFractionDigits`. */
+  value: number;
+  /** Append a `°` glyph directly after the value with no gap. */
+  hasDegree?: boolean;
+  /** Append a `%` glyph directly after the value with no gap. */
+  hasPercentage?: boolean;
+  /** Unit text (e.g. `C`, `Pa`, `m/s`). Rendered after the value/glyph. */
+  unit: string;
+}
+
 /**
  *
  *
@@ -221,6 +240,21 @@ export class ObcAutomationTank extends LitElement {
    */
   @property({type: Number}) percentFractionDigits: number = 0;
 
+  /**
+   * Rich detail rows shown below the main percent/value block in the regular
+   * (non-compact, non-static) layout, separated by a divider. When empty (the
+   * default), nothing is rendered — neither the divider nor the list. In
+   * vertical orientation the chart cell shrinks to make room; in horizontal
+   * orientation the readout column already has reserved whitespace so the
+   * chart is unaffected.
+   *
+   * Values are formatted using `percentFractionDigits`. Consumers that need
+   * full control over the markup can replace the entire fallback by slotting
+   * arbitrary content into `slot="rich"` (note: this is a different name from
+   * the existing `slot="readout"` which replaces the whole readout block).
+   */
+  @property({type: Array, attribute: false}) readout: TankReadoutItem[] = [];
+
   /**
    * Enum-driven badges rendered inside the `badges` cell. Mirrors the API
    * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set
@@ -703,6 +737,36 @@ export class ObcAutomationTank extends LitElement {
                     <slot class="unit" name="unit">m<sup>3</sup></slot>
                   </div>
                 </div>
+                <slot name="rich">
+                  ${this.readout.length > 0
+                    ? html`
+                        <div class="rich-divider"></div>
+                        <div class="rich">
+                          ${this.readout.map(
+                            (row) => html`
+                              <div class="rich-row">
+                                <span class="rich-label">${row.label}</span>
+                                <span class="rich-value"
+                                  >${row.value.toFixed(
+                                    this.percentFractionDigits
+                                  )}</span
+                                >
+                                <span class="rich-suffix"
+                                  >${row.hasDegree
+                                    ? html`<span class="rich-glyph">°</span>`
+                                    : nothing}${row.hasPercentage
+                                    ? html`<span class="rich-glyph">%</span>`
+                                    : nothing}<span class="rich-unit"
+                                    >${row.unit}</span
+                                  ></span
+                                >
+                              </div>
+                            `
+                          )}
+                        </div>
+                      `
+                    : nothing}
+                </slot>
               </slot>
             </div>
           `;

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

@@ -58,6 +58,9 @@ export enum IconButtonVariant {
  * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |
  * | label     | If `hasLabel` is set | Optional label text below the icon           |
  *
+ * ## Events
+ * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.
+ *
  * ## Best Practices
  * - Ensure icons are clear and universally recognizable.
  * - For accessibility, provide an `aria-label` or descriptive label for the button's action.
@@ -77,6 +80,7 @@ export enum IconButtonVariant {
  *
  * @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).
  */
 @customElement('obc-icon-button')
 export class ObcIconButton extends LitElement {

package/src/components/message-menu-item/message-menu-item.css

@@ -88,11 +88,8 @@
     gap: var(--app-components-message-menu-item-label-spacing);
 
     color: var(--element-neutral-color);
-
-    .day,
-    .time {
-      @mixin font-label;
-    }
+    white-space: nowrap;
+    text-wrap: nowrap;
   }
 
   .chevron {