opui-css 4.1.0 → 5.0.1

package/components/ListItem/ListItem.astro

@@ -1,118 +1,118 @@
----
-type Props = {
-  as?: "a" | "button" | "div"
-  borderTop?: boolean
-  class?: string
-  description?: string
-  for?: string
-  headline?: string
-  inset?: boolean
-  type?: "checkbox" | "radio" | "switch"
-  [key: string]: any
-}
-
-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={[
-    {
-      "border-top": borderTop,
-      inset,
-    },
-    className,
-  ]}
-  {...liProps}
->
-  {
-    // Label + checkbox/radio/switch
-    hasLabel ? (
-      <label class={labelClass} for={htmlFor}>
-        {Astro.slots.start && (
-          <div class="start">
-            <slot name="start" />
-          </div>
-        )}
-        {Astro.slots.text || headline || description ? (
-          <div class="text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-          </div>
-        ) : null}
-        {Astro.slots.end && (
-          <div class="end">
-            <slot name="end" />
-          </div>
-        )}
-        <slot />
-      </label>
-    ) : // With custom tag
-    Tag ? (
-      <Tag {...innerProps}>
-        {Astro.slots.start && (
-          <div class="start">
-            <slot name="start" />
-          </div>
-        )}
-        {headline || description || Astro.slots.text ? (
-          <div class="text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-            <slot />
-          </div>
-        ) : (
-          <slot />
-        )}
-        {Astro.slots.end && (
-          <div class="end">
-            <slot name="end" />
-          </div>
-        )}
-      </Tag>
-    ) : (
-      // Without custom tag
-      <>
-        {Astro.slots.start && (
-          <div class="start">
-            <slot name="start" />
-          </div>
-        )}
-        {headline || description || Astro.slots.text ? (
-          <div class="text">
-            {headline && <p>{headline}</p>}
-            {description && <p>{description}</p>}
-            <slot name="text" />
-            <slot />
-          </div>
-        ) : (
-          <slot />
-        )}
-        {Astro.slots.end && (
-          <div class="end">
-            <slot name="end" />
-          </div>
-        )}
-      </>
-    )
-  }
-</li>
+---
+type Props = {
+  as?: "a" | "button" | "div"
+  borderTop?: boolean
+  class?: string
+  description?: string
+  for?: string
+  headline?: string
+  inset?: boolean
+  type?: "checkbox" | "radio" | "switch"
+  [key: string]: any
+}
+
+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}
+>
+  {
+    // 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}>
+        {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/Progress/Progress.astro

@@ -1,40 +1,41 @@
----
-type Props = {
-  [key: string]: any
-  "aria-busy"?: "true" | "false" | boolean
-  "aria-describedby"?: string
-  "aria-label"?: string
-  class?: string
-  id?: string
-  max?: number | string
-  value?: number | string
-  variant?: "filled" | "default" | "tonal"
-}
-
-export const title = "Progress"
-
-const {
-  "aria-busy": ariaBusy,
-  "aria-describedby": ariaDescribedby,
-  "aria-label": ariaLabel,
-  class: className,
-  id,
-  max,
-  value,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<progress
-  aria-busy={ariaBusy}
-  aria-describedby={ariaDescribedby}
-  aria-label={ariaLabel}
-  class:list={["progress", className, variant]}
-  id={id}
-  max={max}
-  value={value}
-  {...rest}
->
-  <slot />
-</progress>
+---
+type Props = {
+  [key: string]: any
+  "aria-busy"?: "true" | "false" | boolean
+  "aria-describedby"?: string
+  "aria-label"?: string
+  class?: string
+  id?: string
+  max?: number | string
+  value?: number | string
+  variant?: "filled" | "default" | "tonal"
+}
+
+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>

package/components/Radio/Radio.astro

@@ -1,70 +1,70 @@
----
-import RadioInput from "./RadioInput.astro"
-
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  disabled?: boolean
-  critical?: boolean
-  hideLabel?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  size?: "small" | "large"
-  stack?: boolean
-  value?: string
-}
-
-export const title = "Radio"
-
-const {
-  checked,
-  class: className,
-  disabled,
-  critical,
-  hideLabel,
-  id,
-  name,
-  required,
-  size,
-  stack,
-  value,
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
-
-const finalName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "radio",
-    size,
-    {
-      stack,
-    },
-    className,
-  ]}
-  data-invalid={critical || undefined}
->
-  <RadioInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
-  <!-- prettier-ignore --><span class:list={[hideLabel ? "sr-only" : "label"]}><slot /></span>
-  {
-    Astro.slots.has("end-text") && (
-      <!-- prettier-ignore -->
-      <span id={endTextId} class="end-text"><slot name="end-text" /></span>
-    )
-  }
-</label>
+---
+import RadioInput from "./RadioInput.astro"
+
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  class?: string
+  disabled?: boolean
+  critical?: boolean
+  hideLabel?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  size?: "small" | "large"
+  stack?: boolean
+  value?: string
+}
+
+export const title = "Radio"
+
+const {
+  checked,
+  class: className,
+  disabled,
+  critical,
+  hideLabel,
+  id,
+  name,
+  required,
+  size,
+  stack,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
+
+const finalName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "ui-radio",
+    size && `ui-${size}`,
+    {
+      "ui-stack": stack,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  <RadioInput
+    aria-describedby={endTextId}
+    {checked}
+    {disabled}
+    {id}
+    name={finalName}
+    {required}
+    {value}
+    {...rest}
+  />
+  <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  {
+    Astro.slots.has("end-text") && (
+      <!-- prettier-ignore -->
+      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
+    )
+  }
+</label>

package/components/Radio/RadioInput.astro

@@ -1,24 +1,24 @@
----
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  value?: string
-}
-
-const { checked, disabled, id, name, required, value, ...rest } = Astro.props
----
-
-<input
-  type="radio"
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
-  {...rest}
-/>
+---
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  disabled?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  value?: string
+}
+
+const { checked, disabled, id, name, required, value, ...rest } = Astro.props
+---
+
+<input
+  type="radio"
+  {checked}
+  {disabled}
+  {id}
+  {name}
+  {required}
+  {value}
+  {...rest}
+/>