@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/scatter-chart/scatter-chart-render.test.ts

@@ -0,0 +1,157 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiCartesianChart } from '../cartesian-chart/cartesian-chart';
+import { UiScatterChart, UiScatterSeries } from './scatter-chart';
+
+describe('UiScatterChart', () => {
+  it('renders with default configuration', async () => {
+    const { container } = await render(UiScatterChart);
+    expect(container).toBeTruthy();
+  });
+
+  it('derives axis domains from the data extremes', async () => {
+    const { componentRef } = await render(UiScatterChart);
+    const inst = componentRef.instance as UiScatterChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 0 },
+      { x: 5, y: 8 },
+      { x: 10, y: 3 },
+    ]);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      xAxis: () => { domain: readonly [number, number] };
+      yAxis: () => { domain: readonly [number, number] };
+      effectivePadding: () => {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+      };
+    };
+    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(0);
+    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(10);
+    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(0);
+    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(8);
+    // Default SCATTER_INSET on every side.
+    expect(cast.effectivePadding().top).toBeCloseTo(0.04);
+    expect(cast.effectivePadding().right).toBeCloseTo(0.04);
+    expect(cast.effectivePadding().bottom).toBeCloseTo(0.04);
+    expect(cast.effectivePadding().left).toBeCloseTo(0.04);
+  });
+
+  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
+    const { componentRef } = await render(UiScatterChart);
+    const inst = componentRef.instance as UiScatterChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+    ]);
+    setInputSignal(inst.xMin, -5);
+    setInputSignal(inst.xMax, 20);
+    setInputSignal(inst.yMin, -1);
+    setInputSignal(inst.yMax, 15);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      xAxis: () => { domain: readonly [number, number] };
+      yAxis: () => { domain: readonly [number, number] };
+    };
+    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(-5);
+    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(20);
+    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(-1);
+    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(15);
+  });
+
+  it('user padding overrides individual sides of the default inset', async () => {
+    const { componentRef } = await render(UiScatterChart);
+    const inst = componentRef.instance as UiScatterChart;
+    setInputSignal(inst.padding, { top: 0.2 });
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      effectivePadding: () => {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+      };
+    };
+    expect(cast.effectivePadding().top).toBeCloseTo(0.2);
+    expect(cast.effectivePadding().left).toBeCloseTo(0.04);
+  });
+
+  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+    const { componentRef } = await render(UiScatterChart);
+    const inst = componentRef.instance as UiScatterChart;
+    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
+    expect(inst.yTickFormat()(1.005)).toBe('1');
+  });
+});
+
+describe('UiScatterSeries', () => {
+  const renderSeries = async () => {
+    const parentResult = await render(UiCartesianChart);
+    const parent = parentResult.componentRef.instance as UiCartesianChart;
+    setInputSignal(parent.xDomain, [0, 10]);
+    setInputSignal(parent.yDomain, [0, 10]);
+    await waitForUpdate();
+    const seriesResult = await render(UiScatterSeries, {
+      providers: [{ provide: UiCartesianChart, useValue: parent }],
+    });
+    const series = seriesResult.componentRef.instance as UiScatterSeries;
+    setInputSignal(series.data, [
+      { x: 0, y: 0 },
+      { x: 5, y: 5 },
+      { x: 10, y: 10 },
+    ]);
+    await waitForUpdate();
+    return { parent, series };
+  };
+
+  it('renders a circular dot per datum with the fallback color', async () => {
+    const { series } = await renderSeries();
+    const cast = series as unknown as {
+      dots: () => { style: string; point: { x: number; y: number } }[];
+    };
+    const dots = cast.dots();
+    expect(dots.length).toBe(3);
+    for (const d of dots) {
+      expect(d.style).toContain('background-color: var(--primary)');
+      expect(d.style).toContain('border-radius');
+    }
+  });
+
+  it('cycles through the per-dot palette when colors are provided', async () => {
+    const { series } = await renderSeries();
+    setInputSignal(series.colors, ['#f00', '#0f0']);
+    await waitForUpdate();
+    const cast = series as unknown as { dots: () => { style: string }[] };
+    const dots = cast.dots();
+    expect(dots[0].style).toContain('#f00');
+    expect(dots[1].style).toContain('#0f0');
+    expect(dots[2].style).toContain('#f00');
+  });
+
+  it('per-dot sizes drive per-dot radii for a bubble chart', async () => {
+    const { series } = await renderSeries();
+    setInputSignal(series.sizes, [10, 6]);
+    await waitForUpdate();
+    const cast = series as unknown as { dots: () => { style: string }[] };
+    const dots = cast.dots();
+    // radius 10 → width 20px
+    expect(dots[0].style).toContain('width: 20.00px');
+    // radius 6 → width 12px
+    expect(dots[1].style).toContain('width: 12.00px');
+    // No entry → falls back to uniform radius (default 4) → width 8px
+    expect(dots[2].style).toContain('width: 8.00px');
+  });
+
+  it('emits pointTap with the source point when a dot is tapped', async () => {
+    const { series } = await renderSeries();
+    const cb = vi.fn();
+    series.pointTap.subscribe(cb);
+    (
+      series as unknown as { onPointTap: (p: { x: number; y: number }) => void }
+    ).onPointTap({ x: 3, y: 4 });
+    expect(cb).toHaveBeenCalledWith({ x: 3, y: 4 });
+  });
+});

