opui-css 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.0.1 - 2026-05-13
+
+### Fixed
+
+- Autosuggest arrow placement.
+
 ## 4.0.0
 
 Complete rewrite. The library now also ships as an installable npm package with Astro components.

package/components/Card/Card.astro

@@ -1,38 +1,38 @@
----
-type Props = {
-  variant?: "text" | "outlined" | "elevated" | "tonal"
-  actions?: {
-    align?: "end"
-  }
-  [key: string]: any
-}
-
-export const title = "Card"
-
-const { variant, actions, class: className, ...rest } = Astro.props
----
-
-<div class:list={["card", variant, className]} {...rest}>
-  {
-    Astro.slots.has("header") && (
-      <hgroup>
-        <slot name="header" />
-      </hgroup>
-    )
-  }
-  {
-    Astro.slots.has("content") && (
-      <div class="content">
-        <slot name="content" />
-      </div>
-    )
-  }
-  <slot />
-  {
-    Astro.slots.has("actions") && (
-      <div class:list={["actions", actions?.align && `align-${actions.align}`]}>
-        <slot name="actions" />
-      </div>
-    )
-  }
-</div>
+---
+type Props = {
+  variant?: "text" | "outlined" | "elevated" | "tonal"
+  actions?: {
+    align?: "end"
+  }
+  [key: string]: any
+}
+
+export const title = "Card"
+
+const { variant, actions, class: className, ...rest } = Astro.props
+---
+
+<div class:list={["card", variant, className]} {...rest}>
+  {
+    Astro.slots.has("header") && (
+      <hgroup>
+        <slot name="header" />
+      </hgroup>
+    )
+  }
+  {
+    Astro.slots.has("content") && (
+      <div class="content">
+        <slot name="content" />
+      </div>
+    )
+  }
+  <slot />
+  {
+    Astro.slots.has("actions") && (
+      <div class:list={["actions", actions?.align && `align-${actions.align}`]}>
+        <slot name="actions" />
+      </div>
+    )
+  }
+</div>

package/components/Chip/Chip.astro

@@ -1,37 +1,37 @@
----
-type Props = {
-  [key: string]: any
-  as?: "a" | "button" | "div" | string
-  class?: string
-  label?: string
-  multiline?: boolean
-  size?: "small"
-  variant?: "tonal" | "outlined"
-}
-
-export const title = "Chip"
-
-const {
-  as: Tag = Astro.props.href ? "a" : "div",
-  class: className,
-  label,
-  multiline,
-  size,
-  variant = "tonal",
-  ...rest
-} = Astro.props
----
-
-<!-- prettier-ignore -->
-<Tag
-  class:list={[
-    "chip",
-    {
-      multiline,
-    },
-    size,
-    variant,
-    className,
-  ]}
-  {...rest}
-><slot name="start" /><slot />{label && <span class="text">{label}</span>}<slot name="end" /></Tag>
+---
+type Props = {
+  [key: string]: any
+  as?: "a" | "button" | "div" | string
+  class?: string
+  label?: string
+  multiline?: boolean
+  size?: "small"
+  variant?: "tonal" | "outlined"
+}
+
+export const title = "Chip"
+
+const {
+  as: Tag = Astro.props.href ? "a" : "div",
+  class: className,
+  label,
+  multiline,
+  size,
+  variant = "tonal",
+  ...rest
+} = Astro.props
+---
+
+<!-- prettier-ignore -->
+<Tag
+  class:list={[
+    "chip",
+    {
+      multiline,
+    },
+    size,
+    variant,
+    className,
+  ]}
+  {...rest}
+><slot name="start" /><slot />{label && <span class="text">{label}</span>}<slot name="end" /></Tag>

package/components/DescriptionList/index.ts

@@ -1,12 +1,12 @@
-import DescriptionList from "./DescriptionList.astro"
-import Item from "./Item.astro"
-import Term from "./Term.astro"
-import Description from "./Description.astro"
-
-export { Item, Term, Description }
-
-export default Object.assign(DescriptionList, {
-  Item,
-  Term,
-  Description,
-})
+import DescriptionList from "./DescriptionList.astro"
+import Item from "./Item.astro"
+import Term from "./Term.astro"
+import Description from "./Description.astro"
+
+export { Item, Term, Description }
+
+export default Object.assign(DescriptionList, {
+  Item,
+  Term,
+  Description,
+})

package/components/List/List.astro

