myoperator-mcp 0.2.125 → 0.2.127

package/dist/index.js

@@ -530,12 +530,14 @@ Alert.displayName = "Alert";
 /**
  * Alert title component for the heading text.
  */
-const AlertTitle = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>, ref: React.Ref<HTMLHeadingElement>) => (
+const AlertTitle = React.forwardRef(({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>, ref: React.Ref<HTMLHeadingElement>) => (
   <h5
     ref={ref}
     className={cn("font-semibold leading-tight tracking-tight", className)}
     {...props}
-  />
+  >
+    {children}
+  </h5>
 ));
 AlertTitle.displayName = "AlertTitle";
 
@@ -1440,6 +1442,7 @@ const CreatableMultiSelect = React.forwardRef(
     const [inputValue, setInputValue] = React.useState("")
     const containerRef = React.useRef<HTMLDivElement>(null)
     const inputRef = React.useRef<HTMLInputElement>(null)
+    const listboxId = React.useId()
 
     React.useImperativeHandle(ref, () => containerRef.current!)
 
@@ -1577,6 +1580,7 @@ const CreatableMultiSelect = React.forwardRef(
             className="flex-1 min-w-[100px] text-base bg-transparent outline-none text-semantic-text-primary placeholder:text-semantic-text-muted"
             role="combobox"
             aria-expanded={isOpen}
+            aria-controls={listboxId}
             aria-haspopup="listbox"
           />
 
@@ -1590,7 +1594,7 @@ const CreatableMultiSelect = React.forwardRef(
 
         {/* Dropdown panel */}
         {isOpen && (
-          <div className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
+          <div id={listboxId} role="listbox" className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
             {/* Creatable hint \u2014 Enter key */}
             <div className="flex items-center justify-between px-4 py-2 border-b border-semantic-border-layout">
               <span className="text-sm text-semantic-text-muted">
@@ -1730,6 +1734,7 @@ const CreatableSelect = React.forwardRef(
     const containerRef = React.useRef<HTMLDivElement>(null)
     const inputRef = React.useRef<HTMLInputElement>(null)
     const listRef = React.useRef<HTMLDivElement>(null)
+    const listboxId = React.useId()
 
     // Merge forwarded ref with internal ref
     React.useImperativeHandle(ref, () => containerRef.current!)
@@ -1872,6 +1877,7 @@ const CreatableSelect = React.forwardRef(
               placeholder={selectedLabel || placeholder}
               aria-expanded="true"
               aria-haspopup="listbox"
+              aria-controls={listboxId}
               role="combobox"
               aria-autocomplete="list"
             />
@@ -1888,6 +1894,7 @@ const CreatableSelect = React.forwardRef(
             )}
             aria-haspopup="listbox"
             aria-expanded="false"
+            aria-controls={listboxId}
           >
             <span
               className={cn(
@@ -1917,6 +1924,7 @@ const CreatableSelect = React.forwardRef(
             {/* Options list */}
             <div
               ref={listRef}
+              id={listboxId}
               role="listbox"
               className="max-h-60 overflow-y-auto p-1"
             >
@@ -3054,6 +3062,7 @@ const MultiSelect = React.forwardRef(
     // Generate unique IDs for accessibility
     const generatedId = React.useId();
     const selectId = id || generatedId;
+    const listboxId = \`\${selectId}-listbox\`;
     const helperId = \`\${selectId}-helper\`;
     const errorId = \`\${selectId}-error\`;
 
@@ -3167,6 +3176,7 @@ const MultiSelect = React.forwardRef(
           role="combobox"
           aria-expanded={isOpen}
           aria-haspopup="listbox"
+          aria-controls={listboxId}
           aria-invalid={!!error}
           aria-describedby={ariaDescribedBy}
           disabled={disabled || loading}
@@ -3246,6 +3256,7 @@ const MultiSelect = React.forwardRef(
         {/* Dropdown */}
         {isOpen && (
           <div
+            id={listboxId}
             className={cn(
               "absolute z-50 mt-1 w-full rounded bg-semantic-bg-primary border border-semantic-border-layout shadow-md",
               "top-full"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.125",
+  "version": "0.2.127",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",