@flamingo-stack/openframe-frontend-core 0.0.327 → 0.0.328-snapshot.20260626183749

package/src/components/ui/autocomplete.tsx

@@ -19,6 +19,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon"
+import { TrashIcon } from "../icons-v2-generated/interface/trash-icon"
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon"
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon"
 
@@ -77,6 +78,11 @@ interface AutocompleteBaseProps<T = string> {
   creatable?: boolean
   /** Callback fired after a new option is created via creatable. Use it to persist the new option server-side, etc. */
   onCreateOption?: (inputValue: string) => void
+  /** Max length for a created option. When exceeded, creation is blocked and a hint is shown. Omit for no limit. */
+  maxCreateLength?: number
+  /** When set, each unselected option shows a hover trash button that calls this. Omit to hide delete. */
+  onDeleteOption?: (value: T) => void
+  isDeletingOption?: boolean
   /** When true, disables built-in client-side filtering (useful when options are filtered server-side via onInputChange) */
   disableClientFilter?: boolean
   /** Whether to show the chevron icon. Default true */
@@ -145,6 +151,9 @@ function AutocompleteInner<T = string>(
     loadingText = "Loading...",
     creatable = false,
     onCreateOption,
+    maxCreateLength,
+    onDeleteOption,
+    isDeletingOption = false,
     disableClientFilter = false,
     showChevron = true,
     clearOnOpen = true,
@@ -269,11 +278,12 @@ function AutocompleteInner<T = string>(
 
   // Show "+ Create" option when creatable is on, user typed something, and nothing matched
   const showCreateOption = creatable && inputValue.trim().length > 0 && filteredOptions.length === 0
+  const isCreateTooLong = maxCreateLength != null && inputValue.trim().length > maxCreateLength
 
   // Handle creating a new option
   const handleCreate = () => {
     const trimmed = inputValue.trim()
-    if (!trimmed) return
+    if (!trimmed || (maxCreateLength != null && trimmed.length > maxCreateLength)) return
 
     const newValue = trimmed as T
 
@@ -564,18 +574,24 @@ function AutocompleteInner<T = string>(
                 </div>
               ) : filteredOptions.length === 0 ? (
                 showCreateOption ? (
-                  <div
-                    role="option"
-                    aria-selected={false}
-                    className={cn(
-                      "flex items-center h-11 md:h-12 px-4 cursor-pointer transition-colors min-w-0",
-                      "text-h4 text-ods-accent",
-                      "hover:bg-ods-bg-hover"
-                    )}
-                    onClick={handleCreate}
-                  >
-                    <span className="truncate" title={`+ Create "${inputValue.trim()}"`}>+ Create &quot;{inputValue.trim()}&quot;</span>
-                  </div>
+                  isCreateTooLong ? (
+                    <div className="flex items-center h-11 md:h-12 px-[var(--spacing-system-mf)] text-h5 text-ods-error min-w-0">
+                      Maximum {maxCreateLength} characters
+                    </div>
+                  ) : (
+                    <div
+                      role="option"
+                      aria-selected={false}
+                      className={cn(
+                        "flex items-center h-11 md:h-12 px-[var(--spacing-system-mf)] cursor-pointer transition-colors min-w-0",
+                        "text-h4 text-ods-accent",
+                        "hover:bg-ods-bg-hover"
+                      )}
+                      onClick={handleCreate}
+                    >
+                      <span className="truncate" title={`+ Create "${inputValue.trim()}"`}>+ Create &quot;{inputValue.trim()}&quot;</span>
+                    </div>
+                  )
                 ) : (
                   <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
                     {freeSolo && inputValue.trim() ? (
@@ -596,7 +612,7 @@ function AutocompleteInner<T = string>(
                       role="option"
                       aria-selected={isSelected}
                       className={cn(
-                        "flex items-center h-11 md:h-12 px-4 cursor-pointer transition-colors border-b border-ods-border last:border-b-0",
+                        "group/item flex items-center h-11 md:h-12 px-[var(--spacing-system-mf)] cursor-pointer transition-colors border-b border-ods-border last:border-b-0",
                         "text-h4",
                         isHighlighted && "bg-ods-bg-surface",
                         isSelected ? "text-ods-accent" : "text-ods-text-primary",
@@ -606,11 +622,27 @@ function AutocompleteInner<T = string>(
                       onMouseEnter={() => setHighlightedIndex(index)}
                     >
                       {renderOption ? renderOption(option, isSelected) : (
-                        <div className="flex items-center justify-between w-full min-w-0">
+                        <div className="flex items-center justify-between gap-[var(--spacing-system-xsf)] w-full min-w-0">
                           <span className="truncate" title={option.label}>{option.label}</span>
-                          {isSelected && (
-                            <CheckIcon className="text-ods-accent" size={20} />
-                          )}
+                          <div className="flex items-center gap-[var(--spacing-system-xsf)] shrink-0">
+                            {isSelected && (
+                              <CheckIcon className="text-ods-accent" size={20} />
+                            )}
+                            {onDeleteOption && !isSelected && (
+                              <button
+                                type="button"
+                                aria-label={`Delete ${option.label}`}
+                                onClick={e => {
+                                  e.stopPropagation()
+                                  onDeleteOption(option.value)
+                                }}
+                                disabled={isDeletingOption}
+                                className="opacity-0 transition-opacity group-hover/item:opacity-100 focus-visible:opacity-100 disabled:opacity-50 disabled:pointer-events-none"
+                              >
+                                <TrashIcon className="size-4 text-ods-error" />
+                              </button>
+                            )}
+                          </div>
                         </div>
                       )}
                     </div>

package/src/components/ui/file-upload.tsx

@@ -1,8 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { Loader2, X } from "lucide-react"
+import { Loader2 } from "lucide-react"
 import { ImagePlusIcon } from "../icons-v2-generated/audio-and-visual/image-plus-icon"
+import { Download02Icon } from "../icons-v2-generated/interface/download-02-icon"
+import { TrashIcon } from "../icons-v2-generated/interface/trash-icon"
+import { FileIcon } from "../icons-v2-generated/documents/file-icon"
 import { cn } from "../../utils/cn"
 import { FieldWrapper } from "./field-wrapper"
 
@@ -33,6 +36,8 @@ export interface FileUploadProps {
   managedFiles?: ManagedFileEntry[]
   /** Callback to remove a managed file by its id. Required when `managedFiles` is provided. */
   onRemoveManagedFile?: (id: string) => void
+  /** When provided, an uploaded managed file shows a download action that calls this with its id. */
+  onDownloadManagedFile?: (id: string) => void
   /** Accepted MIME types (e.g., "image/*", ".pdf,.doc") */
   accept?: string
   /** Maximum file size in bytes. Default: 10MB */
@@ -103,6 +108,7 @@ export function FileUpload({
   onChange,
   managedFiles,
   onRemoveManagedFile,
+  onDownloadManagedFile,
   accept = "*/*",
   maxSize = 10 * 1024 * 1024,
   maxFiles = 10,
@@ -283,8 +289,9 @@ export function FileUpload({
 
   const displayError = error || validationError || undefined
   const hasFiles = isManaged ? managedFiles.length > 0 : files.length > 0
-  const fileCount = currentCount
-  const canAddMore = multiple && fileCount < maxFiles
+  // Single-file mode hides the dropzone once a file is picked (no more to add);
+  // multiple keeps it visible to keep attaching.
+  const showDropzone = multiple || !hasFiles
 
   return (
     <FieldWrapper label={fieldLabel} error={displayError} className={className}>
@@ -298,42 +305,14 @@ export function FileUpload({
         disabled={disabled}
       />
 
-      {/* Primary dropzone */}
-      {!hasFiles && (
-        <button
-          type="button"
-          onDragEnter={handleDrag}
-          onDragLeave={handleDrag}
-          onDragOver={handleDrag}
-          onDrop={handleDrop}
-          onClick={openDialog}
-          disabled={disabled}
-          className={cn(
-            "flex w-full items-center gap-2 p-3 rounded-[6px] border border-dashed cursor-pointer text-left",
-            "transition-colors duration-200",
-            "bg-ods-card border-ods-border",
-            dragActive && "border-ods-accent bg-ods-accent/5",
-            !dragActive && "hover:border-ods-accent/30",
-            disabled && "opacity-50 cursor-not-allowed hover:border-ods-border",
-          )}
-        >
-          <div className="flex items-center p-3 rounded-full bg-ods-card border border-ods-border shrink-0">
-            {icon || <ImagePlusIcon className="size-6 text-ods-text-primary" />}
-          </div>
-          <div className="flex flex-1 flex-col font-['DM_Sans'] font-medium min-w-0">
-            <span className="text-heading-4 text-ods-text-primary">{label}</span>
-            <span className="text-heading-5 text-ods-text-secondary">{description}</span>
-          </div>
-        </button>
-      )}
-
-      {/* File list */}
-      {hasFiles && (
-        <div className="flex flex-col gap-2">
+      {/* File list (above) + upload dropzone — single bordered list, file-type icon + name/size + actions per row */}
+      <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
+        {hasFiles && (
           <div
             className={cn(
-              "flex flex-col gap-2 rounded-[6px] transition-colors duration-200",
-              dragActive && "bg-ods-accent/5",
+              "flex flex-col rounded-[6px] border border-ods-border bg-ods-card transition-colors duration-200",
+              !maxListHeight && "overflow-hidden",
+              dragActive && "border-ods-accent",
             )}
             style={maxListHeight ? { maxHeight: typeof maxListHeight === "number" ? `${maxListHeight}px` : maxListHeight, overflowY: "auto" } : undefined}
           >
@@ -342,39 +321,52 @@ export function FileUpload({
                   <div
                     key={entry.id}
                     className={cn(
-                      "flex items-center gap-3 p-3 rounded-[6px] bg-ods-card border",
-                      entry.status === "error" ? "border-[var(--ods-attention-red-error)]/40" : "border-ods-border",
+                      "flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)] border-b border-ods-border last:border-b-0",
+                      entry.status === "error" && "bg-ods-error/5",
                     )}
                   >
+                    <div className="flex items-center justify-center size-10 rounded-[6px] border border-ods-border bg-ods-card shrink-0">
+                      <FileIcon className="size-6 text-ods-text-secondary" />
+                    </div>
                     <div className="flex-1 min-w-0">
-                      <p className="text-heading-5 font-medium text-ods-text-primary truncate" title={entry.fileName}>
+                      <p className="text-heading-4 font-medium text-ods-text-primary truncate" title={entry.fileName}>
                         {entry.fileName}
                       </p>
-                      <div className="flex items-center gap-2">
-                        <span className="text-heading-6 text-ods-text-secondary">
+                      <div className="flex items-center gap-[var(--spacing-system-xsf)]">
+                        <span className="text-heading-5 text-ods-text-secondary">
                           {formatFileSize(entry.fileSize)}
                         </span>
                         {entry.status === "uploading" && (
-                          <span className="flex items-center gap-1 text-heading-6 text-ods-text-secondary">
+                          <span className="flex items-center gap-[var(--spacing-system-xxs)] text-heading-5 text-ods-text-secondary">
                             <Loader2 className="size-3 animate-spin" />
                             Uploading...
                           </span>
                         )}
                         {entry.status === "error" && (
-                          <span className="text-heading-6 text-[var(--ods-attention-red-error)]">
+                          <span className="text-heading-5 text-ods-error">
                             {entry.error || "Upload failed"}
                           </span>
                         )}
                       </div>
                     </div>
+                    {onDownloadManagedFile && entry.status === "uploaded" && (
+                      <button
+                        type="button"
+                        onClick={() => onDownloadManagedFile(entry.id)}
+                        className="shrink-0 text-ods-text-secondary hover:text-ods-text-primary transition-colors"
+                        aria-label={`Download ${entry.fileName}`}
+                      >
+                        <Download02Icon className="size-6" />
+                      </button>
+                    )}
                     {!disabled && (
                       <button
                         type="button"
                         onClick={() => onRemoveManagedFile?.(entry.id)}
-                        className="shrink-0 p-1 rounded hover:bg-ods-bg transition-colors"
+                        className="shrink-0 text-ods-error hover:opacity-80 transition-opacity"
                         aria-label={`Remove ${entry.fileName}`}
                       >
-                        <X className="size-4 text-ods-text-secondary" />
+                        <TrashIcon className="size-6" />
                       </button>
                     )}
                   </div>
@@ -382,13 +374,16 @@ export function FileUpload({
               : files.map((file, index) => (
                   <div
                     key={`${file.name}-${index}`}
-                    className="flex items-center gap-3 p-3 rounded-[6px] bg-ods-card border border-ods-border"
+                    className="flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)] border-b border-ods-border last:border-b-0"
                   >
+                    <div className="flex items-center justify-center size-10 rounded-[6px] border border-ods-border bg-ods-card shrink-0">
+                      <FileIcon className="size-6 text-ods-text-secondary" />
+                    </div>
                     <div className="flex-1 min-w-0">
-                      <p className="text-heading-5 font-medium text-ods-text-primary truncate" title={file.name}>
+                      <p className="text-heading-4 font-medium text-ods-text-primary truncate" title={file.name}>
                         {file.name}
                       </p>
-                      <p className="text-heading-6 text-ods-text-secondary">
+                      <p className="text-heading-5 text-ods-text-secondary">
                         {formatFileSize(file.size)}
                       </p>
                     </div>
@@ -396,43 +391,46 @@ export function FileUpload({
                       <button
                         type="button"
                         onClick={() => handleRemoveFile(index)}
-                        className="shrink-0 p-1 rounded hover:bg-ods-bg transition-colors"
+                        className="shrink-0 text-ods-error hover:opacity-80 transition-opacity"
                         aria-label={`Remove ${file.name}`}
                       >
-                        <X className="size-4 text-ods-text-secondary" />
+                        <TrashIcon className="size-6" />
                       </button>
                     )}
                   </div>
                 ))
             }
           </div>
+        )}
 
-          {/* Add more button */}
-          {canAddMore && (
-            <button
-              type="button"
-              onClick={openDialog}
-              onDragEnter={handleDrag}
-              onDragLeave={handleDrag}
-              onDragOver={handleDrag}
-              onDrop={handleDrop}
-              disabled={disabled}
-              className={cn(
-                "flex items-center justify-center gap-2 p-3 rounded-[6px]",
-                "border border-dashed",
-                "text-heading-5 font-medium",
-                "transition-colors duration-200",
-                dragActive
-                  ? "border-ods-accent bg-ods-accent/5 text-ods-text-primary"
-                  : "border-ods-border text-ods-text-secondary hover:border-ods-accent/30 hover:text-ods-text-primary",
-                disabled && "opacity-50 cursor-not-allowed",
-              )}
-            >
-              Add more files
-            </button>
+        {showDropzone && (
+        <button
+          type="button"
+          onDragEnter={handleDrag}
+          onDragLeave={handleDrag}
+          onDragOver={handleDrag}
+          onDrop={handleDrop}
+          onClick={openDialog}
+          disabled={disabled}
+          className={cn(
+            "flex w-full items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-sf)] rounded-[6px] border border-dashed cursor-pointer text-left",
+            "transition-colors duration-200",
+            "bg-ods-card border-ods-border",
+            dragActive && "border-ods-accent bg-ods-accent/5",
+            !dragActive && "hover:border-ods-accent/30",
+            disabled && "opacity-50 cursor-not-allowed hover:border-ods-border",
           )}
-        </div>
-      )}
+        >
+          <div className="flex items-center p-[var(--spacing-system-sf)] rounded-full bg-ods-card border border-ods-border shrink-0">
+            {icon || <ImagePlusIcon className="size-6 text-ods-text-primary" />}
+          </div>
+          <div className="flex flex-1 flex-col font-['DM_Sans'] font-medium min-w-0">
+            <span className="text-heading-4 text-ods-text-primary">{label}</span>
+            <span className="text-heading-5 text-ods-text-secondary">{description}</span>
+          </div>
+        </button>
+        )}
+      </div>
     </FieldWrapper>
   )
 }

package/src/components/ui/image-uploader.tsx

@@ -41,6 +41,11 @@ export interface ImageUploaderProps {
   alt?: string
   /** Extra className on the FieldWrapper root. */
   className?: string
+  /**
+   * Extra className on the dropzone element itself. Merged after the defaults, so it can
+   * override the built-in sizing (e.g. pass `h-[148px]` to replace the default `h-44`).
+   */
+  dropzoneClassName?: string
 }
 
 const DEFAULT_MAX_SIZE = 25 * 1024 * 1024
@@ -85,6 +90,7 @@ export function ImageUploader({
   objectFit = "cover",
   alt = "Uploaded image",
   className,
+  dropzoneClassName,
 }: ImageUploaderProps) {
   const inputRef = React.useRef<HTMLInputElement>(null)
   const [dragActive, setDragActive] = React.useState(false)
@@ -183,6 +189,7 @@ export function ImageUploader({
           !hasImage && interactive && !isActionState && "cursor-pointer hover:bg-ods-bg-hover hover:border-ods-border-hover",
           !interactive && "opacity-60",
           !hasImage && !interactive && "cursor-not-allowed",
+          dropzoneClassName,
         )}
       >
 

package/src/components/ui/index.ts

@@ -26,6 +26,7 @@ export * from './progress-bar'
 export * from './radio-group'
 export * from './select'
 export * from './switch'
+export * from './tag-select-dropdown'
 export * from './tags-input'
 export * from './tags-manager'
 export * from './textarea'

package/src/components/ui/tag-select-dropdown.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { CheckIcon, PlusIcon, SearchIcon, TrashIcon } from '../icons-v2-generated'
+import { Button } from './button'
+import { Input } from './input'
+
+export interface TagSelectOption {
+  id: string
+  label: string
+}
+
+export interface TagSelectDropdownProps {
+  /** All selectable tags. */
+  options: TagSelectOption[]
+  /** IDs of the currently selected tags. */
+  selectedIds: string[]
+  /** Called with the next full selection whenever a tag is toggled. */
+  onChange: (ids: string[]) => void
+  /** Called when the inline "Create" row is chosen. Omit to disable creation. */
+  onCreate?: (name: string) => void
+  /** Max length for a newly created tag name. Omit for no limit. */
+  maxCreateLength?: number
+  /** Called when a row's hover trash button is clicked. Omit to hide delete. */
+  onDelete?: (id: string) => void
+  isCreating?: boolean
+  isDeleting?: boolean
+  /** Trigger button label. */
+  triggerLabel?: string
+  searchPlaceholder?: string
+  disabled?: boolean
+  align?: 'start' | 'center' | 'end'
+  /** Forwarded to the trigger button. */
+  className?: string
+}
+
+/**
+ * Multi-select tag picker rendered as a button-triggered dropdown (the
+ * multi-select sibling of the compact `AssigneeDropdown`): a trigger opens a
+ * popover with an internal search field, a checkable option list, and an
+ * inline "Create" row. Selected chips are rendered by the caller.
+ */
+export function TagSelectDropdown({
+  options,
+  selectedIds,
+  onChange,
+  onCreate,
+  maxCreateLength,
+  onDelete,
+  isCreating = false,
+  isDeleting = false,
+  triggerLabel = 'Add Tags',
+  searchPlaceholder = 'Search or create tags...',
+  disabled = false,
+  align = 'start',
+  className,
+}: TagSelectDropdownProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+
+  React.useEffect(() => {
+    if (!isOpen) setSearch('')
+  }, [isOpen])
+
+  const query = search.trim()
+  const filtered = React.useMemo(() => {
+    const q = query.toLowerCase()
+    if (!q) return options
+    return options.filter(o => o.label.toLowerCase().includes(q))
+  }, [options, query])
+
+  // Selected tags float to the top of the list.
+  const ordered = React.useMemo(() => {
+    const selected = filtered.filter(o => selectedIds.includes(o.id))
+    const rest = filtered.filter(o => !selectedIds.includes(o.id))
+    return [...selected, ...rest]
+  }, [filtered, selectedIds])
+
+  const showCreate = !!onCreate && !!query && !options.some(o => o.label.toLowerCase() === query.toLowerCase())
+  const isCreateTooLong = maxCreateLength != null && query.length > maxCreateLength
+  const canCreate = showCreate && !isCreateTooLong
+
+  const toggle = (id: string) => {
+    onChange(selectedIds.includes(id) ? selectedIds.filter(i => i !== id) : [...selectedIds, id])
+  }
+
+  const handleCreate = () => {
+    if (!onCreate || !canCreate) return
+    onCreate(query)
+    setSearch('')
+  }
+
+  return (
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen} modal={false}>
+      <PopoverPrimitive.Trigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="small"
+          leftIcon={<PlusIcon />}
+          disabled={disabled}
+          className={cn('w-fit focus-visible:ring-0', className)}
+        >
+          {triggerLabel}
+        </Button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align={align}
+          sideOffset={6}
+          className={cn(
+            'z-50 w-72 bg-ods-card border border-ods-border rounded-[6px] shadow-lg overflow-hidden',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+          )}
+        >
+          <div className="border-b border-ods-border">
+            <Input
+              autoFocus
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' && canCreate) {
+                  e.preventDefault()
+                  handleCreate()
+                }
+              }}
+              placeholder={searchPlaceholder}
+              startAdornment={<SearchIcon className="size-4 text-ods-text-secondary" />}
+              className="rounded-none border-0"
+            />
+          </div>
+          <div className="max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+            {ordered.map(opt => {
+              const isSelected = selectedIds.includes(opt.id)
+              return (
+                <div
+                  key={opt.id}
+                  role="option"
+                  aria-selected={isSelected}
+                  tabIndex={0}
+                  onClick={() => toggle(opt.id)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      toggle(opt.id)
+                    }
+                  }}
+                  className={cn(
+                    'group/item flex items-center gap-[var(--spacing-system-xs)] w-full cursor-pointer text-left',
+                    'px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)]',
+                    'hover:bg-ods-bg-hover transition-colors',
+                    isSelected && 'bg-ods-bg-hover',
+                  )}
+                >
+                  <span
+                    className={cn('flex-1 truncate text-h4', isSelected ? 'text-ods-accent' : 'text-ods-text-primary')}
+                    title={opt.label}
+                  >
+                    {opt.label}
+                  </span>
+                  {isSelected && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
+                  {onDelete && !isSelected && (
+                    <button
+                      type="button"
+                      aria-label={`Delete tag ${opt.label}`}
+                      onClick={e => {
+                        e.stopPropagation()
+                        onDelete(opt.id)
+                      }}
+                      disabled={isDeleting}
+                      className={cn(
+                        'shrink-0 opacity-0 transition-opacity group-hover/item:opacity-100 focus-visible:opacity-100',
+                        'disabled:opacity-50 disabled:pointer-events-none',
+                      )}
+                    >
+                      <TrashIcon className="size-4 text-ods-error" />
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+
+            {showCreate &&
+              (isCreateTooLong ? (
+                <div className="flex items-center gap-[var(--spacing-system-xs)] w-full px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-h5 text-ods-error">
+                  Maximum {maxCreateLength} characters
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={handleCreate}
+                  disabled={isCreating}
+                  className={cn(
+                    'flex items-center gap-[var(--spacing-system-xs)] w-full px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
+                    'hover:bg-ods-bg-hover transition-colors disabled:opacity-50 disabled:pointer-events-none',
+                  )}
+                >
+                  <PlusIcon className="size-4 shrink-0 text-ods-accent" />
+                  <span className="flex-1 truncate text-h4 text-ods-accent" title={`Create "${query}"`}>
+                    Create &ldquo;{query}&rdquo;
+                  </span>
+                </button>
+              ))}
+
+            {filtered.length === 0 && !showCreate && (
+              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
+                No tags found
+              </div>
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}