@@ -1,36 +1,36 @@
----
-type Props = {
-  bordered?: boolean
-  dense?: boolean
-  gutterless?: boolean
-  variant?: "default" | "tonal" | "transparent"
-  [key: string]: any
-}
-
-export const title = "List"
-
-const {
-  bordered,
-  class: className,
-  dense,
-  gutterless,
-  variant,
-  ...rest
-} = Astro.props
----
-
-<ul
-  class:list={[
-    "list",
-    {
-      bordered,
-      dense,
-      gutterless,
-    },
-    variant,
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</ul>
+---
+type Props = {
+  bordered?: boolean
+  dense?: boolean
+  gutterless?: boolean
+  variant?: "default" | "tonal" | "transparent"
+  [key: string]: any
+}
+
+export const title = "List"
+
+const {
+  bordered,
+  class: className,
+  dense,
+  gutterless,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<ul
+  class:list={[
+    "list",
+    {
+      bordered,
+      dense,
+      gutterless,
+    },
+    variant,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</ul>

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}
+/>

package/components/Switch/SwitchInput.astro

@@ -1,25 +1,25 @@
----
-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="checkbox"
-  role="switch"
-  {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="checkbox"
+  role="switch"
+  {checked}
+  {disabled}
+  {id}
+  {name}
+  {required}
+  {value}
+  {...rest}
+/>

package/components/Table/index.ts

@@ -1,20 +1,20 @@
-import Table from "./Table.astro"
-import Head from "./Head.astro"
-import Body from "./Body.astro"
-import Row from "./Row.astro"
-import HeaderCell from "./HeaderCell.astro"
-import Cell from "./Cell.astro"
-import Column from "./Column.astro"
-import ColumnGroup from "./ColumnGroup.astro"
-
-export { Head, Body, Row, HeaderCell, Cell, Column, ColumnGroup }
-
-export default Object.assign(Table, {
-  Head,
-  Body,
-  Row,
-  HeaderCell,
-  Cell,
-  Column,
-  ColumnGroup,
-})
+import Table from "./Table.astro"
+import Head from "./Head.astro"
+import Body from "./Body.astro"
+import Row from "./Row.astro"
+import HeaderCell from "./HeaderCell.astro"
+import Cell from "./Cell.astro"
+import Column from "./Column.astro"
+import ColumnGroup from "./ColumnGroup.astro"
+
+export { Head, Body, Row, HeaderCell, Cell, Column, ColumnGroup }
+
+export default Object.assign(Table, {
+  Head,
+  Body,
+  Row,
+  HeaderCell,
+  Cell,
+  Column,
+  ColumnGroup,
+})

package/css/components/text-field.css

@@ -39,7 +39,7 @@
       }
     }
 
-    :where(.field input, .field textarea, .field select) {
+    :where(.field) :where(input, textarea, select) {
       background: transparent;
       border: 0;
       color: var(--text-primary);

package/css/components/text-input.css

@@ -23,31 +23,42 @@
 
   /* Autosuggest */
   :where(.text-field:has(input[list])) {
+    .field {
+      position: relative;
+    }
 
     /* Hide native arrow */
-    input::-webkit-calendar-picker-indicator {
+    input[list]::-webkit-calendar-picker-indicator {
       cursor: pointer;
       opacity: 0;
       pointer-events: none;
       position: absolute;
     }
-  }
 
-  /* Arrow */
-  :where(.text-field:has(input[list]:placeholder-shown),
-    .text-field:has(input[list]):where(:focus-within, :hover)) {
-    &::after {
+    input[list] {
+      padding-inline-end: var(--size-8);
+    }
+
+    .field::after {
       block-size: 0;
       border-block-start: 5px solid;
       border-inline: 5px solid transparent;
       content: "";
-      display: inline-block;
-      flex-shrink: 0;
       inline-size: 0;
       inset: 50% var(--size-3) auto auto;
       pointer-events: none;
       position: absolute;
       translate: 0 -50%;
     }
+
+    &.small {
+      input[list] {
+        padding-inline-end: var(--size-7);
+      }
+
+      .field::after {
+        inset-inline-end: var(--size-2);
+      }
+    }
   }
 }

package/dist/opui.components.css

@@ -4406,7 +4406,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
 
-    :where(.field input, .field textarea, .field select) {
+    :where(.field) :where(input, textarea, select) {
       background: transparent;
       border: 0;
       color: var(--text-primary);
@@ -5011,32 +5011,43 @@ Lists meant to be used stand-alone or as part of Select elements
 
   /* Autosuggest */
   :where(.text-field:has(input[list])) {
+    .field {
+      position: relative;
+    }
 
     /* Hide native arrow */
-    input::-webkit-calendar-picker-indicator {
+    input[list]::-webkit-calendar-picker-indicator {
       cursor: pointer;
       opacity: 0;
       pointer-events: none;
       position: absolute;
     }
-  }
 
-  /* Arrow */
-  :where(.text-field:has(input[list]:placeholder-shown),
-    .text-field:has(input[list]):where(:focus-within, :hover)) {
-    &::after {
+    input[list] {
+      padding-inline-end: var(--size-8);
+    }
+
+    .field::after {
       block-size: 0;
       border-block-start: 5px solid;
       border-inline: 5px solid transparent;
       content: "";
-      display: inline-block;
-      flex-shrink: 0;
       inline-size: 0;
       inset: 50% var(--size-3) auto auto;
       pointer-events: none;
       position: absolute;
       translate: 0 -50%;
     }
+
+    &.small {
+      input[list] {
+        padding-inline-end: var(--size-7);
+      }
+
+      .field::after {
+        inset-inline-end: var(--size-2);
+      }
+    }
   }
 }