opui-css 4.1.0 → 5.0.1

package/components/TextField/TextField.astro

@@ -1,128 +1,128 @@
----
-type Props = {
-  [key: string]: any
-  autoFit?: boolean
-  class?: string
-  critical?: boolean
-  description?: string
-  disabled?: boolean
-  endText?: string
-  filled?: boolean
-  id?: string
-  label?: string
-  list?: string
-  max?: number | string
-  min?: number | string
-  name?: string
-  placeholder?: string
-  required?: boolean
-  small?: boolean
-  spread?: boolean
-  startText?: string
-  step?: number | string
-  type?:
-    | "color"
-    | "date"
-    | "datetime-local"
-    | "email"
-    | "file"
-    | "month"
-    | "numeric"
-    | "password"
-    | "search"
-    | "tel"
-    | "text"
-    | "time"
-    | "url"
-    | "week"
-  value?: string | number
-}
-
-export const title = "Text Field"
-
-const {
-  autoFit,
-  class: className,
-  critical,
-  description,
-  disabled,
-  endText,
-  filled,
-  id,
-  label,
-  list,
-  max,
-  min,
-  name,
-  placeholder,
-  required,
-  small,
-  spread,
-  startText,
-  step,
-  type = "text",
-  value,
-  ...rest
-} = Astro.props
-
-const startTextValue = description || startText
-const { $id, currentFieldName } = Astro.locals
-const fieldId = id || $id("text-field")
-const fieldName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "text-field",
-    {
-      "auto-fit": autoFit,
-      filled,
-      spread,
-      small,
-    },
-    className,
-  ]}
-  data-invalid={critical || undefined}
-  {...rest}
->
-  {
-    (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="label">{label}<slot name="label" /></span>
-    )
-  }
-  {
-    (startTextValue || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="start-text">{startTextValue}<slot name="description" /></span>
-    )
-  }
-  <span class="field">
-    <input
-      disabled={disabled}
-      id={fieldId}
-      inputmode={type === "numeric" ? "numeric" : undefined}
-      list={list}
-      max={max}
-      min={min}
-      name={fieldName}
-      pattern={type === "numeric" ? "[0-9]*" : undefined}
-      placeholder={placeholder}
-      required={required}
-      step={step}
-      type={type === "numeric" ? "text" : type}
-      value={value}
-    />
-    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
-  </span>
-  {
-    (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
-      <!-- prettier-ignore -->
-      <span class="end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
-    )
-  }
-  <slot />
-</label>
+---
+type Props = {
+  [key: string]: any
+  autoFit?: boolean
+  class?: string
+  critical?: boolean
+  description?: string
+  disabled?: boolean
+  endText?: string
+  filled?: boolean
+  id?: string
+  label?: string
+  list?: string
+  max?: number | string
+  min?: number | string
+  name?: string
+  placeholder?: string
+  required?: boolean
+  small?: boolean
+  spread?: boolean
+  startText?: string
+  step?: number | string
+  type?:
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "month"
+    | "numeric"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week"
+  value?: string | number
+}
+
+export const title = "Text Field"
+
+const {
+  autoFit,
+  class: className,
+  critical,
+  description,
+  disabled,
+  endText,
+  filled,
+  id,
+  label,
+  list,
+  max,
+  min,
+  name,
+  placeholder,
+  required,
+  small,
+  spread,
+  startText,
+  step,
+  type = "text",
+  value,
+  ...rest
+} = Astro.props
+
+const startTextValue = description || startText
+const { $id, currentFieldName } = Astro.locals
+const fieldId = id || $id("text-field")
+const fieldName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "ui-text-field",
+    {
+      "ui-auto-fit": autoFit,
+      "ui-filled": filled,
+      "ui-spread": spread,
+      "ui-small": small,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+  {...rest}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-label">{label}<slot name="label" /></span>
+    )
+  }
+  {
+    (startTextValue || Astro.slots.has("description")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-start-text">{startTextValue}<slot name="description" /></span>
+    )
+  }
+  <span class="ui-field">
+    <input
+      disabled={disabled}
+      id={fieldId}
+      inputmode={type === "numeric" ? "numeric" : undefined}
+      list={list}
+      max={max}
+      min={min}
+      name={fieldName}
+      pattern={type === "numeric" ? "[0-9]*" : undefined}
+      placeholder={placeholder}
+      required={required}
+      step={step}
+      type={type === "numeric" ? "text" : type}
+      value={value}
+    />
+    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
+  </span>
+  {
+    (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+    )
+  }
+  <slot />
+</label>

