@cfasim-ui/docs 0.6.4 → 0.7.1

package/components/SelectBox/SelectBox.vue

@@ -19,8 +19,11 @@ import {
   SelectTrigger,
   SelectValue,
   SelectViewport,
-  useId,
 } from "reka-ui";
+import Icon from "../Icon/Icon.vue";
+import FieldLabel from "../_internal/FieldLabel.vue";
+import { useField, type FieldProps } from "../_internal/field";
+import "../_internal/listbox.css";
 
 export interface SelectOption {
   value: string;
@@ -29,17 +32,16 @@ export interface SelectOption {
 
 const model = defineModel<string>();
 
-const props = defineProps<{
-  label?: string;
-  hideLabel?: boolean;
-  ariaLabel?: string;
+interface Props extends FieldProps {
   options: SelectOption[];
   placeholder?: string;
   /** Turn the field into a filterable single-select autocomplete (combobox). */
   autocomplete?: boolean;
-}>();
+}
+
+const props = defineProps<Props>();
 
-const id = useId();
+const { id, labelId, ariaProps } = useField(props);
 
 // Shows the selected option's label in the combobox input when not filtering.
 function displayValue(value: string) {
@@ -49,14 +51,14 @@ function displayValue(value: string) {
 
 <template>
   <div class="select-box">
-    <label
-      v-if="label"
-      :id="`${id}-label`"
-      :for="autocomplete ? `${id}-input` : undefined"
+    <FieldLabel
       class="select-label"
-      :class="{ 'visually-hidden': hideLabel }"
-      >{{ label }}</label
-    >
+      :label="label"
+      :label-id="labelId"
+      :hide-label="hideLabel"
+      :hint="hint"
+      :html-for="autocomplete ? `${id}-input` : undefined"
+    />
 
     <ComboboxRoot
       v-if="autocomplete"
@@ -70,55 +72,34 @@ function displayValue(value: string) {
           class="select-input"
           :display-value="displayValue"
           :placeholder="placeholder"
-          :aria-labelledby="props.label ? `${id}-label` : undefined"
-          :aria-label="!props.label ? props.ariaLabel : undefined"
+          v-bind="ariaProps"
         />
         <ComboboxTrigger class="select-icon-button" aria-label="Toggle options">
           <span class="select-icon" aria-hidden="true">
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 12 12"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M3 4.5L6 7.5L9 4.5" />
-            </svg>
+            <Icon icon="keyboard_arrow_down" :size="16" />
           </span>
         </ComboboxTrigger>
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="select-content select-content-autocomplete"
+          class="cfasim-listbox-content select-content-autocomplete"
           position="popper"
           :side-offset="4"
           :body-lock="false"
         >
-          <ComboboxViewport class="select-viewport">
-            <ComboboxEmpty class="select-empty">No matches</ComboboxEmpty>
+          <ComboboxViewport class="cfasim-listbox-viewport">
+            <ComboboxEmpty class="cfasim-listbox-empty">
+              No matches
+            </ComboboxEmpty>
             <ComboboxItem
               v-for="opt in options"
               :key="opt.value"
               :value="opt.value"
-              class="select-item"
+              class="cfasim-listbox-item"
             >
               <span>{{ opt.label }}</span>
-              <ComboboxItemIndicator class="select-indicator">
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 12 12"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M2 6L5 9L10 3" />
-                </svg>
+              <ComboboxItemIndicator class="cfasim-listbox-indicator">
+                <Icon icon="check" :size="14" />
               </ComboboxItemIndicator>
             </ComboboxItem>
           </ComboboxViewport>
@@ -127,55 +108,29 @@ function displayValue(value: string) {
     </ComboboxRoot>
 
     <SelectRoot v-else v-model="model">
-      <SelectTrigger
-        class="select-trigger"
-        :aria-labelledby="props.label ? `${id}-label` : undefined"
-        :aria-label="!props.label ? props.ariaLabel : undefined"
-      >
+      <SelectTrigger class="select-trigger" v-bind="ariaProps">
         <SelectValue :placeholder="placeholder" />
         <span class="select-icon" aria-hidden="true">
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 12 12"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M3 4.5L6 7.5L9 4.5" />
-          </svg>
+          <Icon icon="keyboard_arrow_down" :size="16" />
         </span>
       </SelectTrigger>
       <SelectPortal>
         <SelectContent
-          class="select-content"
+          class="cfasim-listbox-content select-content"
           position="popper"
           :side-offset="4"
           :body-lock="false"
         >
-          <SelectViewport class="select-viewport">
+          <SelectViewport class="cfasim-listbox-viewport">
             <SelectItem
               v-for="opt in options"
               :key="opt.value"
               :value="opt.value"
-              class="select-item"
+              class="cfasim-listbox-item"
             >
               <SelectItemText>{{ opt.label }}</SelectItemText>
-              <SelectItemIndicator class="select-indicator">
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 12 12"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M2 6L5 9L10 3" />
-                </svg>
+              <SelectItemIndicator class="cfasim-listbox-indicator">
+                <Icon icon="check" :size="14" />
               </SelectItemIndicator>
             </SelectItem>
           </SelectViewport>
@@ -291,14 +246,8 @@ function displayValue(value: string) {
 </style>
 
 <style>
+/* Sizing only — the dropdown skin lives in _internal/listbox.css. */
 .select-content {
-  z-index: 100;
-  background: var(--color-bg-0);
-  border: 1px solid var(--color-border);
-  border-radius: 0.25em;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
   min-width: var(--reka-select-trigger-width);
   max-height: var(--reka-select-content-available-height);
 }
@@ -308,44 +257,4 @@ function displayValue(value: string) {
   width: var(--reka-combobox-trigger-width);
   max-height: var(--reka-combobox-content-available-height);
 }
-
-.select-viewport {
-  padding: 0.25em;
-}
-
-.select-empty {
-  padding: 0.5em;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  text-align: center;
-}
-
-.select-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5em;
-  padding: 0.25em 0.5em;
-  border-radius: 0.25em;
-  font-size: var(--font-size-sm);
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-}
-
-.select-item[data-highlighted] {
-  background: var(--color-primary);
-  color: white;
-}
-
-.select-item[data-state="checked"] {
-  font-weight: 600;
-}
-
-.select-indicator {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
 </style>

package/components/TextInput/TextInput.md

@@ -77,6 +77,7 @@ it.
 |------|------|----------|---------|
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
-| `placeholder` | `string` | No | — |
+| `ariaLabel` | `string` | No | — |
 | `hint` | `string` | No | — |
+| `placeholder` | `string` | No | — |
 

package/components/TextInput/TextInput.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import Hint from "../Hint/Hint.vue";
+import type { FieldProps } from "../_internal/field";
+import "../_internal/input.css";
 
 const model = defineModel<string>();
 const local = ref(model.value);
@@ -13,18 +15,17 @@ function commit() {
   model.value = local.value;
 }
 
-const props = defineProps<{
-  label?: string;
-  hideLabel?: boolean;
+interface Props extends FieldProps {
   placeholder?: string;
-  hint?: string;
-}>();
+}
+
+const props = defineProps<Props>();
 </script>
 
 <template>
-  <label v-if="props.label" class="input-label">
+  <label v-if="props.label" class="cfasim-input-label">
     <span
-      class="input-label-row"
+      class="cfasim-input-label-row"
       :class="{ 'visually-hidden': props.hideLabel }"
     >
       {{ props.label }}
@@ -32,6 +33,7 @@ const props = defineProps<{
     </span>
     <input
       type="text"
+      class="cfasim-input"
       v-model="local"
       :placeholder="props.placeholder"
       @blur="commit"
@@ -41,54 +43,12 @@ const props = defineProps<{
   <div v-else>
     <input
       type="text"
+      class="cfasim-input"
       v-model="local"
       :placeholder="props.placeholder"
+      :aria-label="props.ariaLabel"
       @blur="commit"
       @keydown.enter="commit"
     />
   </div>
 </template>
-
-<style scoped>
-.input-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-  font-size: var(--font-size-sm);
-}
-
-.input-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-input {
-  display: block;
-  width: 100%;
-  height: 2.5em;
-  padding: 0 0.75em;
-  font-size: inherit;
-  background-color: var(--color-bg-0);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 0.375em;
-  transition:
-    border-color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-
-input:hover {
-  border-color: var(--color-border-hover);
-}
-
-input:focus {
-  outline: none;
-  border-color: var(--color-border-focus);
-  box-shadow: var(--shadow-focus);
-}
-
-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-</style>

package/components/ToggleGroup/ToggleGroup.md

@@ -142,12 +142,12 @@ Set `orientation="vertical"` to stack the items, and mark individual options
 
 | Prop | Type | Required | Default |
 |------|------|----------|---------|
-| `options` | `ToggleGroupOption[]` | Yes | — |
-| `multiple` | `boolean` | No | — |
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
 | `ariaLabel` | `string` | No | — |
 | `hint` | `string` | No | — |
+| `options` | `ToggleGroupOption[]` | Yes | — |
+| `multiple` | `boolean` | No | — |
 | `disabled` | `boolean` | No | — |
 | `orientation` | `"horizontal" \| "vertical"` | No | `"horizontal"` |
 

package/components/ToggleGroup/ToggleGroup.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ToggleGroupItem, ToggleGroupRoot, useId } from "reka-ui";
+import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui";
 import { computed } from "vue";
-import Hint from "../Hint/Hint.vue";
+import FieldLabel from "../_internal/FieldLabel.vue";
+import { useField, type FieldProps } from "../_internal/field";
 
 export interface ToggleGroupOption {
   value: string;
@@ -12,21 +13,18 @@ export interface ToggleGroupOption {
 // `string` in single mode, `string[]` in multiple mode.
 const model = defineModel<string | string[]>();
 
-const props = withDefaults(
-  defineProps<{
-    options: ToggleGroupOption[];
-    multiple?: boolean;
-    label?: string;
-    hideLabel?: boolean;
-    ariaLabel?: string;
-    hint?: string;
-    disabled?: boolean;
-    orientation?: "horizontal" | "vertical";
-  }>(),
-  { orientation: "horizontal" },
-);
+interface Props extends FieldProps {
+  options: ToggleGroupOption[];
+  multiple?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+}
 
-const id = useId();
+const props = withDefaults(defineProps<Props>(), {
+  orientation: "horizontal",
+});
+
+const { labelId, ariaProps } = useField(props);
 const type = computed<"single" | "multiple">(() =>
   props.multiple ? "multiple" : "single",
 );
@@ -34,23 +32,20 @@ const type = computed<"single" | "multiple">(() =>
 
 <template>
   <div class="toggle-group-field">
-    <label
-      v-if="label"
-      :id="`${id}-label`"
+    <FieldLabel
       class="toggle-group-label"
-      :class="{ 'visually-hidden': hideLabel }"
-    >
-      {{ label }}
-      <Hint v-if="hint && !hideLabel" :text="hint" />
-    </label>
+      :label="label"
+      :label-id="labelId"
+      :hide-label="hideLabel"
+      :hint="hint"
+    />
     <ToggleGroupRoot
       v-model="model"
       :type="type"
       :disabled="disabled"
       :orientation="orientation"
       :class="['toggle-group', `toggle-group--${orientation}`]"
-      :aria-labelledby="label ? `${id}-label` : undefined"
-      :aria-label="!label ? ariaLabel : undefined"
+      v-bind="ariaProps"
     >
       <ToggleGroupItem
         v-for="opt in options"

package/components/_internal/FieldLabel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import Hint from "../Hint/Hint.vue";
+
+// The visible label for a form field, with the shared hideLabel/hint
+// behavior. Renders nothing without a `label`; the parent supplies its
+// own class via fallthrough attrs so existing scoped styles keep working.
+defineProps<{
+  label?: string;
+  labelId?: string;
+  hideLabel?: boolean;
+  hint?: string;
+  /** `for` attribute, for fields whose control is a real labelable element. */
+  htmlFor?: string;
+}>();
+</script>
+
+<template>
+  <label
+    v-if="label"
+    :id="labelId"
+    :for="htmlFor"
+    :class="{ 'visually-hidden': hideLabel }"
+  >
+    {{ label }}
+    <Hint v-if="hint && !hideLabel" :text="hint" />
+  </label>
+</template>

package/components/_internal/field.ts

@@ -0,0 +1,27 @@
+import { computed } from "vue";
+import { useId } from "reka-ui";
+
+/** Props shared by every labeled form field. */
+export interface FieldProps {
+  label?: string;
+  /** Visually hide the label while keeping it for assistive tech. */
+  hideLabel?: boolean;
+  /** Accessible name used when no visible `label` is provided. */
+  ariaLabel?: string;
+  hint?: string;
+}
+
+/**
+ * Generated field/label ids plus the aria attributes that point a control
+ * at its label: `aria-labelledby` when a visible `label` exists, else
+ * `aria-label`. Spread onto the control with `v-bind="ariaProps.value"`.
+ */
+export function useField(props: FieldProps) {
+  const id = useId();
+  const labelId = `${id}-label`;
+  const ariaProps = computed(() => ({
+    "aria-labelledby": props.label ? labelId : undefined,
+    "aria-label": !props.label ? props.ariaLabel : undefined,
+  }));
+  return { id, labelId, ariaProps };
+}

package/components/_internal/input.css

@@ -0,0 +1,54 @@
+/* Shared text-field skin for TextInput/NumberInput. Global (not scoped)
+ * so both components can use one copy; prefixed to avoid consumer
+ * collisions. */
+
+.cfasim-input-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.cfasim-input-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cfasim-input {
+  display: block;
+  width: 100%;
+  height: 2.5em;
+  padding: 0 0.75em;
+  font-size: inherit;
+  background-color: var(--color-bg-0);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.cfasim-input:hover {
+  border-color: var(--color-border-hover);
+}
+
+.cfasim-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.cfasim-input[aria-invalid="true"] {
+  border-color: var(--color-error);
+}
+
+.cfasim-input[aria-invalid="true"]:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
+}
+
+.cfasim-input::placeholder {
+  color: var(--color-text-tertiary);
+}

package/components/_internal/listbox.css

@@ -0,0 +1,53 @@
+/* Shared skin for the SelectBox/MultiSelect dropdown (reka-ui Select and
+ * Combobox portals render outside the component, so these are global).
+ * Sizing (width/max-height from the reka trigger vars) stays per-component. */
+
+.cfasim-listbox-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.cfasim-listbox-viewport {
+  padding: 0.25em;
+}
+
+.cfasim-listbox-empty {
+  padding: 0.5em;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.cfasim-listbox-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.cfasim-listbox-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+
+.cfasim-listbox-item[data-state="checked"] {
+  font-weight: 600;
+}
+
+.cfasim-listbox-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/components/env.d.ts

@@ -0,0 +1,4 @@
+// Ambient declaration for side-effect CSS imports (e.g. `import "./x.css"`).
+// Required since TypeScript 6, which errors (TS2882) on side-effect imports
+// without a module declaration.
+declare module "*.css";

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.4",
+  "version": "0.7.1",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [
@@ -216,6 +216,13 @@
         "source": "charts/ChoroplethMap/ChoroplethMap.vue",
         "keywords": []
       },
+      {
+        "name": "DataTable",
+        "slug": "data-table",
+        "docs": "charts/DataTable/DataTable.md",
+        "source": "charts/DataTable/DataTable.vue",
+        "keywords": []
+      },
       {
         "name": "LineChart",
         "slug": "line-chart",
@@ -231,13 +238,6 @@
           "confidence band",
           "svg"
         ]
-      },
-      {
-        "name": "DataTable",
-        "slug": "data-table",
-        "docs": "charts/DataTable/DataTable.md",
-        "source": "charts/DataTable/DataTable.vue",
-        "keywords": []
       }
     ]
   }

package/package.json

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

package/pyodide/messages.ts

@@ -0,0 +1,23 @@
+export interface RunMessage {
+  id: number;
+  type?: "run";
+  python: string;
+  context?: Record<string, unknown>;
+}
+export interface CallMessage {
+  id: number;
+  type: "call";
+  module: string;
+  fn: string;
+  kwargs?: Record<string, unknown>;
+}
+export interface LoadModuleMessage {
+  id: number;
+  type: "loadModule";
+  module: string;
+}
+export type WorkerMessage = RunMessage | CallMessage | LoadModuleMessage;
+export type OutgoingMessage =
+  | Omit<RunMessage, "id">
+  | Omit<CallMessage, "id">
+  | Omit<LoadModuleMessage, "id">;