opui-css 5.4.1 → 5.4.3

package/components/Textarea/Textarea.vue

@@ -1,64 +1,64 @@
-<script setup lang="ts">
-import { useId } from "vue"
-import type { Props, Slots } from "./types.d.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<Props>()
-defineSlots<Slots>()
-const modelValue = defineModel<string>()
-
-const fieldId = props.id || useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-textarea',
-      {
-        'ui-auto-fit': props.autoFit,
-        'ui-filled': props.filled,
-        'ui-spread': props.spread,
-        'ui-small': props.small,
-      },
-      props.class,
-    ]"
-    :data-invalid="props.error || undefined"
-  >
-    <span v-if="props.label || $slots.label" class="ui-label">
-      <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">
-      <textarea :id="fieldId" v-bind="$attrs" v-model="modelValue"></textarea>
-      <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'] || $slots['supporting-text']"
-      class="ui-end-text"
-    >
-      <slot name="end-text">{{ props.endText }}</slot
-      ><slot name="supporting-text"></slot>
-    </span>
-
-    <slot></slot>
-  </label>
-</template>
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+const modelValue = defineModel<string>()
+
+const fieldId = props.id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-textarea',
+      {
+        'ui-auto-fit': props.autoFit,
+        'ui-filled': props.filled,
+        'ui-spread': props.spread,
+        'ui-small': props.small,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label">
+      <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">
+      <textarea :id="fieldId" v-bind="$attrs" v-model="modelValue"></textarea>
+      <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'] || $slots['supporting-text']"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot
+      ><slot name="supporting-text"></slot>
+    </span>
+
+    <slot></slot>
+  </label>
+</template>

package/components/Textarea/types.astro.ts

@@ -1,10 +1,10 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props =
-  // Unique component props
-  Base.Props &
-    // All html label attributes
-    HTMLAttributes<"label"> &
-    // Some input attributes for spreading
-    Pick<HTMLAttributes<"textarea">, Base.TextareaProps>
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  // Unique component props
+  Base.Props &
+    // All html label attributes
+    HTMLAttributes<"label"> &
+    // Some input attributes for spreading
+    Pick<HTMLAttributes<"textarea">, Base.TextareaProps>

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

@@ -1,19 +1,19 @@
-import type { HTMLAttributes, Slot } from "vue"
-import type { Props as BaseProps } from "./types"
-
-export type Props = BaseProps & {
-  class?: HTMLAttributes["class"]
-  id?: HTMLAttributes["id"]
-}
-
-export type Slots = {
-  default?: Slot
-  description?: Slot
-  "end-text"?: Slot
-  footer?: Slot
-  header?: Slot
-  label?: Slot
-  prefix?: Slot
-  "supporting-text"?: Slot
-  suffix?: Slot
-}
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+  id?: HTMLAttributes["id"]
+}
+
+export type Slots = {
+  default?: Slot
+  description?: Slot
+  "end-text"?: Slot
+  footer?: Slot
+  header?: Slot
+  label?: Slot
+  prefix?: Slot
+  "supporting-text"?: Slot
+  suffix?: Slot
+}

package/components/Textarea/types.solid.ts

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

package/components/Textarea/types.svelte.ts

@@ -1,21 +1,21 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
-
-type InputProps = {
-  type?: SvelteHTMLElements["input"]["type"] | "numeric"
-}
-
-type Snippets = Base.Slots<Snippet>
-
-export type Props =
-  // Unique component props, except snippets
-  Omit<Base.Props, keyof Snippets> &
-    // All html label attributes, (except prefix)
-    Omit<SvelteHTMLElements["label"], "prefix"> &
-    // Some input attributes for spreading
-    Pick<SvelteHTMLElements["textarea"], Base.TextareaProps> &
-    // Special input type attribute with 'numeric'
-    InputProps &
-    // Snippets
-    Snippets
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type InputProps = {
+  type?: SvelteHTMLElements["input"]["type"] | "numeric"
+}
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props =
+  // Unique component props, except snippets
+  Omit<Base.Props, keyof Snippets> &
+    // All html label attributes, (except prefix)
+    Omit<SvelteHTMLElements["label"], "prefix"> &
+    // Some input attributes for spreading
+    Pick<SvelteHTMLElements["textarea"], Base.TextareaProps> &
+    // Special input type attribute with 'numeric'
+    InputProps &
+    // Snippets
+    Snippets

