@origostudio/origo-design 0.0.53 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -15,6 +15,7 @@
     "perf:benchmark": "ts-node tools/benchmarks/compare-baseline.ts",
     "perf:test": "ts-node tools/benchmarks/run-tests.ts",
     "spike:epic7": "node tools/spikes/epic7-worker-csp/build-spike.js",
+    "spike:overlay": "ts-node --project tsconfig.base.json tools/spikes/overlay-shadowdom/run-spike.ts",
     "prepare": "husky",
     "release": "nx release --skip-publish",
     "validate:registry": "ts-node --project tsconfig.base.json tools/test-registry/validate-registry.ts"
@@ -22,6 +23,7 @@
   "private": false,
   "dependencies": {
     "@angular/animations": "22.0.8",
+    "@angular/cdk": "22.0.7",
     "@angular/common": "22.0.8",
     "@angular/compiler": "22.0.8",
     "@angular/core": "22.0.8",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.0.55 (2026-10-13)
+
+### 🚀 Features
+
+- implement navigation primitives including breadcrumbs, pagination, tabs, and stepper components ([7591e16](https://github.com/OrigoStudio/origo-design/commit/7591e16))
+- add stepper, pagination, tabs, and breadcrumbs primitive components to angular-renderer ([915495f](https://github.com/OrigoStudio/origo-design/commit/915495f))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.54 (2026-10-13)
+
+### 🚀 Features
+
+- implement Angular overlay and portal architecture service for angular-renderer ([fe0c96a](https://github.com/OrigoStudio/origo-design/commit/fe0c96a))
+- implement Angular overlay and portal architecture with Shadow DOM support ([954c255](https://github.com/OrigoStudio/origo-design/commit/954c255))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.53 (2026-10-09)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,24 +1,29 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.53",
-    "@origostudio/design-tokens": "0.0.53",
+    "@origostudio/core": "0.0.55",
+    "@origostudio/design-tokens": "0.0.55",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",
-    "@axe-core/playwright": "^4.13.0"
+    "@axe-core/playwright": "^4.13.0",
+    "rxjs": "~7.8.0"
   },
   "peerDependencies": {
+    "@angular/cdk": ">=18.0.0",
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
     "@angular/forms": ">=18.0.0",
     "@angular/platform-browser": ">=18.0.0"
   },
+  "devDependencies": {
+    "@angular/cdk": "22.0.7"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/OrigoStudio/origo-design.git"

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

@@ -1,24 +1,89 @@
 <ol class="origo-breadcrumbs__list">
+  @if (computedHome(); as homeItem) {
+    <li class="origo-breadcrumbs__item origo-breadcrumbs__item--home">
+      @if (computedItems().length > 0) {
+        @if (homeItem.url) {
+          <a
+            class="origo-breadcrumbs__link"
+            [attr.href]="homeItem.url"
+            [class.origo-breadcrumbs__link--disabled]="homeItem.disabled"
+            (click)="onItemClick($event, homeItem, false)"
+          >
+            @if (homeItem.icon) {
+              <span class="origo-breadcrumbs__icon" aria-hidden="true">{{ homeItem.icon }}</span>
+            }
+            <span>{{ homeItem.label }}</span>
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="origo-breadcrumbs__link"
+            [disabled]="homeItem.disabled"
+            (click)="onItemClick($event, homeItem, false)"
+          >
+            @if (homeItem.icon) {
+              <span class="origo-breadcrumbs__icon" aria-hidden="true">{{ homeItem.icon }}</span>
+            }
+            <span>{{ homeItem.label }}</span>
+          </button>
+        }
+        <span class="origo-breadcrumbs__separator" aria-hidden="true">{{
+          computedSeparator()
+        }}</span>
+      } @else {
+        <span class="origo-breadcrumbs__current" [attr.aria-current]="'page'">
+          @if (homeItem.icon) {
+            <span class="origo-breadcrumbs__icon" aria-hidden="true">{{ homeItem.icon }}</span>
+          }
+          {{ homeItem.label }}
+        </span>
+      }
+    </li>
+  }
+
   @for (item of computedItems(); track $index; let last = $last) {
     <li class="origo-breadcrumbs__item">
-      @if (!last && item.outcomeRef) {
-        <a
-          class="origo-breadcrumbs__link"
-          href="javascript:void(0)"
-          (click)="onItemClick($event, item, last)"
-        >
-          <span>{{ item.label }}</span>
-        </a>
+      @if (!last) {
+        @if (item.url) {
+          <a
+            class="origo-breadcrumbs__link"
+            [attr.href]="item.url"
+            [class.origo-breadcrumbs__link--disabled]="item.disabled"
+            (click)="onItemClick($event, item, last)"
+          >
+            @if (item.icon) {
+              <span class="origo-breadcrumbs__icon" aria-hidden="true">{{ item.icon }}</span>
+            }
+            <span>{{ item.label }}</span>
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="origo-breadcrumbs__link"
+            [disabled]="item.disabled"
+            (click)="onItemClick($event, item, last)"
+          >
+            @if (item.icon) {
+              <span class="origo-breadcrumbs__icon" aria-hidden="true">{{ item.icon }}</span>
+            }
+            <span>{{ item.label }}</span>
+          </button>
+        }
       } @else {
-        <span
-          [class.origo-breadcrumbs__current]="last"
-          [attr.aria-current]="last ? 'page' : null"
-          >{{ item.label }}</span
-        >
+        <span class="origo-breadcrumbs__current" [attr.aria-current]="'page'">
+          @if (item.icon) {
+            <span class="origo-breadcrumbs__icon" aria-hidden="true">{{ item.icon }}</span>
+          }
+          {{ item.label }}
+        </span>
       }
+
       @if (!last) {
-        <span class="origo-breadcrumbs__separator" aria-hidden="true">/</span>
+        <span class="origo-breadcrumbs__separator" aria-hidden="true">{{
+          computedSeparator()
+        }}</span>
       }
     </li>
   }
 </ol>
+<ng-container #vc></ng-container>

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

@@ -1,5 +1,16 @@
 :host {
   display: block;
+  box-sizing: border-box;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+:host([hidden]) {
+  display: none !important;
 }
 
 .origo-breadcrumbs__list {
@@ -9,33 +20,68 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--spacing-sm, 8px);
+  gap: var(--origo-spacing-sm);
 }
 
 .origo-breadcrumbs__item {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  font-size: 14px;
+  font-family: var(--origo-typography-body-font-family);
+  font-size: var(--origo-typography-button-font-size);
+  color: var(--origo-color-text-primary);
 }
 
 .origo-breadcrumbs__link {
-  color: var(--color-primary, #1976d2);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--origo-color-brand-primary);
   text-decoration: none;
+  transition: color var(--origo-duration-fast) ease;
 
-  &:hover,
-  &:focus-visible {
+  &:hover:not(:disabled) {
+    color: var(--origo-color-brand-primary-hover);
     text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--origo-color-focus);
     outline-offset: 2px;
   }
+
+  &:disabled,
+  &--disabled {
+    cursor: not-allowed;
+    color: var(--origo-color-text-disabled);
+    opacity: var(--origo-opacity-disabled);
+    pointer-events: none;
+  }
 }
 
 .origo-breadcrumbs__current {
-  color: var(--color-text-secondary, #666666);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  color: var(--origo-color-text-muted);
   font-weight: 500;
 }
 
 .origo-breadcrumbs__separator {
-  color: var(--color-text-hint, #999999);
-  margin-inline-start: var(--spacing-sm, 8px);
+  display: inline-flex;
+  align-items: center;
+  color: var(--origo-color-text-muted);
+  margin-inline-start: var(--origo-spacing-sm);
   user-select: none;
 }
+
+.origo-breadcrumbs__icon {
+  display: inline-flex;
+  align-items: center;
+}

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

@@ -1,19 +1,28 @@
 import {
   Component,
   input,
+  output,
   ChangeDetectionStrategy,
   computed,
   ViewEncapsulation,
   inject,
+  viewChild,
+  ViewContainerRef,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { InteractionContract } from '@origostudio/core';
-import { OrigoAdapter } from '../../../adapters/web/adapter';
+import {
+  OrigoAdapter,
+  ContainerComponent as IContainerComponent,
+  coerceContractProps,
+} from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface BreadcrumbItem {
   label: string;
+  icon?: string;
   outcomeRef?: string;
+  url?: string;
+  disabled?: boolean;
 }
 
 export interface BreadcrumbsProps {
@@ -21,10 +30,28 @@ export interface BreadcrumbsProps {
   rules?: Record<string, unknown>;
   metadata?: Record<string, unknown>;
   items?: Array<BreadcrumbItem>;
+  home?: BreadcrumbItem;
+  separator?: string;
+  routerMode?: 'angular' | 'native' | 'state';
   'aria-label'?: string;
   'aria-describedby'?: string;
 }
 
+export const BreadcrumbsContractSchema: Record<
+  keyof BreadcrumbsProps,
+  'string' | 'number' | 'boolean' | 'array' | 'object'
+> = {
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  items: 'array',
+  home: 'object',
+  separator: 'string',
+  routerMode: 'string',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+};
+
 @Component({
   selector: 'origo-breadcrumbs',
   standalone: true,
@@ -40,50 +67,83 @@ export interface BreadcrumbsProps {
     role: 'navigation',
   },
 })
-export class BreadcrumbsComponent implements OrigoAdapter<BreadcrumbsProps> {
-  static readonly contractSchema = {
-    permissions: 'object',
-    rules: 'object',
-    metadata: 'object',
-    items: 'array',
-  };
+export class BreadcrumbsComponent implements OrigoAdapter<BreadcrumbsProps>, IContainerComponent {
+  static readonly contractSchema = BreadcrumbsContractSchema;
   static readonly strictContract = false;
 
   contract = input.required<InteractionContract<BreadcrumbsProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+
+  itemClick = output<BreadcrumbItem>();
 
   private experienceAdapter = inject(WebExperienceAdapterService);
-  private sanitizer = inject(DomSanitizer);
+
+  protected props = computed(() =>
+    coerceContractProps<BreadcrumbsProps>(this.contract().props, BreadcrumbsContractSchema)
+  );
 
   computedAriaLabel = computed(() => {
-    const label = this.contract().props?.['aria-label'];
+    const label = this.props()['aria-label'];
     return label !== undefined && label !== null ? String(label) : 'Breadcrumbs';
   });
 
   computedAriaDescribedBy = computed(() => {
-    const desc = this.contract().props?.['aria-describedby'];
+    const desc = this.props()['aria-describedby'];
     return desc !== undefined && desc !== null ? String(desc) : undefined;
   });
 
-  computedItems = computed(() => {
-    const items = this.contract().props?.items;
+  computedSeparator = computed(() => {
+    const sep = this.props().separator;
+    return typeof sep === 'string' && sep.trim().length > 0 ? sep : '/';
+  });
+
+  computedHome = computed<BreadcrumbItem | undefined>(() => {
+    const home = this.props().home;
+    if (!home || home.label == null) return undefined;
+
+    return {
+      label: String(home.label),
+      icon: home.icon ? String(home.icon) : undefined,
+      outcomeRef: home.outcomeRef ? String(home.outcomeRef) : undefined,
+      url: home.url ? String(home.url) : undefined,
+      disabled: !!home.disabled,
+    };
+  });
+
+  computedItems = computed<BreadcrumbItem[]>(() => {
+    const items = this.props().items;
     if (!Array.isArray(items)) return [];
 
     return items
       .filter(item => item != null && item.label != null)
-      .map(item => {
-        return {
-          label: String(item.label),
-          outcomeRef: item.outcomeRef ? String(item.outcomeRef) : undefined,
-        };
-      });
+      .map(item => ({
+        label: String(item.label),
+        icon: item.icon ? String(item.icon) : undefined,
+        outcomeRef: item.outcomeRef ? String(item.outcomeRef) : undefined,
+        url: item.url ? String(item.url) : undefined,
+        disabled: !!item.disabled,
+      }));
   });
 
   onItemClick(event: Event, item: BreadcrumbItem, isLast: boolean) {
-    if (isLast || !item.outcomeRef) {
+    if (isLast || item.disabled) {
       event.preventDefault();
       return;
     }
 
-    this.experienceAdapter.updateState(this.contract().id, 'activeOutcome', item.outcomeRef);
+    if (!item.url) {
+      event.preventDefault();
+    }
+
+    if (item.outcomeRef) {
+      this.experienceAdapter.updateState(this.contract().id, 'activeOutcome', item.outcomeRef);
+    }
+
+    const contractId = this.contract().id;
+    if (contractId) {
+      this.experienceAdapter.dispatchCapability(contractId, 'itemClick', item);
+    }
+
+    this.itemClick.emit(item);
   }
 }

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

@@ -0,0 +1,95 @@
+<nav
+  class="origo-pagination__nav"
+  role="navigation"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+>
+  @if (computedShowFirstLastIcon()) {
+    <button
+      type="button"
+      class="origo-pagination__button origo-pagination__button--first"
+      [disabled]="computedDisabled() || isFirstPage()"
+      [attr.aria-disabled]="computedDisabled() || isFirstPage()"
+      aria-label="First Page"
+      (click)="onFirst()"
+    >
+      «
+    </button>
+  }
+
+  <button
+    type="button"
+    class="origo-pagination__button origo-pagination__button--prev"
+    [disabled]="computedDisabled() || isFirstPage()"
+    [attr.aria-disabled]="computedDisabled() || isFirstPage()"
+    aria-label="Previous Page"
+    (click)="onPrevious()"
+  >
+    ‹
+  </button>
+
+  @if (computedShowPageLinks()) {
+    <div class="origo-pagination__pages" role="group" aria-label="Page selection">
+      @for (p of visiblePageLinks(); track p) {
+        <button
+          type="button"
+          class="origo-pagination__button origo-pagination__page"
+          [class.origo-pagination__page--active]="p === pageIndex()"
+          [attr.aria-current]="p === pageIndex() ? 'page' : null"
+          [attr.aria-label]="'Page ' + (p + 1)"
+          [disabled]="computedDisabled()"
+          (click)="onPageSelect(p)"
+        >
+          {{ p + 1 }}
+        </button>
+      }
+    </div>
+  }
+
+  <button
+    type="button"
+    class="origo-pagination__button origo-pagination__button--next"
+    [disabled]="computedDisabled() || isLastPage()"
+    [attr.aria-disabled]="computedDisabled() || isLastPage()"
+    aria-label="Next Page"
+    (click)="onNext()"
+  >
+    ›
+  </button>
+
+  @if (computedShowFirstLastIcon()) {
+    <button
+      type="button"
+      class="origo-pagination__button origo-pagination__button--last"
+      [disabled]="computedDisabled() || isLastPage()"
+      [attr.aria-disabled]="computedDisabled() || isLastPage()"
+      aria-label="Last Page"
+      (click)="onLast()"
+    >
+      »
+    </button>
+  }
+
+  @if (computedRowsPerPageOptions().length > 0) {
+    <div class="origo-pagination__rows-container">
+      <label class="origo-pagination__rows-label" [attr.for]="'rows-select-' + contract().id">
+        Rows:
+      </label>
+      <select
+        [id]="'rows-select-' + contract().id"
+        class="origo-pagination__rows-select"
+        [disabled]="computedDisabled()"
+        [attr.aria-label]="'Rows per page'"
+        (change)="onRowsSelect($event)"
+      >
+        @for (opt of computedRowsPerPageOptions(); track opt) {
+          <option [value]="opt" [selected]="opt === computedRows()">
+            {{ opt }}
+          </option>
+        }
+      </select>
+    </div>
+  }
+
+  <ng-container #vc></ng-container>
+</nav>

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

@@ -0,0 +1,109 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.origo-pagination__nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding-block: var(--origo-spacing-sm);
+  padding-inline: var(--origo-spacing-sm);
+  font-family: var(--origo-typography-body-font-family);
+  font-size: var(--origo-typography-button-font-size);
+  color: var(--origo-color-text-primary);
+}
+
+.origo-pagination__pages {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+}
+
+.origo-pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--origo-spacing-xl);
+  min-block-size: var(--origo-spacing-xl);
+  padding-inline: var(--origo-spacing-xs);
+  padding-block: var(--origo-spacing-xs);
+  background-color: var(--origo-color-surface-default);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  color: var(--origo-color-text-primary);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  transition: all var(--origo-duration-fast) ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--origo-color-surface-subtle);
+    border-color: var(--origo-color-border-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled);
+    color: var(--origo-color-text-disabled);
+    background-color: var(--origo-color-surface-disabled);
+  }
+
+  &.origo-pagination__page--active {
+    background-color: var(--origo-color-surface-primary);
+    border-color: var(--origo-color-surface-primary);
+    color: var(--origo-color-text-inverse);
+    font-weight: 600;
+  }
+}
+
+.origo-pagination__rows-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  margin-inline-start: var(--origo-spacing-md);
+}
+
+.origo-pagination__rows-label {
+  font-size: var(--origo-typography-button-font-size);
+  color: var(--origo-color-text-muted);
+}
+
+.origo-pagination__rows-select {
+  padding-inline: var(--origo-spacing-sm);
+  padding-block: var(--origo-spacing-xs);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  background-color: var(--origo-color-surface-default);
+  color: var(--origo-color-text-primary);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled);
+    background-color: var(--origo-color-surface-disabled);
+  }
+}