@origostudio/origo-design 0.0.35 → 0.0.37

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

@@ -0,0 +1,66 @@
+:host {
+  display: inline-block;
+}
+
+label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-container-padding, 8px);
+  cursor: pointer;
+  font-family: var(--origo-typography-input-font-family, inherit);
+  font-size: var(--origo-typography-input-font-size, 1rem);
+  color: var(--origo-color-text-primary, #333333);
+
+  &.disabled {
+    opacity: var(--origo-opacity-disabled, 0.5);
+    cursor: not-allowed;
+  }
+}
+
+input[type='checkbox'][role='switch'] {
+  appearance: none;
+  width: var(--origo-switch-track-width, 40px);
+  height: var(--origo-switch-track-height, 22px);
+  background-color: var(--origo-color-surface-variant, #e0e0e0);
+  border-radius: var(--origo-radius-switch-track, 11px);
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover:not(:disabled) {
+    background-color: var(--origo-color-surface-variant-hover, #d0d0d0);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    inset-inline-start: 2px;
+    width: var(--origo-switch-thumb-size, 18px);
+    height: var(--origo-switch-thumb-size, 18px);
+    background-color: var(--origo-color-on-accent, #ffffff);
+    border-radius: 50%;
+    transition:
+      inset-inline-start 0.2s ease-in-out,
+      transform 0.2s ease-in-out;
+  }
+
+  &:checked {
+    background-color: var(--origo-color-accent, var(--origo-color-primary, #005fcc));
+
+    &::after {
+      inset-inline-start: calc(100% - var(--origo-switch-thumb-size, 18px) - 2px);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--origo-color-focus, #005fcc);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,86 @@
+import {
+  Component,
+  input,
+  model,
+  computed,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  inject,
+  effect,
+  untracked,
+} from '@angular/core';
+import { InteractionContract } from '@origo/core';
+import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface SwitchProps {
+  checked?: boolean;
+  label?: string;
+  disabled?: boolean;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-switch',
+  standalone: true,
+  templateUrl: './switch.component.html',
+  styleUrls: ['./switch.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-switch]': 'true',
+    '[attr.data-testid]': 'contract().id ?? ""',
+  },
+})
+export class SwitchComponent implements OrigoAdapter<SwitchProps> {
+  static readonly contractSchema: Record<
+    string,
+    'string' | 'number' | 'boolean' | 'object' | 'array'
+  > = {
+    checked: 'boolean',
+    label: 'string',
+    disabled: 'boolean',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<SwitchProps>>();
+  checked = model<boolean>(false);
+
+  computedLabel = computed(() => this.contract().props?.label ?? '');
+  computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedAriaLabel = computed(() => {
+    const v = this.contract().props?.['aria-label'];
+    return v !== undefined && v !== null && String(v).trim() !== '' ? String(v) : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const v = this.contract().props?.['aria-describedby'];
+    return v !== undefined && v !== null && String(v).trim() !== '' ? String(v) : undefined;
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  constructor() {
+    effect(() => {
+      const props = this.contract().props;
+      const coerced = props
+        ? coerceContractProps<Record<string, any>>(props, SwitchComponent.contractSchema)
+        : {};
+      const contractVal = coerced['checked'] !== undefined ? !!coerced['checked'] : this.checked();
+      untracked(() => {
+        if (contractVal === this.checked()) return;
+        this.checked.set(contractVal);
+      });
+    });
+  }
+
+  onChange(event: Event) {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || this.computedDisabled() || !this.contract().id)
+      return;
+
+    const isChecked = target.checked;
+    this.checked.set(isChecked);
+    this.experienceAdapter.updateState(this.contract().id, 'checked', isChecked);
+  }
+}

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

@@ -8,9 +8,7 @@ import {
   inject,
   effect,
   untracked,
-  SecurityContext,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { InteractionContract } from '@origo/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
@@ -33,6 +31,7 @@ export interface TextInputProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-text-input]': 'true',
+    '[attr.data-testid]': 'contract().id ?? ""',
   },
 })
 export class TextInputComponent implements OrigoAdapter<TextInputProps> {
@@ -50,13 +49,20 @@ export class TextInputComponent implements OrigoAdapter<TextInputProps> {
   computedPlaceholder = computed(() => this.contract().props?.placeholder ?? '');
   computedDisabled = computed(() => !!this.contract().props?.disabled);
   computedReadonly = computed(() => !!this.contract().props?.readonly);
-  computedAriaLabel = computed(() => this.contract().props?.['aria-label'] as string | undefined);
-  computedAriaDescribedBy = computed(
-    () => this.contract().props?.['aria-describedby'] as string | undefined
-  );
+  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;
+  });
 
   private experienceAdapter = inject(WebExperienceAdapterService);
-  private sanitizer = inject(DomSanitizer);
 
   constructor() {
     effect(() => {
@@ -72,7 +78,7 @@ export class TextInputComponent implements OrigoAdapter<TextInputProps> {
     if (!target) return;
 
     const rawValue = target.value;
-    const sanitizedValue = this.sanitizer.sanitize(SecurityContext.HTML, rawValue) || '';
+    const sanitizedValue = String(rawValue);
 
     if (target.value !== sanitizedValue) {
       target.value = sanitizedValue;

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

@@ -14,6 +14,8 @@ export interface VBoxProps {
   gap?: number | string;
   alignment?: 'start' | 'center' | 'end' | 'stretch';
   padding?: number | string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
 }
 
 @Component({
@@ -25,11 +27,13 @@ export interface VBoxProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-vbox]': 'true',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
     '[style.gap]': 'computedGap()',
     '[style.align-items]': 'computedAlignment()',
     '[style.padding-inline]': 'computedPadding()',
     '[style.padding-block]': 'computedPadding()',
+    '[attr.aria-label]': 'computedAriaLabel()',
+    '[attr.aria-describedby]': 'computedAriaDescribedBy()',
   },
 })
 export class VBoxComponent implements OrigoAdapter<VBoxProps>, ContainerComponent {
@@ -73,4 +77,17 @@ export class VBoxComponent implements OrigoAdapter<VBoxProps>, ContainerComponen
     const num = Number(padding);
     return !isNaN(num) ? `${num}px` : String(padding);
   });
+
+  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/lib/primitives.provider.ts

@@ -13,7 +13,8 @@ import { CardComponent } from '../components/primitives/card/card.component';
 import { SidebarComponent } from '../components/primitives/sidebar/sidebar.component';
 import { TabsComponent } from '../components/primitives/tabs/tabs.component';
 import { BreadcrumbsComponent } from '../components/primitives/breadcrumbs/breadcrumbs.component';
-
+import { SwitchComponent } from '../components/primitives/switch/switch.component';
+import { ChipComponent } from '../components/primitives/chip/chip.component';
 export function provideOrigo9Primitives(): EnvironmentProviders {
   return makeEnvironmentProviders([
     {
@@ -33,6 +34,8 @@ export function provideOrigo9Primitives(): EnvironmentProviders {
         m.set('Tabs', TabsComponent);
         m.set('Breadcrumbs', BreadcrumbsComponent);
         m.set('Navigation', SidebarComponent);
+        m.set('Switch', SwitchComponent);
+        m.set('Chip', ChipComponent);
         return m;
       },
       deps: [RENDERER_REGISTRY],

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.37 (2026-09-24)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
+## 0.0.36 (2026-09-23)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.35 (2026-09-22)
 
 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.35",
+  "version": "0.0.37",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origo/core": "0.0.35",
+    "@origo/core": "0.0.37",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.37 (2026-09-24)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
+## 0.0.36 (2026-09-23)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.35 (2026-09-22)
 
 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": "@origo/core",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "private": true,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.37 (2026-09-24)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
+## 0.0.36 (2026-09-23)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.35 (2026-09-22)
 
 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": "@origo/design-tokens",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/devtools/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.37 (2026-09-24)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
+## 0.0.36 (2026-09-23)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
 ## 0.0.35 (2026-09-22)
 
 This was a version bump only for devtools to align it with other projects, there were no code changes.

package/packages/devtools/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":188.97915199999989,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":186.03909399999975,"failed":false}]]}

package/packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origo/devtools",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "dependencies": {
     "@origo/core": "0.0.30",

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.37 (2026-09-24)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
+## 0.0.36 (2026-09-23)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
 ## 0.0.35 (2026-09-22)
 
 This was a version bump only for playground to align it with other projects, there were no code changes.

package/packages/playground/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":3505.1184439999997,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":23.40150100000028,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":323.30038299999796,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":74.20934600000328,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":183.55435800000123,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":218.21600200000103,"failed":false}],[":src/app/app.component.spec.ts",{"duration":163.03515300000072,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":4351.962877999998,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":758.8180159999974,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":46.5824649999995,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":146.99058499999956,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":209.5323270000008,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":184.9373110000015,"failed":false}],[":src/app/app.component.spec.ts",{"duration":183.36756700000115,"failed":false}]]}

package/packages/playground/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origo/playground",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "private": true,
   "dependencies": {
-    "@origo/core": "0.0.35",
-    "@origostudio/cli": "0.0.35"
+    "@origo/core": "0.0.37",
+    "@origostudio/cli": "0.0.37"
   },
   "peerDependencies": {
     "@angular/common": "^18.0.0",