opui-css 5.4.3 → 6.0.0-rc.1

package/components/Radio/Radio.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { content } from "../content.svelte"
+  import { hasName, warnUnnamed } from "../dev"
+  import RadioInput from "./RadioInput.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    card,
+    class: className,
+    error,
+    group = $bindable(),
+    hideLabel,
+    label,
+    orientation,
+    size,
+    spread,
+    style,
+    variant,
+
+    // Snippets
+    children,
+    endText,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnUnnamed("Radio", hasName({ ...rest, label }, children)))
+</script>
+
+<label
+  class={[
+    "ui-radio",
+    {
+      "ui-card": card,
+      "ui-spread": spread,
+    },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  <RadioInput
+    {...rest}
+    aria-invalid={error ? "true" : rest["aria-invalid"]}
+    bind:group
+  />
+  {#if label || children}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+      {label}{@render children?.()}
+    </span>
+  {/if}
+  {#if endText}
+    <span class="ui-end-text">
+      {@render content(endText)}
+    </span>
+  {/if}
+</label>

package/components/Radio/Radio.vue

@@ -1,41 +1,62 @@
-<script setup lang="ts">
-import RadioInput from "./RadioInput.vue"
-import type { RadioProps, Slots } from "./types.d.vue"
-import { useId } from "vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<RadioProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<string | number | boolean>()
-
-const endTextId = useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-radio',
-      props.size && `ui-${props.size}`,
-      {
-        'ui-stack': props.stack,
-      },
-      props.class,
-    ]"
-    :data-invalid="props.error || undefined"
-  >
-    <RadioInput
-      v-bind="$attrs"
-      v-model="modelValue"
-      :aria-describedby="endTextId"
-    />
-    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
-      ><slot></slot
-    ></span>
-    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
-      <slot name="end-text"></slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import RadioInput from "./RadioInput.vue"
+import type { Props, Slots } from "./types.vue-props"
+import { type InputHTMLAttributes, useAttrs } from "vue"
+import { useInputAttrs } from "../vue"
+import { hasName, warnUnnamed } from "../dev"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const {
+  card,
+  endText,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  variant,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
+const modelValue = defineModel<string | number | boolean | undefined>({
+  default: undefined,
+})
+
+warnUnnamed("Radio", hasName({ ...attrs, label }, slots.default))
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-radio',
+      {
+        'ui-card': card,
+        'ui-spread': spread,
+      },
+      card && variant && variant !== 'outlined' && `ui-${variant}`,
+      orientation && orientation !== 'horizontal' && `ui-${orientation}`,
+      size && size !== 'medium' && `ui-${size}`,
+      $props.class,
+    ]"
+    :style="$attrs.style"
+  >
+    <RadioInput
+      v-bind="inputAttrs"
+      v-model="modelValue"
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+    />
+    <span
+      v-if="label || $slots.default"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+      >{{ label }}<slot></slot
+    ></span>
+    <span v-if="endText || $slots['end-text']" class="ui-end-text">
+      {{ endText }}<slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Radio/RadioInput.astro

@@ -1,7 +1,10 @@
----
-import type { RadioInputProps as Props } from "./types.astro"
-
-const { ...props } = Astro.props
----
-
-<input type="radio" {...props} />
+---
+import type { RadioInputProps as Props } from "./types.astro"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
+
+const { name, ...rest } = Astro.props as Props
+
+const field = fieldGroupContext.get()
+---
+
+<input type="radio" name={name ?? field?.name} {...rest} />

package/components/Radio/RadioInput.react.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import type { RadioInputProps as Props } from "./types.react"
+
+export default function RadioInput({ name, ...rest }: Props) {
+  const field = useFieldGroupContext()
+
+  return <input type="radio" name={name ?? field?.name} {...rest} />
+}

package/components/Radio/RadioInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import type { RadioInputProps as Props } from "./types.svelte"
+
+  let {
+    checked,
+    group = $bindable(),
+    name,
+    onchange,
+    value,
+    ...rest
+  }: Props = $props()
+
+  const field = getFieldGroupContext()
+</script>
+
+<input
+  type="radio"
+  checked={(checked ?? group === (value ?? true)) || undefined}
+  name={name ?? field?.name}
+  onchange={(event) => {
+    group = value ?? true
+    onchange?.(event)
+  }}
+  {value}
+  {...rest}
+/>

package/components/Radio/RadioInput.vue

@@ -1,14 +1,39 @@
-<script setup lang="ts">
-import type { RadioInputProps } from "./types"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<RadioInputProps>()
-const modelValue = defineModel<string | number | boolean>()
-</script>
-
-<template>
-  <input type="radio" v-bind="$attrs" v-model="modelValue" />
-</template>
+<script setup lang="ts">
+import { computed, inject, type InputHTMLAttributes, useAttrs } from "vue"
+import type { RadioInputProps } from "./types.vue-props"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<RadioInputProps>()
+const attrs = useAttrs() as InputHTMLAttributes
+const modelValue = defineModel<string | number | boolean | undefined>({
+  default: undefined,
+})
+const field = inject(FieldGroupKey, undefined)
+
+const unchecked = Symbol()
+const model = computed({
+  get: () =>
+    modelValue.value ??
+    (attrs.checked !== undefined && attrs.checked !== false
+      ? attrs.value
+      : unchecked),
+  set: (value: string | number | boolean | undefined) => {
+    modelValue.value = value
+  },
+})
+</script>
+
+<template>
+  <input
+    type="radio"
+    :class="$props.class"
+    v-bind="$attrs"
+    :name="attrs.name ?? field?.name"
+    :value="attrs.value"
+    v-model="model"
+  />
+</template>

package/components/Radio/types.astro.ts

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

package/components/Radio/types.react.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type Slots = Base.Slots<ReactNode>
+
+export type Props = Omit<Base.Props, keyof Slots> &
+  Slots &
+  Omit<ComponentProps<"input">, "size" | "type">
+
+export type RadioInputProps = Base.RadioInputProps &
+  Omit<ComponentProps<"input">, "type">

package/components/Radio/types.svelte.ts

@@ -1,12 +1,16 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-type Snippets = Base.RadioSlots<Snippet>
-
-export type RadioInputProps = Base.RadioInputProps &
-  Omit<SvelteHTMLElements["input"], "type">
-
-export type RadioProps = Omit<Base.RadioProps, keyof Snippets> &
-  Snippets &
-  Omit<SvelteHTMLElements["input"], "size">
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+type Group = { group?: string | number | boolean }
+
+export type Props = Omit<Base.Props, keyof Snippets> &
+  Snippets &
+  Group &
+  Omit<SvelteHTMLElements["input"], "size" | "type">
+
+export type RadioInputProps = Base.RadioInputProps &
+  Group &
+  Omit<SvelteHTMLElements["input"], "type">

package/components/Radio/types.ts

@@ -1,12 +1,17 @@
-export type RadioProps = {
-  error?: boolean
-  hideLabel?: boolean
-  size?: "small" | "large"
-  stack?: boolean
-}
-
-export type RadioInputProps = {}
-
-export type RadioSlots<S> = {
-  endText?: string | S
-}
+export type Props = {
+  card?: boolean
+  endText?: string
+  error?: boolean
+  hideLabel?: boolean
+  label?: string
+  orientation?: "horizontal" | "vertical"
+  size?: "x-small" | "small" | "medium" | "large"
+  spread?: boolean
+  variant?: "elevated" | "outlined" | "tonal"
+}
+
+export type RadioInputProps = {}
+
+export type Slots<S> = {
+  endText?: string | S
+}

package/components/Radio/types.vue-props.ts

@@ -0,0 +1,15 @@
+import type { Slot } from "vue"
+import type { Class } from "../vue"
+import type {
+  Props as BaseProps,
+  RadioInputProps as BaseRadioInputProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type RadioInputProps = BaseRadioInputProps & Class
+
+export type Slots = {
+  default?: Slot
+  "end-text"?: Slot
+}

package/components/Range/Range.astro

@@ -1,128 +1,139 @@
----
-import type { RangeProps as Props } from "./types.astro"
-
-export const title = "Range"
-
-const {
-  class: className,
-  disabled,
-  endText,
-  id,
-  label,
-  list,
-  max,
-  min,
-  name,
-  options,
-  spread,
-  startText,
-  step,
-  value,
-  valueSuffix,
-  variant,
-  ...rest
-} = Astro.props
-
-const { $id } = Astro.locals
-
-const hasLabel = !!label || Astro.slots.has("default")
-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 inputId = id || $id("range")
-const labelId = hasLabel ? $id("range-label") : undefined
-const startTextId = hasStartText ? $id("range-start") : undefined
-const endTextId = hasEndText ? $id("range-end") : undefined
-
-const describedBy =
-  [startTextId, endTextId].filter(Boolean).join(" ") || undefined
----
-
-<label
-  class:list={[
-    "ui-range",
-    variant && `ui-${variant}`,
-    { "ui-spread": spread },
-    className,
-  ]}
->
-  {
-    hasLabel && (
-      <span class="ui-label" id={labelId}>
-        {label}
-        <slot />
-      </span>
-    )
-  }
-  {
-    hasValue && (
-      <output class="ui-value" for={inputId} data-suffix={valueSuffix}>
-        <slot name="value">{value}</slot>
-      </output>
-    )
-  }
-  {
-    hasStartText && (
-      <span class="ui-start-text" id={startTextId}>
-        {startText}
-        <slot name="start-text" />
-      </span>
-    )
-  }
-  <input
-    aria-describedby={describedBy}
-    aria-labelledby={labelId}
-    disabled={disabled}
-    id={inputId}
-    list={list}
-    max={max}
-    min={min}
-    name={name}
-    step={step}
-    type="range"
-    value={value}
-    {...rest}
-  />
-  {
-    (options || Astro.slots.has("datalist")) && (
-      <datalist id={list}>
-        {options?.map((option) =>
-          typeof option === "object" ? (
-            <option value={option.value} label={option.label} />
-          ) : (
-            <option value={option} />
-          ),
-        )}
-        <slot name="datalist" />
-      </datalist>
-    )
-  }
-  {
-    hasEndText && (
-      <span class="ui-end-text" id={endTextId}>
-        {endText}
-        <slot name="end-text" />
-      </span>
-    )
-  }
-</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()
-  }
-</script>
+---
+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,
+  endText,
+  error,
+  hideLabel,
+  id,
+  items,
+  label,
+  list,
+  max,
+  min,
+  name,
+  size,
+  spread,
+  startText,
+  step,
+  style,
+  value,
+  valueSuffix,
+  variant,
+  ...rest
+} = Astro.props
+
+const field = fieldGroupContext.get()
+const $id = createId(Astro.locals)
+
+const hasLabel = !!label || Astro.slots.has("label")
+const hasStartText = !!startText || Astro.slots.has("start-text")
+const hasEndText = !!endText || Astro.slots.has("end-text")
+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 || (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 = idRefs(startTextId, endTextId, ariaDescribedBy)
+---
+
+<label
+  class:list={[
+    "ui-range",
+    { "ui-spread": spread },
+    size && size !== "medium" && `ui-${size}`,
+    variant && variant !== "outlined" && `ui-${variant}`,
+    className,
+  ]}
+  for={hasValue ? inputId : undefined}
+  style={style}
+>
+  {
+    hasLabel && (
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]} id={labelId}>
+        {label}
+        <slot name="label" />
+      </span>
+    )
+  }
+  {
+    hasValue && (
+      <output
+        aria-live="off"
+        class="ui-value"
+        data-live={hasValueText ? undefined : ""}
+        for={inputId}
+        data-suffix={valueSuffix}
+      >
+        <slot name="value-text">{valueText}</slot>
+      </output>
+    )
+  }
+  {
+    hasStartText && (
+      <span class="ui-start-text" id={startTextId}>
+        {startText}
+        <slot name="start-text" />
+      </span>
+    )
+  }
+  <input
+    {...rest}
+    aria-describedby={describedBy}
+    aria-invalid={error ? "true" : ariaInvalid}
+    aria-labelledby={labelId ?? ariaLabelledBy}
+    aria-valuetext={ariaValueText ??
+      (valueSuffix && !hasValueText ? valueText : undefined)}
+    id={inputId}
+    list={listId}
+    max={max}
+    min={min}
+    name={name ?? field?.name}
+    step={step}
+    type="range"
+    value={value}
+  />
+  {
+    hasDatalist && (
+      <datalist aria-hidden="true" id={listId}>
+        {items?.map((option) =>
+          typeof option === "object" ? (
+            <option value={option.value} label={option.label} />
+          ) : (
+            <option value={option} />
+          ),
+        )}
+        <slot name="datalist" />
+      </datalist>
+    )
+  }
+  {
+    hasEndText && (
+      <span class="ui-end-text" id={endTextId}>
+        {endText}
+        <slot name="end-text" />
+      </span>
+    )
+  }
+</label>
+
+<script>
+  import { initRange } from "../../css/js/range.js"
+  initRange()
+</script>