opui-css 5.4.2 → 5.4.3

package/components/ListItem/ListItem.astro

@@ -1,108 +1,108 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "List Item"
-
-const {
-  as: Tag,
-  borderTop,
-  class: className,
-  description,
-  for: htmlFor,
-  headline,
-  inset,
-  type,
-  ...rest
-} = Astro.props
-
-const hasLabel =
-  type && (type === "checkbox" || type === "radio" || type === "switch")
-const labelClass = type || ""
-const liProps = Tag ? {} : rest
-const innerProps = Tag ? rest : {}
----
-
-<li
-  class:list={[
-    {
-      "ui-border-top": borderTop,
-      "ui-inset": inset,
-    },
-    className,
-  ]}
-  {...liProps as any}
->
-  {
-    // Label + checkbox/radio/switch
-    hasLabel ? (
-      <label class={labelClass && `ui-${labelClass}`} for={htmlFor}>
-        {Astro.slots.start && (
-          <div class="ui-start">
-            <slot name="start" />
-          </div>
-        )}
-        {Astro.slots.text || headline || description ? (
-          <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-          </div>
-        ) : null}
-        {Astro.slots.end && (
-          <div class="ui-end">
-            <slot name="end" />
-          </div>
-        )}
-        <slot />
-      </label>
-    ) : // With custom tag
-    Tag ? (
-      <Tag {...(innerProps as any)}>
-        {Astro.slots.start && (
-          <div class="ui-start">
-            <slot name="start" />
-          </div>
-        )}
-        {headline || description || Astro.slots.text ? (
-          <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-            <slot />
-          </div>
-        ) : (
-          <slot />
-        )}
-        {Astro.slots.end && (
-          <div class="ui-end">
-            <slot name="end" />
-          </div>
-        )}
-      </Tag>
-    ) : (
-      // Without custom tag
-      <>
-        {Astro.slots.start && (
-          <div class="ui-start">
-            <slot name="start" />
-          </div>
-        )}
-        {headline || description || Astro.slots.text ? (
-          <div class="ui-text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-            <slot />
-          </div>
-        ) : (
-          <slot />
-        )}
-        {Astro.slots.end && (
-          <div class="ui-end">
-            <slot name="end" />
-          </div>
-        )}
-      </>
-    )
-  }
-</li>
+---
+import type { Props } from "./types.astro"
+
+export const title = "List Item"
+
+const {
+  as: Tag,
+  borderTop,
+  class: className,
+  description,
+  for: htmlFor,
+  headline,
+  inset,
+  type,
+  ...rest
+} = Astro.props
+
+const hasLabel =
+  type && (type === "checkbox" || type === "radio" || type === "switch")
+const labelClass = type || ""
+const liProps = Tag ? {} : rest
+const innerProps = Tag ? rest : {}
+---
+
+<li
+  class:list={[
+    {
+      "ui-border-top": borderTop,
+      "ui-inset": inset,
+    },
+    className,
+  ]}
+  {...liProps as any}
+>
+  {
+    // Label + checkbox/radio/switch
+    hasLabel ? (
+      <label class={labelClass && `ui-${labelClass}`} for={htmlFor}>
+        {Astro.slots.start && (
+          <div class="ui-start">
+            <slot name="start" />
+          </div>
+        )}
+        {Astro.slots.text || headline || description ? (
+          <div class="ui-text">
+            {headline && <p>{headline}</p>}
+            {description && <p>{description}</p>}
+            <slot name="text" />
+          </div>
+        ) : null}
+        {Astro.slots.end && (
+          <div class="ui-end">
+            <slot name="end" />
+          </div>
+        )}
+        <slot />
+      </label>
+    ) : // With custom tag
+    Tag ? (
+      <Tag {...(innerProps as any)}>
+        {Astro.slots.start && (
+          <div class="ui-start">
+            <slot name="start" />
+          </div>
+        )}
+        {headline || description || Astro.slots.text ? (
+          <div class="ui-text">
+            {headline && <p>{headline}</p>}
+            {description && <p>{description}</p>}
+            <slot name="text" />
+            <slot />
+          </div>
+        ) : (
+          <slot />
+        )}
+        {Astro.slots.end && (
+          <div class="ui-end">
+            <slot name="end" />
+          </div>
+        )}
+      </Tag>
+    ) : (
+      // Without custom tag
+      <>
+        {Astro.slots.start && (
+          <div class="ui-start">
+            <slot name="start" />
+          </div>
+        )}
+        {headline || description || Astro.slots.text ? (
+          <div class="ui-text">
+            {headline && <p>{headline}</p>}
+            {description && <p>{description}</p>}
+            <slot name="text" />
+            <slot />
+          </div>
+        ) : (
+          <slot />
+        )}
+        {Astro.slots.end && (
+          <div class="ui-end">
+            <slot name="end" />
+          </div>
+        )}
+      </>
+    )
+  }
+</li>

