opui-css 5.4.2 → 5.4.3

package/components/Callout/Callout.astro

@@ -1,76 +1,76 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Callout"
-
-const { class: className, severity, variant, ...rest } = Astro.props
----
-
-<article
-  role="note"
-  class:list={[
-    "ui-callout",
-    variant && `ui-${variant}`,
-    severity && `ui-${severity}`,
-    className,
-  ]}
-  {...rest}
->
-  <slot name="icon">
-    {
-      severity === "info" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-        >
-          <path
-            fill="currentColor"
-            d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
-          />
-        </svg>
-      )
-    }
-    {
-      severity === "warning" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-        >
-          <path
-            fill="currentColor"
-            d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
-          />
-        </svg>
-      )
-    }
-    {
-      severity === "critical" && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 48 48"
-        >
-          <path
-            fill="currentColor"
-            d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
-          />
-        </svg>
-      )
-    }
-  </slot>
-  <div class="ui-content">
-    {
-      Astro.slots.has("title") && (
-        <h3 class="ui-title">
-          <slot name="title" />
-        </h3>
-      )
-    }
-    <slot />
-  </div>
-</article>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Callout"
+
+const { class: className, severity, variant, ...rest } = Astro.props
+---
+
+<article
+  role="note"
+  class:list={[
+    "ui-callout",
+    variant && `ui-${variant}`,
+    severity && `ui-${severity}`,
+    className,
+  ]}
+  {...rest}
+>
+  <slot name="icon">
+    {
+      severity === "info" && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
+          />
+        </svg>
+      )
+    }
+    {
+      severity === "warning" && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
+          />
+        </svg>
+      )
+    }
+    {
+      severity === "critical" && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 48 48"
+        >
+          <path
+            fill="currentColor"
+            d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
+          />
+        </svg>
+      )
+    }
+  </slot>
+  <div class="ui-content">
+    {
+      Astro.slots.has("title") && (
+        <h3 class="ui-title">
+          <slot name="title" />
+        </h3>
+      )
+    }
+    <slot />
+  </div>
+</article>

package/components/Callout/Callout.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
-
-const { severity, variant } = defineProps<Props>()
-const slots = defineSlots<Slots>()
-</script>
-
-<template>
-  <article
-    role="note"
-    :class="[
-      'ui-callout',
-      variant && `ui-${variant}`,
-      severity && `ui-${severity}`,
-      $props.class,
-    ]"
-  >
-    <slot name="icon">
-      <svg
-        v-if="severity === 'info'"
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-      >
-        <path
-          fill="currentColor"
-          d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
-        />
-      </svg>
-      <svg
-        v-if="severity === 'warning'"
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 32 32"
-      >
-        <path
-          fill="currentColor"
-          d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
-        />
-      </svg>
-      <svg
-        v-if="severity === 'critical'"
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 48 48"
-      >
-        <path
-          fill="currentColor"
-          d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
-        />
-      </svg>
-    </slot>
-    <div class="ui-content">
-      <h3 v-if="slots.title" class="ui-title">
-        <slot name="title"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </article>
-</template>
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { severity, variant } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <article
+    role="note"
+    :class="[
+      'ui-callout',
+      variant && `ui-${variant}`,
+      severity && `ui-${severity}`,
+      $props.class,
+    ]"
+  >
+    <slot name="icon">
+      <svg
+        v-if="severity === 'info'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path
+          fill="currentColor"
+          d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
+        />
+      </svg>
+      <svg
+        v-if="severity === 'warning'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path
+          fill="currentColor"
+          d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
+        />
+      </svg>
+      <svg
+        v-if="severity === 'critical'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 48 48"
+      >
+        <path
+          fill="currentColor"
+          d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
+        />
+      </svg>
+    </slot>
+    <div class="ui-content">
+      <h3 v-if="slots.title" class="ui-title">
+        <slot name="title"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </article>
+</template>

package/components/Callout/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<"article">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"article">

package/components/Callout/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/Callout/types.solid.ts

@@ -1,6 +1,6 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props &
-  Partial<Base.Slots<JSX.Element>> &
-  JSX.HTMLAttributes<HTMLElement>
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.HTMLAttributes<HTMLElement>

