@cfasim-ui/docs 0.6.3 → 0.7.0

package/components/NumberInput/NumberInput.vue

@@ -3,6 +3,8 @@ import { ref, watch, computed, onMounted, getCurrentInstance } from "vue";
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
 import { formatNumber, type NumberFormat } from "@cfasim-ui/shared";
 import Hint from "../Hint/Hint.vue";
+import type { FieldProps } from "../_internal/field";
+import "../_internal/input.css";
 
 export type NumberRange = [number, number];
 
@@ -16,14 +18,11 @@ const range = defineModel<NumberRange>("range");
 const lower = defineModel<number>("lower");
 const upper = defineModel<number>("upper");
 
-const props = defineProps<{
-  label?: string;
-  hideLabel?: boolean;
+interface Props extends FieldProps {
   placeholder?: string;
   step?: number;
   min?: number;
   max?: number;
-  hint?: string;
   percent?: boolean;
   slider?: boolean;
   live?: boolean;
@@ -42,7 +41,9 @@ const props = defineProps<{
   /** @deprecated Use `format` instead. Still honored for slider labels
    * when `format` is unset, but will be removed in a future release. */
   sliderDisplay?: (value: number) => string;
-}>();
+}
+
+const props = defineProps<Props>();
 
 function isRangeValue(v: unknown): v is NumberRange {
   return Array.isArray(v) && v.length === 2;
@@ -75,7 +76,7 @@ onMounted(() => {
   }
 });
 
-const sliderMin = computed(() => props.min ?? (props.percent ? 0 : 0));
+const sliderMin = computed(() => props.min ?? 0);
 const sliderMax = computed(() => props.max ?? (props.percent ? 1 : 100));
 const sliderStep = computed(() => props.step ?? (props.percent ? 0.01 : 1));
 
@@ -408,11 +409,11 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
 <template>
   <component
     :is="props.label ? 'label' : 'div'"
-    :class="props.label ? 'input-label' : undefined"
+    :class="props.label ? 'cfasim-input-label' : undefined"
   >
     <span
       v-if="props.label"
-      class="input-label-row"
+      class="cfasim-input-label-row"
       :class="{ 'visually-hidden': props.hideLabel }"
     >
       {{ props.label }}
@@ -421,9 +422,11 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
     <span v-if="!isSlider" class="input-wrapper">
       <input
         type="text"
+        class="cfasim-input"
         :inputmode="props.numberType === 'integer' ? 'numeric' : 'decimal'"
         v-model="local"
         :placeholder="props.placeholder"
+        :aria-label="!props.label ? props.ariaLabel : undefined"
         :aria-invalid="!!validationError"
         :aria-required="props.required || undefined"
         :required="props.required"
@@ -475,67 +478,17 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
 </template>
 
 <style scoped>
-.input-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-}
-
-.input-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .input-wrapper {
   display: flex;
   align-items: center;
   gap: 0.25em;
 }
 
-.input-wrapper input {
+.input-wrapper .cfasim-input {
   flex: 1;
   min-width: 0;
 }
 
-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[aria-invalid="true"] {
-  border-color: var(--color-error);
-}
-
-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);
-}
-
-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
 .input-suffix {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);

package/components/SelectBox/SelectBox.md

@@ -166,6 +166,7 @@ reka-ui Combobox following the
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
 | `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
 | `options` | `SelectOption[]` | Yes | — |
 | `placeholder` | `string` | No | — |
 | `autocomplete` | `boolean` | No | — |

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 };
+}