opui-css 5.4.2 → 5.4.3

package/components/Select/Select.astro

@@ -1,108 +1,108 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Select"
-
-const {
-  class: className,
-  description,
-  error,
-  dense,
-  id,
-  items = [],
-  label,
-  name,
-  spread,
-  size,
-  endText,
-  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={error || undefined}
->
-  {
-    (label || Astro.slots.has("label")) && (
-      <span class="ui-label" id={labelId}>
-        {label}
-        <slot name="label" />
-      </span>
-    )
-  }
-  {
-    (description || Astro.slots.has("description")) && (
-      <span class="ui-start-text">
-        {description}
-        <slot name="description" />
-      </span>
-    )
-  }
-  <span class="ui-field">
-    <select
-      aria-labelledby={label ? labelId : undefined}
-      id={selectId}
-      name={fieldName}
-      {...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")) && (
-      <span id={$id("end-text")} class="ui-end-text">
-        {endText}
-        <slot name="end-text" />
-      </span>
-    )
-  }
-</label>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Select"
+
+const {
+  class: className,
+  description,
+  error,
+  dense,
+  id,
+  items = [],
+  label,
+  name,
+  spread,
+  size,
+  endText,
+  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={error || undefined}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <span class="ui-label" id={labelId}>
+        {label}
+        <slot name="label" />
+      </span>
+    )
+  }
+  {
+    (description || Astro.slots.has("description")) && (
+      <span class="ui-start-text">
+        {description}
+        <slot name="description" />
+      </span>
+    )
+  }
+  <span class="ui-field">
+    <select
+      aria-labelledby={label ? labelId : undefined}
+      id={selectId}
+      name={fieldName}
+      {...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")) && (
+      <span id={$id("end-text")} class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+      </span>
+    )
+  }
+</label>

