opui-css 4.1.0 → 5.0.1

package/components/Range/Range.astro

@@ -1,136 +1,136 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  endText?: string
-  id?: string
-  label?: string
-  max?: number | string
-  min?: number | string
-  name?: string
-  spread?: boolean
-  startText?: string
-  step?: number | string
-  value?: number | string
-  valueSuffix?: string
-  variant?: "filled" | "default" | "tonal"
-} & (
-  | { list?: never; options?: never }
-  | {
-      list: string
-      options: (string | number | { value: string | number; label?: string })[]
-    }
-)
-
-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={["range", variant, { spread }, className]}>
-  {
-    hasLabel && (
-      <!-- prettier-ignore -->
-      <span class="label" id={labelId}>{label}<slot /></span>
-    )
-  }
-  {
-    hasValue && (
-      <output class="value" for={inputId} data-suffix={valueSuffix}>
-        <slot name="value">{value}</slot>
-      </output>
-    )
-  }
-  {
-    hasStartText && (
-      <span class="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="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 .range is wired once, and ignores ranges
-  // without a value display.
-  for (const range of document.querySelectorAll<HTMLElement>(".range")) {
-    const input = range.querySelector<HTMLInputElement>('input[type="range"]')
-    const output = range.querySelector<HTMLOutputElement>(":scope > output.value")
-    if (!input || !output) continue
-    const suffix = output.dataset.suffix ?? ""
-    const update = () => {
-      output.textContent = `${input.value}${suffix}`
-    }
-    input.addEventListener("input", update)
-    update()
-  }
-</script>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  disabled?: boolean
+  endText?: string
+  id?: string
+  label?: string
+  max?: number | string
+  min?: number | string
+  name?: string
+  spread?: boolean
+  startText?: string
+  step?: number | string
+  value?: number | string
+  valueSuffix?: string
+  variant?: "filled" | "default" | "tonal"
+} & (
+  | { list?: never; options?: never }
+  | {
+      list: string
+      options: (string | number | { value: string | number; label?: string })[]
+    }
+)
+
+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 && (
+      <!-- prettier-ignore -->
+      <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>

package/components/Select/Select.astro

@@ -1,106 +1,106 @@
----
-type Item = {
-  text: string
-  value: any
-}
-
-type Props = {
-  [key: string]: any
-  class?: string
-  description?: string
-  disabled?: boolean
-  critical?: boolean
-  dense?: boolean
-  id?: string
-  items?: Item[]
-  label?: string
-  name?: string
-  spread?: boolean
-  required?: boolean
-  size?: "small"
-  endText?: string
-  value?: any
-  variant?: "outlined" | "filled"
-}
-
-export const title = "Select"
-
-const {
-  class: className,
-  description,
-  disabled,
-  critical,
-  dense,
-  id,
-  items = [],
-  label,
-  name,
-  spread,
-  required,
-  size,
-  endText,
-  value,
-  variant = "outlined",
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const selectId = id || $id("select")
-const fieldName = name || currentFieldName
-const labelId = $id("select-label")
----
-
-<label
-  class:list={[
-    "select",
-    size,
-    {
-      filled: variant === "filled",
-      spread,
-    },
-    className,
-  ]}
-  data-invalid={critical || undefined}
->
-  {
-    (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="label" id={labelId}>{label}<slot name="label" /></span>
-    )
-  }
-  {
-    (description || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="start-text">{description}<slot name="description" /></span>
-    )
-  }
-  <span class="field">
-    <select
-      aria-labelledby={label ? labelId : undefined}
-      disabled={disabled}
-      id={selectId}
-      name={fieldName}
-      required={required}
-      value={value}
-      {...rest}
-    >
-      <button>
-        <selectedcontent></selectedcontent>
-      </button>
-      <div class:list={["list", { dense }]}>
-        {items.map((item) => <option value={item.value}>{item.text}</option>)}
-        <slot />
-      </div>
-    </select>
-    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
-  </span>
-  {
-    (endText || Astro.slots.has("end-text")) && (
-      <!-- prettier-ignore -->
-      <span id={$id("end-text")} class="end-text">{endText}<slot name="end-text" /></span>
-    )
-  }
-</label>
+---
+type Item = {
+  text: string
+  value: any
+}
+
+type Props = {
+  [key: string]: any
+  class?: string
+  description?: string
+  disabled?: boolean
+  critical?: boolean
+  dense?: boolean
+  id?: string
+  items?: Item[]
+  label?: string
+  name?: string
+  spread?: boolean
+  required?: boolean
+  size?: "small"
+  endText?: string
+  value?: any
+  variant?: "outlined" | "filled"
+}
+
+export const title = "Select"
+
+const {
+  class: className,
+  description,
+  disabled,
+  critical,
+  dense,
+  id,
+  items = [],
+  label,
+  name,
+  spread,
+  required,
+  size,
+  endText,
+  value,
+  variant = "outlined",
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const selectId = id || $id("select")
+const fieldName = name || currentFieldName
+const labelId = $id("select-label")
+---
+
+<label
+  class:list={[
+    "ui-select",
+    size && `ui-${size}`,
+    {
+      "ui-filled": variant === "filled",
+      "ui-spread": spread,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-label" id={labelId}>{label}<slot name="label" /></span>
+    )
+  }
+  {
+    (description || Astro.slots.has("description")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-start-text">{description}<slot name="description" /></span>
+    )
+  }
+  <span class="ui-field">
+    <select
+      aria-labelledby={label ? labelId : undefined}
+      disabled={disabled}
+      id={selectId}
+      name={fieldName}
+      required={required}
+      value={value}
+      {...rest}
+    >
+      <button>
+        <selectedcontent></selectedcontent>
+      </button>
+      <div class:list={["ui-list", { "ui-dense": dense }]}>
+        {items.map((item) => <option value={item.value}>{item.text}</option>)}
+        <slot />
+      </div>
+    </select>
+    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
+  </span>
+  {
+    (endText || Astro.slots.has("end-text")) && (
+      <!-- prettier-ignore -->
+      <span id={$id("end-text")} class="ui-end-text">{endText}<slot name="end-text" /></span>
+    )
+  }
+</label>

package/components/Switch/Switch.astro

@@ -1,101 +1,101 @@
----
-import SwitchInput from "./SwitchInput.astro"
-
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  disabled?: boolean
-  critical?: boolean
-  hideLabel?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  small?: boolean
-  spread?: boolean
-  stack?: boolean
-  value?: string
-}
-
-export const title = "Switch"
-
-const {
-  checked,
-  class: className,
-  disabled,
-  critical,
-  hideLabel,
-  id,
-  name,
-  required,
-  small,
-  spread,
-  stack,
-  value,
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
-
-const finalName = name || currentFieldName
-
-if (
-  import.meta.env.DEV &&
-  !Astro.slots.has("default") &&
-  !Astro.props["aria-label"] &&
-  !Astro.props["aria-labelledby"]
-) {
-  console.warn(
-    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`."
-  )
-}
----
-
-<label
-  class:list={[
-    "switch",
-    {
-      small,
-      stack,
-      spread,
-    },
-    className,
-  ]}
-  data-invalid={critical || undefined}
->
-  {
-    Astro.slots.has("icon-unchecked") && (
-      <span class="icon-unchecked" aria-hidden="true">
-        <slot name="icon-unchecked" />
-      </span>
-    )
-  }
-  {
-    Astro.slots.has("icon-checked") && (
-      <span class="icon-checked" aria-hidden="true">
-        <slot name="icon-checked" />
-      </span>
-    )
-  }
-  <SwitchInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
-  {
-    Astro.slots.has("default") && (
-    <!-- prettier-ignore --><span class:list={[hideLabel ? "sr-only" : "label"]}><slot /></span>)
-  }
-    {
-      Astro.slots.has("end-text") && (
-        <!-- prettier-ignore -->
-        <span id={endTextId} class="end-text"><slot name="end-text" /></span>
-      )
-    }
-</label>
+---
+import SwitchInput from "./SwitchInput.astro"
+
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  class?: string
+  disabled?: boolean
+  critical?: boolean
+  hideLabel?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  small?: boolean
+  spread?: boolean
+  stack?: boolean
+  value?: string
+}
+
+export const title = "Switch"
+
+const {
+  checked,
+  class: className,
+  disabled,
+  critical,
+  hideLabel,
+  id,
+  name,
+  required,
+  small,
+  spread,
+  stack,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
+
+const finalName = name || currentFieldName
+
+if (
+  import.meta.env.DEV &&
+  !Astro.slots.has("default") &&
+  !Astro.props["aria-label"] &&
+  !Astro.props["aria-labelledby"]
+) {
+  console.warn(
+    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`."
+  )
+}
+---
+
+<label
+  class:list={[
+    "ui-switch",
+    {
+      "ui-small": small,
+      "ui-stack": stack,
+      "ui-spread": spread,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  {
+    Astro.slots.has("icon-unchecked") && (
+      <span class="ui-icon-unchecked" aria-hidden="true">
+        <slot name="icon-unchecked" />
+      </span>
+    )
+  }
+  {
+    Astro.slots.has("icon-checked") && (
+      <span class="ui-icon-checked" aria-hidden="true">
+        <slot name="icon-checked" />
+      </span>
+    )
+  }
+  <SwitchInput
+    aria-describedby={endTextId}
+    {checked}
+    {disabled}
+    {id}
+    name={finalName}
+    {required}
+    {value}
+    {...rest}
+  />
+  {
+    Astro.slots.has("default") && (
+    <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>)
+  }
+    {
+      Astro.slots.has("end-text") && (
+        <!-- prettier-ignore -->
+        <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
+      )
+    }
+</label>