@epam/ai-dial-ui-kit 0.15.0-dev.51 → 0.15.0-dev.52

package/dist/CHANGELOG.md

@@ -21,6 +21,10 @@ Versions match the git tags on the `development` branch.
 
 - **`InteractiveTooltip` (2.0) — `trigger`, to open the panel by click or tap** — the panel opens on hover or focus and renders nothing on a mobile screen, so a trigger whose only job is to reveal it, such as an info chip, showed nothing on a phone ([ai-dial-chat#9250](https://github.com/epam/ai-dial-chat/issues/9250)). `trigger={InteractiveTooltipTrigger.Click}` opens the panel on a click or tap and keeps it open until a second click on the trigger, a press outside or Escape. It works on every screen size and ignores hover and focus; with a controlled `open` it still reports through `onOpenChange`. The default, `InteractiveTooltipTrigger.Hover`, changes nothing, so the `InteractiveTooltip`s inside `Select` and `Dropdown` and every host that does not pass it are unchanged. Do not use `Click` on a trigger that has its own action, since the same tap would run both. Additive.
 
+- **`AutocompleteTagInput` (2.0) — `openOnFocus`** — focusing or clicking the input opens the list of every suggestion that is not yet a tag, uncapped by `maxSuggestions`, so a short list can be browsed without typing. Nothing is highlighted in that list, so Enter adds nothing the user did not choose; ArrowDown lands on the first suggestion and ArrowUp on the last. The list stays open after a pick, and typing filters and caps it as before. Opt-in; without it nothing changes. Additive.
+
+- **`Slider` (2.0) — `showValueInput`, `valueInputAriaLabel`** — a compact, 24px `NumberInput` after the track, so the slider stays as tall as its track row, synced with the slider: typing reports the value snapped to `step` (the field already refuses values outside `min`/`max`), the text being typed is kept until the field loses focus, and it is disabled with the slider. Named by `valueInputAriaLabel`, or by a string `labelProps.label`. Takes the place of `rightContent`, which a caller no longer needs to wire by hand for this case. Additive.
+
 - **`Slider` (2.0) — `showTooltip`, `showTicks`, `leftContent`, `rightContent`** — the rest of the new slider design. `showTooltip` shows the formatted value in a bubble above the thumb; `showTicks` marks every step on the unfilled track for a discrete slider. Both are hidden while disabled. The bubble is `aria-hidden`, because the input already announces the value through `aria-valuetext`. `leftContent` and `rightContent` are the slider container's side slots, centred on the track: an icon on the left, a `NumberInput` or the value as text on the right. The kit does not sync a `NumberInput` placed there; the caller passes it the same `value` and setter. All four are opt-in.
 
 - **`SchemaRenderer` (2.0)** — a JSON Schema form built only from 2.0 controls. `DialSchemaRenderer` exists only in 1.0, so a 2.0 screen that renders a schema-driven form had to mix in 1.0 inputs, selects and the 1.0 `Dropdown` surface. The 2.0 renderer keeps the 1.0 props, except `jsonEditorTheme`: the three variants, `oneOf`/`anyOf` with select or radio selectors, arrays with discriminator types, key-value maps, `dial:resource` options, `skipUntouched`, `renderField` and `texts`. Primitives render as `Input`, `NumberInput`, `PasswordInput`, `Select`, `Switch` or `RadioGroup`. Values the schema does not describe are edited as JSON in a monospace `Textarea`, not in Monaco, so the form loads no editor bundle. Section headers are real toggle buttons with `aria-expanded`, and the remove and info buttons sit next to the toggle instead of inside it. Every control has an accessible name, including array items and key-value rows. `renderField` replaces only the control, so the field keeps its label and error. Stamps `DIAL_KIT_CLASS.schemaRenderer` (`dial-kit-schema-renderer`) on the root and `DIAL_KIT_CLASS.schemaRendererSection` (`dial-kit-schema-renderer-section`) on each section card. The schema types, enums and utils are shared with 1.0 from neutral modules; the 1.0 import paths still work. Additive.
@@ -69,6 +73,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`Slider` (2.0) — ticks** — ticks are drawn in the `Controls/Stroke/Accent-focus` token (`--stroke-accent-focus`, was the neutral control grey), and there is one per step after `min`: a 0–1 slider at 0.1 now draws exactly 10. The tick at `min` was always under the thumb or the fill, so nothing visible is lost. Visual only; no props change.
+
 - **`StarterButton` (2.0) — a sparkles icon by default** — the design puts a sparkles glyph before every starter label, so each host was passing the same `iconBefore`. `iconBefore` now defaults to a 20px `IconSparkles` at the 1.5 stroke, `aria-hidden`, and stroked with the starter gradient like any other icon. A caller-supplied `iconBefore` replaces it; `iconBefore={null}` keeps a label-only pill. A `StarterButton` that passed no `iconBefore` now draws the icon; no other API changes.
 
 - **`Select` (2.0) — multi-select tags are 24px, and the field wraps them with an 8px gap** — the tags in a multi-select field used the 32px pill of `Tag`, taller than the design's field chip. They are now 24px with a `rounded-md` shape, a `layer-sunken` fill and a `stroke-secondary` rim, and the wrapped field pads 8px vertically with 8px between tags, so one row of tags still fills the 40px field. `Tag` itself is unchanged. Visual only; no API changes.

package/dist/JsonEditor-eAV7SaKu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-BH6_A1k2.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-BKtFs714.cjs → MarkdownEditor-Cp-KX6-T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-_W6FYhKg.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-DMVYJhUR.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-Bapd1ycU.cjs → MarkdownEditor-Dav_pp0T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-_W6FYhKg.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-DMVYJhUR.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;

package/dist/MarkdownEditorContainer-96cKYmYd.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-BH6_A1k2.cjs");const N=require("./lazy-DMVYJhUR.cjs");require("@monaco-editor/react");const m=require("./Switch-DE6MrcqJ.cjs"),b=require("./MarkdownEditor-Dav_pp0T.cjs"),g=({value:o,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=N.EditorThemes.dark,onValidateJSON:x,preview:j="edit",showDragbar:w=!0})=>{const C=n.useId(),[t,p]=n.useState(!1),[f,S]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-eAV7SaKu.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),r=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||r)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,r&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:C,onChange:s=>p(s)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,27 +1,29 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as J, useState as u, useEffect as S, useCallback as x } from "react";
-import { DialSwitch as b } from "../Switch/Switch.js";
-import { EditorThemes as v } from "../../types/editor.js";
+import "../../constants/editor.js";
+import { EditorThemes as b } from "../../types/editor.js";
+import "@monaco-editor/react";
+import { DialSwitch as v } from "../Switch/Switch.js";
 import { DialMarkdownEditor as y } from "./MarkdownEditor.js";
 import { DialLabel as j } from "../Label/Label.js";
-const B = ({
+const q = ({
   value: s,
   onChangeValue: l,
-  label: t,
+  label: i,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = v.dark,
+  theme: m = b.dark,
   onValidateJSON: f,
   preview: C = "edit",
   showDragbar: N = !0
 }) => {
-  const w = J(), [n, D] = u(!1), [p, E] = u(null);
+  const w = J(), [t, D] = u(!1), [p, E] = u(null);
   S(() => {
-    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    t && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       E(() => o.DialJsonEditor);
     });
-  }, [n]);
+  }, [t]);
   const h = x(
     (o) => {
       l?.(o);
@@ -32,16 +34,16 @@ const B = ({
       f?.(o);
     },
     [f]
-  ), i = !!a;
+  ), n = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (t || d || i) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      t && /* @__PURE__ */ e(j, { label: t }),
+    (i || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      i && /* @__PURE__ */ e(j, { label: i }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        i && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          b,
+        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          v,
           {
-            isOn: n,
+            isOn: t,
             label: a,
             switchId: w,
             onChange: (o) => D(o)
@@ -49,7 +51,7 @@ const B = ({
         ) })
       ] })
     ] }),