package/components/Select/Select.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-import { useId } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  variant: "outlined",
-})
-defineSlots<Slots>()
-const modelValue = defineModel<string | number | (string | number)[]>()
-
-const selectId = props.id || useId()
-const labelId = useId()
-const endTextId = useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-select',
-      props.size && `ui-${props.size}`,
-      {
-        'ui-filled': props.variant === 'filled',
-        'ui-spread': props.spread,
-      },
-      props.class,
-    ]"
-    :data-invalid="props.error || undefined"
-  >
-    <span v-if="props.label || $slots.label" class="ui-label" :id="labelId">
-      <slot name="label">{{ props.label }}</slot>
-    </span>
-
-    <span v-if="props.description || $slots.description" class="ui-start-text">
-      <slot name="description">{{ props.description }}</slot>
-    </span>
-
-    <span class="ui-field">
-      <select
-        :aria-labelledby="props.label ? labelId : undefined"
-        :id="selectId"
-        v-bind="$attrs"
-        v-model="modelValue"
-      >
-        <button v-pre>
-          <selectedcontent></selectedcontent>
-        </button>
-        <div :class="['ui-list', { 'ui-dense': props.dense }]">
-          <option
-            v-for="item in props.items"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.text }}
-          </option>
-          <slot></slot>
-        </div>
-      </select>
-      <span class="ui-prefix" v-if="$slots.prefix"
-        ><slot name="prefix"></slot
-      ></span>
-      <span class="ui-suffix" v-if="$slots.suffix"
-        ><slot name="suffix"></slot
-      ></span>
-      <span class="ui-header" v-if="$slots.header"
-        ><slot name="header"></slot
-      ></span>
-      <span class="ui-footer" v-if="$slots.footer"
-        ><slot name="footer"></slot
-      ></span>
-    </span>
-
-    <span
-      v-if="props.endText || $slots['end-text']"
-      :id="endTextId"
-      class="ui-end-text"
-    >
-      <slot name="end-text">{{ props.endText }}</slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  variant: "outlined",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | (string | number)[]>()
+
+const selectId = props.id || useId()
+const labelId = useId()
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-select',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-filled': props.variant === 'filled',
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label" :id="labelId">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="props.description || $slots.description" class="ui-start-text">
+      <slot name="description">{{ props.description }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <select
+        :aria-labelledby="props.label ? labelId : undefined"
+        :id="selectId"
+        v-bind="$attrs"
+        v-model="modelValue"
+      >
+        <button v-pre>
+          <selectedcontent></selectedcontent>
+        </button>
+        <div :class="['ui-list', { 'ui-dense': props.dense }]">
+          <option
+            v-for="item in props.items"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+          <slot></slot>
+        </div>
+      </select>
+      <span class="ui-prefix" v-if="$slots.prefix"
+        ><slot name="prefix"></slot
+      ></span>
+      <span class="ui-suffix" v-if="$slots.suffix"
+        ><slot name="suffix"></slot
+      ></span>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text']"
+      :id="endTextId"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot>
+    </span>
+  </label>
+</template>

package/components/Switch/Switch.astro

@@ -1,76 +1,76 @@
----
-import SwitchInput from "./SwitchInput.astro"
-import type { SwitchProps as Props } from "./types.astro"
-
-export const title = "Switch"
-
-const {
-  class: className,
-  error,
-  hideLabel,
-  name,
-  small,
-  spread,
-  stack,
-  ...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={error || 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} name={finalName} {...rest} />
-  {
-    Astro.slots.has("default") && (
-      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
-        <slot />
-      </span>
-    )
-  }
-  {
-    Astro.slots.has("end-text") && (
-      <span id={endTextId} class="ui-end-text">
-        <slot name="end-text" />
-      </span>
-    )
-  }
-</label>
+---
+import SwitchInput from "./SwitchInput.astro"
+import type { SwitchProps as Props } from "./types.astro"
+
+export const title = "Switch"
+
+const {
+  class: className,
+  error,
+  hideLabel,
+  name,
+  small,
+  spread,
+  stack,
+  ...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={error || 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} name={finalName} {...rest} />
+  {
+    Astro.slots.has("default") && (
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+        <slot />
+      </span>
+    )
+  }
+  {
+    Astro.slots.has("end-text") && (
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
+    )
+  }
+</label>

package/components/Switch/Switch.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import SwitchInput from "./SwitchInput.vue"
-import type { Slots, SwitchProps } from "./types.d.vue"
-import { useId } from "vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<SwitchProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<boolean | (string | number)[]>()
-
-const endTextId = useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-switch',
-      {
-        'ui-small': props.small,
-        'ui-stack': props.stack,
-        'ui-spread': props.spread,
-      },
-      props.class,
-    ]"
-    :data-invalid="props.error || undefined"
-  >
-    <span
-      v-if="$slots['icon-unchecked']"
-      class="ui-icon-unchecked"
-      aria-hidden="true"
-    >
-      <slot name="icon-unchecked"></slot>
-    </span>
-
-    <span
-      v-if="$slots['icon-checked']"
-      class="ui-icon-checked"
-      aria-hidden="true"
-    >
-      <slot name="icon-checked"></slot>
-    </span>
-
-    <SwitchInput
-      v-bind="$attrs"
-      v-model="modelValue"
-      :aria-describedby="endTextId"
-    />
-
-    <span
-      v-if="$slots.default"
-      :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
-    >
-      <slot></slot>
-    </span>
-
-    <span v-if="$slots['end-text']" :id="endTextId" class="ui-end-text">
-      <slot name="end-text"></slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import SwitchInput from "./SwitchInput.vue"
+import type { Slots, SwitchProps } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SwitchProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-switch',
+      {
+        'ui-small': props.small,
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span
+      v-if="$slots['icon-unchecked']"
+      class="ui-icon-unchecked"
+      aria-hidden="true"
+    >
+      <slot name="icon-unchecked"></slot>
+    </span>
+
+    <span
+      v-if="$slots['icon-checked']"
+      class="ui-icon-checked"
+      aria-hidden="true"
+    >
+      <slot name="icon-checked"></slot>
+    </span>
+
+    <SwitchInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="endTextId"
+    />
+
+    <span
+      v-if="$slots.default"
+      :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+    >
+      <slot></slot>
+    </span>
+
+    <span v-if="$slots['end-text']" :id="endTextId" class="ui-end-text">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Switch/SwitchInput.astro

@@ -1,7 +1,7 @@
----
-import type { SwitchInputProps as Props } from "./types.astro"
-
-const { ...rest } = Astro.props
----
-
-<input type="checkbox" role="switch" {...rest} />
+---
+import type { SwitchInputProps as Props } from "./types.astro"
+
+const { ...rest } = Astro.props
+---
+
+<input type="checkbox" role="switch" {...rest} />