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

package/script/sync-agent-docs.test.ts

@@ -0,0 +1,298 @@
+import {readFileSync} from 'node:fs';
+import {describe, expect, it} from 'vitest';
+import {parseAgentDoc, type AgentDoc} from './agent-docs/frontmatter.js';
+import {
+  ROUTING_MARKER,
+  renderClaudeMd,
+  renderCopilotInstructions,
+  renderCursorRule,
+  renderInstructionsFile,
+  renderRoutingTable,
+  replaceMarkedBlock,
+  rewriteSiblingLinks,
+} from './agent-docs/emitters.js';
+
+const VALID = `---
+name: a11y
+description: Accessibility (WCAG 2.1 AA) — keyboard nav, ARIA, focus
+globs:
+  - packages/openbridge-webcomponents/src/components/**
+  - packages/openbridge-webcomponents/src/automation/**
+---
+
+# Accessibility Instructions
+
+Body text.
+`;
+
+describe('parseAgentDoc', () => {
+  it('parses name, description and globs', () => {
+    const doc = parseAgentDoc(VALID, 'docs/agents/a11y.md');
+    expect(doc.name).toBe('a11y');
+    expect(doc.description).toBe(
+      'Accessibility (WCAG 2.1 AA) — keyboard nav, ARIA, focus'
+    );
+    expect(doc.globs).toEqual([
+      'packages/openbridge-webcomponents/src/components/**',
+      'packages/openbridge-webcomponents/src/automation/**',
+    ]);
+  });
+
+  it('returns the body without the frontmatter', () => {
+    const doc = parseAgentDoc(VALID, 'docs/agents/a11y.md');
+    expect(doc.body).toBe('# Accessibility Instructions\n\nBody text.\n');
+  });
+
+  it('strips single quotes used to escape leading "!"', () => {
+    const raw = `---
+name: jsdoc
+description: JSDoc rules
+globs:
+  - packages/openbridge-webcomponents/src/**/*.ts
+  - '!packages/openbridge-webcomponents/src/icons/**'
+---
+body
+`;
+    expect(parseAgentDoc(raw, 'docs/agents/jsdoc.md').globs[1]).toBe(
+      '!packages/openbridge-webcomponents/src/icons/**'
+    );
+  });
+
+  it('throws when name does not match the filename', () => {
+    expect(() => parseAgentDoc(VALID, 'docs/agents/wrong.md')).toThrow(
+      /name "a11y" does not match filename "wrong"/
+    );
+  });
+
+  it('throws on an unsupported key', () => {
+    const raw = `---
+name: x
+description: d
+globs:
+  - a/**
+alwaysApply: true
+---
+body
+`;
+    expect(() => parseAgentDoc(raw, 'docs/agents/x.md')).toThrow(
+      /unsupported key "alwaysApply" on line 6/
+    );
+  });
+
+  it('throws when globs is empty', () => {
+    const raw = `---
+name: x
+description: d
+globs:
+---
+body
+`;
+    expect(() => parseAgentDoc(raw, 'docs/agents/x.md')).toThrow(
+      /"globs" must list at least one pattern/
+    );
+  });
+
+  it('throws when there is no frontmatter', () => {
+    expect(() =>
+      parseAgentDoc('# no frontmatter\n', 'docs/agents/x.md')
+    ).toThrow(/must start with a "---" frontmatter block/);
+  });
+});
+
+const DOC: AgentDoc = {
+  name: 'a11y',
+  description: 'Accessibility (WCAG 2.1 AA)',
+  globs: ['packages/openbridge-webcomponents/src/components/**'],
+  body: '# Accessibility\n\nBody.\n',
+  sourcePath: 'docs/agents/a11y.md',
+};
+
+describe('renderInstructionsFile', () => {
+  it('writes applyTo from globs and keeps the body verbatim', () => {
+    const out = renderInstructionsFile(DOC);
+    expect(out).toContain(
+      'applyTo: "packages/openbridge-webcomponents/src/components/**"'
+    );
+    expect(out).toContain('# Accessibility\n\nBody.\n');
+  });
+
+  it('joins multiple globs with commas', () => {
+    const out = renderInstructionsFile({...DOC, globs: ['a/**', 'b/**']});
+    expect(out).toContain('applyTo: "a/**,b/**"');
+  });
+
+  it('includes a do-not-edit banner naming the source and the command', () => {
+    const out = renderInstructionsFile(DOC);
+    expect(out).toContain('GENERATED FILE — DO NOT EDIT');
+    expect(out).toContain('docs/agents/a11y.md');
+    expect(out).toContain('npm run agents:sync');
+  });
+
+  it('puts the frontmatter first so Copilot can read applyTo', () => {
+    expect(renderInstructionsFile(DOC).startsWith('---\napplyTo:')).toBe(true);
+  });
+});
+
+describe('renderRoutingTable', () => {
+  it('emits one row per doc with description and globs', () => {
+    const table = renderRoutingTable([DOC]);
+    expect(table).toContain('[a11y](docs/agents/a11y.md)');
+    expect(table).toContain('Accessibility (WCAG 2.1 AA)');
+    expect(table).toContain(
+      '`packages/openbridge-webcomponents/src/components/**`'
+    );
+  });
+
+  it('sorts rows by name regardless of input order', () => {
+    const z: AgentDoc = {
+      ...DOC,
+      name: 'zebra',
+      sourcePath: 'docs/agents/zebra.md',
+    };
+    const table = renderRoutingTable([z, DOC]);
+    expect(table.indexOf('[a11y]')).toBeLessThan(table.indexOf('[zebra]'));
+  });
+});
+
+describe('renderCopilotInstructions', () => {
+  it('points at AGENTS.md and carries the routing table but no bodies', () => {
+    const out = renderCopilotInstructions([DOC]);
+    expect(out).toContain('AGENTS.md');
+    expect(out).toContain('[a11y](docs/agents/a11y.md)');
+    expect(out).not.toContain('Body.');
+  });
+});
+
+describe('replaceMarkedBlock', () => {
+  it('replaces only the content between the markers', () => {
+    const content = [
+      'before',
+      `<!-- ${ROUTING_MARKER}:start -->`,
+      'OLD',
+      `<!-- ${ROUTING_MARKER}:end -->`,
+      'after',
+    ].join('\n');
+    const out = replaceMarkedBlock(content, ROUTING_MARKER, 'NEW');
+    expect(out).toBe(
+      [
+        'before',
+        `<!-- ${ROUTING_MARKER}:start -->`,
+        'NEW',
+        `<!-- ${ROUTING_MARKER}:end -->`,
+        'after',
+      ].join('\n')
+    );
+  });
+
+  it('throws when the markers are missing', () => {
+    expect(() => replaceMarkedBlock('no markers', ROUTING_MARKER, 'x')).toThrow(
+      /markers .* not found/
+    );
+  });
+});
+
+describe('renderClaudeMd', () => {
+  it('points at AGENTS.md and docs/agents', () => {
+    const out = renderClaudeMd();
+    expect(out).toContain('AGENTS.md');
+    expect(out).toContain('docs/agents/');
+    expect(out).toContain('GENERATED FILE — DO NOT EDIT');
+  });
+
+  it('carries no rules of its own — it is a pointer, not a source', () => {
+    const out = renderClaudeMd();
+    expect(out).toContain('intentionally adds nothing of its own');
+    // No numbered rule list: team rules belong in AGENTS.md, path-scoped rules
+    // in docs/agents/. Neither is tool-specific.
+    expect(out).not.toMatch(/^\d+\. \*\*/m);
+  });
+});
+
+describe('CLI failure semantics', () => {
+  const cli = 'script/sync-agent-docs.ts';
+
+  it('write mode never exits non-zero, so `prepare` cannot break npm ci', () => {
+    const src = readFileSync(cli, 'utf8');
+    expect(src).toContain('if (CHECK) process.exit(1);');
+    expect(src).not.toMatch(/^\s*process\.exit\(1\);\s*$/m);
+  });
+
+  it('only skips negative globs in the resolution check', () => {
+    const src = readFileSync(cli, 'utf8');
+    expect(src).toContain("if (g.startsWith('!')) continue;");
+  });
+});
+
+describe('renderCursorRule', () => {
+  it('emits globs + alwaysApply:false — Cursor\'s "Apply to Specific Files" type', () => {
+    const out = renderCursorRule(DOC);
+    expect(out.startsWith('---\n')).toBe(true);
+    expect(out).toContain(
+      'globs: packages/openbridge-webcomponents/src/components/**'
+    );
+    expect(out).toContain('alwaysApply: false');
+  });
+
+  it('omits description, which would select "Apply Intelligently" instead', () => {
+    expect(renderCursorRule(DOC)).not.toContain('description:');
+  });
+
+  it('joins multiple globs with commas', () => {
+    expect(renderCursorRule({...DOC, globs: ['a/**', 'b/**']})).toContain(
+      'globs: a/**,b/**'
+    );
+  });
+
+  it('drops negative globs, which Cursor does not document', () => {
+    const out = renderCursorRule({...DOC, globs: ['a/**', '!b/**', 'c/**']});
+    expect(out).toContain('globs: a/**,c/**');
+    expect(out).not.toContain('!b/**');
+  });
+
+  it('keeps the body verbatim and carries the do-not-edit banner', () => {
+    const out = renderCursorRule(DOC);
+    expect(out).toContain('# Accessibility\n\nBody.\n');
+    expect(out).toContain('GENERATED FILE — DO NOT EDIT');
+  });
+});
+
+describe('rewriteSiblingLinks', () => {
+  const siblings = new Set(['jsdoc', 'a11y', 'css-postcss']);
+
+  it('repoints bare sibling links at the canonical doc', () => {
+    expect(rewriteSiblingLinks('see [`jsdoc.md`](jsdoc.md).', siblings)).toBe(
+      'see [`jsdoc.md`](../../docs/agents/jsdoc.md).'
+    );
+  });
+
+  it('preserves anchors', () => {
+    expect(rewriteSiblingLinks('[x](a11y.md#section-2)', siblings)).toBe(
+      '[x](../../docs/agents/a11y.md#section-2)'
+    );
+  });
+
+  it('leaves ../../ links alone — they already resolve from every adapter dir', () => {
+    const link = '[g](../../IMPLEMENTATION_GUIDELINES.md#-postcss)';
+    expect(rewriteSiblingLinks(link, siblings)).toBe(link);
+  });
+
+  it('leaves external and absolute links alone', () => {
+    const body = '[a](https://example.com/x.md) [b](/abs/y.md)';
+    expect(rewriteSiblingLinks(body, siblings)).toBe(body);
+  });
+
+  it('leaves bare links that are not canonical docs alone', () => {
+    const link = '[r](README.md)';
+    expect(rewriteSiblingLinks(link, siblings)).toBe(link);
+  });
+
+  it('is applied by both adapter renderers', () => {
+    const doc = {...DOC, body: 'see [`jsdoc.md`](jsdoc.md).\n'};
+    expect(renderInstructionsFile(doc, siblings)).toContain(
+      '](../../docs/agents/jsdoc.md)'
+    );
+    expect(renderCursorRule(doc, siblings)).toContain(
+      '](../../docs/agents/jsdoc.md)'
+    );
+  });
+});