package/components/Callout/types.svelte.ts

@@ -1,7 +1,7 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-type Snippets = Base.Slots<Snippet>
-
-export type Props = Base.Props & Snippets & SvelteHTMLElements["article"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props = Base.Props & Snippets & SvelteHTMLElements["article"]

package/components/Callout/types.ts

@@ -1,10 +1,10 @@
-export type Props = {
-  [key: string]: any
-  severity?: "critical" | "info" | "neutral" | "success" | "warning"
-  variant?: "tonal" | "outlined"
-}
-
-export type Slots<S> = {
-  icon?: S
-  title?: S
-}
+export type Props = {
+  [key: string]: any
+  severity?: "critical" | "info" | "neutral" | "success" | "warning"
+  variant?: "tonal" | "outlined"
+}
+
+export type Slots<S> = {
+  icon?: S
+  title?: S
+}

package/components/Card/Card.astro

@@ -1,34 +1,34 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Card"
-
-const { variant, actionsAlign, class: className, ...rest } = Astro.props
----
-
-<div class:list={["ui-card", variant && `ui-${variant}`, className]} {...rest}>
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="ui-content">
-        <slot name="content" />
-      </div>
-    )
-  }
-  <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div
-        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
-      >
-        <slot name="actions" />
-      </div>
-    )
-  }
-</div>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Card"
+
+const { variant, actionsAlign, class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-card", variant && `ui-${variant}`, className]} {...rest}>
+  {
+    Astro.slots.has("header") && (
+      <hgroup>
+        <slot name="header" />
+      </hgroup>
+    )
+  }
+  {
+    Astro.slots.has("content") && (
+      <div class="ui-content">
+        <slot name="content" />
+      </div>
+    )
+  }
+  <slot />
+  {
+    Astro.slots.has("actions") && (
+      <div
+        class:list={["ui-actions", actionsAlign && `ui-align-${actionsAlign}`]}
+      >
+        <slot name="actions" />
+      </div>
+    )
+  }
+</div>

package/components/Card/Card.vue

@@ -1,28 +1,28 @@
-<script setup lang="ts">
-import { useSlots } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const { actionsAlign, variant } = defineProps<Props>()
-const slots = defineSlots<Slots>()
-</script>
-
-<template>
-  <div :class="['ui-card', variant && `ui-${variant}`, $props.class]">
-    <hgroup v-if="slots.header">
-      <slot name="header"></slot>
-    </hgroup>
-
-    <div v-if="slots.content" class="ui-content">
-      <slot name="content"></slot>
-    </div>
-
-    <slot></slot>
-
-    <div
-      v-if="slots.actions"
-      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
-    >
-      <slot name="actions"></slot>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { useSlots } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { actionsAlign, variant } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-card', variant && `ui-${variant}`, $props.class]">
+    <hgroup v-if="slots.header">
+      <slot name="header"></slot>
+    </hgroup>
+
+    <div v-if="slots.content" class="ui-content">
+      <slot name="content"></slot>
+    </div>
+
+    <slot></slot>
+
+    <div
+      v-if="slots.actions"
+      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
+    >
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>

package/components/Card/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/Card/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/Card/types.solid.ts

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

package/components/Card/types.svelte.ts

@@ -1,7 +1,7 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-type Snippets = Base.Slots<Snippet>
-
-export type Props = Base.Props & Snippets & SvelteHTMLElements["div"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props = Base.Props & Snippets & SvelteHTMLElements["div"]

package/components/Card/types.ts

@@ -1,11 +1,11 @@
-export type Props = {
-  actionsAlign?: "start" | "end"
-  variant?: "text" | "outlined" | "elevated" | "tonal"
-}
-
-export type Slots<S> = {
-  actions?: S
-  children?: S
-  content?: S
-  header?: S
-}
+export type Props = {
+  actionsAlign?: "start" | "end"
+  variant?: "text" | "outlined" | "elevated" | "tonal"
+}
+
+export type Slots<S> = {
+  actions?: S
+  children?: S
+  content?: S
+  header?: S
+}