package/components/Textarea/types.ts

@@ -1,33 +1,33 @@
-export type Props = {
-  autoFit?: boolean
-  description?: string
-  error?: boolean
-  filled?: boolean
-  label?: string
-  spread?: boolean
-  small?: boolean
-  endText?: string
-}
-
-export type Slots<S> = {
-  description?: string | S
-  footer?: string | S
-  header?: string | S
-  label?: string | S
-  prefix?: string | S
-  startText?: string | S
-  suffix?: string | S
-  endText?: string | S
-  supportingText?: string | S
-}
-
-export type TextareaProps =
-  | "cols"
-  | "disabled"
-  | "maxlength"
-  | "minlength"
-  | "name"
-  | "placeholder"
-  | "required"
-  | "rows"
-  | "value"
+export type Props = {
+  autoFit?: boolean
+  description?: string
+  error?: boolean
+  filled?: boolean
+  label?: string
+  spread?: boolean
+  small?: boolean
+  endText?: string
+}
+
+export type Slots<S> = {
+  description?: string | S
+  footer?: string | S
+  header?: string | S
+  label?: string | S
+  prefix?: string | S
+  startText?: string | S
+  suffix?: string | S
+  endText?: string | S
+  supportingText?: string | S
+}
+
+export type TextareaProps =
+  | "cols"
+  | "disabled"
+  | "maxlength"
+  | "minlength"
+  | "name"
+  | "placeholder"
+  | "required"
+  | "rows"
+  | "value"

package/components/Toast/Toast.astro

@@ -1,42 +1,42 @@
----
-export const title = "Toast"
----
-
-<output aria-live="polite" id="toast-manager" popover="manual" role="status"
-></output>
-
-<template id="toast-template">
-  <div class="ui-toast" role="alert">
-    <span class="ui-icon" data-toast-icon></span>
-    <div class="ui-content">
-      <div class="ui-title" data-toast-title></div>
-      <div class="ui-description" data-toast-description></div>
-    </div>
-    <button
-      aria-label="Close"
-      class="ui-close-button"
-      data-toast-close
-      type="button"
-    >
-      <svg
-        fill="none"
-        height="20"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        viewBox="0 0 24 24"
-        width="20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M18 6 6 18"></path>
-        <path d="m6 6 12 12"></path>
-      </svg>
-    </button>
-  </div>
-</template>
-
-<script>
-  import { initToastManager } from "../../css/js/toast.js"
-  initToastManager()
-</script>
+---
+export const title = "Toast"
+---
+
+<output aria-live="polite" id="toast-manager" popover="manual" role="status"
+></output>
+
+<template id="toast-template">
+  <div class="ui-toast" role="alert">
+    <span class="ui-icon" data-toast-icon></span>
+    <div class="ui-content">
+      <div class="ui-title" data-toast-title></div>
+      <div class="ui-description" data-toast-description></div>
+    </div>
+    <button
+      aria-label="Close"
+      class="ui-close-button"
+      data-toast-close
+      type="button"
+    >
+      <svg
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M18 6 6 18"></path>
+        <path d="m6 6 12 12"></path>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script>
+  import { initToastManager } from "../../css/js/toast.js"
+  initToastManager()
+</script>

package/components/Toast/Toast.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import { onMounted } from "vue"
-import { initToastManager } from "../../css/js/toast.js"
-
-onMounted(() => {
-  initToastManager()
-})
-</script>
-
-<template>
-  <output
-    aria-live="polite"
-    id="toast-manager"
-    popover="manual"
-    role="status"
-  ></output>
-
-  <template id="toast-template">
-    <div class="ui-toast" role="alert">
-      <span class="ui-icon" data-toast-icon></span>
-      <div class="ui-content">
-        <div class="ui-title" data-toast-title></div>
-        <div class="ui-description" data-toast-description></div>
-      </div>
-      <button
-        aria-label="Close"
-        class="ui-close-button"
-        data-toast-close
-        type="button"
-      >
-        <svg
-          fill="none"
-          height="20"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M18 6 6 18"></path>
-          <path d="m6 6 12 12"></path>
-        </svg>
-      </button>
-    </div>
-  </template>
-</template>
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { initToastManager } from "../../css/js/toast.js"
+
+onMounted(() => {
+  initToastManager()
+})
+</script>
+
+<template>
+  <output
+    aria-live="polite"
+    id="toast-manager"
+    popover="manual"
+    role="status"
+  ></output>
+
+  <template id="toast-template">
+    <div class="ui-toast" role="alert">
+      <span class="ui-icon" data-toast-icon></span>
+      <div class="ui-content">
+        <div class="ui-title" data-toast-title></div>
+        <div class="ui-description" data-toast-description></div>
+      </div>
+      <button
+        aria-label="Close"
+        class="ui-close-button"
+        data-toast-close
+        type="button"
+      >
+        <svg
+          fill="none"
+          height="20"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
+      </button>
+    </div>
+  </template>
+</template>

