opui-css 5.4.2 → 6.0.0-rc.1

package/components/Range/Range.astro

@@ -1,64 +1,87 @@
 ---
-import type { RangeProps as Props } from "./types.astro"
+import type { Props } from "./types.astro"
+import { createId, idRefs } from "../id"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
+import { defaultValue } from "./value"
 
 export const title = "Range"
 
 const {
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-valuetext": ariaValueText,
   class: className,
-  disabled,
   endText,
+  error,
+  hideLabel,
   id,
+  items,
   label,
   list,
   max,
   min,
   name,
-  options,
+  size,
   spread,
   startText,
   step,
+  style,
   value,
   valueSuffix,
   variant,
   ...rest
 } = Astro.props
 
-const { $id } = Astro.locals
+const field = fieldGroupContext.get()
+const $id = createId(Astro.locals)
 
-const hasLabel = !!label || Astro.slots.has("default")
+const hasLabel = !!label || Astro.slots.has("label")
 const hasStartText = !!startText || Astro.slots.has("start-text")
 const hasEndText = !!endText || Astro.slots.has("end-text")
-const hasValue = valueSuffix !== undefined || Astro.slots.has("value")
+const hasValueText = Astro.slots.has("value-text")
+const hasValue = valueSuffix !== undefined || hasValueText
+const hasDatalist = !!items || Astro.slots.has("datalist")
+const valueText = `${value ?? defaultValue({ max, min, step })}${valueSuffix ?? ""}`
 
-const inputId = id || $id("range")
+const inputId = id || (hasValue ? $id("range") : undefined)
 const labelId = hasLabel ? $id("range-label") : undefined
 const startTextId = hasStartText ? $id("range-start") : undefined
 const endTextId = hasEndText ? $id("range-end") : undefined
+const listId = list ?? (hasDatalist ? $id("range-list") : undefined)
 
-const describedBy =
-  [startTextId, endTextId].filter(Boolean).join(" ") || undefined
+const describedBy = idRefs(startTextId, endTextId, ariaDescribedBy)
 ---
 
 <label
   class:list={[
     "ui-range",
-    variant && `ui-${variant}`,
     { "ui-spread": spread },
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "outlined" && `ui-${variant}`,
     className,
   ]}
+  for={hasValue ? inputId : undefined}
+  style={style}
 >
   {
     hasLabel && (
-      <span class="ui-label" id={labelId}>
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]} id={labelId}>
         {label}
-        <slot />
+        <slot name="label" />
       </span>
     )
   }
   {
     hasValue && (
-      <output class="ui-value" for={inputId} data-suffix={valueSuffix}>
-        <slot name="value">{value}</slot>
+      <output
+        aria-live="off"
+        class="ui-value"
+        data-live={hasValueText ? undefined : ""}
+        for={inputId}
+        data-suffix={valueSuffix}
+      >
+        <slot name="value-text">{valueText}</slot>
       </output>
     )
   }
@@ -71,23 +94,25 @@ const describedBy =
     )
   }
   <input
+    {...rest}
     aria-describedby={describedBy}
-    aria-labelledby={labelId}
-    disabled={disabled}
+    aria-invalid={error ? "true" : ariaInvalid}
+    aria-labelledby={labelId ?? ariaLabelledBy}
+    aria-valuetext={ariaValueText ??
+      (valueSuffix && !hasValueText ? valueText : undefined)}
     id={inputId}
-    list={list}
+    list={listId}
     max={max}
     min={min}
-    name={name}
+    name={name ?? field?.name}
     step={step}
     type="range"
     value={value}