-    i && n ? /* @__PURE__ */ e(
+    n && t ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -78,5 +80,5 @@ const B = ({
   ] }) }) });
 };
 export {
-  B as DialMarkdownEditorContainer
+  q as DialMarkdownEditorContainer
 };

package/dist/components/New/AutocompleteTagInput/AutocompleteTagInput.js

@@ -1,159 +1,166 @@
-import { jsxs as le, Fragment as se, jsx as l } from "react/jsx-runtime";
-import { useFloating as ne, autoUpdate as ie, offset as ce, flip as me, size as pe, FloatingPortal as de } from "@floating-ui/react";
-import { useId as fe, useState as f, useMemo as ue, useCallback as he } from "react";
-import { Input as ge } from "../Input/Input.js";
-import { MenuItem as we } from "../MenuItem/MenuItem.js";
-import { selectTagClassName as ve } from "../Select/MultiSelectTags.js";
-import { Tag as Ie } from "../Tag/Tag.js";
-import { useThemeScope as xe } from "../ThemeScope/ThemeScope.js";
-import { overlayGap as T, overlayListClassName as Te, overlaySurfaceClassName as Se } from "../constants/overlay.js";
-import { DIAL_KIT_CLASS as be } from "../../../constants/public-class-names.js";
-import { MenuItemMark as ye } from "../../../types/menu-item.js";
-import { ElementSize as U } from "../../../types/size.js";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { filterAutocompleteSuggestions as De } from "./utils.js";
-const Ce = 5, Re = ({
-  id: z,
-  value: S,
-  defaultValue: _,
-  suggestions: b,
-  maxSuggestions: y = Ce,
-  size: D = U.Standard,
-  labelProps: $,
-  placeholder: B,
-  caption: G,
-  error: K,
-  invalid: C = !1,
-  disabled: u = !1,
-  readOnly: h = !1,
-  ariaLabel: R,
-  tagListLabel: M = "Tags",
-  getRemoveTagLabel: j,
-  className: H,
-  fieldClassName: O,
-  tagClassName: V,
-  listClassName: P,
-  onChange: A
+import { jsxs as ce, Fragment as me, jsx as c } from "react/jsx-runtime";
+import { useFloating as pe, autoUpdate as fe, offset as de, flip as ue, size as he, FloatingPortal as ge } from "@floating-ui/react";
+import { useId as we, useState as h, useMemo as ve, useCallback as xe } from "react";
+import { Input as Ie } from "../Input/Input.js";
+import { MenuItem as Te } from "../MenuItem/MenuItem.js";
+import { selectTagClassName as Se } from "../Select/MultiSelectTags.js";
+import { Tag as be } from "../Tag/Tag.js";
+import { useThemeScope as ye } from "../ThemeScope/ThemeScope.js";
+import { overlayGap as y, overlayListClassName as Ce, overlaySurfaceClassName as De } from "../constants/overlay.js";
+import { DIAL_KIT_CLASS as Me } from "../../../constants/public-class-names.js";
+import { MenuItemMark as Ae } from "../../../types/menu-item.js";
+import { ElementSize as F } from "../../../types/size.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { filterAutocompleteSuggestions as Ne } from "./utils.js";
+const ke = 5, Pe = ({
+  id: G,
+  value: C,
+  defaultValue: K,
+  suggestions: g,
+  maxSuggestions: D = ke,
+  openOnFocus: m = !1,
+  size: M = F.Standard,
+  labelProps: R,
+  placeholder: j,
+  caption: H,
+  error: V,
+  invalid: A = !1,
+  disabled: w = !1,
+  readOnly: v = !1,
+  ariaLabel: P,
+  tagListLabel: N = "Tags",
+  getRemoveTagLabel: X,
+  className: q,
+  fieldClassName: J,
+  tagClassName: Q,
+  listClassName: W,
+  onChange: k
 }) => {
-  const X = fe(), N = z || X, g = `${N}-listbox`, q = xe(), J = D === U.Small, w = S !== void 0, [Q, W] = f(
-    _ ?? []
-  ), a = w ? S : Q, c = a.length > 0, m = !h && !u, [s, E] = f(""), [Y, v] = f(!1), [Z, p] = f(0), r = ue(
-    () => De(
-      b,
+  const Y = we(), E = G || Y, x = `${E}-listbox`, Z = ye(), O = M === F.Small, I = C !== void 0, [ee, te] = h(
+    K ?? []
+  ), a = I ? C : ee, d = a.length > 0, p = !v && !w, [s, L] = h(""), [oe, u] = h(!1), [ae, l] = h(0), T = !s.trim(), n = ve(
+    () => Ne(
+      g,
       s,
       a,
-      y
+      // The list opened on focus is meant to show every choice.
+      m && T ? g.length : D
     ),
-    [s, y, b, a]
-  ), o = Y && m && r.length > 0, d = Math.min(Z, r.length - 1), k = (e) => `${g}-option-${e}`, { refs: F, floatingStyles: ee } = ne({
-    open: o,
+    [s, T, D, m, g, a]
+  ), r = oe && p && n.length > 0, i = Math.min(ae, n.length - 1), U = r && i >= 0, z = (e) => `${x}-option-${e}`, { refs: B, floatingStyles: re } = pe({
+    open: r,
     placement: "bottom-start",
-    whileElementsMounted: ie,
+    whileElementsMounted: fe,
     middleware: [
-      ce(T),
-      me({ padding: T }),
-      pe({
-        padding: T,
-        apply({ rects: e, availableHeight: t, elements: n }) {
-          n.floating.style.width = `${Math.round(e.reference.width)}px`, n.floating.style.maxHeight = `${Math.floor(t)}px`;
+      de(y),
+      ue({ padding: y }),
+      he({
+        padding: y,
+        apply({ rects: e, availableHeight: t, elements: o }) {
+          o.floating.style.width = `${Math.round(e.reference.width)}px`, o.floating.style.maxHeight = `${Math.floor(t)}px`;
         }
       })
     ]
-  }), I = he(
+  }), S = xe(
     (e) => {
-      w || W(e), A?.(e);
+      I || te(e), k?.(e);
     },
-    [w, A]
-  ), x = () => {
-    v(!1), p(0);
-  }, L = (e) => {
+    [I, k]
+  ), b = () => {
+    u(!1), l(0);
+  }, _ = () => {
+    !m || !p || (u(!0), l(T ? -1 : 0));
+  }, $ = (e) => {
     const t = e.trim();
-    t && !a.includes(t) && I([...a, t]), E(""), x();
-  }, te = (e) => I(a.filter((t) => t !== e)), oe = (e) => {
-    const t = e ?? "";
-    E(t), v(!!t.trim()), p(0);
-  }, ae = (e) => {
-    if (m)
+    t && !a.includes(t) && S([...a, t]), L(""), m ? l(-1) : b();
+  }, le = (e) => S(a.filter((t) => t !== e)), se = (e) => {
+    const t = e ?? "", o = !!t.trim();
+    L(t), u(o || m), l(o ? 0 : -1);
+  }, ne = (e) => {
+    if (p)
       switch (e.key) {
         case "ArrowDown":
         case "ArrowUp": {
-          if (e.preventDefault(), v(!0), !o) return;
-          const t = e.key === "ArrowDown" ? 1 : -1;
-          p(
-            (d + t + r.length) % r.length
-          );
+          if (e.preventDefault(), !r) {
+            u(!0), l(0);
+            return;
+          }
+          const t = e.key === "ArrowDown" ? 1 : -1, o = i < 0 ? Math.min(-t, 0) : i;
+          l((o + t + n.length) % n.length);
           return;
         }
         case "Enter":
         case ",":
-          e.preventDefault(), L(o ? r[d].value : s);
+          e.preventDefault(), $(U ? n[i].value : s);
           return;
         case "Escape":
-          o && e.preventDefault(), x();
+          r && e.preventDefault(), b();
           return;
         case "Backspace":
-          !s && c && (e.preventDefault(), I(a.slice(0, -1)));
+          !s && d && (e.preventDefault(), S(a.slice(0, -1)));
           return;
       }
-  }, re = (e) => e.preventDefault();
-  return /* @__PURE__ */ le(se, { children: [
-    /* @__PURE__ */ l(
-      ge,
+  }, ie = (e) => e.preventDefault();
+  return /* @__PURE__ */ ce(me, { children: [
+    /* @__PURE__ */ c(
+      Ie,
       {
-        id: N,
+        id: E,
         role: "combobox",
         "aria-autocomplete": "list",
-        "aria-expanded": o,
-        "aria-controls": g,
-        "aria-activedescendant": o ? k(d) : void 0,
-        "aria-invalid": C || void 0,
-        "aria-label": R,
-        size: D,
-        labelProps: $,
-        caption: G,
-        error: K,
-        invalid: C,
-        disabled: u,
-        readOnly: h,
+        "aria-expanded": r,
+        "aria-controls": x,
+        "aria-activedescendant": U ? z(i) : void 0,
+        "aria-invalid": A || void 0,
+        "aria-label": P,
+        size: M,
+        labelProps: R,
+        caption: H,
+        error: V,
+        invalid: A,
+        disabled: w,
+        readOnly: v,
         value: s,
-        placeholder: c ? void 0 : B,
-        wrapperRef: F.setReference,
-        onChange: oe,
-        onKeyDown: ae,
-        onBlur: x,
-        containerClassName: i("w-full", H),
-        wrapperClassName: i(
-          c && [
+        placeholder: d ? void 0 : j,
+        wrapperRef: B.setReference,
+        onChange: se,
+        onKeyDown: ne,
+        onFocus: _,
+        onClick: _,
+        onBlur: b,
+        containerClassName: f("w-full", q),
+        wrapperClassName: f(
+          d && [
             "!h-auto flex-wrap gap-1 py-2",
-            J ? "min-h-[24px]" : "min-h-[40px]"
+            O ? "min-h-[24px]" : "min-h-[40px]"
           ],
-          O,
-          be.autocompleteTagInput
+          J,
+          Me.autocompleteTagInput
         ),
-        className: i(
+        className: f(
           "w-auto min-w-[100px] flex-1",
-          h && "cursor-default"
+          v && "cursor-default"
         ),
-        children: c && /* @__PURE__ */ l(
+        children: d && /* @__PURE__ */ c(
           "span",
           {
             role: "list",
-            "aria-label": M,
+            "aria-label": N,
             className: "flex min-w-0 flex-wrap items-center gap-1",
-            children: a.map((e) => /* @__PURE__ */ l(
-              Ie,
+            children: a.map((e) => /* @__PURE__ */ c(
+              be,
               {
                 role: "listitem",
                 label: e,
-                className: i(
-                  ve,
+                className: f(
+                  Se,
                   "min-w-0",
-                  V
+                  Q
                 ),
-                disabled: u,
-                closable: m,
-                removeLabel: j?.(e),
-                onRemove: m ? () => te(e) : void 0
+                disabled: w,
+                closable: p,
+                removeLabel: X?.(e),
+                onRemove: p ? () => le(e) : void 0
               },
               e
             ))
@@ -161,39 +168,39 @@ const Ce = 5, Re = ({
         )
       }
     ),
-    /* @__PURE__ */ l(de, { children: /* @__PURE__ */ l(
+    /* @__PURE__ */ c(ge, { children: /* @__PURE__ */ c(
       "div",
       {
-        ref: F.setFloating,
-        id: g,
+        ref: B.setFloating,
+        id: x,
         role: "listbox",
-        "aria-label": M,
-        hidden: !o,
-        style: ee,
-        className: i(
+        "aria-label": N,
+        hidden: !r,
+        style: re,
+        className: f(
           "z-floating overflow-y-auto",
-          Se,
-          Te,
-          !o && "hidden",
-          q,
-          P
+          De,
+          Ce,
+          !r && "hidden",
+          Z,
+          W
         ),
-        children: o && r.map((e, t) => {
-          const n = t === d;
-          return /* @__PURE__ */ l(
-            we,
+        children: r && n.map((e, t) => {
+          const o = t === i;
+          return /* @__PURE__ */ c(
+            Te,
             {
-              id: k(t),
+              id: z(t),
               role: "option",
-              "aria-selected": n,
+              "aria-selected": o,
               tabIndex: -1,
               label: e.label,
               description: e.description,
-              mark: ye.Tint,
-              selected: n,
-              onMouseDown: re,
-              onMouseEnter: () => p(t),
-              onClick: () => L(e.value)
+              mark: Ae.Tint,
+              selected: o,
+              onMouseDown: ie,
+              onMouseEnter: () => l(t),
+              onClick: () => $(e.value)
             },
             e.value
           );
@@ -203,5 +210,5 @@ const Ce = 5, Re = ({
   ] });
 };
 export {
-  Re as AutocompleteTagInput
+  Pe as AutocompleteTagInput
 };