@origostudio/origo-design 0.0.46 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "license": "MIT",
   "repository": {
     "type": "git",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.0.48 (2026-10-07)
+
+### 🚀 Features
+
+- add core primitives, buttons, and review artifacts for Angular renderer ([f0cbc46](https://github.com/OrigoStudio/origo-design/commit/f0cbc46))
+- add core button and action primitive components to angular-renderer ([2f7d926](https://github.com/OrigoStudio/origo-design/commit/2f7d926))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.47 (2026-10-07)
+
+This was a version bump only for angular-renderer to align it with other projects, there were no code changes.
+
 ## 0.0.46 (2026-10-02)
 
 This was a version bump only for angular-renderer to align it with other projects, there were no code changes.

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.46",
-    "@origostudio/design-tokens": "0.0.46",
+    "@origostudio/core": "0.0.48",
+    "@origostudio/design-tokens": "0.0.48",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",

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

@@ -3,7 +3,22 @@
   [disabled]="computedDisabled()"
   [attr.aria-label]="computedAriaLabel()"
   [attr.aria-describedby]="computedAriaDescribedBy()"
+  [attr.aria-busy]="computedLoading() ? 'true' : null"
   (click)="onClick()"
 >
-  {{ computedLabel() }}
+  @if (computedLoading()) {
+    <span class="origo-spinner"></span>
+  }
+  @if (computedIcon() && computedIconPosition() !== 'right') {
+    <span [class]="'origo-icon origo-icon-' + computedIcon()"></span>
+  }
+  <span class="origo-button-label">{{ computedLabel() }}</span>
+  @if (computedBadge()) {
+    <span [class]="'origo-badge origo-badge-' + computedBadgeSeverity()">{{
+      computedBadge()
+    }}</span>
+  }
+  @if (computedIcon() && computedIconPosition() === 'right') {
+    <span [class]="'origo-icon origo-icon-' + computedIcon()"></span>
+  }
 </button>

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

@@ -17,6 +17,16 @@ export interface ButtonProps {
   type?: 'button' | 'submit' | 'reset';
   'aria-label'?: string;
   'aria-describedby'?: string;
+  loading?: boolean;
+  severity?: string;
+  variant?: string;
+  icon?: string;
+  iconPosition?: string;
+  badge?: string;
+  badgeSeverity?: string;
+  permissions?: any;
+  rules?: any;
+  metadata?: any;
 }
 
 @Component({
@@ -27,7 +37,7 @@ export interface ButtonProps {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
-    '[class.origo-button]': 'true',
+    '[class]': 'computedHostClasses()',
     '[attr.data-testid]': 'contract().id ?? ""',
   },
 })
@@ -36,13 +46,41 @@ export class ButtonComponent implements OrigoAdapter<ButtonProps> {
     label: 'string',
     disabled: 'boolean',
     type: 'string',
+    loading: 'boolean',
+    severity: 'string',
+    variant: 'string',
+    icon: 'string',
+    iconPosition: 'string',
+    badge: 'string',
+    badgeSeverity: 'string',
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
   };
   static readonly strictContract = false;
 
   contract = input.required<InteractionContract<ButtonProps>>();
 
   computedLabel = computed(() => this.contract().props?.label ?? 'Button');
-  computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedLoading = computed(() => !!this.contract().props?.loading);
+  computedDisabled = computed(() => {
+    const props = this.contract().props;
+    const rulesDisable = props?.rules?.disable === true || props?.permissions?.allow === false;
+    return !!props?.disabled || this.computedLoading() || rulesDisable;
+  });
+
+  computedIcon = computed(() => this.contract().props?.icon);
+  computedIconPosition = computed(() => this.contract().props?.iconPosition ?? 'left');
+  computedBadge = computed(() => this.contract().props?.badge);
+  computedBadgeSeverity = computed(() => this.contract().props?.badgeSeverity ?? 'info');
+
+  computedHostClasses = computed(() => {
+    const s = this.contract().props?.severity;
+    const v = this.contract().props?.variant;
+    return ['origo-button', s ? `origo-severity-${s}` : '', v ? `origo-variant-${v}` : '']
+      .filter(Boolean)
+      .join(' ');
+  });
   computedType = computed(() => {
     const type = this.contract().props?.type;
     return type === 'button' || type === 'submit' || type === 'reset' ? type : 'button';
@@ -65,7 +103,7 @@ export class ButtonComponent implements OrigoAdapter<ButtonProps> {
   private experienceAdapter = inject(WebExperienceAdapterService);
 
   onClick() {
-    if (this.computedDisabled()) return;
+    if (this.computedDisabled() || this.computedLoading()) return;
 
     const id = this.contract().id;
     if (!id) return;

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

@@ -0,0 +1,8 @@
+<div
+  class="origo-button-group-content"
+  role="group"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+>
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,18 @@
+:host {
+  display: inline-flex;
+}
+.origo-button-group-content {
+  display: flex;
+  flex-direction: row;
+  gap: var(--origo-spacing-container-padding);
+}
+:host(.origo-orientation-column) .origo-button-group-content {
+  flex-direction: column;
+}
+:host(.origo-attached) .origo-button-group-content {
+  gap: 0;
+}
+/* Note: attached styling across shadow DOM requires passing CSS custom properties to children, which relies on children consuming them. */
+:host(.origo-attached) {
+  --origo-button-radius: 0;
+}

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

@@ -0,0 +1,71 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+
+export interface ButtonGroupProps {
+  orientation?: 'row' | 'column';
+  attached?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-button-group',
+  standalone: true,
+  templateUrl: './button-group.component.html',
+  styleUrls: ['./button-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class]': 'computedHostClasses()',
+    '[attr.data-testid]': 'contract().id ?? ""',
+  },
+})
+export class ButtonGroupComponent implements OrigoAdapter<ButtonGroupProps> {
+  static readonly contractSchema = {
+    orientation: 'string',
+    attached: 'boolean',
+    size: 'string',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<ButtonGroupProps>>();
+
+  computedHostClasses = computed(() => {
+    const rawO = this.contract().props?.orientation;
+    const o = rawO === 'column' ? 'column' : 'row';
+    const attached = this.contract().props?.attached;
+    const rawSize = this.contract().props?.size;
+    const size = ['small', 'medium', 'large'].includes(rawSize as string) ? rawSize : undefined;
+    return [
+      'origo-button-group',
+      `origo-orientation-${o}`,
+      attached ? 'origo-attached' : '',
+      size ? `origo-size-${size}` : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  computedAriaLabel = computed(() => {
+    const label = this.contract().props?.['aria-label'];
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
+  });
+}

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

@@ -0,0 +1,18 @@
+<button
+  type="button"
+  [disabled]="computedDisabled()"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+  (click)="onClick()"
+>
+  @if (computedLoading()) {
+    <span class="origo-spinner"></span>
+  } @else {
+    @if (computedIcon()) {
+      <span [class]="'origo-icon origo-icon-' + computedIcon()"></span>
+    }
+  }
+  @if (computedLabel()) {
+    <span class="origo-fab-label">{{ computedLabel() }}</span>
+  }
+</button>

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

@@ -0,0 +1,47 @@
+:host {
+  display: inline-flex;
+  position: fixed;
+  z-index: 1000;
+}
+:host(.origo-position-bottom-right) {
+  bottom: var(--origo-spacing-container-padding);
+  right: var(--origo-spacing-container-padding);
+}
+:host(.origo-position-bottom-left) {
+  bottom: var(--origo-spacing-container-padding);
+  left: var(--origo-spacing-container-padding);
+}
+button {
+  cursor: pointer;
+  background-color: var(--origo-color-surface-primary);
+  color: var(--origo-color-text-inverse);
+  border: none;
+  border-radius: var(--origo-radius-xl);
+  box-shadow: var(--origo-shadow-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--origo-spacing-sm, 8px);
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 var(--origo-spacing-container-padding);
+  transition: var(--origo-transition-all);
+}
+button:empty {
+  padding: 0;
+}
+button:hover:not(:disabled) {
+  background-color: var(--origo-color-surface-primary-hover);
+  box-shadow: var(--origo-shadow-lg);
+}
+button:active:not(:disabled) {
+  background-color: var(--origo-color-surface-primary-active);
+}
+button:focus-visible {
+  outline: var(--origo-outline-width, 2px) solid var(--origo-color-focus);
+  outline-offset: var(--origo-outline-width, 2px);
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: var(--origo-opacity-disabled);
+}

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

@@ -0,0 +1,94 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface FabProps {
+  icon?: string;
+  label?: string;
+  severity?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  position?: 'bottom-right' | 'bottom-left';
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  permissions?: any;
+  rules?: any;
+  metadata?: any;
+}
+
+@Component({
+  selector: 'origo-fab',
+  standalone: true,
+  templateUrl: './floating-action-button.component.html',
+  styleUrls: ['./floating-action-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class]': 'computedHostClasses()',
+    '[attr.data-testid]': 'contract().id ?? ""',
+  },
+})
+export class FloatingActionButtonComponent implements OrigoAdapter<FabProps> {
+  static readonly contractSchema = {
+    icon: 'string',
+    label: 'string',
+    severity: 'string',
+    loading: 'boolean',
+    disabled: 'boolean',
+    position: 'string',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<FabProps>>();
+
+  computedIcon = computed(() => this.contract().props?.icon ?? '');
+  computedLabel = computed(() => this.contract().props?.label ?? '');
+  computedLoading = computed(() => !!this.contract().props?.loading);
+  computedDisabled = computed(() => {
+    const props = this.contract().props;
+    const rulesDisable = props?.rules?.disable === true || props?.permissions?.allow === false;
+    return !!props?.disabled || this.computedLoading() || rulesDisable;
+  });
+
+  computedAriaLabel = computed(() => {
+    const p = this.contract().props;
+    const v = p?.['aria-label'] || p?.label;
+    return v ? String(v) : undefined;
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const v = this.contract().props?.['aria-describedby'];
+    return v ? String(v) : undefined;
+  });
+
+  computedHostClasses = computed(() => {
+    const s = this.contract().props?.severity;
+    const rawP = this.contract().props?.position;
+    const p = ['bottom-left', 'bottom-right'].includes(rawP as string) ? rawP : 'bottom-right';
+    return ['origo-fab', s ? `origo-severity-${s}` : '', `origo-position-${p}`]
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  onClick() {
+    if (this.computedDisabled() || this.computedLoading()) return;
+    const id = this.contract().id;
+    if (!id) return;
+    this.experienceAdapter.dispatchCapability(id, 'click');
+  }
+}

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

@@ -0,0 +1,18 @@
+<button
+  type="button"
+  [disabled]="computedDisabled()"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+  [title]="contract().props?.tooltip || null"
+  (click)="onClick()"
+>
+  @if (computedLoading()) {
+    <span class="origo-spinner"></span>
+  } @else {
+    @if (computedIcon()) {
+      <span [class]="'origo-icon origo-icon-' + computedIcon()"></span>
+    } @else {
+      <span class="origo-icon origo-icon-default"></span>
+    }
+  }
+</button>

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

@@ -0,0 +1,34 @@
+:host {
+  display: inline-flex;
+}
+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);
+  box-shadow: var(--origo-shadow-sm, none);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--origo-transition-all);
+}
+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: var(--origo-outline-width, 2px) solid var(--origo-color-focus);
+  outline-offset: var(--origo-outline-width, 2px);
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: var(--origo-opacity-disabled);
+}
+:host(.origo-rounded) button {
+  border-radius: var(--origo-radius-round, 50%);
+  aspect-ratio: 1;
+}

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

@@ -0,0 +1,102 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface IconButtonProps {
+  icon?: string;
+  label?: string;
+  tooltip?: string;
+  severity?: string;
+  variant?: string;
+  rounded?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  permissions?: any;
+  rules?: any;
+  metadata?: any;
+}
+
+@Component({
+  selector: 'origo-icon-button',
+  standalone: true,
+  templateUrl: './icon-button.component.html',
+  styleUrls: ['./icon-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class]': 'computedHostClasses()',
+    '[attr.data-testid]': 'contract().id ?? ""',
+  },
+})
+export class IconButtonComponent implements OrigoAdapter<IconButtonProps> {
+  static readonly contractSchema = {
+    icon: 'string',
+    label: 'string',
+    tooltip: 'string',
+    severity: 'string',
+    variant: 'string',
+    rounded: 'boolean',
+    loading: 'boolean',
+    disabled: 'boolean',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<IconButtonProps>>();
+
+  computedIcon = computed(() => this.contract().props?.icon ?? '');
+  computedLoading = computed(() => !!this.contract().props?.loading);
+  computedDisabled = computed(() => {
+    const props = this.contract().props;
+    const rulesDisable = props?.rules?.disable === true || props?.permissions?.allow === false;
+    return !!props?.disabled || this.computedLoading() || rulesDisable;
+  });
+
+  computedAriaLabel = computed(() => {
+    const p = this.contract().props;
+    const v = p?.['aria-label'] || p?.label;
+    return v ? String(v) : undefined;
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const v = this.contract().props?.['aria-describedby'];
+    return v ? String(v) : undefined;
+  });
+
+  computedHostClasses = computed(() => {
+    const s = this.contract().props?.severity;
+    const v = this.contract().props?.variant;
+    const rounded = this.contract().props?.rounded;
+    return [
+      'origo-icon-button',
+      s ? `origo-severity-${s}` : '',
+      v ? `origo-variant-${v}` : '',
+      rounded ? 'origo-rounded' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  onClick() {
+    if (this.computedDisabled() || this.computedLoading()) return;
+    const id = this.contract().id;
+    if (!id) return;
+    this.experienceAdapter.dispatchCapability(id, 'click');
+  }
+}

package/packages/angular-renderer/src/index.ts

@@ -5,6 +5,9 @@ export * from './adapters/web/adapter';
 export * from './components/primitives/vbox/vbox.component';
 export * from './components/primitives/text-input/text-input.component';
 export * from './components/primitives/button/button.component';
+export * from './components/primitives/icon-button/icon-button.component';
+export * from './components/primitives/button-group/button-group.component';
+export * from './components/primitives/floating-action-button/floating-action-button.component';
 export * from './devtools';
 export * from './components/primitives/select/select.component';
 export * from './components/primitives/checkbox/checkbox.component';

package/packages/angular-renderer/src/lib/primitives.provider.ts

@@ -1,5 +1,8 @@
 import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 import { RENDERER_REGISTRY } from './renderer.tokens';
+import { IconButtonComponent } from '../components/primitives/icon-button/icon-button.component';
+import { ButtonGroupComponent } from '../components/primitives/button-group/button-group.component';
+import { FloatingActionButtonComponent } from '../components/primitives/floating-action-button/floating-action-button.component';
 import { SelectComponent } from '../components/primitives/select/select.component';
 import { CheckboxComponent } from '../components/primitives/checkbox/checkbox.component';
 import { RadioGroupComponent } from '../components/primitives/radio-group/radio-group.component';
@@ -21,6 +24,9 @@ import { VBoxComponent } from '../components/primitives/vbox/vbox.component';
 
 export function provideOrigo9Primitives(): EnvironmentProviders {
   const registryMap = new Map<string, unknown>([
+    ['IconButton', IconButtonComponent],
+    ['ButtonGroup', ButtonGroupComponent],
+    ['FloatingActionButton', FloatingActionButtonComponent],
     ['Select', SelectComponent],
     ['Checkbox', CheckboxComponent],
     ['RadioGroup', RadioGroupComponent],

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.48 (2026-10-07)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
+## 0.0.47 (2026-10-07)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.46 (2026-10-02)
 
 This was a version bump only for cli to align it with other projects, there were no code changes.

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/cli",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origostudio/core": "0.0.46",
+    "@origostudio/core": "0.0.48",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.48 (2026-10-07)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
+## 0.0.47 (2026-10-07)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.46 (2026-10-02)
 
 This was a version bump only for core to align it with other projects, there were no code changes.

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/core",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.48 (2026-10-07)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
+## 0.0.47 (2026-10-07)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.46 (2026-10-02)
 
 This was a version bump only for design-tokens to align it with other projects, there were no code changes.

package/packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/design-tokens",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",