-    {...rest}
   />
   {
-    (options || Astro.slots.has("datalist")) && (
-      <datalist id={list}>
-        {options?.map((option) =>
+    hasDatalist && (
+      <datalist aria-hidden="true" id={listId}>
+        {items?.map((option) =>
           typeof option === "object" ? (
             <option value={option.value} label={option.label} />
           ) : (
@@ -109,20 +134,6 @@ const describedBy =
 </label>
 
 <script>
-  // Mirror the slider's current value into its associated <output> on every
-  // input event. Idempotent: each .ui-range is wired once, and ignores ranges
-  // without a value display.
-  for (const range of document.querySelectorAll<HTMLElement>(".ui-range")) {
-    const input = range.querySelector<HTMLInputElement>('input[type="range"]')
-    const output = range.querySelector<HTMLOutputElement>(
-      ":scope > output.ui-value",
-    )
-    if (!input || !output) continue
-    const suffix = output.dataset.suffix ?? ""
-    const update = () => {
-      output.textContent = `${input.value}${suffix}`
-    }
-    input.addEventListener("input", update)
-    update()
-  }
+  import { initRange } from "../../css/js/range.js"
+  initRange()
 </script>

package/components/Range/Range.react.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { useCallback, useEffect, useId, useRef, useState } from "react"
+import { cx } from "../cx"
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import { idRefs } from "../id"
+import type { Props } from "./types.react"
+import { defaultValue, resetValue } from "./value"
+
+export default function Range({
+  className,
+  defaultValue: defaultValueProp,
+  endText,
+  error,
+  hideLabel,
+  id,
+  items,
+  list,
+  max,
+  min,
+  name,
+  onChange,
+  ref,
+  size,
+  spread,
+  startText,
+  step,
+  style,
+  value,
+  valueSuffix,
+  variant,
+  datalist,
+  label,
+  valueText,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const field = useFieldGroupContext()
+  const [current, setCurrent] = useState(defaultValueProp)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const form = inputRef.current?.form
+    if (!form) return
+    const sync = (event: Event) =>
+      setTimeout(() => {
+        if (inputRef.current && !event.defaultPrevented)
+          setCurrent(resetValue(inputRef.current))
+      })
+    form.addEventListener("reset", sync)
+    return () => form.removeEventListener("reset", sync)
+  }, [])
+
+  const setRef = useCallback(
+    (input: HTMLInputElement | null) => {
+      inputRef.current = input
+      if (typeof ref === "function") return ref(input)
+      if (ref) ref.current = input
+    },
+    [ref],
+  )
+
+  const hasLabel = !!label
+  const hasValue = valueSuffix !== undefined || !!valueText
+  const hasDatalist = !!items || !!datalist
+  const middle = () => defaultValue({ max, min, step })
+  const shown = value ?? current ?? middle()
+
+  const inputId = id || (hasValue ? `range-${uid}` : undefined)
+  const labelId = hasLabel ? `range-label-${uid}` : undefined
+  const startTextId = startText ? `range-start-${uid}` : undefined
+  const endTextId = endText ? `range-end-${uid}` : undefined
+  const listId = list ?? (hasDatalist ? `range-list-${uid}` : undefined)
+  const describedBy = idRefs(startTextId, endTextId, rest["aria-describedby"])
+
+  return (
+    <label
+      className={cx([
+        "ui-range",
+        { "ui-spread": spread },
+        size && size !== "medium" && `ui-${size}`,
+        variant && variant !== "outlined" && `ui-${variant}`,
+        className,
+      ])}
+      htmlFor={hasValue ? inputId : undefined}
+      style={style}
+    >
+      {hasLabel && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"} id={labelId}>
+          {label}
+        </span>
+      )}
+      {hasValue && (
+        <output
+          aria-live="off"
+          className="ui-value"
+          data-suffix={valueSuffix}
+          htmlFor={inputId}
+        >
+          {valueText
+            ? valueText(Number(shown))
+            : `${shown}${valueSuffix ?? ""}`}
+        </output>
+      )}
+      {startText && (
+        <span className="ui-start-text" id={startTextId}>
+          {startText}
+        </span>
+      )}
+      <input
+        {...rest}
+        aria-describedby={describedBy}
+        aria-invalid={error ? "true" : rest["aria-invalid"]}
+        aria-labelledby={labelId ?? rest["aria-labelledby"]}
+        aria-valuetext={
+          rest["aria-valuetext"] ??
+          (valueSuffix && !valueText ? `${shown}${valueSuffix}` : undefined)
+        }
+        defaultValue={defaultValueProp}
+        id={inputId}
+        list={listId}
+        max={max}
+        min={min}
+        name={name ?? field?.name}
+        onChange={(event) => {
+          setCurrent(event.target.valueAsNumber)
+          onChange?.(event)
+        }}
+        ref={setRef}
+        step={step}
+        type="range"
+        value={value}
+      />
+      {hasDatalist && (
+        <datalist aria-hidden="true" id={listId}>
+          {items?.map((option) =>
+            typeof option === "object" ? (
+              <option
+                key={option.value}
+                label={option.label}
+                value={option.value}
+              />
+            ) : (
+              <option key={option} value={option} />
+            ),
+          )}
+          {datalist}
+        </datalist>
+      )}
+      {endText && (
+        <span className="ui-end-text" id={endTextId}>
+          {endText}
+        </span>
+      )}
+    </label>
+  )
+}

package/components/Range/Range.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { content } from "../content.svelte"
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import { idRefs } from "../id"
+  import type { Props } from "./types.svelte"
+  import { defaultValue, resetValue } from "./value"
+
+  let {
+    class: className,
+    endText,
+    error,
+    hideLabel,
+    id,
+    items,
+    list,
+    max,
+    min,
+    name,
+    size,
+    spread,
+    startText,
+    step,
+    style,
+    value = $bindable(),
+    valueSuffix,
+    variant,
+
+    // Snippets
+    datalist,
+    label,
+    valueText,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const field = getFieldGroupContext()
+  const initialValue = untrack(() => value)
+
+  const hasLabel = $derived(!!label)
+  const hasValue = $derived(valueSuffix !== undefined || !!valueText)
+  const hasDatalist = $derived(!!items || !!datalist)
+  const middle = $derived(defaultValue({ max, min, step }))
+
+  const inputId = $derived(id || (hasValue ? `range-${uid}` : undefined))
+  const labelId = $derived(hasLabel ? `range-label-${uid}` : undefined)
+  const startTextId = $derived(startText ? `range-start-${uid}` : undefined)
+  const endTextId = $derived(endText ? `range-end-${uid}` : undefined)
+  const listId = $derived(
+    list ?? (hasDatalist ? `range-list-${uid}` : undefined),
+  )
+  const describedBy = $derived(
+    idRefs(startTextId, endTextId, rest["aria-describedby"]),
+  )
+</script>
+
+<label
+  class={[
+    "ui-range",
+    { "ui-spread": spread },
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "outlined" && `ui-${variant}`,
+    className,
+  ]}
+  for={hasValue ? inputId : undefined}
+  {style}
+>
+  {#if label}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]} id={labelId}>
+      {@render content(label)}
+    </span>
+  {/if}
+  {#if hasValue}
+    <output
+      aria-live="off"
+      class="ui-value"
+      for={inputId}
+      data-suffix={valueSuffix}
+    >
+      {#if valueText}{@render valueText(
+          Number(value ?? middle),
+        )}{:else}{value ?? middle}{valueSuffix ?? ""}{/if}
+    </output>
+  {/if}
+  {#if startText}
+    <span class="ui-start-text" id={startTextId}>
+      {@render content(startText)}
+    </span>
+  {/if}
+  <input
+    {...rest}
+    aria-describedby={describedBy}
+    aria-invalid={error ? "true" : rest["aria-invalid"]}
+    aria-labelledby={labelId ?? rest["aria-labelledby"]}
+    aria-valuetext={rest["aria-valuetext"] ??
+      (valueSuffix && !valueText
+        ? `${value ?? middle}${valueSuffix}`
+        : undefined)}
+    id={inputId}
+    list={listId}
+    {max}
+    {min}
+    name={name ?? field?.name}
+    {step}
+    type="range"
+    bind:value
+    {@attach (input) => {
+      if (!input.hasAttribute("value") && initialValue != null)
+        input.defaultValue = String(initialValue)
+      const form = input.form
+      const sync = (event: Event) =>
+        setTimeout(() => {
+          if (!event.defaultPrevented) value = resetValue(input)
+        })
+      form?.addEventListener("reset", sync)
+      return () => form?.removeEventListener("reset", sync)
+    }}
+  />
+  {#if hasDatalist}
+    <datalist aria-hidden="true" id={listId}>
+      {#each items ?? [] as option (typeof option === "object" ? option.value : option)}
+        {#if typeof option === "object"}
+          <option value={option.value} label={option.label}></option>
+        {:else}
+          <option value={option}></option>
+        {/if}
+      {/each}
+      {@render datalist?.()}
+    </datalist>
+  {/if}
+  {#if endText}
+    <span class="ui-end-text" id={endTextId}>
+      {@render content(endText)}
+    </span>
+  {/if}
+</label>

package/components/Range/Range.vue

@@ -1,69 +1,153 @@
 <script setup lang="ts">
-import type { RangeProps, Slots } from "./types.d.vue"
-import { useId } from "vue"
+import type { Props, Slots } from "./types.vue-props"
+import {
+  computed,
+  inject,
+  type InputHTMLAttributes,
+  onBeforeUnmount,
+  onMounted,
+  useAttrs,
+  useId,
+  useTemplateRef,
+} from "vue"
+import { useInputAttrs } from "../vue"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
+import { idRefs } from "../id"
+import { defaultValue, resetValue } from "./value"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<RangeProps>()
-defineSlots<Slots>()
+const {
+  endText,
+  error,
+  hideLabel,
+  id,
+  items,
+  label,
+  list,
+  size,
+  spread,
+  startText,
+  value,
+  valueSuffix,
+  variant,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
 const modelValue = defineModel<number | string>()
 
-const inputId = props.id || useId()
-const labelId = useId()
-const startTextId = useId()
-const endTextId = useId()
+const model = computed({
+  get: () => modelValue.value ?? value,
+  set: (value) => {
+    modelValue.value = value
+  },
+})
+
+const input = useTemplateRef<HTMLInputElement>("input")
+let form: HTMLFormElement | null | undefined
+const syncAfterReset = (event: Event) =>
+  setTimeout(() => {
+    if (input.value && !event.defaultPrevented)
+      model.value = resetValue(input.value)
+  })
+onMounted(() => {
+  if (input.value && !input.value.hasAttribute("value") && model.value != null)
+    input.value.defaultValue = String(model.value)
+  form = input.value?.form
+  form?.addEventListener("reset", syncAfterReset)
+})
+onBeforeUnmount(() => form?.removeEventListener("reset", syncAfterReset))
+
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
+const middle = computed(() => defaultValue(attrs))
+
+const uid = useId()
+const field = inject(FieldGroupKey, undefined)
+const hasValue = computed(
+  () => valueSuffix !== undefined || !!slots["value-text"],
+)
+const inputId = computed(
+  () => id || (hasValue.value ? `range-${uid}` : undefined),
+)
+const listId = computed(
+  () => list ?? (items || slots.datalist ? `range-list-${uid}` : undefined),
+)
+
+const labelId = `range-label-${uid}`
+const startTextId = `range-start-${uid}`
+const endTextId = `range-end-${uid}`
 </script>
 
 <template>
   <label
     :class="[
       'ui-range',
-      props.variant && `ui-${props.variant}`,
-      { 'ui-spread': props.spread },
-      props.class,
+      { 'ui-spread': spread },
+      size && size !== 'medium' && `ui-${size}`,
+      variant && variant !== 'outlined' && `ui-${variant}`,
+      $props.class,
     ]"
+    :for="hasValue ? inputId : undefined"
+    :style="$attrs.style"
   >
-    <span v-if="props.label || $slots.default" class="ui-label" :id="labelId">
-      <slot>{{ props.label }}</slot>
+    <span
+      v-if="label || $slots.label"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+      :id="labelId"
+    >
+      {{ label }}<slot name="label"></slot>
     </span>
     <output
-      v-if="props.valueSuffix !== undefined || $slots.value"
+      v-if="valueSuffix !== undefined || $slots['value-text']"
+      aria-live="off"
       class="ui-value"
       :for="inputId"
-      :data-suffix="props.valueSuffix"
+      :data-suffix="valueSuffix"
     >
-      <slot name="value">{{ modelValue ?? props.value }}</slot>
+      <slot name="value-text" :value="Number(model ?? middle)"
+        >{{ model ?? middle }}{{ valueSuffix }}</slot
+      >
     </output>
     <span
-      v-if="props.startText || $slots['start-text']"
+      v-if="startText || $slots['start-text']"
       class="ui-start-text"
       :id="startTextId"
     >
-      <slot name="start-text">{{ props.startText }}</slot>
+      {{ startText }}<slot name="start-text"></slot>
     </span>
 
     <input
+      v-bind="inputAttrs"
+      v-model.number="model"
       :aria-describedby="
-        [
-          props.startText || $slots['start-text'] ? startTextId : undefined,
-          props.endText || $slots['end-text'] ? endTextId : undefined,
-        ]
-          .filter(Boolean)
-          .join(' ') || undefined
+        idRefs(
+          (startText || $slots['start-text']) && startTextId,
+          (endText || $slots['end-text']) && endTextId,
+          attrs['aria-describedby'],
+        )
+      "
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+      :aria-labelledby="
+        label || $slots.label ? labelId : attrs['aria-labelledby']
+      "
+      :aria-valuetext="
+        attrs['aria-valuetext'] ??
+        (valueSuffix && !$slots['value-text']
+          ? `${model ?? middle}${valueSuffix}`
+          : undefined)
       "
-      :aria-labelledby="labelId"
       :id="inputId"
-      :list="props.list"
+      :list="listId"
+      :name="attrs.name ?? field?.name"
+      ref="input"
       type="range"
-      v-bind="$attrs"
-      v-model="modelValue"
     />
 
-    <datalist v-if="props.options || $slots.datalist" :id="props.list">
+    <datalist v-if="items || $slots.datalist" aria-hidden="true" :id="listId">
       <template
-        v-for="option in props.options"
+        v-for="option in items"
         :key="typeof option === 'object' ? option.value : option"
       >
         <option
@@ -75,11 +159,11 @@ const endTextId = useId()
     </datalist>
 
     <span
-      v-if="props.endText || $slots['end-text']"
+      v-if="endText || $slots['end-text']"
       class="ui-end-text"
       :id="endTextId"
     >
-      <slot name="end-text">{{ props.endText }}</slot>
+      {{ endText }}<slot name="end-text"></slot>
     </span>
   </label>
 </template>

package/components/Range/types.astro.ts

@@ -1,6 +1,4 @@
 import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
-export type RangeProps = Base.RangeProps &
-  HTMLAttributes<"label"> &
-  HTMLAttributes<"input">
+export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size">

package/components/Range/types.react.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type Slots = Base.Slots<ReactNode> & {
+  valueText?: (value: number) => ReactNode
+}
+
+export type Props = Omit<Base.Props, keyof Slots> &
+  Slots &
+  Omit<ComponentProps<"input">, keyof Base.Props | keyof Slots | "children">

package/components/Range/types.svelte.ts

@@ -2,8 +2,13 @@ import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 import type { Snippet } from "svelte"
 
-type Snippets = Base.RangeSlots<Snippet>
+type Snippets = Base.Slots<Snippet> & {
+  valueText?: Snippet<[number]>
+}
 
-export type RangeProps = Omit<Base.RangeProps, keyof Snippets> &
+export type Props = Omit<Base.Props, keyof Snippets> &
   Snippets &
-  SvelteHTMLElements["input"]
+  Omit<
+    SvelteHTMLElements["input"],
+    keyof Base.Props | keyof Snippets | "children"
+  >