opui-css 5.4.1 → 5.4.3

package/components/Badge/Badge.astro

@@ -1,51 +1,51 @@
----
-import type { Props } from "./types.astro"
-
-import Anchor from "../Anchor/Anchor.astro"
-
-export const title = "Badge"
-
-const {
-  alignment,
-  class: className,
-  color,
-  dot,
-  invisible,
-  label,
-  ...rest
-} = Astro.props
-
-const positionArea =
-  alignment === "start-start"
-    ? "start start"
-    : alignment === "end-start"
-      ? "end start"
-      : alignment === "end-end"
-        ? "end end"
-        : undefined
----
-
-<Anchor
-  alignment={positionArea}
-  class:list={[
-    "ui-badge",
-    {
-      "ui-dot": dot,
-      "ui-invisible": invisible,
-    },
-    alignment && `ui-${alignment}`,
-    className,
-    color && `ui-${color}`,
-  ]}
-  {...rest as any}
->
-  <slot />
-  <span
-    class="ui-badge-indicator"
-    slot="anchored"
-    aria-label={label?.toString()}
-  >
-    {dot ? "" : label}
-    {!dot && <slot name="indicator" />}
-  </span>
-</Anchor>
+---
+import type { Props } from "./types.astro"
+
+import Anchor from "../Anchor/Anchor.astro"
+
+export const title = "Badge"
+
+const {
+  alignment,
+  class: className,
+  color,
+  dot,
+  invisible,
+  label,
+  ...rest
+} = Astro.props
+
+const positionArea =
+  alignment === "start-start"
+    ? "start start"
+    : alignment === "end-start"
+      ? "end start"
+      : alignment === "end-end"
+        ? "end end"
+        : undefined
+---
+
+<Anchor
+  alignment={positionArea}
+  class:list={[
+    "ui-badge",
+    {
+      "ui-dot": dot,
+      "ui-invisible": invisible,
+    },
+    alignment && `ui-${alignment}`,
+    className,
+    color && `ui-${color}`,
+  ]}
+  {...rest as any}
+>
+  <slot />
+  <span
+    class="ui-badge-indicator"
+    slot="anchored"
+    aria-label={label?.toString()}
+  >
+    {dot ? "" : label}
+    {!dot && <slot name="indicator" />}
+  </span>
+</Anchor>

package/components/Badge/Badge.vue

@@ -1,39 +1,40 @@
-<script setup lang="ts">
-import Anchor from "../Anchor/Anchor.vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const { alignment, color, dot, invisible, label } = defineProps<Props>()
-defineSlots<Slots>()
-
-const positionArea =
-  alignment === "start-start"
-    ? "start start"
-    : alignment === "end-start"
-      ? "end start"
-      : alignment === "end-end"
-        ? "end end"
-        : undefined
-</script>
-
-<template>
-  <Anchor
-    :alignment="positionArea"
-    :class="[
-      'ui-badge',
-      {
-        'ui-dot': dot,
-        'ui-invisible': invisible,
-      },
-      alignment && `ui-${alignment}`,
-      color && `ui-${color}`,
-      $props.class,
-    ]"
-  >
-    <slot></slot>
-    <template #anchored>
-      <span class="ui-badge-indicator" :aria-label="label?.toString()">{{
-        dot ? "" : label
-      }}</span>
-    </template>
-  </Anchor>
-</template>
+<script setup lang="ts">
+import Anchor from "../Anchor/Anchor.vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { alignment, color, dot, invisible, label } = defineProps<Props>()
+defineSlots<Slots>()
+
+const positionArea =
+  alignment === "start-start"
+    ? "start start"
+    : alignment === "end-start"
+      ? "end start"
+      : alignment === "end-end"
+        ? "end end"
+        : undefined
+</script>
+
+<template>
+  <Anchor
+    :alignment="positionArea"
+    :class="[
+      'ui-badge',
+      {
+        'ui-dot': dot,
+        'ui-invisible': invisible,
+      },
+      alignment && `ui-${alignment}`,
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+  >
+    <slot></slot>
+    <template #anchored>
+      <span class="ui-badge-indicator" :aria-label="label?.toString()">
+        {{ dot ? "" : label }}
+        <slot v-if="!dot" name="indicator"></slot>
+      </span>
+    </template>
+  </Anchor>
+</template>

package/components/Badge/types.astro.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props & HTMLAttributes<"span">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"span">

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