package/script/sync-agent-docs.ts

@@ -0,0 +1,156 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import {globSync} from 'glob';
+import * as prettier from 'prettier';
+import {parseAgentDoc, type AgentDoc} from './agent-docs/frontmatter.js';
+import {
+  ROUTING_MARKER,
+  renderClaudeMd,
+  renderCopilotInstructions,
+  renderCursorRule,
+  renderInstructionsFile,
+  renderRoutingTable,
+  replaceMarkedBlock,
+} from './agent-docs/emitters.js';
+
+const ROOT = path.resolve(import.meta.dirname, '../../..');
+const AGENTS_DIR = path.join(ROOT, 'docs/agents');
+const INSTRUCTIONS_DIR = path.join(ROOT, '.github/instructions');
+const CURSOR_RULES_DIR = path.join(ROOT, '.cursor/rules');
+const CHECK = process.argv.includes('--check');
+
+const problems: string[] = [];
+const writes = new Map<string, string>();
+
+function plan(absPath: string, content: string): void {
+  writes.set(absPath, content);
+}
+
+function loadDocs(): AgentDoc[] {
+  if (!fs.existsSync(AGENTS_DIR)) {
+    throw new Error(
+      `docs/agents does not exist at ${AGENTS_DIR} — nothing to sync`
+    );
+  }
+  return fs
+    .readdirSync(AGENTS_DIR)
+    .filter((f) => f.endsWith('.md'))
+    .sort()
+    .map((f) => {
+      const rel = path.posix.join('docs/agents', f);
+      return parseAgentDoc(
+        fs.readFileSync(path.join(AGENTS_DIR, f), 'utf8'),
+        rel
+      );
+    });
+}
+
+/** Check 1 — every positive glob must match at least one real path. */
+function checkGlobs(docs: AgentDoc[]): void {
+  for (const doc of docs) {
+    for (const g of doc.globs) {
+      if (g.startsWith('!')) continue;
+      if (globSync(g, {cwd: ROOT, dot: true}).length === 0) {
+        problems.push(`${doc.sourcePath}: glob matches nothing → ${g}`);
+      }
+    }
+  }
+}
+
+/** Check 4 — no generated adapter without a canonical source. */
+function checkOrphans(docs: AgentDoc[]): void {
+  const adapters: [string, string, string][] = [
+    [INSTRUCTIONS_DIR, '.instructions.md', '.github/instructions'],
+    [CURSOR_RULES_DIR, '.mdc', '.cursor/rules'],
+  ];
+  for (const [dir, ext, rel] of adapters) {
+    if (!fs.existsSync(dir)) continue;
+    const expected = new Set(docs.map((d) => `${d.name}${ext}`));
+    for (const f of fs.readdirSync(dir)) {
+      if (f.endsWith(ext) && !expected.has(f)) {
+        problems.push(
+          `${rel}/${f}: no matching docs/agents/ source (delete it or add the source)`
+        );
+      }
+    }
+  }
+}
+
+const docs = loadDocs();
+checkGlobs(docs);
+checkOrphans(docs);
+
+const routable = docs;
+const docNames = new Set(docs.map((d) => d.name));
+
+for (const doc of routable) {
+  plan(
+    path.join(INSTRUCTIONS_DIR, `${doc.name}.instructions.md`),
+    renderInstructionsFile(doc, docNames)
+  );
+  plan(
+    path.join(CURSOR_RULES_DIR, `${doc.name}.mdc`),
+    renderCursorRule(doc, docNames)
+  );
+}
+plan(
+  path.join(ROOT, '.github/copilot-instructions.md'),
+  renderCopilotInstructions(routable)
+);
+
+const agentsPath = path.join(ROOT, 'AGENTS.md');
+plan(
+  agentsPath,
+  replaceMarkedBlock(
+    fs.readFileSync(agentsPath, 'utf8'),
+    ROUTING_MARKER,
+    renderRoutingTable(routable)
+  )
+);
+
+plan(path.join(ROOT, 'CLAUDE.md'), renderClaudeMd());
+
+/**
+ * Runs generated Markdown through Prettier before writing or comparing.
+ *
+ * Without this the generator's compact tables would differ from what
+ * `npm run format:check` (and the lint-staged `.md` hook) demand, so every
+ * sync would leave the repo format-dirty and CI would fail. Formatting here
+ * makes generator output and Prettier output the same artefact by
+ * construction, and keeps `--check` comparing like with like.
+ */
+async function format(content: string, absPath: string): Promise<string> {
+  const config = await prettier.resolveConfig(absPath);
+  return prettier.format(content, {
+    ...config,
+    filepath: absPath,
+    parser: 'markdown',
+  });
+}
+
+for (const [absPath, raw] of writes) {
+  const rel = path.relative(ROOT, absPath);
+  const content = await format(raw, absPath);
+  const current = fs.existsSync(absPath)
+    ? fs.readFileSync(absPath, 'utf8')
+    : null;
+  if (current === content) continue;
+  if (CHECK) {
+    problems.push(`${rel}: out of date — run \`npm run agents:sync\``);
+  } else {
+    fs.mkdirSync(path.dirname(absPath), {recursive: true});
+    fs.writeFileSync(absPath, content);
+    console.log(`${current === null ? 'created' : 'updated'} ${rel}`);
+  }
+}
+
+if (problems.length > 0) {
+  console.error(`\nagent-docs: ${problems.length} problem(s)`);
+  for (const p of problems) console.error(`  ${CHECK ? '✗' : 'warning:'} ${p}`);
+  // Write mode reports but never fails. `agents:sync` runs from the root
+  // `prepare` script, so a stale glob or a missing source must not be able to
+  // break `npm ci` for everyone. `lint:agents` is the gate; it runs in CI after
+  // the build steps, when any generated paths actually exist.
+  if (CHECK) process.exit(1);
+}
+console.log(CHECK ? 'agent-docs: up to date' : 'agent-docs: sync complete');