package/dist/ui/components/scatter-chart/scatter-chart.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock Angular (and the transitively-loaded cartesian-chart Angular usage) so
+// importing the module needs no framework runtime. Only the exported pure
+// `computeDots` is exercised; the components are never built.
+vi.mock('@angular/core', () => ({
+  Component: () => () => {},
+  ViewEncapsulation: { None: 0 },
+  computed: () => () => {},
+  inject: () => ({}),
+  input: () => () => {},
+  output: () => () => {},
+}));
+
+vi.mock('@blotch/angular-lynx', () => ({
+  LYNX_ELEMENTS: [],
+  // cartesian-chart (imported transitively) registers these in its decorator.
+  LynxGestureDetector: class {},
+  PanGesture: class {},
+  PinchGesture: class {},
+  Gesture: { Simultaneous: () => ({}) },
+}));
+
+const { computeDots } = await import('./scatter-chart');
+
+describe('computeDots', () => {
+  it('centers a dot on its point (top-left offset by the radius)', () => {
+    const [dot] = computeDots([{ cx: 50, cy: 30, r: 4 }]);
+    expect(dot.left).toBe(46); // cx - r
+    expect(dot.top).toBe(26); // cy - r
+    expect(dot.size).toBe(8); // r * 2 — the box the circle fills
+  });
+
+  it('honors a per-point radius (a bubble chart)', () => {
+    const [small, big] = computeDots([
+      { cx: 10, cy: 10, r: 2 },
+      { cx: 40, cy: 40, r: 9 },
+    ]);
+    expect(small.size).toBe(4);
+    expect(small.left).toBe(8);
+    expect(big.size).toBe(18);
+    expect(big.left).toBe(31); // 40 - 9
+  });
+
+  it('keeps each dot centered on its own coordinates', () => {
+    const dots = computeDots([
+      { cx: 0, cy: 100, r: 3 },
+      { cx: 100, cy: 0, r: 3 },
+    ]);
+    expect(dots[0]).toEqual({ left: -3, top: 97, size: 6 });
+    expect(dots[1]).toEqual({ left: 97, top: -3, size: 6 });
+  });
+
+  it('returns an empty array for no points', () => {
+    expect(computeDots([])).toEqual([]);
+  });
+});

package/dist/ui/components/scatter-chart/scatter-chart.ts