package/components/Textarea/Textarea.astro

@@ -1,106 +1,106 @@
----
-type Props = {
-  [key: string]: any
-  autoFit?: boolean
-  class?: string
-  cols?: number
-  description?: string
-  disabled?: boolean
-  critical?: boolean
-  filled?: boolean
-  id?: string
-  label?: string
-  maxlength?: number
-  minlength?: number
-  name?: string
-  spread?: boolean
-  placeholder?: string
-  required?: boolean
-  rows?: number
-  small?: boolean
-  endText?: string
-  value?: string
-}
-
-export const title = "Textarea"
-
-const {
-  autoFit,
-  class: className,
-  cols,
-  description,
-  disabled,
-  critical,
-  filled,
-  id,
-  label,
-  maxlength,
-  minlength,
-  name,
-  spread,
-  placeholder,
-  required,
-  rows,
-  small,
-  endText,
-  value,
-  ...rest
-} = Astro.props
-
-const { $id, currentFieldName } = Astro.locals
-const fieldId = id || $id("textarea")
-const fieldName = name || currentFieldName
----
-
-<label
-  class:list={[
-    "textarea",
-    {
-      "auto-fit": autoFit,
-      filled,
-      spread,
-      small,
-    },
-    className,
-  ]}
-  data-invalid={critical || undefined}
-  {...rest}
->
-{
-  (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="label">{label}<slot name="label" /></span>
-    )
-  }
-
-{
-  (description || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="start-text">{description}<slot name="description" /></span>
-    )
-  }
-  <span class="field">
-    <textarea
-      cols={cols}
-      disabled={disabled}
-      id={fieldId}
-      maxlength={maxlength}
-      minlength={minlength}
-      name={fieldName}
-      placeholder={placeholder}
-      required={required}
-      rows={rows}
-      value={value}></textarea>
-    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
-  </span>
-    {
-      (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
-      <!-- prettier-ignore -->
-      <span class="end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
-    )
-  }
-  <slot />
-</label>
+---
+type Props = {
+  [key: string]: any
+  autoFit?: boolean
+  class?: string
+  cols?: number
+  description?: string
+  disabled?: boolean
+  critical?: boolean
+  filled?: boolean
+  id?: string
+  label?: string
+  maxlength?: number
+  minlength?: number
+  name?: string
+  spread?: boolean
+  placeholder?: string
+  required?: boolean
+  rows?: number
+  small?: boolean
+  endText?: string
+  value?: string
+}
+
+export const title = "Textarea"
+
+const {
+  autoFit,
+  class: className,
+  cols,
+  description,
+  disabled,
+  critical,
+  filled,
+  id,
+  label,
+  maxlength,
+  minlength,
+  name,
+  spread,
+  placeholder,
+  required,
+  rows,
+  small,
+  endText,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const fieldId = id || $id("textarea")
+const fieldName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "ui-textarea",
+    {
+      "ui-auto-fit": autoFit,
+      "ui-filled": filled,
+      "ui-spread": spread,
+      "ui-small": small,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+  {...rest}
+>
+{
+  (label || Astro.slots.has("label")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-label">{label}<slot name="label" /></span>
+    )
+  }
+
+{
+  (description || Astro.slots.has("description")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-start-text">{description}<slot name="description" /></span>
+    )
+  }
+  <span class="ui-field">
+    <textarea
+      cols={cols}
+      disabled={disabled}
+      id={fieldId}
+      maxlength={maxlength}
+      minlength={minlength}
+      name={fieldName}
+      placeholder={placeholder}
+      required={required}
+      rows={rows}
+      value={value}></textarea>
+    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
+  </span>
+    {
+      (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
+      <!-- prettier-ignore -->
+      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+    )
+  }
+  <slot />
+</label>

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="toast" role="alert">
-    <span class="icon" data-toast-icon></span>
-    <div class="content">
-      <div class="title" data-toast-title></div>
-      <div class="description" data-toast-description></div>
-    </div>
-    <button
-      aria-label="Close"
-      class="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/ToggleButton/ToggleButton.astro

@@ -1,53 +1,53 @@
----
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  label?: string
-  name?: string
-  pressed?: boolean
-  size?: "small" | "x-small"
-  type?: "checkbox" | "radio"
-  value?: string
-}
-
-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={[
-    "toggle-button",
-    { selected: pressed, disabled },
-    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>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  disabled?: boolean
+  label?: string
+  name?: string
+  pressed?: boolean
+  size?: "small" | "x-small"
+  type?: "checkbox" | "radio"
+  value?: string
+}
+
+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>