@origostudio/origo-design 0.0.0

package/packages/angular-renderer/CHANGELOG.md

@@ -0,0 +1,274 @@
+## 0.0.22 (2026-09-04)
+
+### 🚀 Features
+
+- scaffold playground application and e2e testing suite with initial editor component and schema registry ([f097894](https://github.com/OrigoStudio/origo-design/commit/f097894))
+- add GitHub Actions workflow to automate library releases using Nx Release ([3d6651f](https://github.com/OrigoStudio/origo-design/commit/3d6651f))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.21 (2026-09-02)
+
+### 🚀 Features
+
+- add centralized test registry tool with validation logic, CI integration, and documentation artifacts ([384c1c7](https://github.com/OrigoStudio/origo-design/commit/384c1c7))
+- implement central test registry with validation tools and CI integration ([02cf656](https://github.com/OrigoStudio/origo-design/commit/02cf656))
+- initialize negative testing story and update sprint status tracking ([bbe5fdc](https://github.com/OrigoStudio/origo-design/commit/bbe5fdc))
+- implement CLI framework with validation, testing, and CI/CD workflows ([ff6ce55](https://github.com/OrigoStudio/origo-design/commit/ff6ce55))
+- implement validate command and schema validation logic for BADL files ([4f9e41d](https://github.com/OrigoStudio/origo-design/commit/4f9e41d))
+- implement path traversal guards, remove process termination from library logic, and enable error cause preservation in @origo/cli ([0854f78](https://github.com/OrigoStudio/origo-design/commit/0854f78))
+- initialize web-based editor component and track security remediation tasks in implementation artifacts ([65716bd](https://github.com/OrigoStudio/origo-design/commit/65716bd))
+- document e2e npm verification plan for cli package releases ([22dab4c](https://github.com/OrigoStudio/origo-design/commit/22dab4c))
+- initialize sprint status tracking and retrospective verification story for npm packaging ([c326751](https://github.com/OrigoStudio/origo-design/commit/c326751))
+- add generated bundle for epic7-worker-csp spike ([16ca492](https://github.com/OrigoStudio/origo-design/commit/16ca492))
+- add web worker CSP spike and associated implementation documentation ([ebf5aa4](https://github.com/OrigoStudio/origo-design/commit/ebf5aa4))
+- implement web worker CSP spike with supporting documentation and harness tools ([f57b1e5](https://github.com/OrigoStudio/origo-design/commit/f57b1e5))
+- add technical spike story for Epic 7 web worker CSP validation and ADR planning ([c977487](https://github.com/OrigoStudio/origo-design/commit/c977487))
+- initialize sprint status tracking and create Epic 7 discovery research story ([b37b967](https://github.com/OrigoStudio/origo-design/commit/b37b967))
+- implement entity generator command with template customization and ejection support ([02a3193](https://github.com/OrigoStudio/origo-design/commit/02a3193))
+- implement entity generator command and template ejection logic in CLI ([d7d519a](https://github.com/OrigoStudio/origo-design/commit/d7d519a))
+- implementation of 6-2-local-schema-validation ([45e67f6](https://github.com/OrigoStudio/origo-design/commit/45e67f6))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.20 (2026-08-25)
+
+### 🚀 Features
+
+- implementation of 6-1-cli-initialization-and-scaffolding ([f6aca9e](https://github.com/OrigoStudio/origo-design/commit/f6aca9e))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.19 (2026-08-23)
+
+### 🚀 Features
+
+- 5.5-5-define-secure-by-default-boilerplate-templates ([0eb6dde](https://github.com/OrigoStudio/origo-design/commit/0eb6dde))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.18 (2026-08-23)
+
+### 🚀 Features
+
+- 5.5-4-verify-core-compiler-source-map-preservation ([a3b0d9b](https://github.com/OrigoStudio/origo-design/commit/a3b0d9b))
+
+### 🩹 Fixes
+
+- pipeline issue ([c1bbe47](https://github.com/OrigoStudio/origo-design/commit/c1bbe47))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.17 (2026-08-21)
+
+### 🚀 Features
+
+- 5.5-3-resolve-recursive-schema-resolution-tech-debt ([943e2e7](https://github.com/OrigoStudio/origo-design/commit/943e2e7))
+- 5.5-2-establish-end-to-end-qa-protocols ([d8990ae](https://github.com/OrigoStudio/origo-design/commit/d8990ae))
+- 5.5-2-establish-end-to-end-qa-protocols ([a31d97a](https://github.com/OrigoStudio/origo-design/commit/a31d97a))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.16 (2026-08-21)
+
+### 🚀 Features
+
+- 5.5-1-create-usability-quickstart-guide ([e740a1a](https://github.com/OrigoStudio/origo-design/commit/e740a1a))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.15 (2026-08-20)
+
+### 🚀 Features
+
+- code-review 5-5-reactive-state-event-binding ([b235951](https://github.com/OrigoStudio/origo-design/commit/b235951))
+- implementation of 5-5-reactive-state-event-binding ([3a5948a](https://github.com/OrigoStudio/origo-design/commit/3a5948a))
+- story creation 5-5-reactive-state-event-binding ([21104c6](https://github.com/OrigoStudio/origo-design/commit/21104c6))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.14 (2026-08-19)
+
+### 🚀 Features
+
+- 5-4-design-token-consumption ([c1f64ed](https://github.com/OrigoStudio/origo-design/commit/c1f64ed))
+- add sprint status update and design token consumption story documentation ([49aec07](https://github.com/OrigoStudio/origo-design/commit/49aec07))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.13 (2026-08-18)
+
+### 🚀 Features
+
+- implement core primitives (Button, VBox, TextInput) with improved property coercion and accessibility support ([1be1def](https://github.com/OrigoStudio/origo-design/commit/1be1def))
+- implement VBox, TextInput, and Button core primitives with accessibility testing and improved adapter coercion ([532417f](https://github.com/OrigoStudio/origo-design/commit/532417f))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.12 (2026-08-17)
+
+### 🚀 Features
+
+- implement InteractionContract-based OrigoAdapter and transition angular-renderer architecture to web adapter pattern ([1a8ea32](https://github.com/OrigoStudio/origo-design/commit/1a8ea32))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.11 (2026-08-14)
+
+### 🚀 Features
+
+- initialize changelogs and package manifests for core, design-tokens, and angular-renderer packages ([10455ec](https://github.com/OrigoStudio/origo-design/commit/10455ec))
+- implement angular-renderer package with AST-based dynamic component instantiation and registry support ([500f396](https://github.com/OrigoStudio/origo-design/commit/500f396))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.10 (2026-08-14)
+
+### 🚀 Features
+
+- implement extension API scaffolding, define Angular signals patterns, and add renderer test utilities ([d2adbed](https://github.com/OrigoStudio/origo-design/commit/d2adbed))
+- mark Epic 4 as complete and record its retrospective action items in sprint status ([37c2caa](https://github.com/OrigoStudio/origo-design/commit/37c2caa))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.9 (2026-08-14)
+
+### 🚀 Features
+
+- implement extension manager with manifest validation, permission security, and dependency resolution ([154b0d4](https://github.com/OrigoStudio/origo-design/commit/154b0d4))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.8 (2026-08-14)
+
+### 🚀 Features
+
+- implement formal extension manifest, capability negotiation, and lifecycle management in core extension-api ([808f113](https://github.com/OrigoStudio/origo-design/commit/808f113))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.7 (2026-08-14)
+
+### 🚀 Features
+
+- implement behavior validation test suite and expand AST validator test coverage ([d4c79ef](https://github.com/OrigoStudio/origo-design/commit/d4c79ef))
+- register behavior validation suite story and update sprint status tracking ([798ec74](https://github.com/OrigoStudio/origo-design/commit/798ec74))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.6 (2026-08-13)
+
+### 🚀 Features
+
+- implement AST validation engine with support for circular dependency detection and reference integrity checks ([afd48c9](https://github.com/OrigoStudio/origo-design/commit/afd48c9))
+- initialize sprint-status.yaml to track project development and retrospective action items ([66c6cdf](https://github.com/OrigoStudio/origo-design/commit/66c6cdf))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.5 (2026-08-13)
+
+### 🚀 Features
+
+- **core:** implement security and permissions engine ([d066d90](https://github.com/OrigoStudio/origo-design/commit/d066d90))
+- add story 4.3 for security and permissions engine and update sprint status ([3eb4aae](https://github.com/OrigoStudio/origo-design/commit/3eb4aae))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.4 (2026-08-13)
+
+### 🚀 Features
+
+- implement semantic AST validator with domain, entity, and contract schema definitions ([e969466](https://github.com/OrigoStudio/origo-design/commit/e969466))
+- update sprint status and initialize story 4-2 contracts and implementations documentation ([4b37c59](https://github.com/OrigoStudio/origo-design/commit/4b37c59))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.3 (2026-08-13)
+
+### 🚀 Features
+
+- 4-1-capabilities-schema-parsing ([869c872](https://github.com/OrigoStudio/origo-design/commit/869c872))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.2 (2026-08-12)
+
+### 🚀 Features
+
+- implement defensive AST validation with depth limiting, circular reference detection, and graceful error reporting ([d2f5f98](https://github.com/OrigoStudio/origo-design/commit/d2f5f98))
+- initialize 3-5-3-defensive-ast-traversal story and update sprint status ([4f82702](https://github.com/OrigoStudio/origo-design/commit/4f82702))
+- enforce JSON import standard and document AST validator ([162db09](https://github.com/OrigoStudio/origo-design/commit/162db09))
+- implement automated semantic versioning with Nx release and commitlint enforcement ([5e7a25e](https://github.com/OrigoStudio/origo-design/commit/5e7a25e))
+- implement AST validation engine and documentation for semantic versioning workflow ([838e472](https://github.com/OrigoStudio/origo-design/commit/838e472))
+- implement AST validation engine and associated implementation artifacts ([49cbdf0](https://github.com/OrigoStudio/origo-design/commit/49cbdf0))
+- implement deterministic canonical AST serialization and interfaces in @origo/core ([c35a2c9](https://github.com/OrigoStudio/origo-design/commit/c35a2c9))
+- implement domain and entity schema parser with Ajv-based validation and circular dependency detection in new @origo/core package ([4165b5f](https://github.com/OrigoStudio/origo-design/commit/4165b5f))
+- add design tokens documentation and update Starlight navigation configuration ([ba2404a](https://github.com/OrigoStudio/origo-design/commit/ba2404a))
+- initialize Epic 3 planning and document Epic 2 retrospective findings ([4cc46f9](https://github.com/OrigoStudio/origo-design/commit/4cc46f9))
+- implement runtime theme fetching, injection, and Angular renderer integration to complete the token resolution contract ([87f583e](https://github.com/OrigoStudio/origo-design/commit/87f583e))
+- implement theme-fetcher runtime utility and create angular-renderer package with theme initialization provider ([1d5b7ab](https://github.com/OrigoStudio/origo-design/commit/1d5b7ab))
+- implement secure theme injection with CSS token validation and scope management ([a708825](https://github.com/OrigoStudio/origo-design/commit/a708825))
+- implement runtime theme injector for parsing and applying CSS variables ([969fed5](https://github.com/OrigoStudio/origo-design/commit/969fed5))
+- add astro, @astrojs/starlight, and sharp dependencies to package.json ([1c40a92](https://github.com/OrigoStudio/origo-design/commit/1c40a92))
+- implement design token compilation pipeline with CSS variable parsing and generation ([0ffe822](https://github.com/OrigoStudio/origo-design/commit/0ffe822))
+- **nx-cloud:** setup nx cloud workspace ([ee09042](https://github.com/OrigoStudio/origo-design/commit/ee09042))
+- **design-tokens:** implement css compilation pipeline ([7bd632d](https://github.com/OrigoStudio/origo-design/commit/7bd632d))
+- add script to generate automated LLM review prompts from git diffs ([1ddbd39](https://github.com/OrigoStudio/origo-design/commit/1ddbd39))
+- scaffold @origo/design-tokens package with JSON schema validation and Nx configuration ([ae61244](https://github.com/OrigoStudio/origo-design/commit/ae61244))
+- scaffold @origo/design-tokens library with JSON schema validation and initial token definitions ([efbecc9](https://github.com/OrigoStudio/origo-design/commit/efbecc9))
+- initialize Astro documentation site and relocate internal project scripts to the tools directory. ([1cd8e71](https://github.com/OrigoStudio/origo-design/commit/1cd8e71))
+- add documentation story spec and update epic-1 status to done ([b612ea3](https://github.com/OrigoStudio/origo-design/commit/b612ea3))
+- initialize and populate agent skill definitions, workflows, and technical knowledge resources ([8668c52](https://github.com/OrigoStudio/origo-design/commit/8668c52))
+- initialize Starlight documentation site within the monorepo and add benchmark tools ([9a16b03](https://github.com/OrigoStudio/origo-design/commit/9a16b03))
+- implement performance benchmark harness with regression and SLA gate logic ([350d472](https://github.com/OrigoStudio/origo-design/commit/350d472))
+- implement performance benchmark harness with CI regression gating and SLA validation ([3230ac9](https://github.com/OrigoStudio/origo-design/commit/3230ac9))
+- implement Husky pre-commit hooks and Nx-based lint-staged configuration ([9181885](https://github.com/OrigoStudio/origo-design/commit/9181885))
+- add GitHub Actions CI workflow, Husky pre-commit hooks, and update package.json with necessary configuration ([95b8bf1](https://github.com/OrigoStudio/origo-design/commit/95b8bf1))
+- configure Husky, lint-staged, and GitHub CI workflow for automated quality enforcement ([b6bf597](https://github.com/OrigoStudio/origo-design/commit/b6bf597))
+- initialize Nx monorepo workspace with core configuration and tooling ([fd0665a](https://github.com/OrigoStudio/origo-design/commit/fd0665a))
+- add sprint tracking artifacts and automation script for project bootstrapping ([ddc6149](https://github.com/OrigoStudio/origo-design/commit/ddc6149))
+- document Origo Design functional requirements and architectural scope ([d1e0b7f](https://github.com/OrigoStudio/origo-design/commit/d1e0b7f))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse

package/packages/angular-renderer/README.md

@@ -0,0 +1,11 @@
+# angular-renderer
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build angular-renderer` to build the library.
+
+## Running unit tests
+
+Run `nx test angular-renderer` to execute the unit tests via [Jest](https://jestjs.io).

package/packages/angular-renderer/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "angular-renderer",
+  "version": "0.0.22",
+  "private": true,
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@origo/core": "0.0.22",
+    "@origo/design-tokens": "0.0.22",
+    "tslib": "^2.3.0",
+    "@axe-core/playwright": "^4.13.0",
+    "@playwright/test": "^1.36.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/platform-browser": ">=18.0.0"
+  }
+}

package/packages/angular-renderer/playwright-ct.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-angular';
+
+export default defineConfig({
+  testDir: './src',
+  testMatch: /.*\.pw\.ts/,
+  snapshotDir: './__snapshots__',
+  timeout: 10 * 1000,
+  fullyParallel: true,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  workers: process.env['CI'] ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry',
+    ctPort: 3100,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

package/packages/angular-renderer/src/adapters/web/adapter.ts

@@ -0,0 +1,145 @@
+import { Injectable, ViewContainerRef, Signal, InputSignal } from '@angular/core';
+import { ASTNode, InteractionContract } from '@origo/core';
+
+export interface ContainerComponent {
+  viewContainerRef?: ViewContainerRef | Signal<ViewContainerRef>;
+  vc?: ViewContainerRef | Signal<ViewContainerRef>;
+}
+
+export interface OrigoAdapter<TProps = Record<string, unknown>> {
+  /**
+   * The core interaction contract driving this adapter.
+   */
+  contract: InputSignal<InteractionContract<TProps>>;
+}
+
+function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepClone(item)) as unknown as T;
+  }
+  const cloned = {} as Record<string, unknown>;
+  const typedObj = obj as Record<string, unknown>;
+  for (const key in typedObj) {
+    if (Object.prototype.hasOwnProperty.call(typedObj, key)) {
+      cloned[key] = deepClone(typedObj[key]) as unknown;
+    }
+  }
+  return cloned as unknown as T;
+}
+
+/**
+ * Validates and coerces runtime properties against a basic schema to ensure
+ * primitive components do not crash when given malformed BADL ast properties.
+ */
+export function coerceContractProps<T>(
+  props: unknown,
+  schema?: Record<string, 'string' | 'number' | 'boolean' | 'array' | 'object'>,
+  strict = false
+): T {
+  if (!props || typeof props !== 'object' || Array.isArray(props)) {
+    return {} as T;
+  }
+
+  const result: Record<string, unknown> = {};
+  const inputProps = props as Record<string, unknown>;
+
+  if (!schema) {
+    if (strict) {
+      throw new Error('strict mode requires a schema');
+    }
+    for (const [key, val] of Object.entries(inputProps)) {
+      result[key] = deepClone(val);
+    }
+    return result as T;
+  }
+
+  for (const [key, value] of Object.entries(inputProps)) {
+    if (key.startsWith('aria-') || key.startsWith('data-')) {
+      result[key] = deepClone(value);
+      continue;
+    }
+
+    if (!schema[key]) {
+      if (!strict) {
+        result[key] = deepClone(value);
+      }
+      continue;
+    }
+
+    const expectedType = schema[key];
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    if (expectedType === 'string') {
+      result[key] = String(value);
+    } else if (expectedType === 'number') {
+      if (value === '' || typeof value === 'boolean') {
+        if (strict) throw new Error(`Invalid number for prop '${key}'`);
+        continue;
+      }
+      const num = Number(value);
+      if (isNaN(num)) {
+        if (strict) throw new Error(`Invalid number for prop '${key}': ${value}`);
+      } else {
+        result[key] = num;
+      }
+    } else if (expectedType === 'boolean') {
+      if (value === '') {
+        result[key] = true;
+      } else if (typeof value === 'string') {
+        const lower = value.toLowerCase();
+        result[key] = !(lower === 'false' || lower === '0' || lower === 'off');
+      } else {
+        result[key] = Boolean(value);
+      }
+    } else if (expectedType === 'array') {
+      const arr = Array.isArray(value) ? value : [value];
+      result[key] = deepClone(arr);
+    } else if (expectedType === 'object') {
+      if (Array.isArray(value)) {
+        if (strict) throw new Error(`Invalid object for prop '${key}'`);
+        continue;
+      }
+      const obj = typeof value === 'object' && value !== null ? value : {};
+      result[key] = deepClone(obj);
+    } else {
+      result[key] = deepClone(value);
+    }
+  }
+
+  return result as T;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AdapterPipelineService {
+  prepareNode(
+    node: ASTNode,
+    schema?: Record<string, 'string' | 'number' | 'boolean' | 'array' | 'object'>,
+    strict = false,
+    visited = new Set<string>()
+  ): InteractionContract {
+    if (visited.has(node.id)) {
+      return { id: node.id, type: node.type, props: {} };
+    }
+    visited.add(node.id);
+
+    // Translate the raw Canonical ASTNode into a stateless InteractionContract
+    const contract: InteractionContract = {
+      id: node.id,
+      type: node.type,
+      props: coerceContractProps(node.props, schema, strict),
+    };
+
+    if (node.children) {
+      contract.children = node.children.map(child =>
+        this.prepareNode(child, undefined, strict, visited)
+      );
+    }
+
+    return contract;
+  }
+}

package/packages/angular-renderer/src/adapters/web/experience-adapter.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class WebExperienceAdapterService {
+  dispatchCapability(nodeId: string, actionName: string, payload?: unknown): void {
+    // In Phase 1, this provides the stateless translation boundary (AD-15).
+    // Real dispatching logic to the core BADL engine would be wired here.
+    console.debug(
+      `[ExperienceAdapter] Dispatched capability '${actionName}' for node '${nodeId}'`,
+      payload
+    );
+  }
+
+  updateState(nodeId: string, property: string, value: unknown): void {
+    // In Phase 1, this provides the stateless translation boundary (AD-15).
+    console.debug(
+      `[ExperienceAdapter] Updated state for node '${nodeId}', property '${property}'`,
+      value
+    );
+  }
+}

package/packages/angular-renderer/src/components/primitives/button/button.component.html

@@ -0,0 +1,9 @@
+<button
+  [type]="computedType()"
+  [disabled]="computedDisabled()"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+  (click)="onClick()"
+>
+  {{ computedLabel() }}
+</button>

package/packages/angular-renderer/src/components/primitives/button/button.component.pw.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/experimental-ct-angular';
+import { ButtonComponent } from './button.component';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('ButtonComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(ButtonComponent, {
+      props: {
+        contract: { id: '3', type: 'button', props: { label: 'Submit' } } as never,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/button/button.component.scss

@@ -0,0 +1,31 @@
+:host {
+  display: inline-block;
+}
+button {
+  cursor: pointer;
+  background-color: var(--origo-color-surface-primary);
+  color: var(--origo-color-text-inverse);
+  padding: var(--origo-spacing-container-padding);
+  border: none;
+  border-radius: var(--origo-radius-sm, 4px);
+  box-shadow: var(--origo-shadow-sm, none);
+  font-family: var(--origo-typography-button-font-family, inherit);
+  font-size: var(--origo-typography-button-font-size, inherit);
+  font-weight: var(--origo-typography-button-font-weight, inherit);
+  line-height: var(--origo-typography-button-line-height, inherit);
+  transition: all 0.2s ease-in-out;
+}
+button:hover:not(:disabled) {
+  background-color: var(--origo-color-surface-primary-hover);
+}
+button:active:not(:disabled) {
+  background-color: var(--origo-color-surface-primary-active);
+}
+button:focus-visible {
+  outline: 2px solid var(--origo-color-focus, #005fcc);
+  outline-offset: 2px;
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: var(--origo-opacity-disabled, 0.5);
+}

package/packages/angular-renderer/src/components/primitives/button/button.component.ts

@@ -0,0 +1,67 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
+import { InteractionContract } from '@origo/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface ButtonProps {
+  label?: string;
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-button',
+  standalone: true,
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-button]': 'true',
+  },
+})
+export class ButtonComponent implements OrigoAdapter<ButtonProps> {
+  static readonly contractSchema = {
+    label: 'string',
+    disabled: 'boolean',
+    type: 'string',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<ButtonProps>>();
+
+  computedLabel = computed(() => this.contract().props?.label ?? 'Button');
+  computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedType = computed(() => {
+    const type = this.contract().props?.type;
+    return type === 'button' || type === 'submit' || type === 'reset' ? type : 'button';
+  });
+  computedAriaLabel = computed(() => this.contract().props?.['aria-label'] as string | undefined);
+  computedAriaDescribedBy = computed(
+    () => this.contract().props?.['aria-describedby'] as string | undefined
+  );
+
+  action = output<void>();
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  onClick() {
+    if (this.computedDisabled()) return;
+
+    const id = this.contract().id;
+    if (!id) return;
+
+    this.experienceAdapter.dispatchCapability(id, 'click');
+    this.action.emit();
+  }
+}

package/packages/angular-renderer/src/components/primitives/primitives.a11y.pw.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Primitives Accessibility', () => {
+  test('Button should not have any automatically detectable accessibility issues', async ({
+    page,
+  }) => {
+    // Assuming a test sandbox or storybook page exists for the primitives.
+    // Since we don't have a specific URL, we will create a basic DOM structure with the component.
+    await page.setContent(`
+      <main>
+        <button class="origo-button" aria-label="Accessible Button">Click Me</button>
+      </main>
+    `);
+
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('TextInput should not have any automatically detectable accessibility issues', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <label for="test-input">Test Input</label>
+        <input id="test-input" type="text" class="origo-text-input" placeholder="Enter text" />
+      </main>
+    `);
+
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/text-input/text-input.component.html

@@ -0,0 +1,10 @@
+<input
+  type="text"
+  [value]="value()"
+  (input)="onInput($event)"
+  [placeholder]="computedPlaceholder()"
+  [disabled]="computedDisabled()"
+  [readonly]="computedReadonly()"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+/>