package/components/ListItem/ListItem.vue

@@ -1,98 +1,98 @@
-<script setup lang="ts">
-import { computed, useAttrs } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const props = defineProps<Props>()
-const slots = defineSlots<Slots>()
-const attrs = useAttrs()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const hasLabel = computed(
-  () =>
-    props.type &&
-    (props.type === "checkbox" ||
-      props.type === "radio" ||
-      props.type === "switch"),
-)
-const labelClass = computed(() => props.type || "")
-const Tag = computed(() => props.as)
-
-const liAttrs = computed(() => (Tag.value ? {} : attrs))
-const innerAttrs = computed(() => (Tag.value ? attrs : {}))
-</script>
-
-<template>
-  <li
-    :class="[
-      {
-        'ui-border-top': props.borderTop,
-        'ui-inset': props.inset,
-      },
-      props.class,
-    ]"
-    v-bind="liAttrs"
-  >
-    <label
-      v-if="hasLabel"
-      :class="labelClass && `ui-${labelClass}`"
-      :for="props.for"
-    >
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="slots.text || props.headline || props.description"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-      </div>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-      <slot></slot>
-    </label>
-
-    <component :is="Tag" v-else-if="Tag" v-bind="innerAttrs">
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="props.headline || props.description || slots.text"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-        <slot></slot>
-      </div>
-      <slot v-else></slot>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-    </component>
-
-    <template v-else>
-      <div v-if="slots.start" class="ui-start">
-        <slot name="start"></slot>
-      </div>
-      <div
-        v-if="props.headline || props.description || slots.text"
-        class="ui-text"
-      >
-        <p v-if="props.headline">{{ props.headline }}</p>
-        <p v-if="props.description">{{ props.description }}</p>
-        <slot name="text"></slot>
-        <slot></slot>
-      </div>
-      <slot v-else></slot>
-      <div v-if="slots.end" class="ui-end">
-        <slot name="end"></slot>
-      </div>
-    </template>
-  </li>
-</template>
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const hasLabel = computed(
+  () =>
+    props.type &&
+    (props.type === "checkbox" ||
+      props.type === "radio" ||
+      props.type === "switch"),
+)
+const labelClass = computed(() => props.type || "")
+const Tag = computed(() => props.as)
+
+const liAttrs = computed(() => (Tag.value ? {} : attrs))
+const innerAttrs = computed(() => (Tag.value ? attrs : {}))
+</script>
+
+<template>
+  <li
+    :class="[
+      {
+        'ui-border-top': props.borderTop,
+        'ui-inset': props.inset,
+      },
+      props.class,
+    ]"
+    v-bind="liAttrs"
+  >
+    <label
+      v-if="hasLabel"
+      :class="labelClass && `ui-${labelClass}`"
+      :for="props.for"
+    >
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="slots.text || props.headline || props.description"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+      </div>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+      <slot></slot>
+    </label>
+
+    <component :is="Tag" v-else-if="Tag" v-bind="innerAttrs">
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="props.headline || props.description || slots.text"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </component>
+
+    <template v-else>
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="props.headline || props.description || slots.text"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </template>
+  </li>
+</template>

package/components/ListItem/types.astro.ts

@@ -1,10 +1,10 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props &
-  (
-    | ({ as?: "li" } & HTMLAttributes<"li">)
-    | ({ as: "a" } & HTMLAttributes<"a">)
-    | ({ as: "button" } & HTMLAttributes<"button">)
-    | ({ as: "div" } & HTMLAttributes<"div">)
-  )
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "li" } & HTMLAttributes<"li">)
+    | ({ as: "a" } & HTMLAttributes<"a">)
+    | ({ as: "button" } & HTMLAttributes<"button">)
+    | ({ as: "div" } & HTMLAttributes<"div">)
+  )

package/components/ListItem/types.d.vue.ts

