@infonomic/uikit 6.4.0 → 6.5.0

package/dist/components/inputs/@types/autocomplete.d.ts

@@ -0,0 +1,35 @@
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * Available visual style variants for the Autocomplete input.
+ */
+export declare const variant: readonly ["outlined", "filled", "underlined"];
+/**
+ * Visual style variant of the autocomplete input field.
+ *
+ * - `outlined`   — full border on all sides with a transparent background (default)
+ * - `filled`     — tinted background
+ * - `underlined` — bottom border only, no background (minimal style)
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number];
+/**
+ * Available size tokens for the Autocomplete component.
+ */
+export declare const size: readonly ["sm", "md", "lg"];
+/**
+ * Visual size of the autocomplete component.
+ *
+ * - `sm` — compact, suitable for inline forms or dense layouts
+ * - `md` — standard form size (default)
+ * - `lg` — large, prominent input
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number];
+/**
+ * Semantic color intent applied to the autocomplete border and focus ring.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/inputs/@types/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/@types/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AACH,eAAO,MAAM,OAAO,+CAAgD,CAAA;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA"}

package/dist/components/inputs/@types/autocomplete.js

@@ -0,0 +1,11 @@
+const variant = [
+    'outlined',
+    'filled',
+    'underlined'
+];
+const size = [
+    'sm',
+    'md',
+    'lg'
+];
+export { size, variant };

package/dist/components/inputs/autocomplete.d.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
+import type { Intent, Size, Variant } from './@types/autocomplete.js';
+type AutocompleteRootProps = React.ComponentProps<typeof AutocompletePrimitive.Root>;
+export interface AutocompleteProps<Item = string> extends Omit<AutocompleteRootProps, 'items' | 'children'> {
+    id: string;
+    label?: string;
+    variant?: Variant;
+    inputSize?: Size;
+    intent?: Intent;
+    required?: boolean;
+    placeholder?: string;
+    autoComplete?: string;
+    error?: boolean;
+    helpText?: string;
+    errorText?: string;
+    emptyText?: string;
+    className?: string;
+    inputClassName?: string;
+    wrapperClassName?: string;
+    items: Item[];
+    children: React.ComponentProps<typeof AutocompletePrimitive.List>['children'];
+    sideOffset?: number;
+}
+export declare function Autocomplete<Item = string>({ id, label, variant, inputSize, intent, required, placeholder, autoComplete, error, helpText, errorText, emptyText, className, inputClassName, wrapperClassName, items, children, sideOffset, ...rest }: AutocompleteProps<Item>): React.JSX.Element;
+export declare const AutocompleteItem: {
+    ({ ref: forwardedRef, children, className, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Item> & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export declare const AutocompleteGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteGroupLabel: {
+    ({ children, className, ...props }: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>): React.JSX.Element;
+    displayName: string;
+};
+export declare const AutocompleteSeparator: {
+    ({ className, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Separator>): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/inputs/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAOnF,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAErE,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAA;AAEpF,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,MAAM,CAC9C,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,CAAC;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAA;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,IAAI,GAAG,MAAM,EAAE,EAC1C,EAAE,EACF,KAAK,EACL,OAAoB,EACpB,SAAgB,EAChB,MAAkB,EAClB,QAAQ,EACR,WAAgB,EAChB,YAAoB,EACpB,KAAa,EACb,QAAa,EACb,SAAc,EACd,SAA+B,EAC/B,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,UAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,IAAI,CAAC,qBA8DzB;AAED,eAAO,MAAM,gBAAgB;2DAK1B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;QAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAUA,CAAA;AAID,eAAO,MAAM,iBAAiB,qIAA8B,CAAA;AAC5D,eAAO,MAAM,sBAAsB;wCAIhC,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC;;CAS/D,CAAA;AAID,eAAO,MAAM,qBAAqB;8BAG/B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC;;CAO9D,CAAA"}

package/dist/components/inputs/autocomplete.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import classnames from "classnames";
+import autocomplete_module from "./autocomplete.module.js";
+import { ErrorText } from "./error-text.js";
+import { HelpText } from "./help-text.js";
+import { Label } from "./label.js";
+function autocomplete_Autocomplete({ id, label, variant = 'outlined', inputSize = 'md', intent = 'primary', required, placeholder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', emptyText = 'No results found.', className, inputClassName, wrapperClassName, items, children, sideOffset = 4, ...rest }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('infonomic-autocomplete-wrapper', autocomplete_module["autocomplete-wrapper"], wrapperClassName),
+        children: [
+            /*#__PURE__*/ jsxs(Autocomplete.Root, {
+                items: items,
+                ...rest,
+                children: [
+                    null != label && /*#__PURE__*/ jsx(Label, {
+                        id: id,
+                        htmlFor: id,
+                        required: required,
+                        label: label
+                    }),
+                    /*#__PURE__*/ jsx(Autocomplete.Input, {
+                        id: id,
+                        placeholder: placeholder,
+                        autoComplete: autoComplete,
+                        "aria-labelledby": label ? `label-for-${id}` : void 0,
+                        "aria-invalid": error,
+                        "aria-required": required,
+                        "aria-errormessage": error ? errorText : void 0,
+                        "aria-describedby": error ? `error-for-${id}` : void 0,
+                        className: classnames('infonomic-autocomplete-input', `infonomic-autocomplete-input-${variant}`, `infonomic-autocomplete-input-${inputSize}`, `infonomic-autocomplete-input-${intent}`, autocomplete_module.input, autocomplete_module[variant], autocomplete_module[inputSize], autocomplete_module[intent], {
+                            [autocomplete_module.error]: error
+                        }, className, inputClassName)
+                    }),
+                    /*#__PURE__*/ jsx(Autocomplete.Portal, {
+                        children: /*#__PURE__*/ jsx(Autocomplete.Positioner, {
+                            className: classnames('infonomic-autocomplete-positioner', autocomplete_module.positioner),
+                            sideOffset: sideOffset,
+                            children: /*#__PURE__*/ jsxs(Autocomplete.Popup, {
+                                className: classnames('infonomic-autocomplete-popup', autocomplete_module.popup, null != inputSize && autocomplete_module[`popup-${inputSize}`]),
+                                children: [
+                                    /*#__PURE__*/ jsx(Autocomplete.Empty, {
+                                        className: classnames('infonomic-autocomplete-empty', autocomplete_module.empty),
+                                        children: emptyText
+                                    }),
+                                    /*#__PURE__*/ jsx(Autocomplete.List, {
+                                        className: classnames('infonomic-autocomplete-list', autocomplete_module.list),
+                                        children: children
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                size: inputSize,
+                text: errorText ?? helpText
+            }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                size: inputSize,
+                text: helpText
+            })
+        ]
+    });
+}
+const AutocompleteItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.Item, {
+        className: classnames('infonomic-autocomplete-item', autocomplete_module["autocomplete-item"], className),
+        ...props,
+        ref: forwardedRef,
+        children: children
+    });
+AutocompleteItem.displayName = 'AutocompleteItem';
+const AutocompleteGroup = Autocomplete.Group;
+const AutocompleteGroupLabel = ({ children, className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.GroupLabel, {
+        className: classnames('infonomic-autocomplete-group-label', autocomplete_module["group-label"], className),
+        ...props,
+        children: children
+    });
+AutocompleteGroupLabel.displayName = 'AutocompleteGroupLabel';
+const AutocompleteSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.Separator, {
+        className: classnames('infonomic-autocomplete-separator', autocomplete_module.separator, className),
+        ...props
+    });
+AutocompleteSeparator.displayName = 'AutocompleteSeparator';
+export { AutocompleteGroup, AutocompleteGroupLabel, AutocompleteItem, AutocompleteSeparator, autocomplete_Autocomplete as Autocomplete };

package/dist/components/inputs/autocomplete.module.css

@@ -0,0 +1,371 @@
+@layer infonomic-base,
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
+
+@layer infonomic-components {
+
+  /* ── Wrapper ── */
+
+  .autocomplete-wrapper,
+  :global(.infonomic-autocomplete-wrapper) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+  }
+
+  /* ── Input ── */
+
+  .input,
+  :global(.infonomic-autocomplete-input) {
+    border: none;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    font-weight: normal;
+    display: inline-flex;
+    gap: var(--gap-2);
+    align-items: center;
+    width: 100%;
+    transition: all var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .input:focus,
+  .input:active,
+  :global(.infonomic-autocomplete-input):focus,
+  :global(.infonomic-autocomplete-input):active {
+    outline-color: var(--ring-color);
+  }
+
+  .input:disabled,
+  .input[disabled],
+  :global(.infonomic-autocomplete-input):disabled,
+  :global(.infonomic-autocomplete-input)[disabled] {
+    pointer-events: none;
+  }
+
+  /* ── Sizes ── */
+
+  .sm,
+  :global(.infonomic-autocomplete-input-sm) {
+    min-height: 32px;
+    font-size: 0.875rem;
+    line-height: 0;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md,
+  :global(.infonomic-autocomplete-input-md) {
+    min-height: 36px;
+    font-size: 1rem;
+    line-height: 0;
+    padding: 0.3rem 0.5rem;
+  }
+
+  .lg,
+  :global(.infonomic-autocomplete-input-lg) {
+    min-height: 40px;
+    font-size: 1.175rem;
+    line-height: 0;
+    padding: 0.4rem 0.5rem;
+  }
+
+  /* ── Variants ── */
+
+  .outlined,
+  :global(.infonomic-autocomplete-input-outlined) {
+    border: 1px solid var(--input-variant-outlined-border);
+    background-color: transparent;
+  }
+
+  .outlined:hover,
+  :global(.infonomic-autocomplete-input-outlined):hover {
+    border: 1px solid var(--input-variant-outlined-hover-border);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.infonomic-autocomplete-input-outlined):focus,
+  :global(.infonomic-autocomplete-input-outlined):active {
+    --ring-color: var(--input-variant-outline-ring-color);
+  }
+
+  .underlined,
+  :global(.infonomic-autocomplete-input-underlined) {
+    border-bottom: 1px solid var(--input-variant-underlined-border);
+    border-radius: 0;
+    gap: var(--gap-1);
+    background-color: var(--input-variant-underlined);
+  }
+
+  .underlined.sm,
+  :global(.infonomic-autocomplete-input-underlined.infonomic-autocomplete-input-sm) {
+    padding: 0.25rem 0.1rem;
+    min-height: 26px;
+  }
+
+  .underlined.md,
+  :global(.infonomic-autocomplete-input-underlined.infonomic-autocomplete-input-md) {
+    padding: 0.25rem 0.1rem;
+    min-height: 30px;
+  }
+
+  .underlined.lg,
+  :global(.infonomic-autocomplete-input-underlined.infonomic-autocomplete-input-lg) {
+    padding: 0 0.1rem;
+    min-height: 34px;
+  }
+
+  .underlined:hover,
+  :global(.infonomic-autocomplete-input-underlined):hover {
+    border-bottom: 1px solid var(--input-variant-underlined-hover-border);
+  }
+
+  .underlined:focus,
+  .underlined:active,
+  :global(.infonomic-autocomplete-input-underlined):focus,
+  :global(.infonomic-autocomplete-input-underlined):active {
+    outline: none;
+  }
+
+  .filled,
+  :global(.infonomic-autocomplete-input-filled) {
+    background-color: var(--input-variant-filled);
+  }
+
+  /* ── Error ── */
+
+  .error,
+  :global(.infonomic-autocomplete-input-error) {
+    border: 1px solid var(--red-400);
+  }
+
+  .error:hover,
+  :global(.infonomic-autocomplete-input-error):hover {
+    border: 1px solid var(--red-400);
+  }
+
+  .error:focus,
+  .error:active,
+  :global(.infonomic-autocomplete-input-error):focus,
+  :global(.infonomic-autocomplete-input-error):active {
+    --ring-color: var(--red-300);
+  }
+
+  /* ── Intents ── */
+
+  .primary,
+  :global(.infonomic-autocomplete-input-primary) {
+    --input-variant-outlined-border: var(--stroke-primary);
+    --input-variant-outlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-outline-ring-color: var(--ring-primary);
+    --input-variant-underlined-border: var(--stroke-primary);
+    --input-variant-underlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-filled: var(--fill-primary-weak);
+  }
+
+  .secondary,
+  :global(.infonomic-autocomplete-input-secondary) {
+    --input-variant-outlined-border: var(--stroke-secondary);
+    --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-outline-ring-color: var(--ring-secondary);
+    --input-variant-underlined-border: var(--stroke-secondary);
+    --input-variant-underlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-filled: var(--fill-secondary-weak);
+  }
+
+  .noeffect,
+  :global(.infonomic-autocomplete-input-noeffect) {
+    --input-variant-outlined-border: var(--stroke-noeffect);
+    --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-outline-ring-color: var(--ring-noeffect);
+    --input-variant-underlined-border: var(--stroke-noeffect);
+    --input-variant-underlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-filled: var(--fill-noeffect-weak);
+  }
+
+  .success,
+  :global(.infonomic-autocomplete-input-success) {
+    --input-variant-outlined-border: var(--stroke-success);
+    --input-variant-outlined-hover-border: var(--stroke-success-hover);
+    --input-variant-outline-ring-color: var(--ring-success);
+    --input-variant-underlined-border: var(--stroke-success);
+    --input-variant-underlined-hover-border: var(--stroke-success-hover);
+    --input-variant-filled: var(--fill-success-weak);
+  }
+
+  .info,
+  :global(.infonomic-autocomplete-input-info) {
+    --input-variant-outlined-border: var(--stroke-info);
+    --input-variant-outlined-hover-border: var(--stroke-info-hover);
+    --input-variant-outline-ring-color: var(--ring-info);
+    --input-variant-underlined-border: var(--stroke-info);
+    --input-variant-underlined-hover-border: var(--stroke-info-hover);
+    --input-variant-filled: var(--fill-info-weak);
+  }
+
+  .warning,
+  :global(.infonomic-autocomplete-input-warning) {
+    --input-variant-outlined-border: var(--stroke-warning);
+    --input-variant-outlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-outline-ring-color: var(--ring-warning);
+    --input-variant-underlined-border: var(--stroke-warning);
+    --input-variant-underlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-filled: var(--fill-warning-weak);
+  }
+
+  .danger,
+  :global(.infonomic-autocomplete-input-danger) {
+    --input-variant-outlined-border: var(--stroke-danger);
+    --input-variant-outlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-outline-ring-color: var(--ring-danger);
+    --input-variant-underlined-border: var(--stroke-danger);
+    --input-variant-underlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-filled: var(--fill-danger-weak);
+  }
+
+  /* ── Positioner ── */
+
+  .positioner,
+  :global(.infonomic-autocomplete-positioner) {
+    z-index: 50;
+    outline: 0;
+  }
+
+  /* ── Popup ── */
+
+  .popup,
+  :global(.infonomic-autocomplete-popup) {
+    z-index: 50;
+    margin-top: 2px;
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 6px;
+    width: var(--anchor-width);
+    max-height: min(23rem, var(--available-height));
+    max-width: var(--available-width);
+  }
+
+  .popup-sm {
+    padding: 4px;
+  }
+
+  .popup-md {
+    padding: 6px;
+  }
+
+  .popup-lg {
+    padding: 8px;
+  }
+
+  /* ── List ── */
+
+  .list,
+  :global(.infonomic-autocomplete-list) {
+    box-sizing: border-box;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-block: 0.25rem;
+    scroll-padding-block: 0.25rem;
+    outline: 0;
+    max-height: min(23rem, var(--available-height));
+  }
+
+  .list[data-empty],
+  :global(.infonomic-autocomplete-list)[data-empty] {
+    padding: 0;
+  }
+
+  /* ── Item ── */
+
+  .autocomplete-item,
+  :global(.infonomic-autocomplete-item) {
+    position: relative;
+    user-select: none;
+    cursor: default;
+    outline: 0;
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    font-size: 1rem;
+    line-height: 1;
+    padding-block: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+  }
+
+  .autocomplete-item[data-disabled],
+  :global(.infonomic-autocomplete-item[data-disabled]) {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
+  .autocomplete-item[data-highlighted],
+  :global(.infonomic-autocomplete-item[data-highlighted]) {
+    outline: none;
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  /* ── Size-scoped items ── */
+
+  .popup-sm .autocomplete-item {
+    font-size: 0.75rem;
+    padding-block: 0.375rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    border-radius: 4px;
+  }
+
+  .popup-md .autocomplete-item {
+    font-size: 0.875rem;
+  }
+
+  .popup-lg .autocomplete-item {
+    font-size: 1.125rem;
+    padding-block: 0.625rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: 8px;
+  }
+
+  /* ── Group label ── */
+
+  .group-label,
+  :global(.infonomic-autocomplete-group-label) {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* ── Separator ── */
+
+  .separator,
+  :global(.infonomic-autocomplete-separator) {
+    margin: 0.375rem 0.75rem;
+    height: 1px;
+    background-color: var(--surface-panel-border);
+  }
+
+  /* ── Empty ── */
+
+  .empty:not(:empty),
+  :global(.infonomic-autocomplete-empty):not(:empty) {
+    box-sizing: border-box;
+    padding: 1rem;
+    font-size: 0.925rem;
+    line-height: 1;
+    color: var(--muted);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+}

package/dist/components/inputs/autocomplete.module.js

@@ -0,0 +1,36 @@
+import "./autocomplete_module.css";
+const autocomplete_module = {
+    "autocomplete-wrapper": "autocomplete-wrapper-JirsmI",
+    autocompleteWrapper: "autocomplete-wrapper-JirsmI",
+    input: "input-nIzHob",
+    sm: "sm-m41uwR",
+    md: "md-pauitB",
+    lg: "lg-XirY1c",
+    outlined: "outlined-Sg0shm",
+    underlined: "underlined-TOTDkZ",
+    filled: "filled-LBQC5g",
+    error: "error-Wyckbu",
+    primary: "primary-j2veZ2",
+    secondary: "secondary-zC8OiE",
+    noeffect: "noeffect-sFS4eb",
+    success: "success-rkhMDk",
+    info: "info-Fnv8u5",
+    warning: "warning-MCe1Jq",
+    danger: "danger-uyUS1z",
+    positioner: "positioner-LkIIwT",
+    popup: "popup-MGvAiW",
+    "popup-sm": "popup-sm-Fk47F5",
+    popupSm: "popup-sm-Fk47F5",
+    "popup-md": "popup-md-zIhzgb",
+    popupMd: "popup-md-zIhzgb",
+    "popup-lg": "popup-lg-hTq8_O",
+    popupLg: "popup-lg-hTq8_O",
+    list: "list-U6_3IW",
+    "autocomplete-item": "autocomplete-item-GHvdpB",
+    autocompleteItem: "autocomplete-item-GHvdpB",
+    "group-label": "group-label-yz4GS8",
+    groupLabel: "group-label-yz4GS8",
+    separator: "separator-sgreyb",
+    empty: "empty-xvhK78"
+};
+export default autocomplete_module;