@@ -1,10 +1,10 @@
-import type { HTMLAttributes, Slot } from "vue"
-import type { Props as BaseProps } from "./types"
-
-export type Props = BaseProps & {
-  class?: HTMLAttributes["class"]
-}
-
-export type Slots = {
-  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/Badge/types.solid.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props & JSX.HTMLAttributes<HTMLSpanElement>
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLSpanElement>

package/components/Badge/types.svelte.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["span"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["span"]

package/components/Badge/types.ts

@@ -1,8 +1,12 @@
-export type Props = {
-  [key: string]: any
-  alignment?: "start-start" | "end-start" | "end-end"
-  color?: "critical" | "info" | "neutral" | "success" | "warning"
-  dot?: boolean
-  invisible?: boolean
-  label?: string | number
-}
+export type Props = {
+  [key: string]: any
+  alignment?: "start-start" | "end-start" | "end-end"
+  color?: "critical" | "info" | "neutral" | "success" | "warning"
+  dot?: boolean
+  invisible?: boolean
+  label?: string | number
+}
+
+export type Slots<S> = {
+  indicator?: S
+}

package/components/Button/Button.astro

@@ -1,36 +1,36 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Button"
-
-const props = Astro.props as Props
-const {
-  as,
-  class: className,
-  color,
-  size,
-  variant,
-  disabled,
-  href,
-  ...rest
-} = props
-
-const Tag = (as || (href ? "a" : "button")) as any
-const isButton = Tag === "button"
----
-
-<Tag
-  class:list={[
-    "ui-button",
-    { "ui-disabled": isButton && disabled },
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
-    color && `ui-${color}`,
-    className,
-  ]}
-  disabled={isButton ? disabled : undefined}
-  href={href}
-  {...rest as any}
->
-  <slot />
-</Tag>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Button"
+
+const props = Astro.props as Props
+const {
+  as,
+  class: className,
+  color,
+  size,
+  variant,
+  disabled,
+  href,
+  ...rest
+} = props
+
+const Tag = (as || (href ? "a" : "button")) as any
+const isButton = Tag === "button"
+---
+
+<Tag
+  class:list={[
+    "ui-button",
+    { "ui-disabled": isButton && disabled },
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    color && `ui-${color}`,
+    className,
+  ]}
+  disabled={isButton ? disabled : undefined}
+  href={href}
+  {...rest as any}
+>
+  <slot />
+</Tag>

package/components/Button/Button.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const { as, color, disabled, href, size, variant } = defineProps<Props>()
-defineSlots<Slots>()
-
-const Tag = as || (href ? "a" : "button")
-const isButton = Tag === "button"
-</script>
-
-<template>
-  <component
-    :is="Tag"
-    :class="[
-      'ui-button',
-      { 'ui-disabled': isButton && disabled },
-      size && `ui-${size}`,
-      variant && `ui-${variant}`,
-      color && `ui-${color}`,
-      $props.class,
-    ]"
-    :disabled="isButton ? disabled : undefined"
-    :href="href"
-  >
-    <slot></slot>
-  </component>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { as, color, disabled, href, size, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const Tag = as || (href ? "a" : "button")
+const isButton = Tag === "button"
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    :class="[
+      'ui-button',
+      { 'ui-disabled': isButton && disabled },
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+    :disabled="isButton ? disabled : undefined"
+    :href="href"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/Button/types.astro.ts

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

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

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

package/components/Button/types.solid.ts

@@ -1,8 +1,8 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props &
-  (
-    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
-    | ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
-  )
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+  )

package/components/Button/types.svelte.ts

@@ -1,6 +1,6 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props =
-  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
-  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
+  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])

package/components/Button/types.ts

@@ -1,16 +1,16 @@
-export type Props = {
-  color?: "critical" | "primary"
-  size?: "x-small" | "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-} & (
-  | {
-      as?: "a"
-      href: string
-      disabled?: never
-    }
-  | {
-      as?: "button"
-      href?: never
-      disabled?: boolean
-    }
-)
+export type Props = {
+  color?: "critical" | "primary"
+  size?: "x-small" | "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+} & (
+  | {
+      as?: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+)

package/components/ButtonGroup/ButtonGroup.astro

@@ -1,29 +1,29 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Button Group"
-
-const {
-  class: className,
-  color,
-  orientation,
-  size,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<div
-  class:list={[
-    "ui-button-group",
-    color && `ui-${color}`,
-    size && `ui-${size}`,
-    variant && `ui-${variant}`,
-    orientation && `ui-${orientation}`,
-    className,
-  ]}
-  role="group"
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Button Group"
+
+const {
+  class: className,
+  color,
+  orientation,
+  size,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<div
+  class:list={[
+    "ui-button-group",
+    color && `ui-${color}`,
+    size && `ui-${size}`,
+    variant && `ui-${variant}`,
+    orientation && `ui-${orientation}`,
+    className,
+  ]}
+  role="group"
+  {...rest}
+>
+  <slot />
+</div>

package/components/ButtonGroup/ButtonGroup.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const props = defineProps<Props>()
-defineSlots<Slots>()
-</script>
-
-<template>
-  <div
-    :class="[
-      'ui-button-group',
-      props.color && `ui-${props.color}`,
-      props.size && `ui-${props.size}`,
-      props.variant && `ui-${props.variant}`,
-      props.orientation && `ui-${props.orientation}`,
-      props.class,
-    ]"
-    role="group"
-  >
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-button-group',
+      props.color && `ui-${props.color}`,
+      props.size && `ui-${props.size}`,
+      props.variant && `ui-${props.variant}`,
+      props.orientation && `ui-${props.orientation}`,
+      props.class,
+    ]"
+    role="group"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/ButtonGroup/types.astro.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props & HTMLAttributes<"div">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"div">

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

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

package/components/ButtonGroup/types.solid.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>

package/components/ButtonGroup/types.svelte.ts

@@ -1,4 +1,4 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["div"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["div"]

package/components/ButtonGroup/types.ts

@@ -1,7 +1,7 @@
-export type Props = {
-  [key: string]: any
-  color?: "critical" | "primary"
-  orientation?: "vertical"
-  size?: "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
+export type Props = {
+  [key: string]: any
+  color?: "critical" | "primary"
+  orientation?: "vertical"
+  size?: "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+}