@cfasim-ui/docs 0.3.15 → 0.3.17

package/components/Container/Container.md

@@ -0,0 +1,103 @@
+# Container
+
+A flexible wrapper for grouping elements vertically (default) or horizontally. Optionally adds a border, fixed height with scrolling, and configurable gap between children.
+
+For multi-column layouts use [Grid](./grid).
+
+## Examples
+
+### Vertical stack (default)
+
+<ComponentDemo>
+  <Container gap="small">
+    <Box variant="info">First</Box>
+    <Box variant="info">Second</Box>
+    <Box variant="info">Third</Box>
+  </Container>
+
+<template #code>
+
+```vue
+<Container gap="small">
+  <Box variant="info">First</Box>
+  <Box variant="info">Second</Box>
+  <Box variant="info">Third</Box>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+### Horizontal row
+
+A row of buttons or chips. Wraps onto multiple lines when space runs out.
+
+<ComponentDemo>
+  <Container horizontal gap="small">
+    <Button>Save</Button>
+    <Button variant="secondary">Cancel</Button>
+    <Button variant="secondary">Reset</Button>
+  </Container>
+
+<template #code>
+
+```vue
+<Container horizontal gap="small">
+  <Button>Save</Button>
+  <Button variant="secondary">Cancel</Button>
+  <Button variant="secondary">Reset</Button>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+### Card with border
+
+<ComponentDemo>
+  <Container border gap="small">
+    <strong>Run summary</strong>
+    <span>Generated 1,000 samples in 2.4s</span>
+  </Container>
+
+<template #code>
+
+```vue
+<Container border gap="small">
+  <strong>Run summary</strong>
+  <span>Generated 1,000 samples in 2.4s</span>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+### Scrollable region
+
+Setting `height` automatically enables scrolling when content overflows.
+
+<ComponentDemo>
+  <Container border :height="180" gap="small">
+    <div v-for="i in 30" :key="i">Line {{ i }}</div>
+  </Container>
+
+<template #code>
+
+```vue
+<Container border :height="180" gap="small">
+  <div v-for="i in 30" :key="i">Line {{ i }}</div>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `border` | `boolean` | No | — |
+| `height` | `number \| string` | No | — |
+| `horizontal` | `boolean` | No | — |
+| `gap` | `ContainerGap \| string` | No | — |
+