package/src/icons/AGENTS.md

@@ -0,0 +1,6 @@
+# src/icons — generated, do not edit
+
+Every file here is generated from Figma by `npm run download:icons`. Edits are
+discarded on the next run. See [`docs/agents/generated-code.md`](../../../../docs/agents/generated-code.md).
+
+Note `src/manual-icon/` is the opposite: hand-written, edit it normally.

package/src/integration-systems/integration-button/integration-button.css

@@ -27,9 +27,13 @@
 .touch-target {
   @mixin style style=integration-normal visibleWrapperClass=.content-container;
   @mixin font-body;
+  --leading-icon-size: var(
+    --app-components-integration-system-navigation-item-horizontal-icon-size
+  );
   anchor-name: --touch-target;
   display: flex;
   align-items: center;
+  text-align: left;
   gap: 4px;
   flex: 1;
   min-height: var(
@@ -169,20 +173,23 @@
     color: var(--integration-on-normal-neutral-color);
   }
 
-  .icon.leading {
-    width: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
-    );
-    height: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
+  &.has-status {
+    --leading-icon-size: var(
+      --app-components-integration-system-navigation-item-horizontal-icon-size-large
     );
-    min-width: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
-    );
-    flex: 0 0
-      var(
-        --app-components-integration-system-navigation-item-horizontal-icon-size
-      );
+  }
+
+  .icon.leading {
+    width: var(--leading-icon-size);
+    height: var(--leading-icon-size);
+    min-width: var(--leading-icon-size);
+    flex: 0 0 var(--leading-icon-size);
+
+    & ::slotted(*) {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .icon.trailing {

package/src/integration-systems/integration-button/integration-button.stories.ts

@@ -8,6 +8,35 @@ import './integration-button.js';
 import {html} from 'lit';
 import '../../icons/icon-placeholder.js';
 
+const LONG_STATUS =
+  'Very long status for a vessel at sea doing something important';
+
+const renderButton = (args: ObcIntegrationButton, statusText: string) => html`
+  <obc-integration-button
+    style="width: 320px; display: block;"
+    .hasLeadingIcon=${args.hasLeadingIcon}
+    .hasTrailingIcon=${args.hasTrailingIcon}
+    .hasTrailingIcon2=${args.hasTrailingIcon2}
+    .hasStatus=${args.hasStatus}
+    .readouts=${args.readouts}
+    .selected=${args.selected}
+    .activated=${args.activated}
+    .disabled=${args.disabled}
+    .dividerBottom=${args.dividerBottom}
+    .dividerRight=${args.dividerRight}
+    .variant=${args.variant}
+    .type=${args.type}
+  >
+    <obi-placeholder slot="leading-icon"></obi-placeholder>
+    <obi-placeholder slot="trailing-icon"></obi-placeholder>
+    <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+    <div slot="label">Label</div>
+    <div slot="status">${statusText}</div>
+    <div slot="info-label">Info Label</div>
+    <div slot="info-status">Info Status</div>
+  </obc-integration-button>
+`;
+
 const meta: Meta<ObcIntegrationButton> = {
   title: 'Integration Systems/Integration Button',
   tags: ['experimental'],
@@ -30,28 +59,7 @@ const meta: Meta<ObcIntegrationButton> = {
       value: 'integration-container-global-color',
     },
   },
-  render: (args) => html`
-    <obc-integration-button
-      style="width: 320px; display: block;"
-      .hasLeadingIcon=${args.hasLeadingIcon}
-      .hasTrailingIcon=${args.hasTrailingIcon}
-      .hasTrailingIcon2=${args.hasTrailingIcon2}
-      .hasStatus=${args.hasStatus}
-      .readouts=${args.readouts}
-      .selected=${args.selected}
-      .disabled=${args.disabled}
-      .variant=${args.variant}
-      .type=${args.type}
-    >
-      <obi-placeholder slot="leading-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon2"></obi-placeholder>
-      <div slot="label">Label</div>
-      <div slot="status">Status</div>
-      <div slot="info-label">Info Label</div>
-      <div slot="info-status">Info Status</div>
-    </obc-integration-button>
-  `,
+  render: (args) => renderButton(args, 'Status'),
 } satisfies Meta<ObcIntegrationButton>;
 export default meta;
 
@@ -61,28 +69,6 @@ export const WithStatus: StoryObj<ObcIntegrationButton> = {
   args: {
     hasStatus: true,
   },
-  render: (args) => html`
-    <obc-integration-button
-      style="width: 320px; display: block;"
-      .hasLeadingIcon=${args.hasLeadingIcon}
-      .hasTrailingIcon=${args.hasTrailingIcon}
-      .hasTrailingIcon2=${args.hasTrailingIcon2}
-      .readouts=${args.readouts}
-      .selected=${args.selected}
-      .disabled=${args.disabled}
-      .variant=${args.variant}
-      .type=${args.type}
-      .hasStatus=${args.hasStatus}
-    >
-      <obi-placeholder slot="leading-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon2"></obi-placeholder>
-      <div slot="label">Label</div>
-      <div slot="status">Status</div>
-      <div slot="info-label">Info Label</div>
-      <div slot="info-status">Info Status</div>
-    </obc-integration-button>
-  `,
 };
 
 export const Selected: StoryObj<ObcIntegrationButton> = {
@@ -111,9 +97,49 @@ export const Rich: StoryObj<ObcIntegrationButton> = {
   },
 };
 
+export const RichWithStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    hasStatus: true,
+  },
+};
+
 export const Disabled: StoryObj<ObcIntegrationButton> = {
   args: {
     type: IntegrationButtonType.rich,
     disabled: true,
   },
 };
