Modify components to allow application of more expressive styling.

renderers/angular/src/lib/catalog/list.ts

@@ -35,7 +35,8 @@ import { Renderer } from '../rendering/renderer';
     }
 
     :host([direction='vertical']) section {
-      display: grid;
+      display: flex;
+      flex-direction: column;
     }
 
     :host([direction='horizontal']) section {
@@ -44,17 +45,21 @@ import { Renderer } from '../rendering/renderer';
       overflow-x: scroll;
       overflow-y: hidden;
       scrollbar-width: none;
+    }
 
-      > ::slotted(*) {
-        flex: 1 0 fit-content;
-        max-width: min(80%, 400px);
-      }
+    .a2ui-list-item {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      box-sizing: border-box;
     }
   `,
   template: `
     <section [class]="theme.components.List" [style]="theme.additionalStyles?.List">
       @for (child of component().properties.children; track child) {
-        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+        <div class="a2ui-list-item">
+          <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+        </div>
       }
     </section>
   `,

renderers/angular/src/lib/catalog/slider.ts

@@ -23,7 +23,7 @@ import { DynamicComponent } from '../rendering/dynamic-component';
   changeDetection: ChangeDetectionStrategy.Eager,
   template: `
     <section [class]="theme.components.Slider.container">
-      <label [class]="theme.components.Slider.label" [for]="inputId">
+      <label class="a2ui-slider-label" [class]="theme.components.Slider.label" [for]="inputId">
         {{ label() }}
       </label>
 
@@ -37,13 +37,20 @@ import { DynamicComponent } from '../rendering/dynamic-component';
         (input)="handleInput($event)"
         [class]="theme.components.Slider.element"
         [style]="theme.additionalStyles?.Slider"
+        [style.--slider-percent]="percentComplete() + '%'"
       />
     </section>
   `,
   styles: `
     :host {
       display: block;
       flex: var(--weight);
+      width: 100%;
+    }
+
+    .a2ui-slider-label {
+      display: block;
+      margin-bottom: 8px;
     }
 
     input {
@@ -62,13 +69,32 @@ export class Slider extends DynamicComponent {
   protected readonly inputId = super.getUniqueId('a2ui-slider');
   protected resolvedValue = computed(() => super.resolvePrimitive(this.value()) ?? 0);
 
+  protected percentComplete = computed(() => {
+    return this.computePercentage(this.resolvedValue());
+  });
+
   protected handleInput(event: Event) {
     const path = this.value()?.path;
 
-    if (!(event.target instanceof HTMLInputElement) || !path) {
+    if (!(event.target instanceof HTMLInputElement)) {
       return;
     }
 
-    this.processor.setData(this.component(), path, event.target.valueAsNumber, this.surfaceId());
+    const val = event.target.valueAsNumber;
+    const percent = this.computePercentage(val);
+
+    // Inject CSS variable directly to avoid Angular change detection lag/snapback
+    event.target.style.setProperty('--slider-percent', percent + '%');
+
+    if (path) {
+      this.processor.setData(this.component(), path, val, this.surfaceId());
+    }
+  }
+
+  private computePercentage(val: number): number {
+    const min = this.minValue() ?? 0;
+    const max = this.maxValue() ?? 100;
+    const range = max - min;
+    return range > 0 ? Math.max(0, Math.min(100, ((val - min) / range) * 100)) : 0;
   }
 }

renderers/angular/src/lib/catalog/tabs.ts

@@ -14,10 +14,9 @@
  limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
 import { DynamicComponent } from '../rendering/dynamic-component';
 import { Renderer } from '../rendering/renderer';
-import * as Styles from '@a2ui/web_core/styles/index';
 import * as Types from '@a2ui/web_core/types/types';
 
 @Component({
@@ -29,12 +28,14 @@ import * as Types from '@a2ui/web_core/types/types';
     @let selectedIndex = this.selectedIndex();
 
     <section [class]="theme.components.Tabs.container" [style]="theme.additionalStyles?.Tabs">
-      <div [class]="theme.components.Tabs.element">
+      <div class="a2ui-tabs-container" [class]="theme.components.Tabs.element">
         @for (tab of tabs; track tab) {
           <button
+            class="a2ui-tab-button"
             (click)="this.selectedIndex.set($index)"
             [disabled]="selectedIndex === $index"
-            [class]="buttonClasses()[selectedIndex]"
+            [class]="theme.components.Tabs.controls.all"
+            [class.selected]="selectedIndex === $index"
           >
             {{ resolvePrimitive(tab.title) }}
           </button>
@@ -52,23 +53,29 @@ import * as Types from '@a2ui/web_core/types/types';
     :host {
       display: block;
       flex: var(--weight);
+      width: 100%;
+    }
+
+    .a2ui-tabs-container {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    .a2ui-tab-button {
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
     }
   `,
 })
 export class Tabs extends DynamicComponent {
   protected selectedIndex = signal(0);
   readonly tabs = input.required<Types.ResolvedTabItem[]>();
-
-  protected readonly buttonClasses = computed(() => {
-    const selectedIndex = this.selectedIndex();
-
-    return this.tabs().map((_, index) => {
-      return index === selectedIndex
-        ? Styles.merge(
-            this.theme.components.Tabs.controls.all,
-            this.theme.components.Tabs.controls.selected,
-          )
-        : this.theme.components.Tabs.controls.all;
-    });
-  });
 }