package/components/Container/Container.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type GapToken, resolveGap } from "../_internal/gap";
+
+export type ContainerGap = GapToken;
+
+const props = defineProps<{
+  border?: boolean;
+  height?: number | string;
+  horizontal?: boolean;
+  gap?: ContainerGap | string;
+}>();
+
+const resolvedGap = computed(() => resolveGap(props.gap));
+
+const resolvedHeight = computed(() => {
+  const h = props.height;
+  if (h == null) return undefined;
+  return typeof h === "number" ? `${h}px` : h;
+});
+</script>
+
+<template>
+  <div
+    class="container"
+    :class="{
+      'container-border': border,
+      'container-horizontal': horizontal,
+      'container-scrollable': height != null,
+    }"
+    :style="{
+      gap: resolvedGap,
+      height: resolvedHeight,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.container-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.container-border {
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.container-scrollable {
+  overflow: auto;
+}
+</style>

package/components/Grid/Grid.md

@@ -0,0 +1,170 @@
+# Grid
+
+A CSS-grid wrapper for arranging elements in equal, proportional, or auto-fitting columns.
+
+For single-direction stacks (vertical or a flex row that wraps), use [Container](./container) instead.
+
+## Examples
+
+### Equal columns
+
+Pass a number for N equal-width columns.
+
+<ComponentDemo>
+  <Grid :cols="3" gap="medium">
+    <Box variant="info">Column 1</Box>
+    <Box variant="info">Column 2</Box>
+    <Box variant="info">Column 3</Box>
+  </Grid>
+
+<template #code>
+
+```vue
+<Grid :cols="3" gap="medium">
+  <Box variant="info">Column 1</Box>
+  <Box variant="info">Column 2</Box>
+  <Box variant="info">Column 3</Box>
+</Grid>
+```
+
+  </template>
+</ComponentDemo>
+
+### Proportional widths
+
+Pass an array of `fr` weights for asymmetric layouts.
+
+<ComponentDemo>
+  <Grid :cols="[2, 3, 1]" gap="medium">
+    <Box variant="info">2fr</Box>
+    <Box variant="success">3fr</Box>
+    <Box variant="warning">1fr</Box>
+  </Grid>
+
+<template #code>
+
+```vue
+<Grid :cols="[2, 3, 1]" gap="medium">
+  <Box variant="info">2fr</Box>
+  <Box variant="success">3fr</Box>
+  <Box variant="warning">1fr</Box>
+</Grid>
+```
+
+  </template>
+</ComponentDemo>
+
+### Mixed track sizes
+
+Strings pass through unchanged, so you can combine fixed and flexible tracks.
+
+<ComponentDemo>
+  <Grid :cols="['200px', '1fr']" gap="medium">
+    <Box variant="info">Fixed 200px</Box>
+    <Box variant="info">Fills remaining space</Box>
+  </Grid>
+
+<template #code>
+
+```vue
+<Grid :cols="['200px', '1fr']" gap="medium">
+  <Box variant="info">Fixed 200px</Box>
+  <Box variant="info">Fills remaining space</Box>
+</Grid>
+```
+
+  </template>
+</ComponentDemo>
+
+### Small-width breakpoint
+
+`colsSmall` overrides `cols` when the grid's own width is at or below `breakpoint`. The default breakpoint is `640px` unless you specify it. The check is a CSS container query against the grid itself, so it triggers based on the grid's available width (e.g. when nested inside a sidebar), not the viewport.
+
+<ComponentDemo>
+  <Grid :cols="3" :cols-small="1" breakpoint="480px" gap="small">
+    <Box variant="info">Card 1</Box>
+    <Box variant="info">Card 2</Box>
+    <Box variant="info">Card 3</Box>
+  </Grid>
+
+<template #code>
+
+```vue
+<Grid :cols="3" :cols-small="1" breakpoint="480px" gap="small">
+  <Box variant="info">Card 1</Box>
+  <Box variant="info">Card 2</Box>
+  <Box variant="info">Card 3</Box>
+</Grid>
+```
+
+  </template>
+</ComponentDemo>
+
+### Responsive auto-fit
+
+`minColWidth` switches to `repeat(auto-fit, minmax(...))` so items reflow to fit the viewport without media queries. Great for metric tiles and card grids.
+
+<ComponentDemo>
+  <Grid min-col-width="180px" gap="medium">
+    <Box variant="info">Card 1</Box>
+    <Box variant="info">Card 2</Box>
+    <Box variant="info">Card 3</Box>
+    <Box variant="info">Card 4</Box>
+    <Box variant="info">Card 5</Box>
+  </Grid>
+
+<template #code>
+
+```vue
+<Grid min-col-width="180px" gap="medium">
+  <Box variant="info">Card 1</Box>
+  <Box variant="info">Card 2</Box>
+  <Box variant="info">Card 3</Box>
+  <Box variant="info">Card 4</Box>
+  <Box variant="info">Card 5</Box>
+</Grid>
+```
+
+  </template>
+</ComponentDemo>
+
+### Nested grids
+
+<ComponentDemo>
+  <Grid :cols="2" gap="medium">
+    <Box variant="info">Left</Box>
+    <Grid :cols="2" gap="small">
+      <Box variant="success">a</Box>
+      <Box variant="success">b</Box>
+      <Box variant="success">c</Box>
+      <Box variant="success">d</Box>
+    </Grid>
+  </Grid>
+
+<template #code>
+
+```vue
+<Grid :cols="2" gap="medium">
+  <Box variant="info">Left</Box>
+  <Grid :cols="2" gap="small">
+    <Box variant="success">a</Box>
+    <Box variant="success">b</Box>
+    <Box variant="success">c</Box>
+    <Box variant="success">d</Box>
+  </Grid>
+</Grid>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `cols` | `GridCols` | No | — |
+| `colsSmall` | `GridCols` | No | — |
+| `breakpoint` | `string` | No | — |
+| `gap` | `GridGap \| string` | No | — |
+| `minColWidth` | `string` | No | — |
+

package/components/Grid/Grid.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, onUnmounted, watch } from "vue";
+import { type GapToken, resolveGap } from "../_internal/gap";
+
+export type GridGap = GapToken;
+export type GridCols = number | (number | string)[];
+
+const props = defineProps<{
+  cols?: GridCols;
+  colsSmall?: GridCols;
+  breakpoint?: string;
+  gap?: GridGap | string;
+  minColWidth?: string;
+}>();
+
+const resolvedGap = computed(() => resolveGap(props.gap));
+
+const resolvedColumns = computed(() => {
+  if (props.minColWidth) {
+    return `repeat(auto-fit, minmax(${props.minColWidth}, 1fr))`;
+  }
+  return colsToTemplate(props.cols ?? 2);
+});
+
+const resolvedSmallColumns = computed(() => {
+  if (props.minColWidth || props.colsSmall == null) {
+    return resolvedColumns.value;
+  }
+  return colsToTemplate(props.colsSmall);
+});
+
+const safeBreakpoint = computed(() =>
+  sanitizeBreakpoint(props.breakpoint ?? DEFAULT_BREAKPOINT),
+);
+
+let acquired: string | null = null;
+const stopWatch = watch(
+  safeBreakpoint,
+  (next) => {
+    if (acquired === next) return;
+    acquireBreakpoint(next);
+    if (acquired) releaseBreakpoint(acquired);
+    acquired = next;
+  },
+  { immediate: true },
+);
+
+onUnmounted(() => {
+  stopWatch();
+  if (acquired) {
+    releaseBreakpoint(acquired);
+    acquired = null;
+  }
+});
+</script>
+
+<script lang="ts">
+const DEFAULT_BREAKPOINT = "640px";
+
+function colsToTemplate(cols: GridCols): string {
+  if (typeof cols === "number") return `repeat(${cols}, 1fr)`;
+  return cols.map((c) => (typeof c === "number" ? `${c}fr` : c)).join(" ");
+}
+
+// Allow only digits, dot, and unit letters/percent. Falls back to the default
+// when input doesn't look like a CSS length, preventing rule-escape via the
+// breakpoint prop.
+function sanitizeBreakpoint(value: string): string {
+  return /^\d+(\.\d+)?[a-zA-Z%]+$/.test(value) ? value : DEFAULT_BREAKPOINT;
+}
+
+// Module-scope cache: one <style> per unique breakpoint, ref-counted across
+// all Grid instances. The grid's inline `--grid-cols-small` is consumed by
+// the rule in the cached <style>.
+type Entry = { count: number; el: HTMLStyleElement };
+const breakpointSheets = new Map<string, Entry>();
+
+function acquireBreakpoint(breakpoint: string) {
+  if (typeof document === "undefined") return;
+  const existing = breakpointSheets.get(breakpoint);
+  if (existing) {
+    existing.count++;
+    return;
+  }
+  const el = document.createElement("style");
+  el.setAttribute("data-cfasim-grid-bp", breakpoint);
+  el.textContent =
+    `@container (max-width: ${breakpoint}) {` +
+    `[data-cfasim-grid-bp="${breakpoint}"] > .grid {` +
+    `grid-template-columns: var(--grid-cols-small) !important;` +
+    `}}`;
+  document.head.appendChild(el);
+  breakpointSheets.set(breakpoint, { count: 1, el });
+}
+
+function releaseBreakpoint(breakpoint: string) {
+  if (typeof document === "undefined") return;
+  const entry = breakpointSheets.get(breakpoint);
+  if (!entry) return;
+  entry.count--;
+  if (entry.count === 0) {
+    entry.el.remove();
+    breakpointSheets.delete(breakpoint);
+  }
+}
+
+const hmr = (import.meta as { hot?: { dispose: (cb: () => void) => void } })
+  .hot;
+hmr?.dispose(() => {
+  breakpointSheets.forEach(({ el }) => el.remove());
+  breakpointSheets.clear();
+});
+</script>
+
+<template>
+  <div :data-cfasim-grid-bp="safeBreakpoint" class="grid-wrapper">
+    <div
+      class="grid"
+      :style="{
+        gap: resolvedGap,
+        gridTemplateColumns: resolvedColumns,
+        '--grid-cols-small': resolvedSmallColumns,
+      }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.grid-wrapper {
+  container-type: inline-size;
+  width: 100%;
+  min-width: 0;
+}
+
+.grid {
+  display: grid;
+  min-width: 0;
+}
+
+.grid > :deep(*) {
+  min-width: 0;
+}
+</style>

package/components/NumberInput/NumberInput.md

@@ -12,6 +12,10 @@ const days = ref(10)
 const population = ref(100000)
 const coverage = ref(0.5)
 const r0 = ref(3.5)
+const ageRange = ref([18, 65])
+const coverageRange = ref([0.2, 0.8])
+const minAge = ref(18)
+const maxAge = ref(65)
 </script>
 
 <ComponentDemo>
@@ -116,6 +120,112 @@ const days = ref(10);
   </template>
 </ComponentDemo>
 
+### Range slider
+
+Bind `v-model:range` with a `[low, high]` tuple to render a two-handle
+slider. Range mode is enabled automatically by the binding — there's no
+explicit toggle prop.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model:range="ageRange"
+      label="Age range"
+      :min="0"
+      :max="100"
+      number-type="integer"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const ageRange = ref([18, 65]);
+</script>
+
+<NumberInput
+  v-model:range="ageRange"
+  label="Age range"
+  :min="0"
+  :max="100"
+  number-type="integer"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Range slider with split bindings
+
+When your state stores the bounds in separate refs (rather than as a tuple),
+bind them directly with `v-model:lower` and `v-model:upper`. You can bind
+either pair or combine them with `v-model:range` — writes from the component
+go to every bound sink.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model:lower="minAge"
+      v-model:upper="maxAge"
+      label="Age range (split)"
+      :min="0"
+      :max="100"
+      number-type="integer"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const minAge = ref(18);
+const maxAge = ref(65);
+</script>
+
+<NumberInput
+  v-model:lower="minAge"
+  v-model:upper="maxAge"
+  label="Age range"
+  :min="0"
+  :max="100"
+  number-type="integer"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+Range mode works with `percent` and `live` as well:
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput
+      v-model:range="coverageRange"
+      label="Coverage range"
+      percent
+      live
+      :max="1"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput
+  v-model:range="coverageRange"
+  label="Coverage range"
+  percent
+  live
+  :max="1"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ### Live slider
 
 With `live`, the model updates while dragging the slider thumb rather than only on release.
@@ -284,6 +394,9 @@ the input visually.
 | Name | Type |
 |------|------|
 | `v-model` | `number` |
+| `v-model:range` | `NumberRange` |
+| `v-model:lower` | `number` |
+| `v-model:upper` | `number` |
 
 ## Props
 

package/components/NumberInput/NumberInput.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, onMounted, getCurrentInstance } from "vue";
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
 import Hint from "../Hint/Hint.vue";
 
+export type NumberRange = [number, number];
+
+// The default `v-model` is always a scalar number. For range mode, bind
+// `v-model:range` (a tuple) and/or the split `v-model:lower`/`v-model:upper`.
+// Mode is auto-detected from which v-model bindings the parent provides;
+// no explicit toggle prop. Precedence on read: lower/upper > range >
+// slider defaults.
 const model = defineModel<number>();
+const range = defineModel<NumberRange>("range");
+const lower = defineModel<number>("lower");
+const upper = defineModel<number>("upper");
 
 const props = defineProps<{
   label?: string;
@@ -21,6 +31,37 @@ const props = defineProps<{
   decimals?: number;
 }>();
 
+function isRangeValue(v: unknown): v is NumberRange {
+  return Array.isArray(v) && v.length === 2;
+}
+
+// Auto-detect range mode from the parent's v-model bindings. We check both
+// the listener (which Vue attaches as `onUpdate:<name>` on the vnode) and
+// the initial value — that way one-way `:range="x"` bindings also work.
+// Determined once at setup; mode doesn't change for the component's life.
+const instance = getCurrentInstance();
+const vnodeProps = instance?.vnode.props;
+const isRange =
+  !!vnodeProps?.["onUpdate:range"] ||
+  !!vnodeProps?.["onUpdate:lower"] ||
+  !!vnodeProps?.["onUpdate:upper"] ||
+  range.value !== undefined ||
+  lower.value !== undefined ||
+  upper.value !== undefined;
+
+// Range implies slider — a two-handle range has no sensible text-input form.
+const isSlider = computed(() => !!props.slider || isRange);
+
+// Warn if the parent bound the default `v-model` in range mode — it will
+// never receive updates, which is almost always a bug.
+onMounted(() => {
+  if (isRange && !!vnodeProps?.["onUpdate:modelValue"]) {
+    console.warn(
+      "[NumberInput] In range mode, the default `v-model` is unused. Bind `v-model:range` or `v-model:lower`/`v-model:upper` instead.",
+    );
+  }
+});
+
 const sliderMin = computed(() => props.min ?? (props.percent ? 0 : 0));
 const sliderMax = computed(() => props.max ?? (props.percent ? 1 : 100));
 const sliderStep = computed(() => props.step ?? (props.percent ? 0.01 : 1));
@@ -121,13 +162,50 @@ function stripCommas(s: string): string {
   return s.replace(/,/g, "");
 }
 
-const local = ref(formatForDisplay(toDisplay(model.value)));
-const sliderLocal = ref(model.value);
+// Resolve the current value across all bindings:
+// - In range mode: lower/upper take precedence; falls back per-side to
+//   `range`; finally to slider min/max. The default `v-model` is
+//   unused in this mode.
+// - In single mode: just the default `v-model`.
+function effectiveValue(): number | NumberRange | undefined {
+  if (isRange) {
+    const tuple = range.value;
+    const lo = lower.value ?? tuple?.[0];
+    const hi = upper.value ?? tuple?.[1];
+    if (lo !== undefined || hi !== undefined) {
+      return [lo ?? sliderMin.value, hi ?? sliderMax.value];
+    }
+    return undefined;
+  }
+  return model.value;
+}
+
+// Initial single-value display string. The text input isn't rendered in
+// range mode, so `local` is only consulted in single mode.
+const initialEffective = effectiveValue();
+const initialSingle =
+  typeof initialEffective === "number" ? initialEffective : undefined;
+const local = ref(formatForDisplay(toDisplay(initialSingle)));
+
+// Slider state is always an array, even in single mode (reka-ui's API).
+// In range mode it holds [low, high]; in single mode it holds [value].
+function modelToSliderArray(v: number | NumberRange | undefined): number[] {
+  if (isRange) {
+    if (isRangeValue(v)) return [v[0], v[1]];
+    return [sliderMin.value, sliderMax.value];
+  }
+  if (typeof v === "number") return [v];
+  return [sliderMin.value];
+}
+const sliderArrayLocal = ref<number[]>(modelToSliderArray(initialEffective));
 const validationError = ref<string>();
 
-watch(model, (v) => {
-  local.value = formatForDisplay(toDisplay(v));
-  sliderLocal.value = v;
+watch([model, range, lower, upper], () => {
+  const v = effectiveValue();
+  if (!isRange && !isRangeValue(v)) {
+    local.value = formatForDisplay(toDisplay(v as number | undefined));
+  }
+  sliderArrayLocal.value = modelToSliderArray(v);
   validationError.value = validate(v);
 });
 
@@ -179,21 +257,17 @@ function onBlur() {
 
 let liveTimeout: ReturnType<typeof setTimeout> | null = null;
 function onInputEvent() {
-  if (!props.live || props.slider) return;
+  if (!props.live || isSlider.value) return;
   if (liveTimeout) clearTimeout(liveTimeout);
   liveTimeout = setTimeout(commit, 300);
 }
 function onChangeEvent() {
-  if (!props.live || props.slider) return;
+  if (!props.live || isSlider.value) return;
   if (liveTimeout) clearTimeout(liveTimeout);
   commit();
 }
 
-// Validates a model value (or undefined for empty). Single source of truth
-// for required / min / max errors — used on commit, programmatic updates,
-// and arrow-key stepping.
-function validate(v: number | undefined): string | undefined {
-  if (v == null) return props.required ? "Required" : undefined;
+function validateScalar(v: number): string | undefined {
   const display = toDisplay(v) as number;
   if (inputMin.value != null && display < inputMin.value) {
     return `Min ${inputMin.value}${props.percent ? "%" : ""}`;
@@ -204,11 +278,28 @@ function validate(v: number | undefined): string | undefined {
   return undefined;
 }
 
+// Single source of truth for required / min / max errors — used on commit,
+// programmatic updates, and arrow-key stepping. In range mode, returns the
+// first failing handle's error, suffixed with "(lower)" or "(upper)".
+function validate(v: number | NumberRange | undefined): string | undefined {
+  if (v == null) return props.required ? "Required" : undefined;
+  if (isRangeValue(v)) {
+    const lo = validateScalar(v[0]);
+    if (lo) return `${lo} (lower)`;
+    const hi = validateScalar(v[1]);
+    if (hi) return `${hi} (upper)`;
+    return undefined;
+  }
+  return validateScalar(v);
+}
+
 function commit() {
-  // An empty field clears the model — distinct from garbage input.
+  // commit() is only reachable when !isSlider (only text-input events call
+  // it). Default `v-model` is scalar-only.
+  const current = model.value;
   if (local.value.trim() === "") {
     model.value = undefined;
-    sliderLocal.value = undefined;
+    sliderArrayLocal.value = modelToSliderArray(undefined);
     validationError.value = validate(undefined);
     return;
   }
@@ -219,8 +310,8 @@ function commit() {
   // turn pure garbage ("abc") into 0. Reset to the current model value so
   // invalid input doesn't linger in the field.
   if (!/\d/.test(cleaned)) {
-    local.value = formatForDisplay(toDisplay(model.value));
-    validationError.value = validate(model.value);
+    local.value = formatForDisplay(toDisplay(current));
+    validationError.value = validate(current);
     return;
   }
   if (cleaned !== local.value) {
@@ -240,22 +331,43 @@ function commit() {
   if (error) return;
 
   model.value = next;
-  sliderLocal.value = model.value;
+  sliderArrayLocal.value = [next];
+}
+
+function commitSliderArray(v: number[], asModel: boolean): void {
+  const coerced = v.map(coerceInteger);
+  sliderArrayLocal.value = coerced;
+  if (!isRange) {
+    local.value = formatForDisplay(toDisplay(coerced[0]));
+  }
+  if (asModel) {
+    if (isRange) {
+      // Emit to all range sinks; consumers without a matching v-model just
+      // ignore their `update:*` event. The default `v-model` is unused in
+      // range mode.
+      range.value = [coerced[0], coerced[1]] as NumberRange;
+      lower.value = coerced[0];
+      upper.value = coerced[1];
+    } else {
+      model.value = coerced[0];
+    }
+  }
+}
+
+function thumbAriaLabel(i: number): string | undefined {
+  if (!props.label) return undefined;
+  if (!isRange) return props.label;
+  return i === 0 ? `${props.label} (lower)` : `${props.label} (upper)`;
 }
 
 function onSliderUpdate(v: number[] | undefined) {
   if (!v) return;
-  const val = coerceInteger(v[0]);
-  sliderLocal.value = val;
-  local.value = formatForDisplay(toDisplay(val));
-  if (props.live) {
-    model.value = val;
-  }
+  commitSliderArray(v, !!props.live);
 }
 
 function onSliderCommit(v: number[] | undefined) {
   if (!v) return;
-  model.value = coerceInteger(v[0]);
+  commitSliderArray(v, true);
 }
 
 function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
@@ -268,71 +380,26 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
   if (inputMin.value != null) next = Math.max(next, inputMin.value);
   if (inputMax.value != null) next = Math.min(next, inputMax.value);
   local.value = formatForDisplay(next);
-  model.value = fromDisplay(next);
-  sliderLocal.value = model.value;
+  const nextModel = fromDisplay(next);
+  model.value = nextModel;
+  sliderArrayLocal.value = [nextModel];
 }
 </script>
 
 <template>
-  <label v-if="props.label" class="input-label">
+  <component
+    :is="props.label ? 'label' : 'div'"
+    :class="props.label ? 'input-label' : undefined"
+  >
     <span
+      v-if="props.label"
       class="input-label-row"
       :class="{ 'visually-hidden': props.hideLabel }"
     >
       {{ props.label }}
       <Hint v-if="props.hint && !props.hideLabel" :text="props.hint" />
     </span>
-    <span v-if="!props.slider" class="input-wrapper">
-      <input
-        type="text"
-        :inputmode="props.numberType === 'integer' ? 'numeric' : 'decimal'"
-        v-model="local"
-        :placeholder="props.placeholder"
-        :aria-invalid="!!validationError"
-        :aria-required="props.required || undefined"
-        :required="props.required"
-        @blur="onBlur"
-        @keydown.enter="commit"
-        @keydown.up="onArrowStep($event, 1)"
-        @keydown.down="onArrowStep($event, -1)"
-        @input="
-          reformatInput($event);
-          onInputEvent();
-        "
-        @change="onChangeEvent"
-      />
-      <span v-if="props.percent" class="input-suffix">%</span>
-    </span>
-    <span v-if="validationError" class="input-error" role="alert">
-      {{ validationError }}
-    </span>
-    <div v-if="props.slider" class="slider-container">
-      <SliderRoot
-        class="slider-root"
-        :model-value="sliderLocal != null ? [sliderLocal] : [sliderMin]"
-        :min="sliderMin"
-        :max="sliderMax"
-        :step="sliderStep"
-        @update:model-value="onSliderUpdate"
-        @value-commit="onSliderCommit"
-      >
-        <SliderTrack class="slider-track">
-          <SliderRange class="slider-range" />
-        </SliderTrack>
-        <SliderThumb class="slider-thumb" :aria-label="props.label">
-          <span class="slider-current">
-            {{ formatSliderValue(sliderLocal) }}
-          </span>
-        </SliderThumb>
-      </SliderRoot>
-      <div class="slider-labels">
-        <span>{{ formatSliderValue(sliderMin) }}</span>
-        <span>{{ formatSliderValue(sliderMax) }}</span>
-      </div>
-    </div>
-  </label>
-  <div v-else>
-    <span v-if="!props.slider" class="input-wrapper">
+    <span v-if="!isSlider" class="input-wrapper">
       <input
         type="text"
         :inputmode="props.numberType === 'integer' ? 'numeric' : 'decimal'"
@@ -356,10 +423,10 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
     <span v-if="validationError" class="input-error" role="alert">
       {{ validationError }}
     </span>
-    <div v-if="props.slider" class="slider-container">
+    <div v-if="isSlider" class="slider-container">
       <SliderRoot
         class="slider-root"
-        :model-value="sliderLocal != null ? [sliderLocal] : [sliderMin]"
+        :model-value="sliderArrayLocal"
         :min="sliderMin"
         :max="sliderMax"
         :step="sliderStep"
@@ -369,9 +436,14 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
         <SliderTrack class="slider-track">
           <SliderRange class="slider-range" />
         </SliderTrack>
-        <SliderThumb class="slider-thumb" :aria-label="props.label">
+        <SliderThumb
+          v-for="(v, i) in sliderArrayLocal"
+          :key="i"
+          class="slider-thumb"
+          :aria-label="thumbAriaLabel(i)"
+        >
           <span class="slider-current">
-            {{ formatSliderValue(sliderLocal) }}
+            {{ formatSliderValue(v) }}
           </span>
         </SliderThumb>
       </SliderRoot>
@@ -380,7 +452,7 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
         <span>{{ formatSliderValue(sliderMax) }}</span>
       </div>
     </div>
-  </div>
+  </component>
 </template>
 
 <style scoped>

package/components/_internal/gap.ts

@@ -0,0 +1,17 @@
+export type GapToken = "none" | "small" | "medium" | "large";
+
+const GAP_TOKENS: Record<GapToken, string> = {
+  none: "0",
+  small: "var(--space-2)",
+  medium: "var(--space-4)",
+  large: "var(--space-6)",
+};
+
+export function resolveGap(
+  gap: GapToken | string | undefined,
+  fallback: GapToken = "medium",
+): string {
+  if (gap == null) return GAP_TOKENS[fallback];
+  if (gap in GAP_TOKENS) return GAP_TOKENS[gap as GapToken];
+  return gap;
+}

package/components/index.ts

@@ -1,11 +1,16 @@
 export { default as Box } from "./Box/Box.vue";
 export type { BoxVariant } from "./Box/Box.vue";
 export { default as Button } from "./Button/Button.vue";
+export { default as Container } from "./Container/Container.vue";
+export type { ContainerGap } from "./Container/Container.vue";
 export { default as Expander } from "./Expander/Expander.vue";
+export { default as Grid } from "./Grid/Grid.vue";
+export type { GridCols, GridGap } from "./Grid/Grid.vue";
 export { default as Hint } from "./Hint/Hint.vue";
 export { default as Icon } from "./Icon/Icon.vue";
 export { default as LightDarkToggle } from "./LightDarkToggle/LightDarkToggle.vue";
 export { default as NumberInput } from "./NumberInput/NumberInput.vue";
+export type { NumberRange } from "./NumberInput/NumberInput.vue";
 export { default as SelectBox } from "./SelectBox/SelectBox.vue";
 export type { SelectOption } from "./SelectBox/SelectBox.vue";
 export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.15",
+  "version": "0.3.17",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [
@@ -23,6 +23,22 @@
           "secondary"
         ]
       },
+      {
+        "name": "Container",
+        "slug": "container",
+        "docs": "components/Container/Container.md",
+        "source": "components/Container/Container.vue",
+        "keywords": [
+          "container",
+          "layout",
+          "stack",
+          "row",
+          "flex",
+          "scrollable",
+          "border",
+          "card"
+        ]
+      },
       {
         "name": "Expander",
         "slug": "expander",
@@ -30,6 +46,22 @@
         "source": "components/Expander/Expander.vue",
         "keywords": []
       },
+      {
+        "name": "Grid",
+        "slug": "grid",
+        "docs": "components/Grid/Grid.md",
+        "source": "components/Grid/Grid.vue",
+        "keywords": [
+          "grid",
+          "columns",
+          "layout",
+          "responsive",
+          "auto-fit",
+          "cards",
+          "side-by-side",
+          "proportional"
+        ]
+      },
       {
         "name": "Hint",
         "slug": "hint",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {

package/theme/base.css

@@ -129,11 +129,6 @@ body {
   font-size: var(--font-size-md);
 }
 
-:root,
-body {
-  overflow: hidden;
-}
-
 h1,
 h2,
 h3,

package/theme/themes/cdc.css

@@ -8,6 +8,7 @@
   --font-weight-heading: 200;
   --font-size-md: 1.125rem;
   --font-size-2xl: 2.625rem;
+  --color-text: light-dark(#1c1d1f, #f8f9fa);
   --color-bg-0: light-dark(#ffffff, #0f1e21);
   --color-bg-1: light-dark(#f4fbfc, #162a2e);
   --color-bg-2: light-dark(#e9f5f8, #1e373c);
@@ -20,3 +21,15 @@
   --color-border-hover: light-dark(#a0d4e0, #3a5d64);
   --color-border-focus: var(--color-primary);
 }
+
+[data-theme="cdc"] a {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25rem;
+}
+
+[data-theme="cdc"] a:hover,
+[data-theme="cdc"] a:focus,
+[data-theme="cdc"] a:active {
+  color: light-dark(#007a99, #7dd6e8);
+}