+
+export const WithLongStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    hasStatus: true,
+  },
+  render: (args) => renderButton(args, LONG_STATUS),
+};
+
+export const HugWithLongStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.hug,
+    hasStatus: true,
+    hasTrailingIcon: false,
+  },
+  render: (args) => renderButton(args, LONG_STATUS),
+};
+
+export const RichWithLongStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    hasStatus: true,
+  },
+  render: (args) => renderButton(args, LONG_STATUS),
+};
+
+export const RichWithLongReadoutLabel: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    hasStatus: true,
+    readouts: [{label: 'Estimated Time of Arrival', value: '12', unit: 'h'}],
+  },
+  render: (args) => renderButton(args, 'Status'),
+};

package/src/integration-systems/integration-button/integration-button.ts

@@ -24,7 +24,7 @@ export enum IntegrationButtonType {
 /**
  * `<obc-integration-button>` – A button component for integration systems.
  *
- * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)
+ * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true); rendered at the large icon size when `hasStatus` is true
  * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)
  * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)
  * @slot label - Label text
@@ -76,7 +76,7 @@ export class ObcIntegrationButton extends LitElement {
       selected: this.selected,
       activated: this.activated,
       disabled: this.disabled,
-      'has-description': this.hasStatus,
+      'has-status': this.hasStatus,
       ['variant-' + this.variant]: true,
       ['type-' + this.type]: true,
     };

package/src/integration-systems/integration-dropdown-button/integration-dropdown-button.css

@@ -134,6 +134,7 @@
     flex-direction: column;
     align-items: flex-start;
     flex-grow: 1;
+    text-align: left;
   }
 
   & .text-container .label {