@@ -0,0 +1,277 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type ChartPadding,
+  type ChartPoint,
+  UiCartesianChart,
+  niceScale,
+} from '../cartesian-chart/cartesian-chart';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+// A scatter mark is just an (x, y) datum, so it reuses the shared `ChartPoint`
+// rather than defining its own. That also lets a scatter series and a line
+// series (e.g. a regression line) share one dataset on the same axes.
+
+/** One point after projection into plot-local pixel space, with its dot radius. */
+type ProjectedDot = {
+  /** Center x of the dot, in px. */
+  cx: number;
+  /** Center y of the dot, in px. */
+  cy: number;
+  /** Dot radius in px (varies per point for a bubble chart). */
+  r: number;
+};
+
+/** A square (rendered as a circle via border-radius) in plot-local pixel space. */
+export type DotShape = { left: number; top: number; size: number };
+
+// ---------------------------------------------------------------------------
+// Pure geometry (exported so it can be unit-tested without Angular)
+// ---------------------------------------------------------------------------
+
+/**
+ * Turns projected points — already in plot-local pixel space — into square boxes
+ * centered on each point, ready to render as circular `<view>`s (the caller sets
+ * `border-radius` to half the size). A scatter mark is the simplest chart mark
+ * of all: one box per datum, positioned so the point sits at its center.
+ *
+ * Each dot's radius comes from the point itself, so a per-point radius (a bubble
+ * chart) and a uniform radius (a plain scatter) share this one mapping.
+ */
+export const computeDots = (dots: readonly ProjectedDot[]): DotShape[] =>
+  dots.map((d) => ({ left: d.cx - d.r, top: d.cy - d.r, size: d.r * 2 }));
+
+// ---------------------------------------------------------------------------
+// Rendering helpers (mirror the equivalents in line-chart.ts / bar-chart.ts —
+// kept local so this module stays self-contained when scaffolded by `dolan add`)
+// ---------------------------------------------------------------------------
+
+/**
+ * Formats a pixel value for an inline style, avoiding scientific notation.
+ */
+const px = (n: number): string => `${n.toFixed(2)}px`;
+
+/**
+ * Default axis label formatter — plain JS only (no `Intl`, absent in Lynx).
+ */
+const defaultTickFormat = (value: number): string =>
+  String(Math.round(value * 100) / 100);
+
+// Default inner inset (fraction of the plot) for the wrapper. Unlike the line
+// chart, a scatter's marks are dots at the data extremes, so a small inset on
+// every side keeps the edge dots from being clipped by the frame.
+const SCATTER_INSET = 0.04;
+
+/**
+ * A single scatter series drawn inside a `<ui-cartesian-chart>`. Reads the shared
+ * scales from the parent chart via DI and renders one circular `<view>` per datum
+ * at its (x, y) position.
+ *
+ * ## Why the host is `position: absolute; width/height: 100%`
+ * Identical to `UiLineSeries`: Lynx resolves an absolute child against its
+ * **direct parent** (there is no `position: static`), so the host itself must be
+ * the plot-sized containing block. Every dot is a direct child of it.
+ *
+ * ## Per-point colors and sizes
+ * `color` fills every dot by default; pass `colors` to tint each dot (a
+ * categorical scatter) — the palette cycles if it is shorter than the data. Pass
+ * `sizes` to give each dot its own radius (a bubble chart); a point with no entry
+ * falls back to the uniform `radius`.
+ */
+@Component({
+  selector: 'ui-scatter-series',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style:
+      'position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;',
+    '[class]': 'userClass()',
+  },
+  template: `
+    @for (dot of dots(); track $index) {
+      <view [style]="dot.style" (bindtap)="onPointTap(dot.point)"></view>
+    }
+  `,
+})
+export class UiScatterSeries {
+  readonly #chart = inject(UiCartesianChart);
+
+  readonly data = input.required<ChartPoint[]>();
+  /** Fill for every dot. Overridden per dot by `colors` when that is set. */
+  readonly color = input('var(--primary)');
+  /** Per-dot fills (a categorical palette). Cycles when shorter than the data;
+   * an empty array falls back to `color`. */
+  readonly colors = input<string[]>([]);
+  /** Uniform dot radius in px. Overridden per dot by `sizes`. */
+  readonly radius = input(4);
+  /** Per-dot radii in px (a bubble chart). A point with no entry uses `radius`. */
+  readonly sizes = input<number[]>([]);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly pointTap = output<ChartPoint>();
+
+  // Project each datum into plot-local pixel space via the shared scales, picking
+  // up a per-point radius when `sizes` supplies one. Reading the chart's scale
+  // signals here makes this recompute whenever the domain or plot size changes.
+  readonly #projected = computed(() => {
+    const scaleX = this.#chart.xScale();
+    const scaleY = this.#chart.yScale();
+    const sizes = this.sizes();
+    const r = this.radius();
+    return this.data().map((point, i) => ({
+      cx: scaleX(point.x),
+      cy: scaleY(point.y),
+      r: sizes[i] ?? r,
+      point,
+    }));
+  });
+
+  protected readonly dots = computed(() => {
+    const projected = this.#projected();
+    const fallback = this.color();
+    const palette = this.colors();
+    // computeDots works purely from the projected pixel fields; zip its output
+    // back with each source point so a dot's tap can emit the original datum.
+    // A circle is a square with border-radius of half its size.
+    return computeDots(projected).map((shape, i) => {
+      const fill = palette.length ? palette[i % palette.length] : fallback;
+      return {
+        point: projected[i].point,
+        style:
+          `position: absolute; left: ${px(shape.left)}; top: ${px(shape.top)}; ` +
+          `width: ${px(shape.size)}; height: ${px(shape.size)}; ` +
+          `background-color: ${fill}; border-radius: ${px(shape.size / 2)};`,
+      };
+    });
+  });
+
+  protected onPointTap(point: ChartPoint): void {
+    this.pointTap.emit(point);
+  }
+}
+
+/**
+ * A ready-to-use scatter chart for the common single-series case. Composes a
+ * `<ui-cartesian-chart>` with one `<ui-scatter-series>` and auto-derives rounded
+ * axis domains + ticks from the data. For a regression/trend line on top, or
+ * full control over the axes, use `<ui-cartesian-chart>` with a
+ * `<ui-scatter-series>` (and optionally a `<ui-line-series>`) directly.
+ */
+@Component({
+  selector: 'ui-scatter-chart',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiCartesianChart, UiScatterSeries],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ui-cartesian-chart
+      [xDomain]="xAxis().domain"
+      [yDomain]="yAxis().domain"
+      [xTicks]="xAxis().ticks"
+      [yTicks]="yAxis().ticks"
+      [width]="width()"
+      [height]="height()"
+      [tickCount]="tickCount()"
+      [showXGrid]="showXGrid()"
+      [xAxisLabel]="xAxisLabel()"
+      [yAxisLabel]="yAxisLabel()"
+      [padding]="effectivePadding()"
+      [xTickFormat]="xTickFormat()"
+      [yTickFormat]="yTickFormat()"
+      [zoomable]="zoomable()"
+      [zoomAxes]="zoomAxes()"
+      [showZoomControls]="showZoomControls()"
+      [minZoom]="minZoom()"
+      [maxZoom]="maxZoom()"
+      [zoomStep]="zoomStep()"
+      [class]="userClass()"
+    >
+      <ui-scatter-series
+        [data]="data()"
+        [color]="color()"
+        [colors]="colors()"
+        [radius]="radius()"
+        [sizes]="sizes()"
+        (pointTap)="pointTap.emit($event)"
+      />
+    </ui-cartesian-chart>
+  `,
+})
+export class UiScatterChart {
+  readonly data = input.required<ChartPoint[]>();
+  readonly color = input('var(--primary)');
+  readonly colors = input<string[]>([]);
+  readonly radius = input(4);
+  readonly sizes = input<number[]>([]);
+  readonly width = input(320);
+  readonly height = input(200);
+  readonly tickCount = input(5);
+  /** Draw vertical gridlines at each x tick (horizontal ones are on by default). */
+  readonly showXGrid = input(false);
+  /** Title for the x-axis (centered below the tick labels). */
+  readonly xAxisLabel = input<string>('');
+  /** Title for the y-axis (rotated in the left gutter). */
+  readonly yAxisLabel = input<string>('');
+  /** Inner inset of the plot area — merged over the default all-side inset
+   * (below), so any side you set wins. See {@link ChartPadding}. */
+  readonly padding = input<ChartPadding>({});
+  /** Force the x-axis lower/upper bound instead of deriving it from the data.
+   * Omitted bounds fall back to the data extremes. */
+  readonly xMin = input<number | undefined>(undefined);
+  readonly xMax = input<number | undefined>(undefined);
+  /** Force the y-axis lower/upper bound (e.g. to compare two charts on one scale). */
+  readonly yMin = input<number | undefined>(undefined);
+  readonly yMax = input<number | undefined>(undefined);
+  readonly xTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly yTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  // Pan/zoom — forwarded to the underlying <ui-cartesian-chart>. Off by default.
+  readonly zoomable = input(false);
+  readonly zoomAxes = input<'x' | 'y' | 'xy'>('xy');
+  readonly showZoomControls = input(true);
+  readonly minZoom = input(1);
+  readonly maxZoom = input(8);
+  readonly zoomStep = input(1.4);
+
+  readonly pointTap = output<ChartPoint>();
+
+  // Auto-compute rounded axes from the data extremes, letting an explicit
+  // min/max override either end. Unlike the bar/area charts there is no baseline
+  // to fold in — both axes simply fit the data. `Math.min/max(...[])` yield
+  // ±Infinity for empty data, which `niceScale` handles by padding.
+  protected readonly xAxis = computed(() => {
+    const xs = this.data().map((p) => p.x);
+    const lo = this.xMin() ?? Math.min(...xs);
+    const hi = this.xMax() ?? Math.max(...xs);
+    return niceScale(lo, hi, this.tickCount());
+  });
+  protected readonly yAxis = computed(() => {
+    const ys = this.data().map((p) => p.y);
+    const lo = this.yMin() ?? Math.min(...ys);
+    const hi = this.yMax() ?? Math.max(...ys);
+    return niceScale(lo, hi, this.tickCount());
+  });
+
+  // Dots sit at the data extremes, so without an inset the edge dots would be
+  // clipped by the frame. Default a small inset on every side; user `padding` is
+  // spread last, so an explicit side wins.
+  protected readonly effectivePadding = computed<ChartPadding>(() => ({
+    top: SCATTER_INSET,
+    right: SCATTER_INSET,
+    bottom: SCATTER_INSET,
+    left: SCATTER_INSET,
+    ...this.padding(),
+  }));
+}

package/dist/ui/components/scroll-area/index.ts

@@ -0,0 +1 @@
+export { UiScrollArea } from './scroll-area';

package/dist/ui/components/scroll-area/scroll-area.test.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiScrollArea } from './scroll-area';
+
+@Component({
+  standalone: true,
+  imports: [UiScrollArea, LYNX_ELEMENTS],
+  template: `<ui-scroll-area><text>Body</text></ui-scroll-area>`,
+})
+class ScrollAreaHost {}
+
+describe('UiScrollArea', () => {
+  it('renders projected content in the scroll view', async () => {
+    const { getByText } = await render(ScrollAreaHost);
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+  it('emits an explicit height when the height input is set', async () => {
+    const { componentRef, container } = await render(UiScrollArea);
+    setInputSignal((componentRef.instance as UiScrollArea).height, '250px');
+    await waitForUpdate();
+    const scroll = container.querySelector('scroll-view');
+    expect(scroll?.getAttribute('style')).toContain('height: 250px');
+  });
+
+  it('flips the content layout for horizontal orientation', async () => {
+    const { componentRef, container } = await render(UiScrollArea);
+    setInputSignal(
+      (componentRef.instance as UiScrollArea).orientation,
+      'horizontal',
+    );
+    await waitForUpdate();
+    // The inner content wrapper picks up flex-row for the horizontal branch.
+    const rowEl = container.querySelector('.flex-row');
+    expect(rowEl).toBeTruthy();
+  });
+});

package/dist/ui/components/scroll-area/scroll-area.ts

@@ -0,0 +1,73 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-scroll-area',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  // `|| undefined` on boolean attributes removes the attribute entirely when
+  // false. Passing the string "false" (what Angular produces for a false
+  // binding without `|| undefined`) is still treated as truthy by Lynx's
+  // native attribute parser, so absence is the only way to truly disable.
+  template: `
+    <scroll-view
+      [attr.scroll-orientation]="orientation()"
+      [attr.bounces]="bounces() || undefined"
+      [attr.scroll-bar-enable]="scrollBar() || undefined"
+      [attr.enable-nested-scroll]="nestedScroll() || undefined"
+      [attr.upper-threshold]="upperThreshold()"
+      [attr.lower-threshold]="lowerThreshold()"
+      [class]="scrollClass()"
+      [style]="scrollStyle()"
+      (bindscrolltoupper)="scrolledToStart.emit()"
+      (bindscrolltolower)="scrolledToEnd.emit()"
+    >
+      <view [class]="contentClass()">
+        <ng-content />
+      </view>
+    </scroll-view>
+  `,
+})
+export class UiScrollArea {
+  readonly orientation = input<'vertical' | 'horizontal'>('vertical');
+  readonly height = input<string>('');
+  readonly bounces = input(true);
+  readonly scrollBar = input(true);
+  readonly nestedScroll = input(false);
+  readonly upperThreshold = input(0);
+  readonly lowerThreshold = input(0);
+  readonly userClass = input<string>('', { alias: 'class' });
+  // Trailing underscore avoids a naming collision with the protected
+  // `contentClass` computed property below; the public alias 'contentClass'
+  // keeps the template API clean for consumers.
+  readonly contentClass_ = input<string>('', { alias: 'contentClass' });
+
+  readonly scrolledToStart = output<void>();
+  readonly scrolledToEnd = output<void>();
+
+  protected readonly scrollClass = computed(() =>
+    cn('w-full', this.userClass()),
+  );
+
+  // Explicit height is required for scroll-view to scroll in Lynx
+  protected readonly scrollStyle = computed(() => {
+    const h = this.height();
+    return h ? `height: ${h};` : '';
+  });
+
+  protected readonly contentClass = computed(() =>
+    cn(
+      this.orientation() === 'vertical' ? 'flex-col flex' : 'flex-row flex',
+      this.contentClass_(),
+    ),
+  );
+}

package/dist/ui/components/select/index.ts

@@ -0,0 +1 @@
+export { UiSelect, UiSelectItem } from './select';