@@ -1,10 +1,10 @@
-import type { HTMLAttributes, Slot } from "vue"
-import type { Props as BaseProps, Slots as BaseSlots } from "./types"
-
-export type Props = BaseProps & {
-  class?: HTMLAttributes["class"]
-}
-
-export type Slots = BaseSlots<Slot> & {
-  default?: Slot
-}
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps, Slots as BaseSlots } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = BaseSlots<Slot> & {
+  default?: Slot
+}

package/components/ListItem/types.solid.ts

@@ -1,12 +1,12 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-// prettier-ignore
-export type Props = Base.Props &
-  Base.Slots<JSX.Element> &
-  (
-    | ({ as?: "li" } & JSX.HTMLAttributes<HTMLLIElement>)
-    | ({ as: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
-    | ({ as: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
-    | ({ as: "div" } & JSX.HTMLAttributes<HTMLDivElement>)
-  )
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+// prettier-ignore
+export type Props = Base.Props &
+  Base.Slots<JSX.Element> &
+  (
+    | ({ as?: "li" } & JSX.HTMLAttributes<HTMLLIElement>)
+    | ({ as: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+    | ({ as: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as: "div" } & JSX.HTMLAttributes<HTMLDivElement>)
+  )

package/components/ListItem/types.svelte.ts

@@ -1,14 +1,14 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-// prettier-ignore
-export type Props =
-  Base.Props &
-  Base.Slots<Snippet> &
-  (
-    | ({ as?: "li" } & SvelteHTMLElements["li"])
-    | ({ as: "a" } & SvelteHTMLElements["a"])
-    | ({ as: "button" } & SvelteHTMLElements["button"])
-    | ({ as: "div" } & SvelteHTMLElements["div"])
-  )
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+// prettier-ignore
+export type Props =
+  Base.Props &
+  Base.Slots<Snippet> &
+  (
+    | ({ as?: "li" } & SvelteHTMLElements["li"])
+    | ({ as: "a" } & SvelteHTMLElements["a"])
+    | ({ as: "button" } & SvelteHTMLElements["button"])
+    | ({ as: "div" } & SvelteHTMLElements["div"])
+  )

package/components/ListItem/types.ts

@@ -1,32 +1,32 @@
-export type Props = {
-  borderTop?: boolean
-  class?: string
-  description?: string
-  for?: string
-  headline?: string
-  inset?: boolean
-  type?: "checkbox" | "radio" | "switch" | "button"
-} & (
-  | {
-      as?: "a"
-      href: string
-      disabled?: never
-    }
-  | {
-      as?: "button"
-      href?: never
-      disabled?: boolean
-    }
-  | {
-      as?: string
-      href?: never
-    }
-)
-
-export type Slots<S> = {
-  description?: string | S
-  end?: string | S
-  headline?: string | S
-  start?: string | S
-  text?: string | S
-}
+export type Props = {
+  borderTop?: boolean
+  class?: string
+  description?: string
+  for?: string
+  headline?: string
+  inset?: boolean
+  type?: "checkbox" | "radio" | "switch" | "button"
+} & (
+  | {
+      as?: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+  | {
+      as?: string
+      href?: never
+    }
+)
+
+export type Slots<S> = {
+  description?: string | S
+  end?: string | S
+  headline?: string | S
+  start?: string | S
+  text?: string | S
+}

package/components/Progress/Progress.astro

@@ -1,31 +1,31 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Progress"
-
-const {
-  "aria-busy": ariaBusy,
-  "aria-describedby": ariaDescribedby,
-  "aria-label": ariaLabel,
-  class: className,
-  id,
-  max,
-  value,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<div class:list={["ui-progress", className, variant && `ui-${variant}`]}>
-  <progress
-    aria-busy={ariaBusy}
-    aria-describedby={ariaDescribedby}
-    aria-label={ariaLabel}
-    id={id}
-    max={max}
-    value={value}
-    {...rest}
-  >
-    <slot />
-  </progress>
-</div>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Progress"
+
+const {
+  "aria-busy": ariaBusy,
+  "aria-describedby": ariaDescribedby,
+  "aria-label": ariaLabel,
+  class: className,
+  id,
+  max,
+  value,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<div class:list={["ui-progress", className, variant && `ui-${variant}`]}>
+  <progress
+    aria-busy={ariaBusy}
+    aria-describedby={ariaDescribedby}
+    aria-label={ariaLabel}
+    id={id}
+    max={max}
+    value={value}
+    {...rest}
+  >
+    <slot />
+  </progress>
+</div>