package/components/ToggleButton/ToggleButton.astro

@@ -1,43 +1,43 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Toggle Button"
-
-const {
-  class: className,
-  disabled,
-  label,
-  name,
-  pressed,
-  size,
-  type,
-  value,
-  ...rest
-} = Astro.props
-
-const { $id, currentToggleGroupName, currentToggleGroupType } = Astro.locals
-const finalName = name || currentToggleGroupName
-const finalType = type || currentToggleGroupType || "checkbox"
-const id = rest.id || $id("toggle")
----
-
-<label
-  class:list={[
-    "ui-toggle-button",
-    { "ui-disabled": disabled },
-    size && `ui-${size}`,
-    className,
-  ]}
->
-  <input
-    aria-pressed={finalType === "checkbox" ? pressed : undefined}
-    checked={pressed}
-    disabled={disabled}
-    id={id}
-    name={finalName}
-    type={finalType}
-    value={value || label}
-    {...rest}
-  />
-  <slot />
-</label>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Toggle Button"
+
+const {
+  class: className,
+  disabled,
+  label,
+  name,
+  pressed,
+  size,
+  type,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentToggleGroupName, currentToggleGroupType } = Astro.locals
+const finalName = name || currentToggleGroupName
+const finalType = type || currentToggleGroupType || "checkbox"
+const id = rest.id || $id("toggle")
+---
+
+<label
+  class:list={[
+    "ui-toggle-button",
+    { "ui-disabled": disabled },
+    size && `ui-${size}`,
+    className,
+  ]}
+>
+  <input
+    aria-pressed={finalType === "checkbox" ? pressed : undefined}
+    checked={pressed}
+    disabled={disabled}
+    id={id}
+    name={finalName}
+    type={finalType}
+    value={value || label}
+    {...rest}
+  />
+  <slot />
+</label>

package/components/ToggleButton/ToggleButton.vue

@@ -1,41 +1,41 @@
-<script setup lang="ts">
-import { inject, useId } from "vue"
-import { ToggleGroupKey } from "../ToggleGroup/types.d.vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const { disabled, id, label, name, pressed, size, type, value } =
-  defineProps<Props>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const group = inject(ToggleGroupKey, undefined)
-const finalName = name || group?.name
-const finalType = type || group?.type || "checkbox"
-const inputId = id || useId()
-</script>
-
-<template>
-  <label
-    :class="[
-      'ui-toggle-button',
-      { 'ui-disabled': disabled },
-      size && `ui-${size}`,
-      $props.class,
-    ]"
-  >
-    <input
-      :aria-pressed="finalType === 'checkbox' ? pressed : undefined"
-      :checked="pressed"
-      :disabled="disabled"
-      :id="inputId"
-      :name="finalName"
-      :type="finalType"
-      :value="value || label"
-      v-bind="$attrs"
-    />
-    <slot></slot>
-  </label>
-</template>
+<script setup lang="ts">
+import { inject, useId } from "vue"
+import { ToggleGroupKey } from "../ToggleGroup/types.d.vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { disabled, id, label, name, pressed, size, type, value } =
+  defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const group = inject(ToggleGroupKey, undefined)
+const finalName = name || group?.name
+const finalType = type || group?.type || "checkbox"
+const inputId = id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-toggle-button',
+      { 'ui-disabled': disabled },
+      size && `ui-${size}`,
+      $props.class,
+    ]"
+  >
+    <input
+      :aria-pressed="finalType === 'checkbox' ? pressed : undefined"
+      :checked="pressed"
+      :disabled="disabled"
+      :id="inputId"
+      :name="finalName"
+      :type="finalType"
+      :value="value || label"
+      v-bind="$attrs"
+    />
+    <slot></slot>
+  </label>
+</template>